:root {
  --nytte-forest: #17402a;
  --nytte-leaf: #2e6b41;
  --nytte-action: #c63d2f;
  --nytte-cream: #f6f4ec;
  --nytte-white: #fff;
  --nytte-ink: #22301f;
  --nytte-muted: #5f6e57;
  --nytte-pale: #e4eddf;
  --nytte-border: #e0ddce;
  --nytte-content: 1248px;
}

.nytte-container {
  box-sizing: border-box;
  margin-inline: auto;
  max-width: var(--nytte-content);
  padding-inline: 24px;
  width: 100%;
}

.nytte-topbar {
  background: var(--nytte-action);
  color: #fff7f0;
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  padding: 0.625rem 1.5rem;
  text-align: center;
}

.nytte-topbar p {
  margin: 0;
}

.nytte-topbar__mobile {
  display: none;
}

.nytte-topbar code {
  background: rgb(255 255 255 / 18%);
  border-radius: 4px;
  color: inherit;
  font-size: 0.78rem;
  padding: 0.15rem 0.5rem;
}

/* Skrumpende sticky header (CH-103, ejerens valg 2026-08-17).

   Sticky skal sidde på template-part-WRAPPEREN, ikke på .nytte-site-header
   selv: et sticky element kan kun klæbe inden for sin egen forælder, og
   forælderen er kun headerblokken høj — første forsøg rullede derfor væk
   efter ~40 px (målt top: -856 ved scrollY 900).

   Wrapperen indeholder også kampagnebjælken, som med vilje SKAL rulle væk.
   Den løses med en negativ offset på præcis bjælkens højde: bjælken glider
   ud over skærmkanten, og headeren lander på 0. Højden sættes af site.js i
   `--nytte-topbar-h` og måles om ved resize; fallbacken herunder gælder,
   hvis JS ikke kører.

   `:has()` afgrænser reglen til denne header, så kurvens og kassens egen
   sticky masthead (som har sin egen `top: 0`) ikke får to lag.

   Admin-bjælken hentes fra `--nytte-admin-bar` (site.css), som allerede er
   0/32/46 px og selv skifter ved WordPress' eget 782 px-brydepunkt. Det var
   tidligere tre regler: en basisregel plus to `.admin-bar`-overstyringer.
   Den opdeling var selve fejlen i CH-148 — enhver senere regel, der satte
   `top`, glemte admin-bjælken og lod headeren lægge sig ind under den. Med
   offsettet i selve basisreglen kan det ikke ske igen. */
header.wp-block-template-part:has(> .nytte-site-header) {
  position: sticky;
  top: calc(var(--nytte-admin-bar, 0px) - var(--nytte-topbar-h, 2.6rem));
  z-index: 70;
}

.nytte-site-header {
  background: rgb(246 244 236 / 94%);
  border-bottom: 1px solid var(--nytte-border);
  position: relative;
  z-index: 70;
}

/* Mobilmenuens og mega-menuens paneler er absolut positionerede, så et
   blur-lag her skaber ikke uventede containing blocks for dem. */
@supports (backdrop-filter: blur(8px)) {
  .nytte-site-header {
    backdrop-filter: blur(8px);
  }
}

.nytte-header-inner {
  align-items: center;
  display: flex;
  gap: 2rem;
  min-height: 5rem;
  transition: min-height var(--nytte-transition);
}

/* Sammenklappet tilstand: klassen sættes af site.js efter ~120 px scroll.
   Højden falder fra 80 til 56 px, logoet skrumper, og søgefeltets label
   samt kontolinket viger — ikonet og kurven bliver tilbage. */
.nytte-header-condensed .nytte-header-inner {
  min-height: 3.5rem;
}

.nytte-header-condensed .nytte-site-header {
  box-shadow: 0 8px 24px rgb(23 64 42 / 8%);
}

/* Kampagnebjælken er rullet ud af syne i sammenklappet tilstand og skal
   ikke kunne fanges af musen dér. */
.nytte-header-condensed .nytte-topbar {
  pointer-events: none;
}

/* Er kampagnebjælken skjult, skal headeren ikke trækkes op efter en bjælke,
   der ikke fylder noget. Reglen gør det rigtigt allerede før JavaScript når
   at måle, så headeren ikke kan nå at stå forkert et øjeblik — og den holder,
   selv hvis scriptet aldrig kører.

   CH-148: reglen sagde `top: 0` og glemte dermed admin-bjælken. Med
   specificitet (0,3,2) mod basisreglens (0,3,1) — og placeret senere i filen
   — vandt den på hver eneste side uden kampagnebjælke, så headeren lagde sig
   ind under WordPress' sorte bjælke for indloggede. Nu nulstilles kun
   bjælkehøjden, mens admin-offsettet bevares. */
body.nytte-suppress-topbar header.wp-block-template-part:has(> .nytte-site-header) {
  top: var(--nytte-admin-bar, 0px);
}

.nytte-header-condensed .nytte-logo {
  font-size: 1.4rem;
}

/* Billedlogoet skrumper med headeren — samme forhold som tekstlogoet havde
   (28 → 22,4 px). */
.nytte-header-condensed .nytte-logo .nytte-logo__img {
  height: 1.75rem;
}

.nytte-header-condensed .nytte-search-trigger__label,
.nytte-header-condensed .nytte-account-link {
  display: none;
}

.nytte-header-condensed .nytte-search-trigger {
  padding-inline: 0.75rem;
}

.nytte-logo,
.nytte-search-trigger {
  transition:
    font-size var(--nytte-transition),
    padding var(--nytte-transition);
}

@media (prefers-reduced-motion: reduce) {
  .nytte-header-inner,
  .nytte-logo,
  .nytte-search-trigger {
    transition: none;
  }
}

/* Ankre må ikke havne under den låste header — fx FAQ'ens
   indholdsfortegnelse og de juridiske siders afsnitslinks. */
:where(h2, h3, section, article, aside, div)[id] {
  scroll-margin-top: 6.5rem;
}

/* Mega-panelet hænger under en nu låst header; på lave vinduer skal det
   kunne rulle i sig selv frem for at blive klippet af skærmkanten. */
.nytte-mega__panel {
  max-height: calc(100vh - 8rem);
  overflow-y: auto;
}

.nytte-header-main {
  align-items: center;
  display: flex;
  flex: 1;
  gap: 2rem;
  min-width: 0;
}

/* align-items: center (CH-110): baseline gav kun mening for tekstlogoet;
   nu er indholdet et billede. */
.nytte-logo {
  align-items: center;
  color: var(--nytte-forest);
  display: inline-flex;
  flex-shrink: 0;
  font-family: var(--wp--preset--font-family--display);
  font-size: 1.75rem;
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
}

.nytte-logo__dot {
  background: var(--nytte-action);
  border-radius: 50%;
  height: 0.5rem;
  margin-inline: 0.1rem;
  width: 0.5rem;
}

.nytte-logo__dk {
  color: var(--nytte-action);
}

/* Forældreklassen er nødvendig, ikke pynt: WooCommerces
   `woocommerce-layout.css` har `.woocommerce-page img { height: auto }`, som
   med sin klasse + elementtype slår en ren klasseselektor og indlæses efter
   temaets. Uden den blev logoet i kurv-/kasse-headeren strakt til
   kolonnebredden — målt 408×96 px i stedet for 118×28. */
.nytte-logo .nytte-logo__img {
  display: block;
  /* 36 px: ejeren bad om et lidt større logo (2026-08-18); var 28 px.
     Headerens min-height er 80 px, så der er rigelig luft. */
  height: 2.25rem;
  transition: height var(--nytte-transition);
  width: auto;
}

/* Footeren er mørkegrøn og bruger den lyse variant; mockuppens footerlogo
   er en smule mindre end headerens. */
.nytte-site-footer .nytte-logo .nytte-logo__img {
  height: 1.875rem;
}

@media (prefers-reduced-motion: reduce) {
  .nytte-logo__img {
    transition: none;
  }
}

.nytte-desktop-nav {
  align-items: center;
  display: flex;
  gap: 1.65rem;
}

.nytte-desktop-nav > a,
.nytte-mega > summary {
  color: var(--nytte-ink);
  cursor: pointer;
  font-size: 1rem;
  font-weight: 600;
  list-style: none;
  white-space: nowrap;
}

.nytte-desktop-nav > a {
  position: relative;
}

/* Det aktive punkt markeres med bladgrøn frem for skovgrøn. Mockuppen bruger
   #17402A, men den ligger så tæt på den almindelige blækfarve #22301F, at
   forskellen knap kan ses; bladgrøn skiller sig tydeligt ud og er samme
   interaktive grøn som resten af sitet. Målt 6,37:1 mod cremebaggrunden. */
.nytte-desktop-nav > a[aria-current="page"] {
  color: var(--nytte-leaf);
}

