:root {
  --nytte-content-border: #e0ddce;
  --nytte-content-soft: #e4eddf;
  --nytte-content-text: #33402f;
}

/* Editorial guides: single article and archive cards (theme 0.12). */
.nyttedyret-guide-single {
  background: #f6f4ec;
  color: var(--nytte-content-text);
  max-width: none;
  padding: 0;
}

/* Mockuppen (`Nyttedyret Guide.dc.html` linje 49/66) har hovedet paa 900 px
   centreret mod layoutets 1200, men ejeren bad 2026-08-29 om at faa
   broedkrummer, H1 og separatorlinje til at flugte med indholdets venstre-
   kant — de ~100-150 px indrykning laeste som fejlcentrering (CH-177).
   Samme ramme og vandrette padding som .nytte-article-layout nedenfor. */
.nytte-article-hero {
  box-sizing: border-box;
  margin-inline: auto !important;
  max-width: 1200px !important;
  padding: clamp(2.5rem, 5vw, 3rem) 1.5rem 2rem;
}

/* Manchetten maa ikke foelge de 1200 px ud — 140 tegn pr. linje er
   ulaeseligt. Vinder over `.nytte-article-hero > *` paa specificitet. */
.nytte-article-hero .nytte-article-lead {
  max-width: 62ch !important;
}

/* WordPress' constrained-layout centrerer hvert barn for sig med
   `margin-inline: auto !important` og klipper det til content-size på 760 px.
   Med hver sin bredde gav det fem forskellige venstrekanter — titlen på
   153 px, brødkrummen på 318 og labelen på 347. Containeren ovenfor er nu den
   eneste, der styrer bredden, så alt flugter i én kant. `!important` er
   nødvendigt, fordi kernereglen selv bruger det. */
.nytte-article-hero > * {
  margin-inline: 0 !important;
  max-width: 100% !important;
}

.nytte-article-breadcrumbs {
  align-items: center;
  color: #5f6e57;
  display: flex;
  flex-wrap: wrap;
  font-size: 0.875rem;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
}

.nytte-article-breadcrumbs a {
  color: inherit;
}

.nytte-article-breadcrumbs strong {
  color: var(--nytte-forest);
}

.nytte-article-label {
  align-items: center;
  background: #e4eddf;
  border-radius: 999px;
  color: var(--nytte-leaf);
  display: inline-flex;
  font-size: 0.8rem;
  font-weight: 750;
  gap: 0.55rem;
  letter-spacing: 0.05em;
  padding: 0.45rem 1rem;
  text-transform: uppercase;
}