/* Stregen skal sidde tæt under teksten som i mockuppen. Den var forankret
   med bottom, altså til linkets 44 px høje klikflade, mens teksten kun fylder
   20 px og står centreret i den. Det gav 20 px luft ned til stregen.
   Forankringen går derfor ud fra midten plus en em, så afstanden følger
   skriftstørrelsen og ikke klikfladens højde. */
.nytte-desktop-nav > a[aria-current="page"]::after {
  background: var(--nytte-action);
  border-radius: 999px;
  bottom: auto;
  content: "";
  height: 2px;
  left: 0;
  position: absolute;
  right: 0;
  top: calc(50% + 0.85em);
}

.nytte-mega {
  position: relative;
}

.nytte-mega > summary::-webkit-details-marker {
  display: none;
}

.nytte-mega > summary::after {
  color: var(--nytte-muted);
  content: "⌄";
  font-size: 0.8rem;
  margin-left: 0.4rem;
}

.nytte-mega__panel {
  background: var(--nytte-white);
  border: 1px solid var(--nytte-border);
  border-radius: 20px;
  box-shadow: 0 28px 64px rgb(23 64 42 / 18%);
  display: none;
  gap: 0.7rem;
  grid-template-columns: repeat(2, minmax(220px, 1fr));
  left: -1.5rem;
  padding: 1.25rem;
  position: absolute;
  top: calc(100% + 1rem);
  width: min(620px, 70vw);
}

.nytte-mega[open] .nytte-mega__panel {
  display: grid;
}

.nytte-mega__panel a {
  background: var(--nytte-white);
  border: 1px solid var(--nytte-border);
  border-radius: 12px;
  color: var(--nytte-forest);
  font-size: 0.9rem;
  font-weight: 700;
  padding: 0.8rem 0.9rem;
}

.nytte-mega__panel a:hover {
  background: #f1f6ee;
  border-color: var(--nytte-leaf);
}

.nytte-header-tools {
  align-items: center;
  display: flex;
  gap: 0.8rem;
  margin-left: auto;
}

.nytte-header-search {
  display: block;
  position: relative;
}

.nytte-header-search input {
  background: var(--nytte-white);
  border: 1px solid #d5d2c0;
  border-radius: 999px;
  box-sizing: border-box;
  color: var(--nytte-ink);
  font: inherit;
  min-height: 2.75rem;
  padding: 0.65rem 1rem;
  width: clamp(210px, 20vw, 300px);
}

.nytte-account-link {
  color: var(--nytte-ink);
  font-size: 1rem;
  font-weight: 600;
  white-space: nowrap;
}

.nytte-header-inner > .wc-block-mini-cart {
  flex-shrink: 0;
  margin: 0;
}

.nytte-header-inner .wc-block-mini-cart__button {
  align-items: center;
  background: var(--nytte-forest);
  border: 0;
  border-radius: 999px;
  box-sizing: border-box;
  color: var(--nytte-white);
  display: inline-flex;
  font-family: var(--wp--preset--font-family--body);
  font-size: 0;
  font-weight: 700;
  /* 41 px er en dokumenteret designmåling for headerens kurvchip på desktop,
     hvor målet rammes med musemarkør. Mobilheaderen bruger 46 × 46 px, som
     ligger over 44 px-gulvet. Auditen håndhæver begge mål. */
  height: 2.5625rem;
  justify-content: center;
  min-height: 2.5625rem;
  min-width: 5.625rem;
  padding: 0 1.25rem;
  white-space: nowrap;
  width: 5.75rem;
}

.nytte-header-inner .wc-block-mini-cart__button > * {
  display: none;
}

.nytte-header-inner .wc-block-mini-cart__button::before {
  font-size: 0.9375rem;
}

/* Attributten saettes foerst, naar commerce.js har hentet kurven fra
   Store API — indtil da var attr() tom, saa chippen viste "Kurv · " og
   tallet poppede ind ~et halvt sekund senere (ejerens "blink",
   2026-08-29). 0 er standard fra foerste maling; attributreglen
   overtager, naar tallet kendes, saa en tom kurv slet ikke aendrer sig. */
.nytte-header-inner .wc-block-mini-cart__button::before {
  content: "Kurv · 0";
}

.nytte-header-inner .wc-block-mini-cart__button[data-nytte-cart-count]::before {
  content: "Kurv · " attr(data-nytte-cart-count);
}

.nytte-mobile-nav {
  display: none;
  margin-left: auto;
  position: relative;
}

.nytte-mobile-nav summary {
  align-items: center;
  background: var(--nytte-white);
  border: 1.5px solid #d5d2c0;
  border-radius: 14px;
  box-sizing: border-box;
  color: var(--nytte-forest);
  cursor: pointer;
  display: flex;
  font-weight: 700;
  height: 46px;
  justify-content: center;
  list-style: none;
  padding: 0;
  width: 46px;
}

.nytte-mobile-nav summary::-webkit-details-marker {
  display: none;
}

.nytte-mobile-nav__icon {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.nytte-mobile-nav__icon i {
  background: var(--nytte-forest);
  border-radius: 2px;
  display: block;
  height: 2px;
  width: 20px;
}

.nytte-mobile-nav__icon i:last-child {
  width: 13px;
}

.nytte-mobile-nav__panel {
  background: var(--nytte-white);
  border: 1px solid var(--nytte-border);
  border-radius: 16px;
  box-shadow: 0 20px 44px rgb(23 64 42 / 18%);
  display: grid;
  gap: 0.25rem;
  padding: 0.75rem;
  position: absolute;
  right: 0;
  top: calc(100% + 0.6rem);
  width: min(280px, calc(100vw - 2rem));
}

.nytte-mobile-nav__panel a {
  border-radius: 10px;
  color: var(--nytte-forest);
  font-weight: 700;
  padding: 0.75rem;
}

.nytte-mobile-nav__panel a:hover {
  background: var(--nytte-pale);
}

/* ── Køleheroen (CH-172) ─────────────────────────────────────────────────
   Ny øverste sektion (ejerens ønske 2026-08-29): budskabet »Vi sender
   levende nyttedyr på køl« skal være det første, en besøgende ser, efter
   at butikken har lagt sig fast på kølepakket levering. Samme rytme som
   den eksisterende hero — tekst venstre, kvadratisk billede højre — som
   ejeren er glad for på mobil. Den gamle hero består nedenunder; dens
   overskrift er rykket til h2, så siden kun har ét h1.
   Bleg grøn baggrund adskiller de to heroer og understøtter køl-temaet.
   Billedslotten holder Kaspers ægte Entonem+kølepose-foto, indtil det
   endelige mange-produkter-billede leveres (samme filnavn = ren
   udskiftning). */
.nytte-cool-hero {
  background: var(--nytte-pale);
  padding: 3.5rem 0 3rem;
}

.nytte-cool-hero__grid {
  align-items: center;
  display: grid;
  gap: clamp(2.5rem, 5vw, 3.5rem);
  grid-template-columns: 0.95fr 1.05fr;
}

/* Ejerens efterjustering: billedet i venstre kolonne, teksten i hoejre —
   spejlvendt i forhold til den gamle hero nedenunder, saa de to sektioner
   ikke ligner en gentagelse. Kun paa desktop; mobilen beholder tekst
   foerst (nulstilles i mobilblokken nedenfor). */
.nytte-cool-hero__visual {
  order: -1;
}

.nytte-cool-hero__content h1 {
  color: var(--nytte-forest);
  font-size: 3.25rem;
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.06;
  margin: 1.25rem 0 1.125rem;
  text-wrap: balance;
}

/* Kickeren staar paa bleg groen baggrund her, saa dens egen blege plade
   forsvinder — hvid plade i stedet. */
.nytte-cool-hero .nytte-kicker {
  background: var(--nytte-white);
}

.nytte-cool-hero__lead {
  color: #4a5844;
  font-size: 1.1875rem;
  line-height: 1.55;
  margin: 0 0 1.75rem;
  max-width: 30rem;
  text-wrap: pretty;
}

.nytte-cool-hero__actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
}

.nytte-cool-hero__link {
  color: var(--nytte-forest);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

/* Billedstakken (CH-174): de fem kølefotos ligger som en kortstak, hvor
   kanten af de næste kort kigger frem til højre, og pilene blander stakken.
   Geometrien er regnet, så ALT bliver inde i kvadratet: forreste kort
   skaleres til 96 % og trækkes 2 % mod venstre (venstre kant = 0, højre =
   96 %); kort 2 og 3 skaleres 90/84 % og skubbes 4/7 % mod højre, så deres
   kanter lander på ~100 % inklusive den lille rotation. Stikker intet ud,
   kan intet give sideskrol — det var netop CH-156-fælden. */
.nytte-cool-stack {
  aspect-ratio: 1;
  position: relative;
}

.nytte-cool-stack__card {
  border-radius: 28px;
  box-shadow: 0 18px 40px rgb(23 64 42 / 16%);
  display: block;
  inset: 0;
  overflow: hidden;
  position: absolute;
  /* Let overshoot paa positionsskiftene, saa kortene "traeder frem" i
     stedet for at glide dovent (ejerens efterjustering af CH-174). */
  transition:
    transform 0.5s cubic-bezier(0.34, 1.25, 0.36, 1),
    opacity 0.35s ease;
}

/* Det forreste kort forlader stakken ud til venstre med et lille tilt —
   som et kort, der bliver fejet af bunken — og laegges derefter bagest
   uden overgang (JS snapper det efter animationen). */
/* (0,3,0): skal vinde over positionsklasserne (0,2,0), som staar senere i
   arket — render() saetter begge klasser paa det udgaaende kort. */
.nytte-cool-stack .nytte-cool-stack__card.is-exit-left {
  opacity: 0;
  pointer-events: none;
  transform: translateX(-60%) rotate(-5deg) scale(0.96);
  /* Samme fjedrende kurve som indglidningen (ejerens oenske): kortet
     svirper ud med et lille overshoot forbi -60 % og saetter sig, saa
     begge pile foeles ens. Fade holdes kortere end bevaegelsen, saa
     overshootet stadig anes. */
  transition:
    transform 0.5s cubic-bezier(0.34, 1.25, 0.36, 1),
    opacity 0.34s ease-in;
  z-index: 6;
}

.nytte-cool-stack__card.is-no-transition {
  transition: none !important;
}

/* Kortet, der rykker frem ved hoejre pil, rejser kun ~6 % — for lidt til
   at fjederkurven kan maerkes (ejerens observation: "helt statisk").
   En keyframe giver det samme fjeder som tilbage-klikket: ET oversving
   forbi slutmaalet paa ~1,2 % af bredden (samme absolutte maengde som
   tilbage-klikkets bezier giver paa sin lange rejse) og derefter en bloed
   hjemglidning — ingen retur-bounce; to sving foeltes for voldsomt.
   Start- og slutbilledet matcher pos-1 og pos-0 noejagtigt. */
@keyframes nytte-stack-promote {
  0% {
    animation-timing-function: ease-out;
    transform: translateX(4%) scale(0.9) rotate(1.6deg);
  }

  68% {
    animation-timing-function: ease-in-out;
    transform: translateX(-3.3%) scale(0.96);
  }

  100% {
    transform: translateX(-2%) scale(0.96);
  }
}

.nytte-cool-stack .nytte-cool-stack__card.is-promote {
  animation: nytte-stack-promote 0.6s both;
}

.nytte-cool-stack__card img {
  display: block;
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.nytte-cool-stack__card.is-pos-0 {
  transform: translateX(-2%) scale(0.96);
  z-index: 5;
}

.nytte-cool-stack__card.is-pos-1 {
  transform: translateX(4%) scale(0.9) rotate(1.6deg);
  z-index: 4;
}

.nytte-cool-stack__card.is-pos-2 {
  transform: translateX(7%) scale(0.84) rotate(-1.2deg);
  z-index: 3;
}

.nytte-cool-stack__card.is-pos-rest {
  opacity: 0;
  pointer-events: none;
  transform: translateX(7%) scale(0.8);
  z-index: 1;
}

/* Kortets etiket (ejerens efterjustering af CH-174): produktnavn + hvad
   det bekaemper, saa stakken viser hvad man ser og hvad det bruges til.
   Teksterne kommer fra varernes faktiske kategorier — ingen loefter, kun
   anvendelse. Panelet ligger nederst til venstre; bagkortenes kig-kant er
   hoejre side, saa etiketten stikker aldrig frem bag det forreste kort. */
.nytte-cool-stack__caption {
  background: rgb(255 255 255 / 92%);
  backdrop-filter: blur(6px);
  border-radius: 14px;
  bottom: 5%;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  left: 5%;
  max-width: 82%;
  padding: 0.6rem 0.9rem;
  position: absolute;
}

.nytte-cool-stack__caption strong {
  color: var(--nytte-forest);
  font-size: 0.95rem;
  font-weight: 800;
  line-height: 1.25;
}

.nytte-cool-stack__caption span {
  color: #4a5844;
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.3;
}

.nytte-cool-stack__nav {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
  margin-top: 1.1rem;
}

.nytte-cool-stack__arrow {
  align-items: center;
  background: var(--nytte-white);
  border: 1.5px solid var(--nytte-border);
  border-radius: 50%;
  color: var(--nytte-forest);
  cursor: pointer;
  display: flex;
  height: 2.75rem;
  justify-content: center;
  padding: 0;
  transition: background 0.15s ease, border-color 0.15s ease;
  width: 2.75rem;
}

.nytte-cool-stack__arrow:hover,
.nytte-cool-stack__arrow:focus-visible {
  /* Bleg groen hover var usynlig — sektionens egen baggrund ER bleg groen
     (ejerens observation). Solid skovgroen med hvid pil i stedet. */
  background: var(--nytte-forest);
  border-color: var(--nytte-forest);
  color: var(--nytte-white);
}

.nytte-cool-stack__arrow svg {
  height: 1.25rem;
  width: 1.25rem;
}

@media (prefers-reduced-motion: reduce) {
  .nytte-cool-stack__card,
  .nytte-cool-stack .nytte-cool-stack__card.is-exit-left {
    transition: none;
  }

  .nytte-cool-stack .nytte-cool-stack__card.is-promote {
    animation: none;
  }
}

@media (max-width: 782px) {
  .nytte-cool-hero {
    padding: 2.25rem 0 2rem;
  }

  .nytte-cool-hero__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .nytte-cool-hero__visual {
    order: 0;
  }

  .nytte-cool-hero__content h1 {
    font-size: 2.25rem;
  }

  .nytte-cool-hero__image {
    border-radius: 20px;
  }
}

.nytte-home-hero {
  background: var(--nytte-cream);
  padding: 4rem 0 3.5rem;
}

.nytte-home-hero__grid {
  align-items: center;
  display: grid;
  gap: clamp(2.5rem, 5vw, 3.5rem);
  grid-template-columns: 1.05fr 0.95fr;
}

.nytte-home-hero__content {
  min-width: 0;
}

.nytte-home-hero__content h1,
.nytte-home-hero__content h2 {
  color: var(--nytte-forest);
  font-size: 3.625rem;
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.04;
  margin: 1.25rem 0 1.125rem;
  max-width: none;
  text-wrap: balance;
}

.nytte-kicker {
  background: var(--nytte-pale);
  border-radius: 999px;
  color: var(--nytte-leaf);
  display: inline-flex;
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  margin: 0;
  padding: 0.4375rem 1rem;
  text-transform: uppercase;
}

.nytte-home-hero__lead {
  color: #4a5844;
  font-size: 1.1875rem;
  line-height: 1.55;
  margin: 0 0 2rem;
  max-width: 30rem;
  text-wrap: pretty;
}

.nytte-home-hero__lead--mobile,
.nytte-cold-card .nytte-cold-card__mobile {
  display: none;
}

.nytte-pest-picker {
  background: var(--nytte-white);
  border: 1.5px solid var(--nytte-border);
  border-radius: 20px;
  box-shadow: 0 12px 32px rgb(23 64 42 / 7%);
  padding: 1.5rem 1.625rem;
}

.nytte-pest-picker__title {
  color: var(--nytte-forest);
  font-size: 1.0625rem;
  font-weight: 700;
  margin: 0 0 0.875rem;
}

.nytte-pest-picker__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
}

.nytte-pest-chip {
  background: var(--nytte-white);
  border: 1px solid #c9d6c0;
  border-radius: 999px;
  color: var(--nytte-forest);
  cursor: pointer;
  font: inherit;
  box-sizing: border-box;
  font-size: 0.9375rem;
  font-weight: 600;
  min-height: 2.75rem;
  padding: 0.5rem 1.25rem;
}

.nytte-pest-chip:hover,
.nytte-pest-chip[aria-pressed="true"] {
  background: var(--nytte-forest);
  border-color: var(--nytte-forest);
  color: var(--nytte-white);
}

.nytte-pest-result {
  align-items: center;
  background: var(--nytte-pale);
  border-radius: 14px;
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  margin-top: 1rem;
  padding: 1rem;
}

.nytte-pest-result[hidden] {
  display: none;
}

/* Kun sætningslinjen og beskrivelsen er blokke. Den tidligere regel ramte
   ALLE spans — også `<span data-pest-name>` inde i sætningen og prisen inde i
   knappen — så »Mod Bladlus anbefaler vi: Løsninger mod bladlus« brød i fire
   linjer, og knappen blev tre linjer høj og alt for bred (ejerens fund
   2026-08-19). Derfor kun direkte børn. */
.nytte-pest-result > div > strong,
.nytte-pest-result > div > [data-pest-description] {
  display: block;
}

.nytte-pest-result strong {
  color: var(--nytte-forest);
  font-size: 0.9rem;
}

.nytte-pest-result [data-pest-description] {
  color: #4a5844;
  font-size: 0.8rem;
  margin-top: 0.25rem;
}

.nytte-home-hero__visual {
  position: relative;
}

.nytte-home-image {
  display: block;
  height: auto;
  object-fit: cover;
  width: 100%;
}

.nytte-home-image--hero {
  aspect-ratio: 11 / 10;
  border-radius: 24px;
}

.nytte-home-image--pest {
  aspect-ratio: 4 / 3;
  border-radius: 12px;
  margin-bottom: 0;
}

/* Billedet bestemmer garantibannerets højde (målt: 343 px billede + 112 px
   polstring = 455 px kasse). Vores indholdsbredde er større end mockuppens
   1200 px, så billedkolonnen blev 429 px mod mockuppens ~390 px. Billedet
   loftes til mockuppens effektive bredde og holdes mod højre, så
   polstringen bevares, mens kassen bliver lavere (ejerens ønske
   2026-08-17). Formatet 5/4 er mockuppens. */
.nytte-home-image--guarantee {
  aspect-ratio: 5 / 4;
  border-radius: 20px;
  justify-self: end;
  max-width: 24rem;
  width: 100%;
}

.nytte-home-image--guide {
  aspect-ratio: 16 / 9;
}

.nytte-placeholder {
  align-items: center;
  background: repeating-linear-gradient(
    45deg,
    #dce5d4 0 14px,
    #e8eee1 14px 28px
  );
  color: var(--nytte-muted);
  display: flex;
  font-family: ui-monospace, monospace;
  justify-content: center;
  text-align: center;
}

.nytte-placeholder--hero {
  aspect-ratio: 11 / 10;
  border-radius: 24px;
  font-size: clamp(1rem, 2vw, 1.4rem);
  padding: 2rem;
}

.nytte-cold-card {
  align-items: center;
  background: var(--nytte-white);
  border-radius: 16px;
  bottom: 1.75rem;
  box-shadow: 0 14px 36px rgb(23 64 42 / 16%);
  display: flex;
  gap: 0.75rem;
  left: -1.25rem;
  padding: 0.875rem 1.25rem;
  position: absolute;
}

.nytte-cold-card strong,
.nytte-cold-card span {
  display: block;
}

.nytte-cold-card strong {
  color: var(--nytte-forest);
  font-size: 0.9375rem;
}

.nytte-cold-card__desktop > span {
  color: var(--nytte-muted);
  display: block;
  font-size: 0.8125rem;
}

.nytte-status-dot {
  background: var(--nytte-leaf);
  border-radius: 50%;
  display: inline-block;
  flex: 0 0 auto;
  height: 0.45rem;
  width: 0.45rem;
}

.nytte-trust-strip {
  background: var(--nytte-forest);
  color: var(--nytte-pale);
}

/* Fire lige brede kolonner så jævne ud i mockuppen, hvor teksterne er næsten
   lige lange — men vores tekster varierer fra 15 til 30 tegn, så venstre-
   stillede kolonner gav vidt forskellige synlige mellemrum. `space-between`
   giver i stedet ens luft mellem punkterne, med første og sidste i flugt med
   sektionens kanter. Tablet og mobil beholder grid via reglerne nedenfor. */
.nytte-trust-strip__grid {
  display: flex;
  gap: 1.5rem;
  justify-content: space-between;
  padding-block: 1.25rem;
}

.nytte-trust-strip p {
  align-items: center;
  display: flex;
  font-size: 0.9375rem;
  font-weight: 600;
  gap: 0.625rem;
  margin: 0;
}

.nytte-stars {
  color: #7fb88e;
  letter-spacing: 0.08em;
}

.nytte-home-section {
  background: var(--nytte-cream);
  padding-block: 4rem;
}

.nytte-home-section--pests {
  padding: 4.5rem 0 2rem;
}

.nytte-home-section--products {
  padding: 3rem 0 1.5rem;
}

.nytte-home-section--steps {
  padding: 4rem 0;
}

.nytte-home-section--reviews {
  padding: 0 0 4rem;
}

.nytte-home-section--guides {
  padding: 0 0 4.5rem;
}

.nytte-section-heading {
  align-items: baseline;
  display: flex;
  gap: 1.5rem;
  justify-content: space-between;
  margin-bottom: 1.75rem;
}

.nytte-section-heading h2 {
  color: var(--nytte-forest);
  font-size: clamp(2rem, 4vw, 2.25rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0;
}

.nytte-section-heading > a {
  color: var(--nytte-forest);
  font-weight: 800;
  white-space: nowrap;
}

.nytte-section-heading--center {
  justify-content: center;
  text-align: center;
}

.nytte-section-heading--center .nytte-kicker {
  margin-bottom: 0.9rem;
}

.nytte-pest-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.nytte-pest-card {
  background: var(--nytte-white);
  border: 1.5px solid var(--nytte-border);
  border-radius: 18px;
  color: var(--nytte-forest);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 0.875rem;
  transition: var(--nytte-transition);
}

.nytte-pest-card:hover {
  border-color: var(--nytte-leaf);
  box-shadow: 0 14px 32px rgb(23 64 42 / 10%);
  transform: translateY(-3px);
}

.nytte-pest-card strong {
  font-size: 0.95rem;
}

.nytte-pest-card > span:last-child {
  display: none;
}

.nytte-placeholder--pest {
  aspect-ratio: 4 / 3;
  border-radius: 12px;
  font-size: 0.75rem;
  line-height: 1.35;
  margin-bottom: 0;
  padding: 0.5rem;
}

.nytte-product-grid {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.nytte-product-card {
  background: var(--nytte-white);
  border: 1.5px solid var(--nytte-border);
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1rem;
  transition: var(--nytte-transition);
}

.nytte-product-card:hover {
  box-shadow: 0 14px 32px rgb(23 64 42 / 10%);
  transform: translateY(-3px);
}

.nytte-product-card__image {
  aspect-ratio: 1;
  background: var(--nytte-cream);
  border-radius: 14px;
  overflow: hidden;
  position: relative;
}

.nytte-product-card__image img {
  height: 100%;
  object-fit: contain;
  width: 100%;
}

.nytte-badge {
  background: var(--nytte-action);
  border-radius: 999px;
  color: var(--nytte-white);
  font-size: 0.75rem;
  font-weight: 700;
  left: 0.625rem;
  padding: 0.25rem 0.625rem;
  position: absolute;
  top: 0.65rem;
}

.nytte-product-card__category {
  color: var(--nytte-action) !important;
  font-size: 0.8125rem !important;
  font-weight: 700;
  letter-spacing: 0.05em;
  margin: 0 !important;
  text-transform: uppercase;
}

.nytte-product-card h3 {
  color: var(--nytte-forest);
  font-family: var(--wp--preset--font-family--body);
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.3;
  margin: 0;
}

.nytte-product-card__summary {
  color: var(--nytte-muted);
  font-size: 0.875rem;
  line-height: 1.5;
  margin: 0;
}

/* ---------------------------------------------------------------------------
   Flugtning på tværs af kort i samme række

   Kortene er lige høje, men indholdet flød fra toppen, så et kort med
   tolinjers målorganismer eller tolinjers titel skubbede alt nedenunder ned.
   To greb, valgt efter hvor i kortet variationen sidder:

   - Over det variable indhold (tag, titel) reserveres plads, fordi de
     skubber nedad.
   - Under det (lagerstatus) forankres til bunden sammen med fodrækken, som
     allerede bruger `margin-top: auto`. Det holder uanset tekstlængde,
     hvorimod en reservation ville skride ved én linje mere.

   Skadedyrssidernes kort er smallere (224 px) og reserverer tre linjer til
   taggene; den override står i content.css.
--------------------------------------------------------------------------- */
.nytte-product-card__category {
  line-height: 1.6;
  min-height: calc(2 * 1.6em);
}

.nytte-product-card h3 {
  min-height: calc(2 * 1.3em);
}

.nytte-product-card .nytte-stock {
  margin-top: auto;
}

.nytte-product-card .nytte-product-card__footer {
  margin-top: 0;
}

/* ---------------------------------------------------------------------------
   Lagerstatus (CH-14/S6)

   Én komponent for alle flader: katalogkort, søgeresultat og produktside.
   Markup'en kommer fra Nyttedyret\Core\Commerce\StockStatus, så teksten aldrig
   kan divergere mellem fladerne. Mindst 15 px, fordi status på en butik med
   levende varer er købsinformation og ikke finstilt metatekst.

   Rød er reserveret til handlinger jf. designsystemet, så udsolgt bruger
   ravfarvet — samme palet som .nytte-product-unavailable.
--------------------------------------------------------------------------- */
.nytte-stock {
  /* flex-start, ikke center: når teksten ombryder over to linjer på smalle
     kort, skal prikken flugte med første linje frem for at svæve i midten. */
  align-items: flex-start;
  display: flex;
  font-size: 0.9375rem;
  font-weight: 600;
  gap: 0.5rem;
  line-height: 1.4;
  margin: 0 0 0.65rem;
}

.nytte-stock__dot {
  border-radius: 50%;
  flex: 0 0 auto;
  height: 0.5rem;
  margin-top: 0.4em;
  width: 0.5rem;
}

.nytte-stock--in {
  color: #2f5b33;
}

.nytte-stock--in .nytte-stock__dot {
  background: var(--nytte-leaf);
}

.nytte-stock--backorder,
.nytte-stock--out {
  color: #8a4a16;
}

.nytte-stock--backorder .nytte-stock__dot,
.nytte-stock--out .nytte-stock__dot {
  background: #c98a3c;
}

/* Levende-garantien står lige under lagerstatus og hører visuelt sammen med
   den. Den negative topmargen æder statussens bundmargen, så de to linjer
   læses som ét blok frem for to løsrevne udsagn. */
.nytte-live-guarantee {
  align-items: flex-start;
  display: flex;
  font-size: 0.875rem;
  font-weight: 600;
  gap: 0.5rem;
  line-height: 1.4;
  margin: -0.35rem 0 0.7rem;
}

/* Feed-kortene (forside og undersider) er flex-kolonner med 12 px gap, så
   basisreglens -0.35rem gav 16,8 px mellem lagerstatus og garanti mod
   kategorisidens 8 px (målt live på begge flader). Garantien trækkes op:
   10,4 px statusmargen + 12 px gap − 14,4 px = 8 px, samme som shopsiden. */
.nytte-product-card .nytte-live-guarantee {
  margin-top: -0.9rem;
}

.nytte-live-guarantee a {
  color: var(--nytte-forest);
  text-decoration: none;
}

.nytte-live-guarantee a:hover {
  text-decoration: underline;
}

/* Fluebenet tegnes af to kanter frem for et ikon: `wp_kses_post` fjerner
   inline-SVG fra den filtrerede markup. */
.nytte-live-guarantee__mark {
  background: #e4eddf;
  border-radius: 50%;
  flex: 0 0 auto;
  height: 1rem;
  margin-top: 0.1em;
  position: relative;
  width: 1rem;
}

.nytte-live-guarantee__mark::before {
  border-bottom: 2px solid var(--nytte-leaf);
  border-left: 2px solid var(--nytte-leaf);
  content: "";
  height: 0.2rem;
  left: 50%;
  position: absolute;
  top: 45%;
  transform: translate(-50%, -50%) rotate(-45deg);
  width: 0.4rem;
}

/* Køleposelinjen (CH-157) er tredje linje i samme blok som lagerstatus og
   levende-garanti og deler deres typografi. Mærket er et snefnug i samme
   lysegrønne cirkel som garantiens flueben — samme formsprog, andet tegn,
   så de to løfter kan skelnes med ét blik. Tegnet sættes i CSS-content,
   fordi wp_kses_post fjerner inline-SVG. */
.nytte-cooling-note {
  align-items: flex-start;
  color: var(--nytte-forest);
  display: flex;
  font-size: 0.875rem;
  font-weight: 600;
  gap: 0.5rem;
  line-height: 1.4;
  margin: -0.35rem 0 0.7rem;
}

/* Samme feed-korrektion som garantien: flex-kolonnens 12 px gap ville ellers
   give større afstand her end på katalogkortene. */
.nytte-product-card .nytte-cooling-note {
  margin-top: -0.9rem;
}

.nytte-cooling-note__mark {
  background: #e4eddf;
  border-radius: 50%;
  flex: 0 0 auto;
  height: 1rem;
  margin-top: 0.1em;
  position: relative;
  width: 1rem;
}

.nytte-cooling-note__mark::before {
  color: var(--nytte-leaf);
  content: "❄";
  font-size: 0.7rem;
  left: 50%;
  line-height: 1;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
}

/* Staar garantien lige foer, aeder den negative topmargen garantiens
   bundmargen, saa de tre linjer laeses som ét blok. */
.nytte-live-guarantee + .nytte-cooling-note {
  margin-top: -0.35rem;
}

.nytte-product-card .nytte-live-guarantee + .nytte-cooling-note {
  margin-top: -0.9rem;
}

/* På produktsiden står status alene mellem pris og købsknap og må have luft. */
.nytte-stock--v-product {
  margin: 0.25rem 0 1rem;
}

/* Garantien står tæt under lagerstatussen som på kortene, men luften ned til
   købsknappen skal være uændret. Uden :has ville statussens 1 rem lægge sig
   mellem de to linjer, der hører sammen. */
.nytte-stock--v-product:has(+ .nytte-live-guarantee--v-product) {
  margin-bottom: 0.35rem;
}

.nytte-live-guarantee--v-product {
  margin: 0 0 1rem;
}

/* I variantvælgeren står de to linjer under afsnittet med samme indbyrdes
   tæthed som på kortene. */
.nytte-product-choice-intro .nytte-stock--v-product {
  margin: 0.75rem 0 0.35rem;
}

.nytte-product-choice-intro .nytte-live-guarantee--v-product {
  margin: 0;
}

/* WooCommerce' egen availability-linje sad inde i købsformularen. */
.nytte-stock--v-inline {
  margin: 0 0 0.75rem;
}

.nytte-product-card__footer {
  align-items: center;
  display: flex;
  gap: 0.7rem;
  justify-content: space-between;
  margin-top: auto;
  padding-top: 0.4rem;
}

.nytte-product-card__footer > strong {
  color: var(--nytte-forest);
  font-family: var(--wp--preset--font-family--display);
  font-size: 1.25rem;
  white-space: nowrap;
}

.nytte-button {
  align-items: center;
  background: var(--nytte-forest);
  /* Kurv-knappen paa kortene er et <button>-element, og browserens
     UA-kant (2px outset) tegner en moerk halvring paa pillen, naar
     knappen aktiveres af et swatch-klik. <a>-udgaverne har ingen kant,
     saa nulstillingen skal staa her paa basen (CH-176). */
  border: 0;
  border-radius: 999px;
  box-sizing: border-box;
  color: var(--nytte-white) !important;
  display: inline-flex;
  font-size: 0.875rem;
  font-weight: 700;
  justify-content: center;
  line-height: 1.2;
  min-height: 2.875rem;
  padding: 0.5rem 1.125rem;
  text-decoration: none;
}

.nytte-button:hover {
  background: var(--nytte-leaf);
}

/* Outline-varianten hører sammen med basisknappen. Lå den i et ark, der
   indlæses senere, vandt den kun på rækkefølge — begge selektorer vejer
   0-2-0. Uden catalog.css ville hover give skovgrøn tekst på bladgrøn: 1,83:1. */
.nytte-button--outline {
  background: var(--nytte-white);
  border: 1.5px solid var(--nytte-forest);
  color: var(--nytte-forest);
}

.nytte-button--outline:hover,
.nytte-button--outline:focus-visible {
  background: var(--nytte-forest);
  color: var(--nytte-white);
}


.nytte-button--action {
  background: var(--nytte-action);
  font-size: 1rem;
  min-height: 3.125rem;
  padding-inline: 2rem;
}

/* Outline-varianten er global — den bruges i konverteringsbannere på alle
   sideskabeloner, også katalogsider uden content.css. */
.nytte-button--outline {
  background: transparent;
  border: 1.5px solid currentcolor;
  color: var(--nytte-forest) !important;
}

.nytte-button--outline:hover {
  background: rgb(255 255 255 / 72%);
}

.nytte-button--action:hover {
  background: #a93124;
}

.nytte-steps-grid,
.nytte-review-grid,
.nytte-guide-grid {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Hvid flade på kalkbunden, jf. `Nyttedyret Homepage.dc.html` linje 261:
   `background: #FFFFFF; border: 1.5px solid #E0DDCE`. Kortene stod tidligere
   i kalk og forsvandt næsten i sektionens egen baggrund. */
.nytte-steps-grid article,
.nytte-review-grid figure {
  background: var(--nytte-white);
  border: 1.5px solid var(--nytte-border);
  border-radius: 20px;
  margin: 0;
  padding: 1.75rem;
}

.nytte-steps-grid article > span {
  color: var(--nytte-action);
  font-family: var(--wp--preset--font-family--display);
  font-size: 2.6rem;
  font-weight: 800;
  line-height: 1;
}

.nytte-steps-grid h3 {
  color: var(--nytte-forest);
  font-size: 1.15rem;
  margin: 0.9rem 0 0.45rem;
}

.nytte-steps-grid p,
.nytte-review-grid blockquote {
  color: #4a5844;
  font-size: 0.9375rem;
  line-height: 1.6;
  margin: 0;
}

.nytte-guarantee-section {
  padding: 0 0 4rem;
}

.nytte-guarantee {
  align-items: center;
  background: var(--nytte-forest);
  border-radius: 28px;
  color: #bfd8c4;
  display: grid;
  gap: 3rem;
  grid-template-columns: 1.2fr 0.8fr;
  padding: 3.5rem 4rem;
}

/* En kicker eller eyebrow lige før en overskrift skal have luft ned til den.
   Flere komponenter nulstiller overskrifters margin-top i deres egen kontekst,
   så tagget klistrede til titlen.

   Den tidligere udgave havde kun klasse + elementtype (0,1,1) og tabte derfor
   til nulstillinger med samme vægt i ark, der indlæses senere. Målt live
   2026-08-18: `.nytte-product-guide h2` gav 0 px under »Dansk vejledning
   medfølger«, `.nytte-catalog-hero h1` gav 0 px, og
   `.nytte-product-choice-intro h2` gav 5,6 px, mens resten af sitet lå på
   10,4 px. Klassen gentages, så vægten bliver (0,2,1) og reglen vinder uden
   !important.

   Værdien er samtidig hævet fra 0,65 til 0,85 rem efter ejerens ønske om lidt
   mere luft (2026-08-18).

   Forsidens hero og garantibåndet har bevidst MERE luft end standarden, og
   den hævede vægt slog dem ned fra 20 og 16 px til 13,6 px (målt efter
   ændringen). De to får derfor deres egne regler nedenfor med endnu en klasse,
   så de vinder uanset rækkefølge. */
.nytte-kicker.nytte-kicker + h1,
.nytte-kicker.nytte-kicker + h2,
.nytte-kicker.nytte-kicker + h3,
.nytte-eyebrow.nytte-eyebrow + h1,
.nytte-eyebrow.nytte-eyebrow + h2,
.nytte-eyebrow.nytte-eyebrow + h3 {
  margin-top: 0.85rem;
}

/* Beholder forsidens større afstande, som den generelle regel ellers slår.
   Tredje klasse giver vægten (0,3,1) mod reglens (0,2,1). */
.nytte-home-hero__content .nytte-kicker.nytte-kicker + h1 {
  margin-top: 1.25rem;
}

.nytte-guarantee .nytte-kicker.nytte-kicker + h2 {
  margin-top: 1rem;
}

.nytte-kicker--light {
  background: rgb(255 255 255 / 12%);
  color: #bfd8c4;
}

.nytte-guarantee h2 {
  color: var(--nytte-white);
  font-size: clamp(2rem, 4vw, 2.5rem);
  margin: 1rem 0 0.9rem;
}

/* Mockuppen begrænser garantiteksten til 480 px, så linjelængden holder sig
   læsbar ved siden af billedet. Uden den løb teksten ud i 643 px. */
.nytte-guarantee p:not(.nytte-kicker) {
  font-size: 1.0625rem;
  line-height: 1.6;
  margin: 0 0 1.75rem;
  max-width: 30rem;
}

.nytte-placeholder--guarantee {
  aspect-ratio: 5 / 4;
  border-radius: 20px;
}

.nytte-review-grid figure {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.nytte-review-grid figcaption {
  color: var(--nytte-muted);
  font-size: 0.875rem;
  font-weight: 700;
}

.nytte-guide-card {
  background: var(--nytte-white);
  border: 1.5px solid var(--nytte-border);
  border-radius: 20px;
  color: var(--nytte-forest);
  overflow: hidden;
  transition: var(--nytte-transition);
}

.nytte-guide-card:hover {
  border-color: var(--nytte-leaf);
  transform: translateY(-3px);
}

.nytte-placeholder--guide {
  aspect-ratio: 16 / 9;
  font-size: 0.75rem;
}

.nytte-guide-card__body {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  padding: 1.25rem 1.375rem 1.5rem;
}

.nytte-guide-card__body small {
  color: var(--nytte-action);
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.nytte-guide-card__body strong {
  font-size: 1.125rem;
  line-height: 1.35;
}

.nytte-guide-card__body > span:last-child {
  display: none;
}

.nytte-newsletter {
  background: var(--nytte-pale);
}

.nytte-newsletter__inner {
  align-items: center;
  display: flex;
  gap: 3rem;
  justify-content: space-between;
  padding-block: 3.5rem;
}

.nytte-newsletter h2 {
  color: var(--nytte-forest);
  font-size: 1.85rem;
  margin: 0 0 0.35rem;
}

.nytte-newsletter p {
  color: #4a5844;
  margin: 0;
}

.nytte-site-footer {
  background: var(--nytte-forest);
  color: #bfd8c4;
}

.nytte-footer-grid {
  display: grid;
  gap: 2.5rem;
  grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
  padding-block: 3.5rem;
}

.nytte-site-footer .nytte-logo {
  color: var(--nytte-white);
  margin-bottom: 1rem;
}

.nytte-site-footer .nytte-logo__dk {
  color: #e28a80;
}

.nytte-footer-intro p {
  font-size: 0.85rem;
  line-height: 1.7;
  margin: 0;
  max-width: 20rem;
}

.nytte-footer-column {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.nytte-footer-column strong {
  color: var(--nytte-white);
  font-size: 0.9rem;
  margin-bottom: 0.25rem;
}

.nytte-footer-column a,
.nytte-footer-column span {
  color: #bfd8c4;
  font-size: 0.82rem;
}

/* UI-lint 2026-08-15: footerlinks målte kun 21 px i højden på touch-skærme —
   under WCAG 2.5.8's 24 px-minimum og svære at ramme. Polstringen giver
   ~35 px uden at ændre listens visuelle rytme nævneværdigt. */
@media (max-width: 900px) {
  .nytte-footer-column a {
    display: inline-block;
    padding-block: 0.45rem;
  }
}

/* Betalingsmærker (Nets-krav). Hvert mærke står på sin egen hvide plade:
   Dankorts røde og Mastercards sorte teksttillæg forsvinder næsten på
   footerens skovgrønne, og pladen giver samtidig ensartet højde uanset
   mærkets eget format. */
/* Mærkerne står i footerens første kolonne under taglinen. De havde tidligere
   deres egen sektion med overskrift og en vandret streg, hvilket gav footeren
   tre vandrette skillelinjer på under 200 px. */
.nytte-payment__marks {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
}

/* Bredden er sat efter de bredeste mærker: Visa og MobilePay har 3:1-format
   og bliver lave i en smallere plade. */
.nytte-payment-mark {
  align-items: center;
  background: var(--nytte-white);
  border-radius: 6px;
  box-sizing: border-box;
  display: flex;
  height: 1.875rem;
  justify-content: center;
  padding: 0.25rem 0.375rem;
  width: 3.25rem;
}

.nytte-payment-mark img {
  display: block;
  height: auto;
  max-height: 100%;
  max-width: 100%;
  width: auto;
}

@media (max-width: 600px) {
  .nytte-payment__marks {
    gap: 0.4375rem;
    margin-top: 1.25rem;
  }
}

.nytte-footer-bottom {
  border-top: 1px solid rgb(255 255 255 / 12%);
  color: #bfd8c4;
  font-size: 0.75rem;
  padding-block: 1rem;
}

@media (max-width: 1080px) {
  .nytte-desktop-nav {
    gap: 1rem;
  }

  .nytte-desktop-nav > a,
  .nytte-mega > summary {
    font-size: 0.85rem;
  }

  .nytte-header-search input {
    width: 200px;
  }

  .nytte-pest-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .nytte-product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 860px) {
  .nytte-desktop-nav,
  .nytte-header-tools {
    display: none;
  }

  .nytte-header-inner {
    display: grid !important;
    gap: 0.75rem;
    grid-template-columns: 46px minmax(0, 1fr) 46px;
    min-height: 4.375rem;
  }

  .nytte-header-main {
    display: contents;
  }

  .nytte-mobile-nav {
    display: block;
    grid-column: 1;
    grid-row: 1;
    margin: 0;
  }

  /* Skal scopes til sitets header: checkout-logoet bærer samme .nytte-logo
     og arvede ellers placeringen ind i kassens egen grid, så trinindikatoren
     kom før brandet i betalingsflowet. */
  .nytte-header-inner .nytte-logo {
    grid-column: 2;
    grid-row: 1;
    justify-self: center;
  }

  .nytte-header-inner > .wc-block-mini-cart {
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
  }

  .nytte-header-inner .wc-block-mini-cart__button {
    border-radius: 14px;
    font-size: 0;
    height: 46px;
    min-height: 46px;
    min-width: 46px;
    padding: 0;
    width: 46px;
  }

  .nytte-header-inner .wc-block-mini-cart__button::before {
    content: "0";
  }

  .nytte-header-inner .wc-block-mini-cart__button[data-nytte-cart-count]::before {
    content: attr(data-nytte-cart-count);
  }

  .nytte-home-hero__grid,
  .nytte-guarantee {
    grid-template-columns: minmax(0, 1fr);
  }

  .nytte-home-hero__content h1,
.nytte-home-hero__content h2 {
    max-width: 14ch;
  }

  .nytte-home-hero__visual {
    margin-inline: auto;
    max-width: 560px;
    width: 100%;
  }

  .nytte-trust-strip__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .nytte-footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 680px) {
  .nytte-container {
    padding-inline: 16px;
  }

  .nytte-topbar {
    font-size: 0.8125rem;
    padding: 0.5625rem 1rem;
  }

  .nytte-topbar__desktop {
    display: none;
  }

  .nytte-topbar__mobile {
    display: block;
  }

  .nytte-header-inner {
    gap: 0.5rem;
    min-height: 4.25rem;
    width: 100%;
  }

  .nytte-logo {
    font-size: 1.375rem;
  }

  .nytte-home-hero {
    padding: 1.375rem 0 0;
  }

  .nytte-home-hero__grid {
    gap: 0;
  }

  .nytte-home-hero__content h1,
.nytte-home-hero__content h2 {
    font-size: 2.125rem;
    line-height: 1.06;
    margin: 0.875rem 0 0.75rem;
    text-wrap: pretty;
  }

  .nytte-kicker {
    font-size: 0.75rem;
    padding: 0.375rem 0.875rem;
  }

  .nytte-home-hero__lead {
    font-size: 1rem;
    line-height: 1.5;
    margin-bottom: 1.25rem;
  }

  .nytte-home-hero__lead--desktop,
  .nytte-cold-card .nytte-cold-card__desktop {
    display: none;
  }

  .nytte-home-hero__lead--mobile,
  .nytte-cold-card .nytte-cold-card__mobile {
    display: inline;
  }

  .nytte-pest-picker {
    border-radius: 18px;
    padding: 1.125rem;
  }

  .nytte-pest-picker__title {
    font-size: 1rem;
    margin-bottom: 0.75rem;
  }

  .nytte-pest-picker__chips {
    gap: 0.5rem;
  }

  .nytte-pest-chip {
    font-size: 0.875rem;
    padding-inline: 0.875rem;
  }

  .nytte-placeholder--hero {
    display: none;
  }

  .nytte-home-hero__visual {
    margin: 1.125rem 0 0;
    max-width: none;
  }

  .nytte-cold-card {
    background: transparent;
    border-radius: 0;
    box-shadow: none;
    color: var(--nytte-forest);
    font-size: 0.875rem;
    font-weight: 600;
    gap: 0.625rem;
    padding: 0 0 1.375rem;
    position: static;
  }

  .nytte-pest-result {
    align-items: stretch;
    flex-direction: column;
  }

  .nytte-cold-card {
    bottom: 1rem;
    left: 0.75rem;
    right: 0.75rem;
  }

  .nytte-trust-strip__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }

  .nytte-trust-strip p:nth-child(n + 3) {
    display: none;
  }

  .nytte-section-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .nytte-section-heading--center {
    align-items: center;
  }

  .nytte-pest-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .nytte-steps-grid,
  .nytte-review-grid,
  .nytte-guide-grid,
  .nytte-footer-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  /* CH-156: mobilens vandrette svirp-karrusel er afløst af et 2-kolonne-grid
     efter ejerens ønske ("voldsom side-scroll" på skadedyrssiderne).

     Karrusellen (flex + overflow-x + scroll-snap) var i sig selv tænkt som
     320 px-kort med et kig til det næste — men kortene målte reelt 354 px:
     flex-basis er intet maksimum, når indholdet ikke kan krympe, og
     billedets faste mål + content-box-padding pressede kortet ud over sin
     basis. På trips-siden gav seks kort en 2.613 px bred stribe.

     Grid-sporet `minmax(0, 1fr)` kan indholdet ikke presse bredere.

     CH-163: ÉN kolonne som kataloget. CH-156 valgte to kolonner, men efter
     ejeren så 1-kolonne-kataloget live (CH-162), skal feeds'ene følge samme
     mønster — to kolonner blev for smalt. Padding og gap matcher kortets
     basisregler, nu hvor kortet igen er bredt. Rammer både forsiden
     (HomeProducts) og skadedyrssiderne (CategoryProducts), som deler
     denne klasse. */
  .nytte-product-grid {
    gap: 1rem;
    grid-template-columns: minmax(0, 1fr);
  }

  .nytte-product-card {
    box-sizing: border-box;
    gap: 0.75rem;
    min-width: 0;
    padding: 1rem;
  }

  /* CH-166: kortet stod i fuld skaermbredde (maalt 0..390) MED 20 px runde
     hjoerner, saa hjoernerne rundede mod skaermkanten. Ejeren bad om enten
     lige kanter i fuld bredde eller runde hjoerner med luft; kortmodellen
     er valgt, fordi hele designsystemet er runde kort — sidemargenen
     matcher feed-kortenes 16 px, saa venstrekanterne flugter. */
  .nytte-guarantee {
    border-radius: 20px;
    margin-inline: 1rem;
    padding: 1.5rem;
    /* Basisreglen holder kortet i fuld bredde; uden auto flyttede margenen
       blot kortet 16 px ud over hoejre kant (maalt 16..406). */
    width: auto;
  }

  .nytte-newsletter__inner {
    align-items: stretch;
    flex-direction: column;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nytte-pest-card,
  .nytte-product-card,
  .nytte-guide-card {
    transition: none;
  }
}
.nytte-product-card__footer .nytte-button {
  min-height: 2.75rem;
  padding-inline: 1.125rem;
}

.nytte-pest-result .nytte-button {
  /* Knappen må ikke klemmes af tekstblokken ved siden af. Uden dette blev
     »Se løsningen · 499 kr.« brudt til to linjer, og knappen voksede fra 44
     til 52 px i højden — målt 2026-08-19. */
  flex-shrink: 0;
  font-size: 0.9375rem;
  min-height: 2.75rem;
  padding-inline: 1.375rem;
  white-space: nowrap;
}

/* Telefonnummeret er footerens primære handling og skal kunne aflæses på
   afstand — de øvrige linjer i kolonnen er bevidst lettere. */
.nytte-footer-column .nytte-footer-phone {
  font-size: 1.0625rem;
  font-weight: 750;
  letter-spacing: -0.01em;
}

/* Nummeret er et tel:-link og dermed footerens eneste tapbare handling på
   mobil. Klikfladen målte 27 px; den udvides til 44 px uden at ændre
   linjeafstanden visuelt. */
@media (max-width: 780px) {
  .nytte-footer-column .nytte-footer-phone {
    align-items: center;
    display: inline-flex;
    min-height: 2.75rem;
  }
}

/* ---------------------------------------------------------------------------
   Kundeanmeldelser
   Sektionen renderes kun, når der findes rigtige, godkendte anmeldelser.
   Designhandoffets tre eksempeludsagn er pladsholdertekst og publiceres ikke.
   --------------------------------------------------------------------------- */
.nytte-review-grid {
  display: grid;
  gap: clamp(1rem, 2vw, 1.5rem);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
}

.nytte-review-card {
  background: var(--nytte-white);
  border: 1px solid var(--nytte-border);
  border-radius: 22px;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  margin: 0;
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
}

.nytte-review-card__rating {
  color: var(--nytte-action);
  font-size: 1rem;
  letter-spacing: 0.12em;
  line-height: 1;
}

.nytte-review-card__quote {
  flex: 1;
  margin: 0;
}

.nytte-review-card__quote p {
  color: var(--nytte-ink);
  font-size: 1.0125rem;
  line-height: 1.6;
  margin: 0;
  text-wrap: pretty;
}

.nytte-review-card__meta {
  border-top: 1px solid var(--nytte-border);
  display: grid;
  gap: 0.2rem;
  padding-top: 0.85rem;
}

.nytte-review-card__meta strong {
  color: var(--nytte-forest);
  font-size: 0.9rem;
}

.nytte-review-card__meta span {
  color: #4a5844;
  font-size: 0.8125rem;
}

@media (max-width: 900px) {
  .nytte-review-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .nytte-review-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---------------------------------------------------------------------------
   Konverteringsbanner (CH-17)

   Typografi-selektorerne dobler klassen, fordi home.css indlæses før de
   sidespecifikke stylesheets, hvis h2-regler ellers ville vinde kaskaden.

   Fælles afsluttende CTA-blok fra mockuppene: mørkegrøn som standard
   (Skadedyr, guide-artikler), --light til FAQ, Nyttedyr og garantiens
   anmeld-sektion, --row til de vandrette bannere med én knap. Copy må kun
   love det, handelsbetingelserne dækker: ingen svartider, ingen samme-dag-
   afsendelse. Ekspert-CTA'erne peger på mail/telefon, indtil Spørg en
   ekspert-siden bygges (udskudt efter aftale).
--------------------------------------------------------------------------- */
.nytte-cta-banner {
  background: var(--nytte-forest, #17402a);
  border-radius: 28px;
  box-sizing: border-box;
  color: #bfd8c4;
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.75rem);
  grid-template-columns: 1.2fr 0.8fr;
  margin: clamp(2.5rem, 5vw, 4rem) auto 0;
  max-width: 1200px;
  padding: clamp(2rem, 4vw, 3rem) clamp(2rem, 4.5vw, 3.5rem);
  width: 100%;
}

.nytte-cta-banner.nytte-cta-banner h2 {
  color: var(--nytte-white, #fff);
  font-family: var(--wp--preset--font-family--display);
  font-size: clamp(1.7rem, 2.7vw, 2.125rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.1;
  margin: 0 0 0.75rem;
}

.nytte-cta-banner.nytte-cta-banner p {
  font-size: 1.0625rem;
  line-height: 1.6;
  margin: 0;
  max-width: 60ch;
}

.nytte-cta-banner__actions {
  align-content: center;
  display: grid;
  gap: 0.75rem;
}

.nytte-cta-banner__actions .nytte-button {
  justify-content: center;
  min-height: 3.25rem;
  text-align: center;
}

/* Outline-knappen på mørk baggrund følger handoffens knaptabel. */
.nytte-cta-banner .nytte-button--outline {
  border-color: rgb(255 255 255 / 35%);
  color: var(--nytte-white) !important;
}

.nytte-cta-banner .nytte-button--outline:hover {
  background: rgb(255 255 255 / 10%);
}

.nytte-cta-banner--light {
  background: var(--nytte-pale, #e4eddf);
  border-radius: 26px;
  color: #4a5844;
}

.nytte-cta-banner.nytte-cta-banner--light h2 {
  color: var(--nytte-forest);
}

.nytte-cta-banner--light .nytte-button--outline {
  border-color: var(--nytte-forest);
  color: var(--nytte-forest) !important;
}

.nytte-cta-banner--light .nytte-button--outline:hover {
  background: rgb(255 255 255 / 72%);
}

/* Vandret variant: tekst til venstre, én knap til højre. */
.nytte-cta-banner--row {
  align-items: center;
  border-radius: 22px;
  grid-template-columns: minmax(0, 1fr) auto;
  padding: 2rem 2.25rem;
}

.nytte-cta-banner.nytte-cta-banner--row h2 {
  font-size: 1.1875rem;
  margin-bottom: 0.35rem;
}

.nytte-cta-banner.nytte-cta-banner--row p {
  font-size: 0.9375rem;
}

/* Ekspertkort til sticky sidebarer (FAQ, søgeresultat). */
.nytte-expert-card {
  background: var(--nytte-forest, #17402a);
  border-radius: 20px;
  color: #bfd8c4;
  margin-top: 1rem;
  padding: 1.5rem 1.6rem;
}

.nytte-expert-card strong {
  color: var(--nytte-white);
  display: block;
  font-family: var(--wp--preset--font-family--display);
  font-size: 1.125rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-bottom: 0.4rem;
}

.nytte-expert-card p {
  font-size: 0.875rem;
  line-height: 1.55;
  margin: 0 0 1rem;
}

.nytte-expert-card .nytte-button {
  font-size: 0.875rem;
  min-height: 2.75rem;
  padding: 0.65rem 1.35rem;
}

@media (max-width: 780px) {
  .nytte-cta-banner,
  .nytte-cta-banner--row {
    grid-template-columns: minmax(0, 1fr);
    padding: 1.75rem 1.5rem;
  }

  .nytte-cta-banner__actions .nytte-button {
    width: 100%;
  }
}

/* ── Mængdevalg på produktkortene ─────────────────────────────────────────
   Chips efter designhandoffets filterstil: 8/14 px, 1,5 px kant #C9D6C0,
   fuldt afrundet. Valgt tilstand bruger handoffets 2 px kant. */
.nytte-variants {
  margin: 0 0 0.75rem;
}

.nytte-variants__label {
  color: var(--nytte-muted);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  margin: 0 0 0.4rem;
  text-transform: uppercase;
}

.nytte-variants__options {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.nytte-variant {
  background: #fff;
  border: 1.5px solid #c9d6c0;
  border-radius: 999px;
  color: var(--nytte-forest);
  cursor: pointer;
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.2;
  padding: 0.5rem 0.875rem;
  transition: background 0.15s ease, border-color 0.15s ease;
}

/* Hover må ikke ramme den valgte pille. `:hover:not([disabled])` vejer
   0-3-0 og vandt over `[aria-checked="true"]`s 0-2-0, så den valgte pille
   fik lys baggrund og beholdt sin hvide tekst — hvid på næsten hvid. Den
   valgte har sin egen hover nedenfor. */
.nytte-variant:hover:not([disabled]):not([aria-checked="true"]) {
  background: #f2f7ef;
  border-color: var(--nytte-leaf);
}

/* Den valgte pille markeres med en ring, ikke med fyld. CH-158: ringen
   tegnes UDELUKKENDE af den indre skygge — den tidligere border-width: 2px
   gjorde pillen større ved valg (målt 68x35 -> 70x37), så hele kortfoden
   hoppede 2 px ved hvert klik. Skygger deltager ikke i layoutet, så kanten
   bliver på 1,5 px, og skyggen leverer de sidste 1,5 px af ringens tykkelse:
   samme 3 px visuelle ring som før, nul bevægelse. */
.nytte-variant[aria-checked="true"] {
  background: #fff;
  border-color: var(--nytte-forest);
  box-shadow: inset 0 0 0 1.5px var(--nytte-forest);
  color: var(--nytte-forest);
}

/* Den valgte pille reagerer på musen som de øvrige. Nu hvor teksten er
   skovgrøn i stedet for hvid, er den lyse flade uproblematisk; ringen
   beholder sin farve, så valget ikke forsvinder under markøren. */
.nytte-variant[aria-checked="true"]:hover {
  background: #f2f7ef;
}

/* Udsolgte mængder skal kunne ses, men ikke vælges. Overstregningen gør
   tilstanden tydelig uden kun at bruge farve. */
.nytte-variant[disabled] {
  background: #f4f3ec;
  border-color: #ddd9c8;
  color: #7c8a74;
  cursor: not-allowed;
  text-decoration: line-through;
}

/* Knappen er slået fra, indtil kunden har valgt. Prisspændet går fra 17 til
   1.129 kr., så et køb må ikke kunne udløses uden et bevidst valg. */
[data-nytte-variants-submit][disabled] {
  cursor: not-allowed;
  opacity: 0.45;
}

/* Kataloget lægger pris og knap i et to-kolonners grid. Mængderne hører
   over dem begge og skal fylde hele rækken. */
.nytte-catalog-results .nytte-card-foot > .nytte-variants,
.nytte-related-products .nytte-card-foot > .nytte-variants {
  grid-column: 1 / -1;
  margin: 0 0 0.25rem;
  order: -1;
}

/* Pillerne er 35 px høje efter designhandoffet, men mængdevalget er købsvejen
   for et variabelt produkt, og UX-auditens mønster 4 pegede på klikflader som
   et systemisk problem. Feltet udvides til 44 px med et pseudo-element, så
   udseendet holder. Rækkeafstanden hæves samtidig til 12 px, så de udvidede
   felter ikke overlapper hinanden (35 + 12 = 47 > 44). */
.nytte-variants__options {
  row-gap: 0.75rem;
}

.nytte-variant {
  position: relative;
}

.nytte-variant::after {
  content: "";
  height: 44px;
  inset: 50% 0 auto;
  position: absolute;
  transform: translateY(-50%);
}

/* Samlet billedkreditering under et gitter af små motiver. CC BY kræver
   navngivning, hvor billedet vises, men en flise på 15vw har ikke plads til
   en linje pr. billede. Kontrasten er målt mod cremefladen. */
.nytte-image-credit {
  color: var(--nytte-muted);
  font-size: 0.75rem;
  line-height: 1.5;
  margin: 1rem 0 0;
}

.nytte-image-credit a {
  color: inherit;
  text-decoration: underline;
}

/* Tælleren efter kortets to første kategorier. Den er ikke et link og skal
   ikke se ud som et; dæmpet vægt holder den adskilt fra termerne. */
.nytte-terms-more {
  color: inherit;
  font-weight: 600;
  margin-left: 0.35rem;
  opacity: 0.75;
}