.nytte-article-hero .wp-block-post-title {
  color: var(--nytte-forest);
  font-family: var(--wp--preset--font-family--display);
  font-size: clamp(2.5rem, 5vw, 3.15rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.05;
  margin: 1.2rem 0 1rem;
  text-wrap: balance;
}

.nytte-article-lead {
  margin: 0 0 1.4rem;
}

.nytte-article-lead p {
  color: #4a5844;
  font-size: clamp(1.1rem, 2vw, 1.25rem);
  line-height: 1.55;
  margin: 0;
  text-wrap: pretty;
}

.nytte-article-lead .wp-block-post-excerpt__more-text {
  display: none;
}

.nytte-article-byline {
  align-items: center;
  border-bottom: 1px solid var(--nytte-content-border);
  color: #4a5844;
  display: flex;
  font-size: 0.94rem;
  gap: 0.85rem;
  padding-bottom: 1.75rem;
}

.nytte-article-byline strong {
  color: var(--nytte-forest);
}

.nytte-article-byline__mark {
  align-items: center;
  background: #e4eddf;
  border-radius: 50%;
  color: var(--nytte-forest);
  display: inline-flex;
  flex: 0 0 2.75rem;
  font-family: var(--wp--preset--font-family--display);
  font-weight: 800;
  height: 2.75rem;
  justify-content: center;
}

.nytte-article-layout {
  align-items: start;
  display: grid;
  gap: clamp(2.25rem, 5vw, 3.5rem);
  grid-template-columns: minmax(0, 1fr) 300px;
  margin: 0 auto !important;
  max-width: 1200px !important;
  padding: 0 1.5rem clamp(4rem, 7vw, 5.5rem);
}

.nytte-article-main,
.nytte-article-main > .wp-block-post-content {
  min-width: 0;
}

.nytte-article-image {
  margin: 0 0 2rem;
}

.nytte-article-image img {
  aspect-ratio: 16 / 9;
  border-radius: 20px;
  display: block;
  object-fit: cover;
  width: 100%;
}

.nytte-guide-article-copy {
  font-size: 1.06rem;
  line-height: 1.72;
  max-width: none;
}

.nytte-guide-article-copy > :first-child {
  margin-top: 0;
}

.nytte-guide-article-copy h2 {
  color: var(--nytte-forest);
  font-family: var(--wp--preset--font-family--display);
  font-size: clamp(1.65rem, 3vw, 1.9rem);
  letter-spacing: -0.02em;
  line-height: 1.16;
  margin: 2.2rem 0 0.8rem;
  scroll-margin-top: 2rem;
}

.nytte-guide-article-copy h3 {
  color: var(--nytte-forest);
  font-size: 1.2rem;
  margin: 1.6rem 0 0.5rem;
}

.nytte-guide-article-copy p,
.nytte-guide-article-copy li {
  color: #33402f;
  text-wrap: pretty;
}

.nytte-guide-article-copy p {
  margin: 0 0 1.25rem;
}

.nytte-guide-article-copy ul,
.nytte-guide-article-copy ol {
  margin: 0 0 1.5rem;
  padding-left: 1.45rem;
}

.nytte-guide-article-copy li + li {
  margin-top: 0.5rem;
}

.nytte-guide-note {
  background: #e4eddf;
  border-radius: 20px;
  margin: 1.75rem 0;
  padding: 1.5rem 1.75rem;
}

.nytte-guide-note strong {
  color: var(--nytte-forest);
  display: block;
  font-size: 1.05rem;
  margin-bottom: 0.4rem;
}

.nytte-guide-note p:last-child {
  margin-bottom: 0;
}

.nytte-guide-checklist {
  background: #fff;
  border: 1px solid var(--nytte-content-border);
  border-radius: 20px;
  margin: 1.75rem 0;
  padding: 1.5rem 1.75rem;
}

.nytte-guide-checklist h3 {
  margin-top: 0;
}

.nytte-guide-cta {
  align-items: center;
  background: var(--nytte-forest);
  border-radius: 24px;
  display: grid;
  gap: 1.5rem;
  grid-template-columns: minmax(0, 1fr) auto;
  margin-top: 2.25rem;
  padding: clamp(1.6rem, 4vw, 2.5rem);
}

.nytte-guide-cta h2 {
  color: #fff;
  margin: 0 0 0.55rem;
}

.nytte-guide-cta p {
  color: #bfd8c4;
  margin: 0;
}

.nytte-guide-cta .nytte-button {
  background: var(--nytte-action);
  color: #fff;
  white-space: nowrap;
}

.nytte-guide-sources {
  border-top: 1px solid var(--nytte-content-border);
  color: #5f6e57;
  font-size: 0.86rem;
  margin-top: 2rem;
  padding-top: 1rem;
}

.nytte-guide-sources a {
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

/* Blogindlaeggets hoejrekolonne klaebede paa 1.5rem — altsaa 24 px fra
   vinduets top, hvilket er inde under den flydende header. Maalt paa
   /spindemider-saadan-spotter-du-dem/ ved scrollY 900: headeren skrumper fra
   81 til 57 px ved scroll, asiden klaebede paa 24, og headeren (z-index 70)
   daekkede dermed de oeverste 33 px af kortet.

   Samme konvention som .nytte-faq-nav og .nytte-account-benefits bruges nu.
   BEMAERK: --nytte-header-height er ikke defineret nogen steder i temaet, saa
   det er reservevaerdien 80 px, der reelt gaelder — se NOTES.md. Defineres
   variablen senere, flytter fire sticky-elementer sig samtidig. */
.nytte-article-aside {
  position: sticky;
  top: calc(var(--nytte-header-height, 80px) + 1.5rem);
}

.nytte-article-sidebar {
  display: grid;
  gap: 1.25rem;
}

.nytte-article-toc,
.nytte-article-product,
.nytte-article-help {
  background: #fff;
  border: 1.5px solid var(--nytte-content-border);
  border-radius: 20px;
  box-sizing: border-box;
  padding: 1.35rem 1.5rem;
}

.nytte-article-toc > strong {
  color: var(--nytte-forest);
  display: block;
  font-size: 0.88rem;
  letter-spacing: 0.05em;
  margin-bottom: 0.75rem;
  text-transform: uppercase;
}

.nytte-article-toc > div {
  display: grid;
  gap: 0.55rem;
}

.nytte-article-toc a {
  color: var(--nytte-leaf);
  font-size: 0.93rem;
  line-height: 1.35;
}

.nytte-article-toc a:hover {
  color: var(--nytte-forest);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.nytte-article-product {
  border-color: var(--nytte-action);
  border-width: 2px;
}

.nytte-article-product > img {
  aspect-ratio: 4 / 3;
  background: #f6f4ec;
  border-radius: 14px;
  display: block;
  margin-bottom: 0.85rem;
  object-fit: contain;
  padding: 0.55rem;
  width: 100%;
}

.nytte-article-product > span {
  color: var(--nytte-action);
  display: block;
  font-size: 0.75rem;
  font-weight: 750;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.nytte-article-product h2 {
  color: var(--nytte-forest);
  font-size: 1.05rem;
  line-height: 1.3;
  margin: 0.35rem 0;
}

.nytte-article-product p {
  color: #5f6e57;
  font-size: 0.86rem;
  line-height: 1.45;
  margin: 0 0 0.9rem;
}

.nytte-article-product > div {
  align-items: center;
  display: flex;
  gap: 0.75rem;
  justify-content: space-between;
}

.nytte-article-product > div > strong {
  color: var(--nytte-forest);
  font-family: var(--wp--preset--font-family--display);
  font-size: 1.15rem;
}

.nytte-article-product > div > a {
  background: var(--nytte-forest);
  border-radius: 999px;
  color: #fff;
  font-size: 0.82rem;
  font-weight: 750;
  padding: 0.7rem 1rem;
}

.nytte-article-help {
  background: #e4eddf;
  border: 0;
}

.nytte-article-help strong {
  color: var(--nytte-forest);
  display: block;
  font-size: 1.02rem;
  margin-bottom: 0.35rem;
}

.nytte-article-help p {
  color: #4a5844;
  font-size: 0.9rem;
  line-height: 1.5;
  margin: 0 0 0.85rem;
}

.nytte-article-help a {
  border: 1.5px solid var(--nytte-forest);
  border-radius: 999px;
  color: var(--nytte-forest);
  display: block;
  font-size: 0.88rem;
  font-weight: 750;
  padding: 0.7rem 1rem;
  text-align: center;
}

.nytte-related-guides {
  background: #fff;
  border-top: 1px solid var(--nytte-content-border);
}

.nytte-related-guides > div {
  margin: 0 auto;
  max-width: 1200px;
  padding: clamp(3rem, 6vw, 4rem) 1.5rem;
}

.nytte-related-guides h2 {
  color: var(--nytte-forest);
  font-size: clamp(1.9rem, 3vw, 2rem);
  margin: 0 0 1.75rem;
}

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

.nytte-related-guide,
.nytte-guide-card {
  background: #f6f4ec;
  border: 1.5px solid var(--nytte-content-border);
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.nytte-related-guide:hover,
.nytte-guide-card:hover {
  border-color: var(--nytte-leaf);
  box-shadow: 0 14px 32px rgb(23 64 42 / 9%);
  transform: translateY(-2px);
}

.nytte-related-guide img,
.nytte-guide-card img {
  aspect-ratio: 16 / 10;
  display: block;
  flex: 0 0 auto;
  height: auto;
  object-fit: cover;
  width: 100%;
}

.nytte-guide-featured__image img {
  aspect-ratio: 16 / 10;
  display: block;
  object-fit: cover;
  width: 100%;
}

.nytte-related-guide__content,
.nytte-guide-card > div {
  display: block;
  padding: 1.25rem 1.35rem 1.45rem;
}

.nytte-related-guide span,
.nytte-guide-card__meta {
  color: var(--nytte-action);
  display: block;
  font-size: 0.75rem;
  font-weight: 750;
  letter-spacing: 0.05em;
  margin-bottom: 0.45rem;
  text-transform: uppercase;
}

.nytte-related-guide span b,
.nytte-guide-card__meta b {
  color: #a4ad9d;
  padding-inline: 0.25rem;
}

.nytte-related-guide__content > strong,
.nytte-guide-card h3 {
  color: var(--nytte-forest);
  display: block;
  font-family: var(--wp--preset--font-family--display);
  font-size: 1.15rem;
  line-height: 1.3;
  margin: 0;
}

.nytte-guide-card {
  background: #fff;
}

.nytte-guide-card p {
  color: #4a5844;
  font-size: 0.93rem;
  line-height: 1.55;
  margin: 0.65rem 0 0;
}

.nytte-guide-featured__image {
  border-radius: 22px;
  min-height: 100%;
  overflow: hidden;
}

.nytte-guide-featured__image img {
  aspect-ratio: 16 / 10;
  height: 100%;
}

@media (max-width: 900px) {
  .nytte-article-layout {
    grid-template-columns: 1fr;
  }

  .nytte-article-aside {
    position: static;
  }

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

  .nytte-article-toc {
    grid-column: 1 / -1;
  }

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

@media (max-width: 640px) {
  /* CH-13/S1: 1rem gav 16 px mod designsystemets 24. Følger nu gutter-tokenet
     som resten af sitet. */
  .nytte-article-hero,
  .nytte-article-layout,
  .nytte-related-guides > div {
    padding-left: var(--nytte-gutter, 1.5rem);
    padding-right: var(--nytte-gutter, 1.5rem);
  }

  .nytte-article-hero .wp-block-post-title {
    font-size: clamp(2.15rem, 10.8vw, 2.75rem);
  }

  .nytte-article-byline {
    align-items: flex-start;
    line-height: 1.45;
  }

  .nytte-article-layout {
    gap: 1.75rem;
  }

  .nytte-article-image img {
    border-radius: 16px;
  }

  .nytte-guide-cta {
    grid-template-columns: 1fr;
  }

  .nytte-guide-cta .nytte-button {
    text-align: center;
    white-space: normal;
  }

  .nytte-article-sidebar,
  .nytte-related-guides__grid,
  .nytte-guide-grid {
    grid-template-columns: 1fr;
  }
}

.nyttedyret-page,
.nyttedyret-search {
  padding: 0;
}

.nyttedyret-page > .wp-block-post-content {
  max-width: none;
}

.nytte-managed-content {
  color: var(--nytte-content-text);
  max-width: 100%;
  overflow-x: clip;
}

.nytte-content-hero,
.nytte-section {
  box-sizing: border-box;
  max-width: 100%;
  width: 100%;
}

.nytte-content-hero__grid > *,
.nytte-two-column > *,
.nytte-card-grid > *,
.nytte-steps > * {
  min-width: 0;
}

/* Samme diskrete lysdis som katalogets hero (.nytte-catalog-hero), så
   indholdssidernes heroer ikke står som helt flade farvefelter. Handoffen
   bruger flad farve i alle 17 heroer, så der lægges ikke billede ind —
   gradienten giver dybde uden at røre tekstkontrasten. */
.nytte-content-hero {
  background:
    radial-gradient(circle at 92% 12%, rgb(255 255 255 / 55%), transparent 26%),
    var(--wp--preset--color--leaf-pale);
  padding: clamp(2.5rem, 4.5vw, 4.25rem) max(1rem, calc((100vw - 1200px) / 2));
}

.nytte-content-hero--dark {
  /* Svagere på mørkegrønt: 55 % hvid ville slå igennem som en lys plamage. */
  background:
    radial-gradient(circle at 92% 12%, rgb(255 255 255 / 8%), transparent 30%),
    var(--wp--preset--color--forest);
  color: #bfd8c4;
}

/* Skadedyrssider med et dokumentarisk symptomfoto. Fotoet ligger som baggrund
   under en gradient i --leaf-pale (#DCE5D8), der er praktisk talt dækkende i
   venstre side, hvor brødkrummer, overskrift og lead står, og åbner mod højre.
   Teksten måles derfor fortsat mod den flade baggrundsfarve, mens fotoet
   læses som et rigtigt hero-billede. Selve fotoet peges der på fra
   skabelonen via --nytte-hero-photo, så CSS'en ikke kender de enkelte
   skadedyr. */
.nytte-content-hero--photo {
  background:
    /* Kurven holder høj dækning ud til 60 %, hvor overskrift og lead slutter,
       og åbner derefter brat til næsten rent foto. Det giver mere farve i
       højre kant end en jævn udtoning (5 % slør mod tidligere 30 %) uden at
       koste tekstkontrast. Målt på det faktiske billede bag teksten — ikke på
       background-color, som auditten bruger: overskrift 6,5-7,2:1 mod kravet
       3, lead 6,9-7,0:1 mod kravet 4,5, på tværs af de fem motiver.
       Sænkes dækningen i de tre første stop, falder overskriften hurtigt
       under 3:1; det er målt. */
    linear-gradient(
      100deg,
      rgb(220 229 216 / 96%) 0%,
      rgb(220 229 216 / 93%) 42%,
      rgb(220 229 216 / 86%) 60%,
      rgb(220 229 216 / 30%) 80%,
      rgb(220 229 216 / 5%) 100%
    ),
    var(--nytte-hero-photo) var(--nytte-hero-photo-pos, center) / cover
      no-repeat,
    var(--wp--preset--color--leaf-pale);
}

/* Den mørke hero med foto: teksten er hvid, så gradienten skal være mørk.
   Uden denne regel ville --photo lægge den lyse gradient over fotoet og
   efterlade hvid tekst på en lys flade. Samme kurve som den lyse variant,
   blot i skovgrøn. */
.nytte-content-hero--dark.nytte-content-hero--photo {
  background:
    linear-gradient(
      100deg,
      rgb(23 64 42 / 96%) 0%,
      rgb(23 64 42 / 93%) 42%,
      rgb(23 64 42 / 86%) 60%,
      rgb(23 64 42 / 30%) 80%,
      rgb(23 64 42 / 5%) 100%
    ),
    var(--nytte-hero-photo) var(--nytte-hero-photo-pos, center) / cover
      no-repeat,
    var(--wp--preset--color--forest);
}

@media (max-width: 900px) {
  .nytte-content-hero--dark.nytte-content-hero--photo {
    background:
      linear-gradient(
        to bottom,
        rgb(23 64 42 / 96%) 0%,
        rgb(23 64 42 / 93%) 62%,
        rgb(23 64 42 / 86%) 74%,
        rgb(23 64 42 / 28%) 90%,
        rgb(23 64 42 / 5%) 100%
      ),
      var(--nytte-hero-photo-sm, var(--nytte-hero-photo))
        var(--nytte-hero-photo-pos, center) / cover no-repeat,
      var(--wp--preset--color--forest);
  }
}

/* Hjælpekortet i den mørke hero havde en næsten gennemsigtig flade (10 % hvid),
   som fungerede over en ensfarvet baggrund. Med foto ligger kortet i højre
   side, hvor gradienten er åben, og den lyse tekst lå da direkte på motivet —
   målt 1,77:1 mod kravet 4,5. Kortet får derfor sin egen dækkende flade. */
.nytte-content-hero--dark.nytte-content-hero--photo .nytte-content-hero__aside {
  background: rgb(20 55 36 / 92%);
  border-color: rgb(255 255 255 / 16%);
}

/* CC BY kræver navngivning. Kreditten står på egen hvid flade, så den er
   læsbar uanset hvor lyst fotoet er under den — og så kontrastmålingen
   rammer en kendt baggrund i stedet for et billede. */
.nytte-hero-credit {
  background: #fff;
  border-radius: 999px;
  color: var(--wp--preset--color--muted);
  display: inline-block;
  font-size: 0.8125rem;
  line-height: 1.4;
  margin: 1.5rem 0 0;
  padding: 0.3rem 0.75rem;
}

.nytte-hero-credit a {
  color: var(--wp--preset--color--forest);
  text-decoration: underline;
}

/* Produktsektionen på skadedyrssiderne arver forsidens fire kolonner fra
   home.css og har ingen egen regel. Den har været gennem tre bredder: først
   `auto-fill` med et 200 px minimum, som gav fem spor à 221 px, derpå tre à
   382 px, og nu fire à 281 px. Relaterede produkter ligger på samme antal.

   Regelblokken rummede to følgeundtagelser, fordi kortene i den smalleste
   udgave kun var 224 px: kategorilinjen reserverede tre linjer, og fodrækken
   stablede pris over en fuldbred knap. Linjen afkortes nu med et
   tæller-suffiks i `ProductCard::shortenPestList()`, og kortene er brede nok
   til, at pris og knap kan stå side om side. Begge undtagelser er derfor væk.

   Bundforankringen af lagerstatus gælder alle produktkort og står i home.css
   sammen med komponenten. */

/* To hvide sektioner i træk lagde 72 px bundpolstring oven på 72 px
   toppolstring uden en farveskiftende baggrund til at retfærdiggøre
   tomrummet. Produktsektionen står derfor med sektionsafstanden alene. */
.nytte-section--white + .nytte-pest-products {
  padding-top: 0;
}

.nytte-content-hero__grid {
  align-items: center;
  display: grid;
  gap: clamp(2rem, 6vw, 5rem);
  grid-template-columns: minmax(0, 1.5fr) minmax(240px, 0.7fr);
}

.nytte-content-hero h1,
.nytte-account-hero h1 {
  color: var(--wp--preset--color--forest);
  font-family: var(--wp--preset--font-family--display);
  font-size: clamp(2.5rem, 4.5vw, 3.55rem);
  letter-spacing: -0.04em;
  line-height: 0.98;
  margin: 0.75rem 0 0.9rem;
  max-width: 850px;
}

.nytte-content-hero--dark h1 {
  color: #fff;
}

.nytte-content-hero__lead,
.nytte-account-hero__lead {
  font-size: clamp(1.1rem, 2vw, 1.25rem);
  line-height: 1.6;
  margin: 0;
  max-width: 700px;
}

.nytte-content-hero__aside {
  background: #fff;
  border: 1px solid rgba(23, 64, 42, 0.12);
  border-radius: 18px;
  box-shadow: 0 18px 50px rgba(23, 64, 42, 0.08);
  padding: 1.45rem;
}

.nytte-content-hero__aside strong {
  color: var(--wp--preset--color--forest);
  display: block;
  font-family: var(--wp--preset--font-family--display);
  font-size: 1.25rem;
  margin-bottom: 0.5rem;
}

.nytte-content-hero__aside p {
  margin: 0;
}

.nytte-breadcrumbs {
  align-items: center;
  color: #5f6e57;
  display: flex;
  flex-wrap: wrap;
  font-size: 0.875rem;
  gap: 0.55rem;
  margin-bottom: 1.5rem;
}

.nytte-breadcrumbs a {
  color: inherit;
}

.nytte-breadcrumbs strong {
  color: var(--wp--preset--color--forest);
}

.nytte-content-hero--dark .nytte-breadcrumbs strong {
  color: #fff;
}

.nytte-eyebrow {
  background: #fff;
  border-radius: 999px;
  color: var(--wp--preset--color--leaf);
  display: inline-flex;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  padding: 0.45rem 0.85rem;
  text-transform: uppercase;
}

/* Den hvide pille er tegnet til heroernes farvede flader. På en hvid sektion
   blev den en usynlig knap: målt hvid på hvid, med afrunding og polstring,
   der desuden skubbede labelen 13,6 px ind, så den ikke flugtede med
   overskriften under. Her står den som ren label. */
.nytte-section--white .nytte-eyebrow,
.nytte-prose .nytte-eyebrow {
  background: none;
  padding-inline: 0;
}

.nytte-section {
  padding: clamp(2.75rem, 5vw, 4.5rem) max(1rem, calc((100vw - 1200px) / 2));
}

.nytte-section--white {
  background: #fff;
}

/* Samme fade som sidens hero, blot uden foto: 100 grader og et hold på den
   fulde farve, indtil overskriften er passeret, så teksten aldrig står på
   overgangen. Den flade grønne flade fik sektionen til at ligne en kasse
   klistret ind mellem to cremefarvede. */
.nytte-section--soft {
  background: linear-gradient(
    100deg,
    var(--nytte-content-soft) 0%,
    var(--nytte-content-soft) 42%,
    #ecf1e6 68%,
    #f6f4ec 100%
  );
}

.nytte-section h2 {
  font-size: clamp(2rem, 4vw, 3rem);
  margin: 0 0 1rem;
}

.nytte-section__lead {
  color: #4a5844;
  font-size: 1.08rem;
  margin: 0 0 2rem;
  max-width: 760px;
}

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

.nytte-card {
  background: #fff;
  border: 1.5px solid var(--nytte-content-border);
  border-radius: 22px;
  /* Uden border-box lægges padding og ramme oven på min-height: 100%, så
     kortet bliver 50 px højere end sin gitterrække og dækker rækken under. */
  box-sizing: border-box;
  color: inherit;
  display: flex;
  flex-direction: column;
  min-height: 100%;
  overflow: hidden;
  padding: 1.5rem;
  transition: border-color 160ms ease, transform 160ms ease;
}

a.nytte-card:hover {
  border-color: var(--wp--preset--color--leaf);
  transform: translateY(-2px);
}

.nytte-card__visual {
  align-items: center;
  aspect-ratio: 8 / 5;
  background:
    linear-gradient(135deg, rgba(255,255,255,.45), transparent),
    repeating-linear-gradient(45deg, #e8eee1 0 14px, #dce5d4 14px 28px);
  border-radius: 16px;
  color: #5f6e57;
  display: flex;
  font-family: var(--wp--preset--font-family--display);
  font-size: 1.15rem;
  font-weight: 700;
  justify-content: center;
  margin-bottom: 1.35rem;
  overflow: hidden;
  text-align: center;
}

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

.nytte-card h3 {
  font-family: var(--wp--preset--font-family--display);
  font-size: 1.45rem;
  margin: 0 0 0.5rem;
}

.nytte-card p {
  color: #4a5844;
  margin: 0 0 1.2rem;
}

.nytte-card__meta {
  align-items: center;
  border-top: 1px solid var(--nytte-content-border);
  color: var(--wp--preset--color--forest);
  display: flex;
  font-size: 0.875rem;
  font-weight: 700;
  justify-content: space-between;
  margin-top: auto;
  padding-top: 1rem;
}

.nytte-two-column {
  align-items: start;
  display: grid;
  gap: clamp(2rem, 6vw, 5rem);
  grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.85fr);
}

.nytte-prose {
  color: var(--nytte-content-text);
  font-size: 1.06rem;
  line-height: 1.75;
}

.nytte-prose h2,
.nytte-prose h3 {
  margin-top: 2.2rem;
}

.nytte-callout {
  background: var(--wp--preset--color--forest);
  border-radius: 24px;
  color: #bfd8c4;
  padding: clamp(1.75rem, 4vw, 3rem);
}

/* Callouten er skovgrøn, og temaets globale linkfarve er også skovgrøn — et
   almindeligt link herinde blev derfor usynligt (målt 1:1). Links får hvid
   farve og understregning, så de ikke kun kendes på farven. Knapper har egen
   flade og skal ikke understreges. */
.nytte-callout a:not(.nytte-button) {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

/* Samme problem som linkene ovenfor, blot for knapper: .nytte-button er
   skovgrøn, og callouten er skovgrøn. Knappen havde derfor præcis samme
   flade som kassen (målt forskel 0) og lignede løs, fed tekst frem for en
   knap. Det ramte ni sider — alle seks skadedyrssider, levering, kontakt og
   fortryd aftale.

   Designhandoffet har en defineret variant til mørk baggrund: transparent
   med 1,5 px hvid ramme og en let hvid fyldning ved hover. */
.nytte-callout .nytte-button {
  background: transparent;
  border: 1.5px solid rgb(255 255 255 / 35%);
  color: #fff;
}

.nytte-callout .nytte-button:hover,
.nytte-callout .nytte-button:focus-visible {
  background: rgb(255 255 255 / 10%);
  border-color: rgb(255 255 255 / 60%);
  color: #fff;
}

/* Adressefeltet er tegnet til de juridiske siders lyse spalte. I callouten
   gav dets lyse flade sammen med calloutens lyse tekst 1,26:1. */
.nytte-callout .nytte-legal-address {
  background: rgb(255 255 255 / 10%);
  color: #d8e8c7;
}

.nytte-callout h2,
.nytte-callout h3 {
  color: #fff;
  margin-top: 0;
}

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

.nytte-step {
  background: #fff;
  border: 1px solid var(--nytte-content-border);
  border-radius: 20px;
  counter-increment: steps;
  padding: 1.5rem;
}

.nytte-step::before {
  align-items: center;
  background: var(--wp--preset--color--forest);
  border-radius: 50%;
  color: #fff;
  content: counter(steps);
  display: flex;
  font-weight: 800;
  height: 2.3rem;
  justify-content: center;
  margin-bottom: 1rem;
  width: 2.3rem;
}

.nytte-step h3 {
  font-size: 1.15rem;
  margin: 0 0 0.45rem;
}

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

.nytte-faq-groups {
  display: grid;
  gap: 3rem;
}

.nytte-faq-group h2 {
  border-bottom: 1px solid var(--nytte-content-border);
  font-size: 1.8rem;
  padding-bottom: 1rem;
}

.nytte-faq-group details {
  border-bottom: 1px solid var(--nytte-content-border);
  padding: 0;
}

.nytte-faq-group summary {
  color: var(--wp--preset--color--forest);
  cursor: pointer;
  font-size: 1.05rem;
  font-weight: 750;
  list-style: none;
  padding: 1.25rem 2rem 1.25rem 0;
  position: relative;
}

.nytte-faq-group summary::-webkit-details-marker {
  display: none;
}

.nytte-faq-group summary::after {
  content: "+";
  font-size: 1.5rem;
  position: absolute;
  right: 0;
  top: 1rem;
}

.nytte-faq-group details[open] summary::after {
  content: "−";
}

.nytte-faq-group details p {
  color: #4a5844;
  margin: 0;
  max-width: 780px;
  padding: 0 0 1.4rem;
}

.nytte-search-results {
  margin: 0;
}

.nytte-search-hero {
  background: var(--wp--preset--color--leaf-pale);
  padding: clamp(2rem, 4vw, 3.25rem) 1rem;
}

.nytte-search-hero__form {
  align-items: center;
  background: #fff;
  border: 2px solid var(--wp--preset--color--forest);
  border-radius: 999px;
  display: flex;
  gap: 0.8rem;
  max-width: 720px;
  padding: 0.55rem 0.65rem 0.55rem 1.2rem;
}

.nytte-search-hero__form input {
  background: transparent;
  border: 0;
  flex: 1;
  font: inherit;
  min-width: 0;
  outline: 0;
  padding: 0.7rem 0;
}

.nytte-search-hero__form:has(input:focus-visible) {
  border-color: var(--wp--preset--color--leaf);
  box-shadow: inset 0 0 0 1px var(--wp--preset--color--leaf);
  outline: 0;
}

.nytte-search-hero__form input:focus-visible {
  box-shadow: none;
}

.nytte-search-hero__form input::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
}

.nytte-search-hero__action {
  align-items: center;
  background: var(--wp--preset--color--forest);
  border: 0;
  border-radius: 999px;
  color: #fff;
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  font-weight: 750;
  justify-content: center;
  padding: 0.85rem 1.4rem;
  text-decoration: none;
}

.nytte-search-hero__action[data-nytte-page-search-clear] {
  background: var(--nytte-content-soft);
  color: var(--nytte-forest);
  padding: 0.65rem 1rem;
}

.nytte-search-hero__summary {
  color: #4a5844;
  margin: 1rem 0;
}

.nytte-search-suggestions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.nytte-search-suggestions a {
  background: #fff;
  border: 1px solid var(--nytte-content-border);
  border-radius: 999px;
  font-size: 0.9rem;
  font-weight: 700;
  padding: 0.5rem 0.9rem;
}

.nytte-search-layout {
  align-items: start;
  display: grid;
  gap: clamp(2rem, 5vw, 3.5rem);
  grid-template-columns: 250px minmax(0, 1fr);
  padding-bottom: 6rem;
  padding-top: 2.25rem;
}

/* Samme fejl som .nytte-article-aside, fundet under diagnosen: klaebede paa
   1rem og gik dermed heller ikke fri af den flydende header. Samme
   konvention som .nytte-faq-nav. */
.nytte-search-tabs {
  background: #fff;
  border: 1px solid var(--nytte-content-border);
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  padding: 1.25rem;
  position: sticky;
  top: calc(var(--nytte-header-height, 80px) + 1rem);
}

.nytte-search-tabs > strong {
  margin-bottom: 0.65rem;
}

.nytte-search-tabs a {
  align-items: center;
  border-radius: 12px;
  display: flex;
  font-weight: 700;
  gap: 0.4rem;
  justify-content: space-between;
  padding: 0.8rem 0.9rem;
}

.nytte-search-tabs a[aria-current="page"] {
  background: var(--wp--preset--color--forest);
  color: #fff;
}

.nytte-search-tabs small {
  color: inherit;
}

.nytte-search-content,
.nytte-search-section {
  display: grid;
  gap: 1.4rem;
}

.nytte-search-best-match {
  display: grid;
}

/* Den første sektion sad kun 22 px under bedste match-kortet, mens de
   følgende havde 87 px. Alle sektioner får nu samme luft foroven; skillelinjen
   tegnes fortsat kun mellem dem. */
.nytte-search-section {
  margin-top: 1.5rem;
}

/* Skillelinjen kræver lidt mere luft end den første sektion, men 87 px var
   for meget mod den førstes 46. */
.nytte-search-section + .nytte-search-section {
  border-top: 1px solid var(--nytte-content-border);
  padding-top: 1.75rem;
}

.nytte-search-section > header {
  align-items: end;
  display: flex;
  justify-content: space-between;
}

/* Kickeren og overskriften er søskende inde i headerens <div>, så sektionens
   grid-gap gælder ikke mellem dem; de stod med 0 px imellem. */
.nytte-search-section > header .nytte-kicker {
  margin-bottom: 0.55rem;
}

.nytte-search-section > header h2 {
  font-size: 2rem;
  margin: 0;
}

.nytte-search-section > header > span {
  background: var(--nytte-content-soft);
  border-radius: 999px;
  font-weight: 800;
  padding: 0.4rem 0.75rem;
}

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

.nytte-search-pests > a {
  align-items: center;
  background: #fff;
  border: 1.5px solid var(--nytte-content-border);
  border-radius: 18px;
  display: grid;
  gap: 1rem;
  grid-template-columns: auto 1fr auto;
  padding: 1rem;
}

.nytte-search-pests > a:hover {
  border-color: var(--wp--preset--color--leaf);
}

.nytte-search-pests__icon {
  align-items: center;
  background: var(--nytte-content-soft);
  border-radius: 14px;
  display: flex;
  font-family: var(--wp--preset--font-family--display);
  font-size: 1.2rem;
  font-weight: 800;
  height: 3rem;
  justify-content: center;
  overflow: hidden;
  width: 3rem;
}

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

.nytte-search-pests strong,
.nytte-search-pests small {
  display: block;
}

.nytte-search-pests small {
  color: #5f6e57;
  margin-top: 0.2rem;
}

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

/* minmax(0, 1fr) frem for 1fr: 1fr er minmax(auto, 1fr), og auto-minimum er
   indholdets min-content — her produktbilledets naturlige 300 px. Kolonnen
   voksede derfor efter billedet i stedet for omvendt, så billedfladen blev
   285-303 px bred i et 287 px kort og fik forskellig højde via aspect-ratio.
   Kortets overflow: hidden skjulte overløbet, så det kun sås som spring. */
.nytte-search-products .nytte-search-product {
  /* align-content: start — uden den strækker griddet sine auto-rækker, når
     kortet er højere end sit indhold (kortene flugter i højden via det ydre
     grid). Det lagde 13 px mellem billede og tekst på nogle kort, så tagget
     startede forskudt fra kort til kort. */
  align-content: start;
  grid-template-columns: minmax(0, 1fr);
}

.nytte-search-products .nytte-search-product__image {
  aspect-ratio: 4 / 3;
  min-height: 0;
}

.nytte-search-product {
  background: #fff;
  border: 1.5px solid var(--nytte-content-border);
  border-radius: 20px;
  display: grid;
  grid-template-columns: 42% minmax(0, 1fr);
  overflow: hidden;
}

.nytte-search-product.is-best-match {
  border-color: var(--wp--preset--color--forest);
  grid-column: 1 / -1;
  grid-template-columns: 150px minmax(0, 1fr) minmax(150px, auto);
}

.nytte-search-product.is-best-match .nytte-button {
  background: var(--wp--preset--color--action);
}

.nytte-search-product__image {
  background: var(--nytte-content-soft);
  min-height: 220px;
}

.nytte-search-product__image img {
  box-sizing: border-box;
  height: 100%;
  object-fit: contain;
  padding: 1rem;
  width: 100%;
}

.nytte-search-product.is-best-match .nytte-search-product__image {
  min-height: 180px;
}

.nytte-search-product__body {
  display: flex;
  flex-direction: column;
  padding: 1.4rem;
}

.nytte-search-product__body h3 {
  font-size: 1.35rem;
  margin: 0.2rem 0 0.6rem;
}

.nytte-search-product__body > p:not(.nytte-kicker) {
  color: #5f6e57;
  margin: 0 0 1rem;
}

/* Tagget reserverer to linjer og klippes ved to, så produktnavnet starter
   samme sted på alle kort uanset hvor mange kategorier produktet har. Uden
   det rykkede en tolinjers kategoriliste hele teksten nedenunder ned. */
/* Tagget reserverer to linjers højde, så produktnavnet starter samme sted på
   alle kort. Ingen line-clamp: -webkit-box med overflow: hidden klippede
   bogstaverne i venstre kant. Uden clamp kan et meget langt tag i teorien
   fylde tre linjer, men det er at foretrække frem for beskåret tekst. */
.nytte-search-products .nytte-search-product__body > .nytte-kicker {
  align-self: stretch;
  margin-bottom: 0.45rem;
  min-height: calc(2 * 1.35em);
}

/* Mockuppens produktkort i søgeresultatet har tagget som rød uppercase-tekst
   uden pille. Som pille strakte .nytte-kicker sig over hele kortbredden (flex
   column stretcher), og lange lister som »Spindemider, bladlus, trips, hvide
   fluer og sørgemyg« blev til en tre-linjers grøn blok. Samme udtryk som
   katalogkortenes kategori-eyebrow. */
.nytte-search-product__body > .nytte-kicker,
.nytte-search-product__body > .nytte-kicker:not(:first-child) {
  align-self: flex-start;
  background: none;
  color: var(--nytte-action);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.35;
  padding: 0;
}

/* Luft mellem »Bedste match«-badgen og tagget nedenunder. */
.nytte-search-product__badge + .nytte-kicker {
  margin-top: 0.75rem;
}

.nytte-search-product__badge {
  align-self: flex-start;
  background: var(--wp--preset--color--forest);
  border-radius: 999px;
  color: #fff;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  padding: 0.38rem 0.7rem;
  text-transform: uppercase;
}

.nytte-search-product__meta {
  align-items: flex-start;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  justify-content: space-between;
  margin: auto 0 1rem;
}

.nytte-search-product__meta .stock {
  color: var(--wp--preset--color--leaf);
  font-size: 0.82rem;
  margin: 0;
}

.nytte-search-product__footer {
  align-items: flex-end;
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  margin-top: auto;
}

.nytte-search-product__footer .nytte-search-product__meta {
  flex-direction: column;
  margin: 0;
}

.nytte-search-product__footer .nytte-button {
  flex: 0 0 auto;
  white-space: nowrap;
}

.nytte-search-product__action {
  align-items: flex-end;
  border-left: 1px solid var(--nytte-content-border);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  justify-content: center;
  padding: 1.4rem;
}

.nytte-search-product__action .nytte-search-product__meta {
  align-items: flex-end;
  flex-direction: column;
  margin: 0;
}

.nytte-search-product__action .nytte-button {
  white-space: nowrap;
}

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

.nytte-search-guides article {
  align-items: center;
  background: #fff;
  border: 1px solid var(--nytte-content-border);
  border-radius: 18px;
  display: grid;
  gap: 1.25rem;
  grid-template-columns: minmax(80px, 110px) minmax(0, 1fr) auto;
  padding: 1.4rem;
}

.nytte-search-guides article > p {
  color: var(--wp--preset--color--action);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  margin: 0;
  text-transform: uppercase;
}

.nytte-search-guides__copy h3 {
  font-size: 1.15rem;
  margin: 0 0 0.6rem;
}

.nytte-search-guides__copy p {
  color: #5f6e57;
  margin: 0;
}

.nytte-search-empty {
  display: grid;
  gap: 1.25rem;
}

.nytte-search-empty__rescue {
  background: var(--nytte-content-soft);
  border: 1px solid var(--nytte-content-border);
  border-radius: 22px;
  padding: clamp(2rem, 5vw, 3rem);
}

.nytte-search-empty__rescue h2 {
  margin-top: 0;
}

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

.nytte-search-empty__destinations a {
  background: #fff;
  border: 1px solid var(--nytte-content-border);
  border-radius: 18px;
  display: grid;
  gap: 0.4rem;
  padding: 1.35rem;
  text-decoration: none;
}

.nytte-search-empty__destinations span {
  color: #5f6e57;
  font-size: 0.875rem;
}

.nytte-account-hero {
  background: var(--wp--preset--color--leaf-pale);
  padding-bottom: clamp(1.75rem, 3vw, 2.5rem);
  padding-top: clamp(1.75rem, 3vw, 2.5rem);
}

.nytte-account-layout {
  align-items: start;
  display: grid;
  gap: clamp(1.5rem, 4vw, 3rem);
  grid-template-columns: minmax(0, 1fr) minmax(290px, 340px);
  /* Skabelonens main bruger layout "default", så alignwide ikke begrænses af
     WordPress. Uden denne bredde ligger login-kortet helt ud til viewporten. */
  margin-inline: auto;
  max-width: var(--nytte-content, 1200px);
  padding-bottom: clamp(4rem, 8vw, 7rem);
  padding-inline: clamp(1rem, 3vw, 1.5rem);
  padding-top: clamp(2rem, 4vw, 3rem);
}

.nytte-account-content {
  min-width: 0;
}

.woocommerce-account.logged-in .nytte-account-layout {
  display: block;
}

.woocommerce-account.logged-in .nytte-account-benefits {
  display: none;
}

.nytte-account-hero .alignwide > * {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.woocommerce-account:not(.logged-in) .nytte-account-content .woocommerce {
  box-sizing: border-box;
  max-width: none;
}

.woocommerce-account .woocommerce {
  display: grid;
  gap: 2rem;
}

.woocommerce-account.logged-in .woocommerce {
  align-items: start;
  grid-template-columns: 230px minmax(0, 1fr);
}

.woocommerce-MyAccount-navigation {
  background: #fff;
  border: 1px solid var(--nytte-content-border);
  border-radius: 20px;
  padding: 1rem;
}

.woocommerce-MyAccount-navigation ul {
  display: grid;
  gap: 0.35rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.woocommerce-MyAccount-navigation a {
  border-radius: 12px;
  display: block;
  font-weight: 700;
  padding: 0.75rem 0.9rem;
}

.woocommerce-MyAccount-navigation .is-active a {
  background: var(--wp--preset--color--forest);
  color: #fff;
}

.woocommerce-MyAccount-content,
.woocommerce-account #customer_login > div {
  background: #fff;
  border: 1px solid var(--nytte-content-border);
  border-radius: 22px;
  padding: clamp(1.5rem, 4vw, 2.5rem);
}

.woocommerce-account #customer_login {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: minmax(0, 1fr);
}

.woocommerce-account #customer_login .u-column1,
.woocommerce-account #customer_login .u-column2 {
  float: none;
  margin: 0;
  width: auto;
}

.woocommerce-account #customer_login > [hidden] {
  display: none !important;
}

.nytte-account-tabs {
  background: #e8eee5;
  border-radius: 999px;
  display: grid;
  gap: 0.25rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding: 0.25rem;
  width: min(100%, 390px);
}

.nytte-account-tab {
  background: transparent;
  border: 0;
  border-radius: 999px;
  color: var(--nytte-forest);
  cursor: pointer;
  font: inherit;
  font-weight: 800;
  min-height: 46px;
  padding: 0.65rem 1rem;
}

.nytte-account-tab[aria-selected="true"] {
  background: var(--nytte-forest);
  color: #fff;
}

.nytte-account-tab:focus-visible {
  box-shadow: 0 0 0 3px rgb(86 116 64 / 22%);
  outline: 0;
}

.nytte-account-benefits {
  display: grid;
  gap: 1rem;
  position: sticky;
  top: calc(var(--nytte-header-height, 80px) + 1.25rem);
}

.nytte-account-benefits__primary,
.nytte-account-benefits__card,
.nytte-account-benefits__note {
  border-radius: 22px;
  box-sizing: border-box;
  margin: 0;
  padding: 1.35rem;
}

.nytte-account-benefits__primary {
  background: var(--nytte-forest);
  color: #fff;
}

.nytte-account-benefits__primary .nytte-kicker {
  background: rgb(255 255 255 / 12%);
  color: #d8e8c7;
  font-size: 0.7rem;
  font-weight: 850;
  letter-spacing: 0.08em;
  margin: 0 0 0.5rem;
  text-transform: uppercase;
}

.nytte-account-benefits h2 {
  font-family: var(--wp--preset--font-family--display);
  font-size: clamp(1.3rem, 2.2vw, 1.65rem);
  line-height: 1.1;
  margin: 0;
}

.nytte-account-benefits__primary h2 {
  color: var(--nytte-white);
}

.nytte-account-benefits__primary ul {
  display: grid;
  gap: 0.7rem;
  list-style: none;
  margin: 1.1rem 0 0;
  padding: 0;
}

.nytte-account-benefits__primary li {
  display: grid;
  gap: 0.55rem;
  grid-template-columns: 20px minmax(0, 1fr);
  line-height: 1.45;
}

.nytte-account-benefits__primary li::before {
  color: #d8e8c7;
  content: "✓";
  font-weight: 900;
}

.nytte-account-benefits__card {
  background: #fff;
  border: 1px solid var(--nytte-content-border);
}

.nytte-account-benefits__card p {
  color: var(--nytte-muted);
  line-height: 1.55;
  margin: 0.65rem 0 1rem;
}

.nytte-account-benefits__cta {
  background: var(--nytte-action);
  border-radius: 999px;
  color: #fff;
  display: inline-flex;
  font-weight: 800;
  justify-content: center;
  padding: 0.75rem 1.15rem;
  text-decoration: none;
}

.nytte-account-benefits__note {
  background: var(--nytte-pale);
  color: var(--nytte-forest);
  font-size: 0.85rem;
  line-height: 1.55;
}

.nytte-account-benefits__note strong {
  color: var(--nytte-forest);
}

/* Ikke --nytte-action: handlingsrød giver 4,25:1 på --nytte-pale og ligger
   dermed under kravet på 4,5:1 for brødtekst. Den mørkere røde giver 5,4:1.
   Knapper beholder tokenets farve, fordi de har hvid tekst på rød flade; det
   er kun rød tekst på lys flade, der falder. */
.nytte-account-benefits__note a {
  color: #ad3025;
  font-weight: 750;
}

.woocommerce-account form.login,
.woocommerce-account form.register,
.woocommerce-account form.lost_reset_password {
  border: 0;
  margin: 0;
  padding: 0;
}

.woocommerce-account form.lost_reset_password {
  background: #fff;
  border: 1px solid var(--nytte-content-border);
  border-radius: 22px;
  max-width: 680px;
  padding: clamp(1.5rem, 4vw, 2.5rem);
}

.woocommerce-account form label {
  color: var(--nytte-forest);
  display: block;
  font-size: 0.84rem;
  font-weight: 800;
  margin-bottom: 0.35rem;
}

/* !important matcher commerce.css' tilgang: WooCommerce 10.9's egne
   formularstyles vinder ellers på specificitet over temaets kontostyling. */
.woocommerce-account .woocommerce-form-row input,
.woocommerce-account .woocommerce-Input {
  background: #fbfaf5 !important;
  border: 1.5px solid #d5d2c0 !important;
  border-radius: 12px !important;
  box-sizing: border-box;
  font: inherit;
  min-height: 48px;
  padding: 0.75rem 0.9rem;
  width: 100%;
}

.woocommerce-account .woocommerce-form-row input:focus,
.woocommerce-account .woocommerce-Input:focus {
  border-color: var(--nytte-leaf, #2e6b41) !important;
  box-shadow: 0 0 0 2px rgb(46 107 65 / 14%) !important;
  outline: 0;
}

.woocommerce-account .show-password-input {
  display: none !important;
}

/* Adgangskodefeltet og temaets »Vis«-knap staar paa én raekke.
   Indpakningen laves af account.js, fordi WooCommerces egen
   .password-input-span foerst tilfoejes af woocommerce.min.js — altsaa
   efter vores script. Feltet kan derfor ligge enten direkte i vores
   indpakning eller inde i Woos span, alt efter hvem der naaede frem.
   Begge tilfaelde skal kunne krympe, saa knappen faar sin plads. */
.nytte-password-field {
  align-items: center;
  display: flex;
  gap: 0.45rem;
}

.nytte-password-field > .woocommerce-Input,
.nytte-password-field > .password-input {
  flex: 1 1 0%;
  min-width: 0;
}

.woocommerce-account .password-input {
  display: flex;
  gap: 0.45rem;
}

.woocommerce-account .password-input .woocommerce-Input {
  flex: 1 1 0%;
  min-width: 0;
  width: 100%;
}

/* »Husk mig« stod som en raa 13 x 13 systemcheckbox i Arial med sort kant
   midt paa en side, hvor alt andet baerer temaets udtryk — og under
   projektets eget maal for touch-flader. accent-color farver den native
   kontrol uden at bygge en attrap, saa tastatur og skaermlaeser beholder
   den rigtige semantik. Etiketten baerer 44 px klikflade. */
.woocommerce-account .woocommerce-form-login__rememberme {
  align-items: center;
  display: inline-flex;
  gap: 0.55rem;
  line-height: 1.3;
  margin: 0;
  min-height: 44px;
  vertical-align: middle;
}

.woocommerce-account .woocommerce-form-login__rememberme input[type="checkbox"] {
  accent-color: var(--nytte-forest, #17402a);
  block-size: 1.25rem;
  flex: 0 0 auto;
  inline-size: 1.25rem;
  margin: 0;
}

.nytte-password-toggle {
  align-items: center;
  background: var(--nytte-pale);
  border: 1px solid #c9c7ba;
  border-radius: 12px;
  color: var(--nytte-forest);
  cursor: pointer;
  display: inline-flex;
  flex: 0 0 auto;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 800;
  justify-content: center;
  min-height: 2.75rem;
  padding: 0.65rem 0.8rem;
}

.nytte-password-toggle:focus-visible {
  box-shadow: 0 0 0 3px rgb(86 116 64 / 18%);
  outline: 0;
}

.woocommerce-account .woocommerce-button,
.woocommerce-account button.button {
  background: var(--wp--preset--color--forest);
  border: 0;
  border-radius: 999px;
  color: #fff;
  cursor: pointer;
  font-weight: 750;
  padding: 0.9rem 1.4rem;
}

.woocommerce-account .woocommerce-error,
.woocommerce-account .woocommerce-info,
.woocommerce-account .woocommerce-message {
  border: 1px solid;
  border-radius: 16px;
  box-sizing: border-box;
  list-style: none;
  margin: 0;
  padding: 1rem 1.1rem;
}

.woocommerce-account .woocommerce-error {
  background: #fff1ef;
  border-color: #d99b93;
  color: #79271f;
}

.woocommerce-account .woocommerce-info {
  background: #eef5ea;
  border-color: #b9ceb0;
  color: var(--nytte-forest);
}

.woocommerce-account .woocommerce-message {
  background: #edf7ef;
  border-color: #9dc8a5;
  color: #245c32;
}

.woocommerce-account .woocommerce-error::before,
.woocommerce-account .woocommerce-info::before,
.woocommerce-account .woocommerce-message::before {
  display: none;
}

.nytte-account-back {
  color: var(--nytte-action);
  display: inline-flex;
  font-weight: 800;
  margin-top: 1rem;
}

.nytte-managed-content .nytte-content-hero .nytte-breadcrumbs,
.nytte-account-hero .nytte-breadcrumbs,
.nytte-search-hero .nytte-breadcrumbs {
  display: none;
}

.nytte-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.35rem;
}

/* .nytte-button--outline er flyttet til home.css: katalogsider indlæser
   ikke content.css, og knappen blev grøn-på-grøn uden sin base. Den mørke
   hero-variant bliver her, fordi .nytte-content-hero kun findes på
   indholdssider. */

.nytte-content-hero--dark .nytte-button--outline {
  color: var(--nytte-white) !important;
}

.nytte-content-hero--dark .nytte-button--outline:hover {
  background: rgb(255 255 255 / 12%);
}

.nytte-about-stats {
  background: var(--nytte-forest);
  color: var(--nytte-white);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  padding: 1.1rem max(1rem, calc((100vw - 1200px) / 2));
}

.nytte-about-stats > div {
  border-right: 1px solid rgb(255 255 255 / 18%);
  padding: 0.25rem 1.5rem;
}

.nytte-about-stats > div:last-child {
  border-right: 0;
}

.nytte-about-stats strong,
.nytte-about-stats span {
  display: block;
}

.nytte-about-stats strong {
  font-family: var(--wp--preset--font-family--display);
  font-size: 1.35rem;
}

.nytte-about-stats span {
  color: #bfd8c4;
  font-size: 0.78rem;
  margin-top: 0.15rem;
}

.nytte-guide-search-card form {
  display: flex;
  gap: 0.55rem;
  margin-top: 0.9rem;
}

.nytte-guide-search-card input {
  border: 1px solid var(--nytte-content-border);
  border-radius: 999px;
  box-sizing: border-box;
  flex: 1;
  font: inherit;
  min-width: 0;
  padding: 0.75rem 1rem;
}

.nytte-guide-search-card button {
  background: var(--nytte-forest);
  border: 0;
  border-radius: 999px;
  color: var(--nytte-white);
  cursor: pointer;
  font: inherit;
  font-weight: 750;
  padding-inline: 1.1rem;
}

.nytte-guide-topics {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-inline: auto;
  max-width: 1200px;
  padding: 1.3rem 1rem 0;
}

.nytte-guide-topics > strong {
  margin-right: 0.3rem;
}

.nytte-guide-topics a {
  background: var(--nytte-white);
  border: 1px solid var(--nytte-content-border);
  border-radius: 999px;
  color: var(--nytte-forest);
  font-size: 0.85rem;
  font-weight: 750;
  padding: 0.55rem 0.9rem;
}

.nytte-guide-featured {
  align-items: stretch;
  display: grid;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  grid-template-columns: minmax(0, 1.1fr) minmax(300px, 0.9fr);
  padding-top: 2.25rem;
}

.nytte-guide-featured .nytte-card__visual {
  margin: 0;
}

.nytte-guide-featured article {
  align-self: center;
}

.nytte-guide-featured h2 {
  font-size: clamp(1.9rem, 3vw, 2.65rem);
}

.nytte-faq-layout {
  align-items: start;
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  grid-template-columns: 235px minmax(0, 1fr);
}

.nytte-faq-nav {
  background: var(--nytte-pale);
  border-radius: 18px;
  display: grid;
  gap: 0.25rem;
  padding: 1rem;
  position: sticky;
  top: calc(var(--nytte-header-height, 80px) + 1rem);
}

.nytte-faq-nav strong {
  margin: 0.45rem 0.75rem;
}

.nytte-faq-nav > a {
  border-radius: 10px;
  color: var(--nytte-forest);
  font-weight: 700;
  padding: 0.7rem 0.75rem;
}

.nytte-faq-nav > a:hover {
  background: var(--nytte-white);
}

.nytte-delivery-facts ul {
  display: grid;
  gap: 0.7rem;
  list-style: none;
  margin: 0.9rem 0 0;
  padding: 0;
}

.nytte-delivery-facts li {
  align-items: center;
  border-top: 1px solid var(--nytte-content-border);
  display: flex;
  font-size: 0.9rem;
  justify-content: space-between;
  padding-top: 0.7rem;
}

.nytte-guarantee-window {
  background: rgb(255 255 255 / 10%);
  border-color: rgb(255 255 255 / 16%);
  color: #d8e8c7;
}

.nytte-guarantee-window strong {
  color: var(--nytte-white);
  font-size: clamp(2.2rem, 4vw, 3.4rem);
}

.nytte-guarantee-window span {
  color: var(--nytte-white);
  display: block;
  font-weight: 800;
  margin-bottom: 0.65rem;
}

.nytte-state-page {
  margin: 0;
  padding: clamp(2rem, 6vw, 5rem) 1rem clamp(4rem, 8vw, 7rem);
}

.nytte-state-hero {
  background:
    radial-gradient(circle at 88% 12%, rgb(255 255 255 / 65%), transparent 30%),
    var(--nytte-pale);
  border: 1px solid #d5dfd0;
  border-radius: 28px;
  margin-inline: auto;
  max-width: var(--nytte-content);
  padding: clamp(2rem, 7vw, 5.5rem);
}

.nytte-state-hero h1 {
  color: var(--nytte-forest);
  font-family: var(--wp--preset--font-family--display);
  font-size: clamp(3rem, 7vw, 5.5rem);
  letter-spacing: -0.055em;
  line-height: 0.95;
  margin: 0.8rem 0 1rem;
  max-width: 820px;
  text-wrap: balance;
}

.nytte-state-hero > p:not(.nytte-kicker) {
  color: var(--nytte-content-text);
  font-size: clamp(1rem, 2vw, 1.2rem);
  line-height: 1.65;
  margin: 0;
  max-width: 700px;
}

.nytte-state-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.5rem;
}

.nytte-state-search {
  border: 0;
  cursor: pointer;
  font: inherit;
}

.nytte-state-routes {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 1.25rem auto 0;
  max-width: var(--nytte-content);
}

.nytte-state-routes a {
  background: var(--nytte-white);
  border: 1px solid var(--nytte-content-border);
  border-radius: 18px;
  color: var(--nytte-forest);
  display: block;
  min-height: 170px;
  padding: 1.25rem;
  text-decoration: none;
}

.nytte-state-routes a:hover,
.nytte-state-routes a:focus-visible {
  border-color: var(--nytte-leaf);
  box-shadow: 0 12px 30px rgb(23 64 42 / 9%);
  transform: translateY(-2px);
}

.nytte-state-routes span,
.nytte-state-routes strong,
.nytte-state-routes small {
  display: block;
}

.nytte-state-routes span {
  color: var(--nytte-action);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.nytte-state-routes strong {
  font-family: var(--wp--preset--font-family--display);
  font-size: 1.15rem;
  margin-top: 0.65rem;
}

.nytte-state-routes small {
  color: var(--nytte-muted);
  line-height: 1.5;
  margin-top: 0.45rem;
}

@media (max-width: 900px) {
  .nytte-content-hero__grid,
  .nytte-two-column,
  .nytte-search-layout,
  .nytte-account-layout,
  .nytte-guide-featured,
  .nytte-faq-layout,
  .woocommerce-account.logged-in .woocommerce {
    grid-template-columns: 1fr;
  }

  /* Én kolonne: teksten fylder nu hele bredden, så den vandrette gradient
     ville lade fotoet ligge under højre halvdel af overskriften. Fotoet
     flyttes til bunden af heroen som et bånd under indholdet. Samtidig
     hentes den lille fil, når skabelonen har leveret en. */
  .nytte-content-hero--photo {
    background:
      linear-gradient(
        to bottom,
        rgb(220 229 216 / 96%) 0%,
        rgb(220 229 216 / 93%) 62%,
        rgb(220 229 216 / 86%) 74%,
        rgb(220 229 216 / 28%) 90%,
        rgb(220 229 216 / 5%) 100%
      ),
      var(--nytte-hero-photo-sm, var(--nytte-hero-photo))
        var(--nytte-hero-photo-pos, center) / cover no-repeat,
      var(--wp--preset--color--leaf-pale);
  }

  .nytte-account-benefits {
    position: static;
  }

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

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

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

  .nytte-search-tabs {
    flex-direction: row;
    flex-wrap: wrap;
    position: static;
  }

  .nytte-faq-nav {
    display: flex;
    flex-wrap: wrap;
    position: static;
  }

  .nytte-faq-nav strong {
    flex-basis: 100%;
  }

  .nytte-search-tabs > strong {
    flex-basis: 100%;
  }
}

@media (max-width: 640px) {
  .nytte-content-hero,
  .nytte-section {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .nytte-card-grid,
  .nytte-search-pests,
  .nytte-search-products,
  .nytte-search-guides,
  .nytte-steps,
  .woocommerce-account #customer_login {
    grid-template-columns: 1fr;
  }

  .nytte-content-hero {
    padding-bottom: 2.25rem;
    padding-top: 2.25rem;
  }

  .nytte-content-hero h1,
  .nytte-account-hero h1 {
    font-size: clamp(2.15rem, 11vw, 2.85rem);
  }

  .nytte-content-hero__grid {
    gap: 1.35rem;
  }

  .nytte-content-hero__aside {
    padding: 1.15rem;
  }

  .nytte-about-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding-inline: 1rem;
  }

  .nytte-about-stats > div {
    border-bottom: 1px solid rgb(255 255 255 / 18%);
    padding: 0.75rem;
  }

  .nytte-about-stats > div:nth-child(2) {
    border-right: 0;
  }

  .nytte-about-stats > div:nth-last-child(-n + 2) {
    border-bottom: 0;
  }

  .nytte-guide-topics {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 0.25rem;
  }

  .nytte-guide-topics > * {
    flex: 0 0 auto;
  }

  .nytte-guide-search-card form {
    align-items: stretch;
    flex-direction: column;
  }

  .nytte-guide-search-card button {
    min-height: 46px;
  }

  /* Rækken kan scrolles, men fjerde emne viste kun 8 px og var reelt skjult.
     Snap gør, at et halvt synligt emne hopper helt på plads ved berøring;
     den visuelle affordance (peek eller maske) mangler stadig og kræver et
     designvalg — se CH-17. */
  .nytte-faq-nav {
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x proximity;
  }

  .nytte-faq-nav > a {
    scroll-snap-align: start;
  }

  /* Chip-rækken på mobil har ikke plads til ekspertkortet; det afsluttende
     banner dækker kontaktbehovet der. */
  .nytte-faq-nav .nytte-expert-card {
    display: none;
  }

  .nytte-faq-nav strong {
    display: none;
  }

  .nytte-search-product,
  .nytte-search-product.is-best-match {
    grid-column: auto;
    grid-template-columns: 1fr;
  }

  .nytte-search-product__action {
    align-items: stretch;
    border-left: 0;
    border-top: 1px solid var(--nytte-content-border);
    padding: 1rem 1.4rem 1.4rem;
  }

  .nytte-search-product__action .nytte-search-product__meta {
    align-items: flex-start;
  }

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

  .nytte-search-guides article,
  .nytte-search-empty__destinations {
    grid-template-columns: 1fr;
  }

  .nytte-search-product__image {
    aspect-ratio: 4 / 3;
    min-height: 0;
  }

  .nytte-search-hero__action {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .nytte-state-page {
    padding-inline: 0.75rem;
  }

  .nytte-state-hero {
    border-radius: 22px;
    padding: 1.5rem;
  }

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

  .nytte-state-routes a {
    min-height: 0;
  }
}
/* Om os: Claude Design-paritet med verificeret indhold (theme 0.12.3). */
.nytte-content-page--about {
  background: #f6f4ec;
  color: #33402f;
}

.nytte-about-hero {
  background: #e4eddf;
  border-bottom: 1px solid #d3e0cb;
}

.nytte-about-hero__inner {
  align-items: center;
  display: grid;
  gap: 3.5rem;
  grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr);
  margin: 0 auto;
  max-width: 1200px;
  padding: 3.5rem 1.5rem 3.75rem;
}

.nytte-about-hero__copy h1 {
  color: var(--nytte-forest);
  font-family: var(--wp--preset--font-family--display);
  font-size: clamp(2.75rem, 4.15vw, 3.25rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.04;
  margin: 1.25rem 0 1.125rem;
  max-width: 680px;
  text-wrap: balance;
}

.nytte-about-hero__copy > p {
  color: #4a5844;
  font-size: 1.1875rem;
  line-height: 1.55;
  margin: 0;
  max-width: 560px;
  text-wrap: pretty;
}

.nytte-about-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.75rem;
}

.nytte-about-actions .nytte-button {
  font-size: 1rem;
  min-height: 3.25rem;
  padding-inline: 1.875rem;
}

.nytte-about-actions .nytte-button--outline {
  background: #fff;
}

.nytte-about-hero__media {
  aspect-ratio: 10 / 9;
  border-radius: 24px;
  margin: 0;
  overflow: hidden;
}

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

.nytte-content-page--about .nytte-about-stats {
  background: var(--nytte-forest);
  display: block;
  padding: 0;
}

.nytte-content-page--about .nytte-about-stats > .nytte-about-stats__inner {
  border: 0;
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0 auto;
  max-width: 1200px;
  padding: 2.75rem 1.5rem;
}

.nytte-content-page--about .nytte-about-stats__inner > div {
  border: 0;
  padding: 0;
}

.nytte-content-page--about .nytte-about-stats strong {
  color: #fff;
  font-family: var(--wp--preset--font-family--display);
  font-size: 2.625rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1;
}

.nytte-content-page--about .nytte-about-stats span {
  color: #bfd8c4;
  font-size: 0.9375rem;
  line-height: 1.5;
  margin-top: 0.375rem;
}

.nytte-about-story,
.nytte-about-principles,
.nytte-about-contact,
.nytte-about-final {
  margin-left: auto;
  margin-right: auto;
  max-width: 1200px;
}

.nytte-about-story {
  align-items: start;
  display: grid;
  gap: 4rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding: 4.5rem 1.5rem 3rem;
}

.nytte-about-story h2,
.nytte-about-principles h2,
.nytte-about-process h2,
.nytte-about-contact h2,
.nytte-about-final h2 {
  color: var(--nytte-forest);
  font-family: var(--wp--preset--font-family--display);
  font-size: clamp(2rem, 3vw, 2.25rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.12;
  margin: 0;
}

.nytte-about-story__copy p {
  color: #33402f;
  font-size: 1.0625rem;
  line-height: 1.7;
  margin: 1rem 0 0;
  text-wrap: pretty;
}

.nytte-about-story__side {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.nytte-about-story__side > img {
  aspect-ratio: 16 / 10;
  border-radius: 22px;
  display: block;
  height: auto;
  object-fit: cover;
  width: 100%;
}

.nytte-about-promise {
  background: #fff;
  border: 1.5px solid var(--nytte-content-border);
  border-radius: 22px;
  padding: 1.75rem 1.875rem;
}

.nytte-about-promise span,
.nytte-about-label {
  color: var(--nytte-action);
  display: block;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.nytte-about-promise p {
  color: var(--nytte-forest);
  font-size: 1.125rem;
  font-weight: 650;
  line-height: 1.6;
  margin: 0.625rem 0 0;
}

.nytte-about-principles {
  padding: 1.5rem 1.5rem 3rem;
}

.nytte-about-principles h2 {
  margin-bottom: 2rem;
}

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

.nytte-about-principles__grid article,
.nytte-about-process__grid article {
  background: #fff;
  border: 1.5px solid var(--nytte-content-border);
  border-radius: 22px;
  min-width: 0;
  padding: 1.875rem 2rem;
}

.nytte-about-principles__grid article > span {
  color: var(--nytte-action);
  display: block;
  font-family: var(--wp--preset--font-family--display);
  font-size: 2.125rem;
  font-weight: 800;
  line-height: 1;
}

.nytte-about-principles__grid h3,
.nytte-about-process__grid h3,
.nytte-about-location h3 {
  color: var(--nytte-forest);
  font-family: var(--wp--preset--font-family--display);
  font-size: 1.1875rem;
  line-height: 1.2;
  margin: 0.875rem 0 0.5rem;
}

.nytte-about-principles__grid p,
.nytte-about-process__grid p {
  color: #4a5844;
  font-size: 0.9375rem;
  line-height: 1.6;
  margin: 0;
  text-wrap: pretty;
}

.nytte-about-process {
  background: #fff;
  border-bottom: 1px solid var(--nytte-content-border);
  border-top: 1px solid var(--nytte-content-border);
}

.nytte-about-process__inner {
  margin: 0 auto;
  max-width: 1200px;
  padding: 4.5rem 1.5rem;
}

.nytte-about-process__intro {
  margin-bottom: 2rem;
  max-width: 660px;
}

.nytte-about-process__intro > p {
  color: #4a5844;
  font-size: 1.0625rem;
  line-height: 1.6;
  margin: 0.75rem 0 0;
}

.nytte-about-process__grid article {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 1.75rem 1.875rem;
}

.nytte-about-process__grid article > span {
  align-items: center;
  background: #e4eddf;
  border-radius: 50%;
  color: var(--nytte-forest);
  display: inline-flex;
  flex: 0 0 3.5rem;
  font-family: var(--wp--preset--font-family--display);
  font-size: 1rem;
  font-weight: 800;
  height: 3.5rem;
  justify-content: center;
  width: 3.5rem;
}

.nytte-about-contact {
  align-items: start;
  display: grid;
  gap: 2rem;
  grid-template-columns: minmax(0, 1.1fr) minmax(300px, 0.9fr);
  padding: 4.5rem 1.5rem 3rem;
  scroll-margin-top: calc(var(--nytte-header-height, 80px) + 1rem);
}

.nytte-about-contact__details {
  background: #fff;
  border: 1.5px solid var(--nytte-content-border);
  border-radius: 24px;
  padding: 2.25rem 2.5rem;
}

.nytte-about-contact__details > p {
  color: #4a5844;
  line-height: 1.6;
  margin: 0.5rem 0 1.5rem;
}

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

.nytte-about-contact address,
.nytte-about-contact__columns p {
  color: #22301f;
  font-size: 1.0625rem;
  font-style: normal;
  line-height: 1.7;
  margin: 0.625rem 0 1.25rem;
}

.nytte-about-contact a:not(.nytte-button) {
  color: var(--nytte-forest);
  font-weight: 700;
}

.nytte-about-hours {
  margin: 0.35rem 0 0;
}

.nytte-about-hours > div {
  border-bottom: 1px solid #eae7da;
  display: flex;
  font-size: 0.9375rem;
  gap: 1rem;
  justify-content: space-between;
  padding: 0.5rem 0;
}

.nytte-about-hours > div:last-child {
  border-bottom: 0;
}

.nytte-about-hours dt {
  color: #4a5844;
}

.nytte-about-hours dd {
  color: #22301f;
  font-weight: 650;
  margin: 0;
}

.nytte-about-contact__side {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.nytte-about-location {
  background:
    radial-gradient(circle at 82% 18%, rgb(255 255 255 / 72%) 0 5rem, transparent 5.05rem),
    linear-gradient(135deg, #e4eddf, #d7e5d1);
  border-radius: 24px;
  min-height: 270px;
  padding: 2rem;
}

.nytte-about-location__mark {
  align-items: center;
  background: var(--nytte-forest);
  border-radius: 50%;
  color: #fff;
  display: inline-flex;
  font-size: 0.8rem;
  font-weight: 800;
  height: 3.5rem;
  justify-content: center;
  width: 3.5rem;
}

.nytte-about-location h3 {
  font-size: 1.5rem;
  margin-top: 1.25rem;
}

.nytte-about-location p {
  color: #4a5844;
  line-height: 1.55;
  margin: 0.5rem 0 1.25rem;
  max-width: 360px;
}

/* ── Kontaktformular (CH-101) ─────────────────────────────────────────────
   Ejeren bad om en simpel formular i sitets eget udtryk. Felterne følger
   kassens mønster: fast label OVER feltet, hvid flade, 1,5 px kant, 12 px
   radius, 16 px skrift (ingen iOS-zoom) og dæmpede pladsholdere. Kortet
   bruger indholdssidernes hvide kortudtryk. */
.nytte-contact-form {
  background: var(--nytte-white, #fff);
  border: 1.5px solid var(--nytte-content-border);
  border-radius: 24px;
  margin-inline: auto;
  max-width: 720px;
  padding: clamp(1.75rem, 4vw, 2.75rem);
}

.nytte-contact-form h2 {
  color: var(--nytte-forest);
  font-family: var(--wp--preset--font-family--display);
  font-size: clamp(1.6rem, 2.6vw, 2rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  margin: 0.5rem 0 0;
}

.nytte-contact-form__lead {
  color: #4a5844;
  font-size: 1.0625rem;
  line-height: 1.6;
  margin: 0.6rem 0 1.75rem;
}

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

.nytte-contact-form .nytte-field {
  display: flex;
  flex-direction: column;
  margin: 0 0 1rem;
}

.nytte-contact-form .nytte-field label {
  color: var(--nytte-forest);
  font-size: 0.875rem;
  font-weight: 600;
  margin-bottom: 0.4rem;
}

.nytte-contact-form input,
.nytte-contact-form textarea {
  background: var(--nytte-white, #fff);
  border: 1.5px solid #d5d2c0;
  border-radius: 0.75rem;
  box-sizing: border-box;
  color: #22301f;
  font-family: inherit;
  font-size: 1rem;
  padding: 0.85rem 1rem;
  width: 100%;
}

.nytte-contact-form input {
  min-height: 3.25rem;
}

.nytte-contact-form textarea {
  line-height: 1.6;
  resize: vertical;
}

.nytte-contact-form input::placeholder,
.nytte-contact-form textarea::placeholder {
  color: #cdd2c6;
  opacity: 1;
}

.nytte-contact-form input:focus,
.nytte-contact-form textarea:focus {
  border-color: var(--nytte-leaf);
  box-shadow: 0 0 0 2px rgb(46 107 65 / 14%);
  outline: 0;
}

/* Honeypot: skjult for kunden, men ikke med display:none — nogle robotter
   springer den slags felter over. */
.nytte-contact-form__hp {
  height: 0;
  left: -9999px;
  margin: 0;
  overflow: hidden;
  position: absolute;
  width: 0;
}

.nytte-contact-form__privacy {
  color: var(--nytte-muted, #6b7a63);
  font-size: 0.875rem;
  line-height: 1.55;
  margin: 0.25rem 0 1.5rem;
}

.nytte-contact-form__notice {
  border-radius: 0.875rem;
  font-size: 1rem;
  line-height: 1.55;
  margin: 0 0 1.5rem;
  padding: 0.9rem 1.1rem;
}

.nytte-contact-form__notice--ok {
  background: var(--nytte-content-soft);
  color: #235c36;
}

.nytte-contact-form__notice--fejl {
  background: #fdeceb;
  color: #8f2b20;
}

.nytte-contact-form button[type="submit"] {
  width: 100%;
}

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

/* Mockuppens kort i kontaktsektionens højre kolonne (Om os.dc.html linje
   194) er lysegrønt UDEN kant — vores stod hvidt med kant (ejerens fund
   2026-08-17). Polstringen følger nu også mockuppens 28/30 px. */
.nytte-about-contact__note {
  background: var(--nytte-content-soft);
  border: 0;
  border-radius: 22px;
  padding: 1.75rem 1.875rem;
}

.nytte-about-contact__note strong {
  color: var(--nytte-forest);
  font-size: 1.0625rem;
}

.nytte-about-contact__note p {
  color: #4a5844;
  line-height: 1.55;
  margin: 0.4rem 0 0;
}

.nytte-about-final {
  align-items: center;
  background: var(--nytte-forest);
  border-radius: 28px;
  box-sizing: border-box;
  color: #bfd8c4;
  display: grid;
  gap: 3rem;
  /* Tekstkolonnen var 624 px, hvor overskriften kræver ~750 px ved 36 px,
     så »vej« faldt ned på sin egen linje og gjorde kassen 81 px høj alene
     på titlen. Kolonnen får mere plads (ejerens ønske 2026-08-17). */
  grid-template-columns: minmax(0, 1.4fr) minmax(280px, 0.6fr);
  margin-bottom: 4.5rem;
  margin-top: 1.5rem;
  padding: 3.25rem 3.5rem;
}

/* … og skriften sættes en anelse ned (36 → 32 px), så titlen holder på én
   linje sammen med den bredere kolonne. */
.nytte-about-final h2 {
  color: #fff;
  font-size: clamp(1.6rem, 2.6vw, 2rem);
}

.nytte-about-final p {
  color: #bfd8c4;
  font-size: 1.0625rem;
  line-height: 1.6;
  margin: 0.875rem 0 0;
  max-width: 560px;
}

.nytte-about-final__actions {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.nytte-about-final__actions .nytte-button {
  justify-content: center;
  min-height: 3.375rem;
  text-align: center;
}

.nytte-about-final .nytte-button--outline {
  background: transparent;
  border-color: rgb(255 255 255 / 40%);
  color: #fff !important;
}

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

@media (max-width: 900px) {
  .nytte-about-hero__inner,
  .nytte-about-story,
  .nytte-about-contact,
  .nytte-about-final {
    grid-template-columns: minmax(0, 1fr);
  }

  .nytte-about-hero__inner {
    gap: 2rem;
  }

  .nytte-content-page--about .nytte-about-stats > .nytte-about-stats__inner,
  .nytte-about-principles__grid,
  .nytte-about-process__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .nytte-about-final {
    margin-left: 1rem;
    margin-right: 1rem;
  }
}

@media (max-width: 640px) {
  .nytte-about-hero__inner {
    gap: 1.5rem;
    padding: 2.25rem 1rem 2.5rem;
  }

  .nytte-about-hero__copy h1 {
    font-size: clamp(2.35rem, 10.75vw, 2.75rem);
    margin-top: 1rem;
  }

  .nytte-about-hero__copy > p {
    font-size: 1rem;
  }

  .nytte-about-actions {
    align-items: stretch;
    flex-direction: column;
    margin-top: 1.4rem;
  }

  .nytte-about-actions .nytte-button {
    justify-content: center;
    width: 100%;
  }

  .nytte-content-page--about .nytte-about-stats > .nytte-about-stats__inner {
    border: 0;
    gap: 0;
    padding: 1.25rem 1rem;
  }

  .nytte-content-page--about .nytte-about-stats__inner > div {
    border-bottom: 1px solid rgb(255 255 255 / 18%);
    min-width: 0;
    padding: 1rem 0.75rem;
  }

  .nytte-content-page--about .nytte-about-stats__inner > div:nth-child(odd) {
    border-right: 1px solid rgb(255 255 255 / 18%);
  }

  .nytte-content-page--about .nytte-about-stats__inner > div:nth-last-child(-n + 2) {
    border-bottom: 0;
  }

  .nytte-content-page--about .nytte-about-stats strong {
    font-size: 1.75rem;
  }

  .nytte-content-page--about .nytte-about-stats span {
    font-size: 0.8rem;
  }

  .nytte-about-story,
  .nytte-about-principles,
  .nytte-about-contact {
    gap: 2rem;
    padding: 3rem 1rem 2rem;
  }

  .nytte-about-principles {
    padding-top: 1rem;
  }

  .nytte-about-principles__grid,
  .nytte-about-process__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .nytte-about-principles__grid article,
  .nytte-about-process__grid article {
    padding: 1.5rem;
  }

  .nytte-about-process__inner {
    padding: 3rem 1rem;
  }

  .nytte-about-contact__details {
    padding: 1.5rem;
  }

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

  .nytte-about-location {
    min-height: 0;
    padding: 1.5rem;
  }

  .nytte-about-final {
    gap: 1.75rem;
    margin: 1rem 1rem 3rem;
    padding: 2rem 1.5rem;
  }
}

/* Juridiske sider: handelsbetingelser og privatlivspolitik.
   Layoutet genbruger .nytte-faq-layout og .nytte-faq-nav, så kun typografi og
   de tekstnære blokke defineres her. */

/* Designsystemets "Skrift dæmpet". --nytte-muted er for lys til 14 px tekst på
   de lysegrønne flader: målt 3,54:1 og 3,81:1 mod kravet 4,5:1. */
.nytte-legal-updated {
  color: #4a5844;
  font-size: 0.875rem;
  margin-top: 0.75rem;
}

.nytte-legal-nav a {
  font-size: 0.9375rem;
  font-weight: 600;
  padding-block: 0.55rem;
}

/* Blokken er et <span> i sideindholdet. Inline-elementer ignorerer lodrette
   margins og lader border-top og padding-top tegne oven i linjen over, så den
   skal blokificeres for at hjælpelinjen overhovedet lander rigtigt. */
.nytte-legal-help {
  border-top: 1px solid var(--nytte-border);
  color: #4a5844;
  display: block;
  font-size: 0.875rem;
  line-height: 1.5;
  margin: 0.75rem 0.75rem 0.25rem;
  padding-top: 0.9rem;
}

.nytte-legal-help strong {
  color: var(--nytte-forest);
  display: block;
  margin: 0;
}

.nytte-legal-body {
  display: grid;
  gap: 2.75rem;
  max-width: 68ch;
}

.nytte-legal-body > section {
  display: grid;
  gap: 0.9rem;
  scroll-margin-top: calc(var(--nytte-header-height, 80px) + 1.5rem);
}

.nytte-legal-body h2 {
  border-bottom: 1.5px solid var(--nytte-border);
  font-size: clamp(1.375rem, 2.4vw, 1.75rem);
  padding-bottom: 0.6rem;
}

.nytte-legal-body h3 {
  font-size: 1.0625rem;
  margin-top: 0.6rem;
}

.nytte-legal-body p,
.nytte-legal-body li {
  text-wrap: pretty;
}

.nytte-legal-body ul {
  display: grid;
  gap: 0.5rem;
  margin: 0;
  padding-left: 1.25rem;
}

.nytte-legal-address {
  background: var(--nytte-pale);
  border-radius: 14px;
  line-height: 1.6;
  padding: 0.9rem 1.1rem;
}

.nytte-legal-form {
  background: #fbfaf5;
  border: 1.5px solid var(--nytte-border);
  border-radius: 16px;
  display: grid;
  gap: 0.85rem;
  margin: 0;
  padding: 1.25rem 1.4rem;
}

.nytte-legal-form p {
  margin: 0;
}

.nytte-legal-blank {
  border-bottom: 1px solid var(--nytte-muted);
  display: inline-block;
  min-width: 9rem;
}

/* FAQ-navigationen bliver en vandret scroller på mobil. Det virker til tre
   korte emner, men ikke til tolv nummererede afsnit, så den ombrydes her. */
@media (max-width: 900px) {
  .nytte-legal-body {
    max-width: none;
  }

  .nytte-legal-nav {
    flex-wrap: wrap;
    overflow-x: visible;
    position: static;
  }

  .nytte-legal-nav strong {
    display: block;
    flex-basis: 100%;
  }

  .nytte-legal-nav a {
    flex: 0 1 auto;
  }

  .nytte-legal-help {
    flex-basis: 100%;
    margin-inline: 0.75rem;
  }
}

/* Konverteringsbanneret og ekspertkortet er globale komponenter og bor i
   home.css — katalogsider indlæser ikke content.css. */

/* Banner som direkte barn af en managed side skal selv holde gutter og
   bundluft — det står uden for .nytte-section-rammerne. */
.nytte-managed-content > .nytte-cta-banner {
  margin-bottom: clamp(2.75rem, 5vw, 4.5rem);
  margin-inline: auto;
  width: min(100% - 2 * var(--nytte-gutter, 1.5rem), 1200px);
}

/* Foto-linket i skadedyrsleksikonets hero-hjælpekort. */
.nytte-content-hero__aside .nytte-content-hero__aside-link {
  color: var(--nytte-leaf);
  display: inline-block;
  font-size: 0.9375rem;
  font-weight: 700;
  margin-top: 0.65rem;
}

.nytte-content-hero__aside .nytte-content-hero__aside-link:hover {
  color: var(--nytte-forest);
  text-decoration: underline;
}

/* Knappen under anmeld-trinnene på garantisiden. */
.nytte-anmeld-action {
  margin: 1.75rem 0 0;
}

/* Slutbanneret i guideartikler ligger i artikelkolonnen og skal ikke skubbe
   layoutet bredere end kolonnen. */
.nytte-article-main .nytte-cta-banner {
  margin-top: clamp(2rem, 4vw, 3rem);
}

/* Kicker/eyebrow-afstanden ned til overskriften bor i home.css, fordi den
   skal gælde på produkt- og katalogsider, hvor content.css ikke indlæses. */

/* Fortrydelsesfunktionen (forbrugeraftalelovens § 20 a). Formularen bruger
   sitets almindelige feltstil, men får sin egen blok, fordi den er den eneste
   flerfeltsformular uden for checkout. */
.nytte-withdrawal {
  margin-top: 1.75rem;
  max-width: 44rem;
}

.nytte-withdrawal__grid {
  display: grid;
  gap: 1.1rem 1.5rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.nytte-withdrawal .nytte-field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin: 0;
}

.nytte-withdrawal label {
  color: var(--wp--preset--color--forest);
  font-size: 0.9375rem;
  font-weight: 700;
}

.nytte-withdrawal input[type="text"],
.nytte-withdrawal input[type="email"],
.nytte-withdrawal input[type="date"],
.nytte-withdrawal textarea {
  background: var(--nytte-white);
  border: 1.5px solid var(--nytte-border);
  border-radius: 12px;
  box-sizing: border-box;
  color: var(--nytte-ink);
  font: inherit;
  min-height: 2.75rem;
  padding: 0.6rem 0.85rem;
  width: 100%;
}

.nytte-withdrawal textarea {
  min-height: 5.5rem;
  resize: vertical;
}

.nytte-withdrawal input:focus-visible,
.nytte-withdrawal textarea:focus-visible {
  border-color: var(--nytte-leaf);
  outline: 2px solid var(--nytte-leaf);
  outline-offset: 1px;
}

.nytte-withdrawal small {
  color: var(--nytte-muted);
  font-size: 0.8125rem;
}

.nytte-withdrawal__scope {
  border: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.5rem;
  margin: 1.4rem 0 0;
  padding: 0;
}

.nytte-withdrawal__scope legend {
  color: var(--wp--preset--color--forest);
  font-size: 0.9375rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
  padding: 0;
}

.nytte-withdrawal__scope label {
  align-items: center;
  display: flex;
  font-weight: 500;
  gap: 0.45rem;
  /* WCAG 2.5.8: hele etiketten er klikflade, så målet er højt nok. */
  min-height: 2.75rem;
}

.nytte-withdrawal > .nytte-field {
  margin-top: 1.1rem;
}

.nytte-withdrawal__error {
  background: #fbeae7;
  border-left: 4px solid #ad3025;
  border-radius: 6px;
  color: #7d2119;
  margin: 0 0 1.25rem;
  padding: 0.85rem 1rem;
}

/* Honeypot: skal være usynlig for mennesker, men ikke display:none, da nogle
   robotter springer skjulte felter over. */
.nytte-withdrawal__hp {
  height: 0;
  margin: 0;
  overflow: hidden;
  position: absolute;
  width: 0;
}

.nytte-withdrawal__submit {
  margin: 1.75rem 0 0;
}

.nytte-withdrawal__note {
  color: var(--nytte-muted);
  font-size: 0.875rem;
  margin: 0.75rem 0 0;
}

.nytte-withdrawal-receipt {
  background: var(--nytte-white);
  border: 1.5px solid var(--nytte-border);
  border-radius: 20px;
  margin-top: 1.75rem;
  max-width: 44rem;
  padding: 1.75rem;
}

.nytte-withdrawal-receipt h2 {
  margin-top: 0;
}

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

/* Det diagnostiske symptomfoto i skadedyrssidernes prosa. Billedet skal
   kunne holdes op mod kundens egen plante, så det får fuld spaltebredde og
   ingen beskæring ud over 16:9. Krediteringen står under billedet, fordi den
   for CC BY-kilder er en betingelse for brugsretten. */
.nytte-symptom-figur {
  margin: 1.75rem 0 0;
}

.nytte-symptom-figur img {
  border-radius: 16px;
  display: block;
  height: auto;
  width: 100%;
}

.nytte-symptom-figur figcaption {
  color: var(--nytte-muted);
  font-size: 0.8125rem;
  line-height: 1.5;
  margin-top: 0.6rem;
}

.nytte-symptom-figur figcaption a {
  color: var(--wp--preset--color--forest);
  text-decoration: underline;
}

/* Produktsidens brødkrumme kommer fra WooCommerce og har ingen egen klasse
   på det aktive led. Filteret i Storefront pakker det i <strong>, og her får
   det samme vægt og farve som sitets øvrige brødkrummer. */
.woocommerce-breadcrumb strong,
.wc-block-breadcrumbs strong {
  color: var(--wp--preset--color--forest);
  font-weight: 700;
}