.nytte-catalog-page,
.nytte-product-page {
  box-sizing: border-box;
  margin: 0;
  padding-block: clamp(1.25rem, 3vw, 2.5rem) clamp(4rem, 8vw, 7rem);
  /* CH-13/S1: uden dette rørte kort og overskrifter skærmkanten under
     containerbredden. Fuldbredde-sektioner nulstiller det selv nedenfor. */
  padding-inline: var(--nytte-gutter, 1.5rem);
}

/* Sektioner, der bevidst går til kant, skal ikke arve gutteren. */
.nytte-catalog-page > .nytte-catalog-hero,
.nytte-product-page > .nytte-catalog-hero {
  margin-inline: calc(var(--nytte-gutter, 1.5rem) * -1);
  width: calc(100% + var(--nytte-gutter, 1.5rem) * 2);
}

.nytte-catalog-page {
  padding-top: 0;
}

.nytte-catalog-page > *,
.nytte-product-page > * {
  box-sizing: border-box;
}

.nytte-catalog-page > .wc-block-breadcrumbs,
.nytte-product-page > .wc-block-breadcrumbs {
  color: var(--nytte-muted);
  font-size: 0.8125rem;
  line-height: 1.45;
  margin-bottom: 1.5rem;
  margin-inline: auto;
  max-width: var(--nytte-content);
  overflow-wrap: anywhere;
  width: 100%;
}

.nytte-catalog-page > .wc-block-breadcrumbs {
  display: none;
}

.nytte-catalog-page .woocommerce-breadcrumb,
.nytte-product-page .woocommerce-breadcrumb {
  margin: 0;
}

/* Samme fotobehandling som indholdssidernes heroer: høj dækning ud til 60 %,
   hvor overskrift og lead slutter, og derefter åbent til næsten rent foto.
   Motivet sættes fra Storefront, så CSS'en ikke kender de enkelte sider. */
.nytte-catalog-hero {
  align-items: center;
  background:
    linear-gradient(
      100deg,
      rgb(229 237 224 / 96%) 0%,
      rgb(229 237 224 / 93%) 42%,
      rgb(229 237 224 / 86%) 60%,
      rgb(229 237 224 / 30%) 80%,
      rgb(229 237 224 / 5%) 100%
    ),
    var(--nytte-hero-photo, none) center / cover no-repeat,
    radial-gradient(circle at 92% 12%, rgb(255 255 255 / 55%), transparent 26%),
    #e5ede0;
  border: 0;
  border-radius: 0;
  display: grid;
  column-gap: clamp(2rem, 5vw, 4rem);
  /* Notitsen skal kunne holde »Levende varer sendes mandag–torsdag« på én
     linje og brødteksten på to. Ved 260 px brød overskriften midt i ordet
     »mandag–torsdag«. */
  grid-template-columns: minmax(0, 1.4fr) minmax(340px, 0.95fr);
  margin: 0 auto clamp(1.75rem, 3vw, 2.25rem);
  max-width: none;
  overflow: hidden;
  padding: clamp(2rem, 3.2vw, 2.75rem)
    max(var(--nytte-gutter, 1.5rem), calc((100vw - 1200px) / 2));
  position: relative;
  row-gap: 1rem;
  width: 100%;
}

.nytte-catalog-breadcrumbs {
  grid-column: 1 / -1;
  margin: 0;
  position: relative;
  z-index: 1;
}

.nytte-catalog-hero__copy {
  max-width: 720px;
  position: relative;
  z-index: 1;
}

.nytte-catalog-hero h1 {
  color: var(--nytte-forest);
  font-family: var(--wp--preset--font-family--display);
  font-size: clamp(2.5rem, 4.5vw, 3.65rem);
  font-weight: 800;
  letter-spacing: -0.045em;
  line-height: 0.98;
  margin: 0 0 1.15rem;
  max-width: 800px;
  text-wrap: balance;
}

.nytte-catalog-hero__lead {
  color: #43503f;
  font-size: clamp(1.025rem, 1.5vw, 1.18rem);
  line-height: 1.65;
  margin: 0;
  max-width: 680px;
  text-wrap: pretty;
}

.nytte-catalog-benefits {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem 1.2rem;
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
}

.nytte-catalog-benefits li {
  align-items: center;
  color: var(--nytte-forest);
  display: flex;
  font-size: 0.875rem;
  font-weight: 700;
  gap: 0.45rem;
}

.nytte-catalog-benefits li span {
  align-items: center;
  background: var(--nytte-forest);
  border-radius: 50%;
  color: var(--nytte-white);
  display: inline-flex;
  font-size: 0.75rem;
  height: 1.2rem;
  justify-content: center;
  width: 1.2rem;
}

.nytte-catalog-hero__aside {
  align-items: flex-start;
  background: rgb(255 255 255 / 88%);
  border: 1px solid rgb(23 64 42 / 10%);
  border-radius: 20px;
  box-shadow: 0 18px 45px rgb(23 64 42 / 9%);
  display: flex;
  gap: 0.8rem;
  padding: 1.3rem;
  position: relative;
  z-index: 1;
}

.nytte-catalog-hero__aside .nytte-status-dot {
  flex: 0 0 auto;
  margin-top: 0.35rem;
}

.nytte-catalog-hero__aside strong {
  color: var(--nytte-forest);
  display: block;
  font-family: var(--wp--preset--font-family--display);
  font-size: 1rem;
  line-height: 1.3;
}

.nytte-catalog-hero__aside p {
  color: #4a5844;
  font-size: 0.8125rem;
  line-height: 1.55;
  margin: 0.45rem 0 0;
}

.nytte-catalog-layout {
  align-items: flex-start !important;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  margin-block: 0 !important;
  margin-inline: auto !important;
  max-width: var(--nytte-content);
  width: 100%;
}

.nytte-catalog-layout > .wp-block-column:first-child {
  flex: 0 0 235px;
}

.nytte-catalog-results {
  min-width: 0;
}

.nytte-catalog-filters {
  position: sticky;
  top: 7.5rem;
}

.admin-bar .nytte-catalog-filters {
  top: 9.5rem;
}

/* Mockuppen viser filtrene som selvstændige kort med 20 px imellem, ikke som
   én kasse med skillelinjer. På desktop er <details> derfor kun en teknisk
   beholder uden egen flade; under 980 px vises summary, og så samles alt
   igen til ét foldbart kort, hvor en ramme omkring giver mening. */
.nytte-catalog-filters details {
  background: none;
  border: 0;
  border-radius: 0;
}

/* Panelet renderes med `open`, så det er synligt uden JS og på desktop, hvor
   summary er skjult. Sammenfoldningen på mobil og tablet styres i site.js:
   Chrome maler ikke indholdet i et lukket <details>, heller ikke når CSS
   giver det `display: block` og en målbar højde. */

.nytte-catalog-filters summary {
  align-items: center;
  color: var(--nytte-forest);
  cursor: pointer;
  display: none;
  font-family: var(--wp--preset--font-family--display);
  font-size: 1.05rem;
  font-weight: 800;
  justify-content: space-between;
  list-style: none;
  min-height: 52px;
  padding: 0 1.1rem;
}

.nytte-catalog-filters summary::-webkit-details-marker {
  display: none;
}

.nytte-catalog-filters summary span {
  font-size: 1.2rem;
  transition: transform var(--nytte-transition);
}

.nytte-catalog-filters details[open] summary span {
  transform: rotate(45deg);
}

.nytte-catalog-filters__body {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding: 0;
}

.nytte-filter-group {
  background: var(--nytte-white);
  border: 1.5px solid var(--nytte-border);
  border-radius: 18px;
  padding: 1.25rem 1.375rem;
}

.nytte-filter-group h2 {
  color: var(--nytte-forest);
  font-family: var(--wp--preset--font-family--display);
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  margin: 0 0 0.65rem;
}

.nytte-filter-group ul {
  display: grid;
  gap: 0.2rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nytte-filter-group a {
  align-items: center;
  border-radius: 10px;
  color: #465344;
  display: flex;
  font-size: 0.875rem;
  gap: 0.7rem;
  justify-content: space-between;
  line-height: 1.25;
  min-height: 38px;
  padding: 0.45rem 0.6rem;
  text-decoration: none;
}

/* :not(.nytte-filter-chip) på hover-delen (CH-105): reglen ramte også
   »Bekæmper«-chippene, og et vægtskifte 600 → 750 gjorde hver chip
   0,6-1,2 px bredere (målt). Chippene ligger i et ombrydende flow, så
   væksten rykkede naboerne — og lå en chip ved en ombrydningskant, hoppede
   den ned på næste række, mistede hover, blev smal igen og hoppede op:
   ekstrem flimren, som ejeren så på »Hvide fluer«. Chippene har deres egen
   hover med baggrund og kantfarve, som ikke ændrer størrelse. Den aktive
   tilstand beholder vægten — den er statisk og kan ikke svinge. */
.nytte-filter-group a:hover:not(.nytte-filter-chip),
.nytte-filter-group a[aria-current="page"] {
  background: var(--nytte-pale);
  color: var(--nytte-forest);
  font-weight: 750;
}

.nytte-filter-group a small {
  color: #52604e;
  font-size: 0.75rem;
}

/* Mockuppen giver hjælpeboksen skovgrøn flade med hvid overskrift og lys
   grøn brødtekst — den eneste farvede flade i filterkolonnen, så øjet
   lander på den til sidst. Farverne er handoffens egne: #17402A, #FFFFFF og
   #BFD8C4, hvilket giver 12,0:1 for overskriften og 7,7:1 for brødteksten. */
.nytte-filter-help {
  background: var(--nytte-forest);
  border-radius: 18px;
  padding: 1.375rem;
}

.nytte-filter-help strong {
  color: var(--nytte-white);
  display: block;
  font-size: 1rem;
  margin-bottom: 0.5rem;
}

.nytte-filter-help p {
  color: #bfd8c4;
  font-size: 0.875rem;
  line-height: 1.55;
  margin: 0;
}

.nytte-catalog-toolbar {
  align-items: center;
  border-bottom: 1px solid var(--nytte-border);
  display: flex;
  justify-content: space-between;
  margin-bottom: 1.25rem;
  min-height: 54px;
  padding-bottom: 0.75rem;
}

.nytte-catalog-toolbar .woocommerce-result-count,
.nytte-catalog-toolbar__count {
  color: #566252;
  font-size: 0.875rem;
  margin: 0;
}

/* Antallet fremhæves (CH-104): fed og i skovgrøn, så tallet læses før
   resten af linjen. Markuppen kommer fra Storefront::…toolbar(). */
.nytte-catalog-toolbar__count strong {
  color: var(--nytte-forest);
  font-weight: 700;
}

.nytte-catalog-toolbar .woocommerce-ordering,
.nytte-catalog-toolbar__form {
  align-items: center;
  display: flex;
  gap: 0.55rem;
  margin: 0;
}

.nytte-catalog-toolbar__form label {
  color: var(--nytte-forest);
  font-size: 0.78rem;
  font-weight: 700;
}

.nytte-catalog-toolbar .woocommerce-ordering select,
.nytte-catalog-toolbar__form select {
  appearance: none;
  background:
    linear-gradient(45deg, transparent 50%, var(--nytte-forest) 50%)
      calc(100% - 15px) 52% / 5px 5px no-repeat,
    linear-gradient(135deg, var(--nytte-forest) 50%, transparent 50%)
      calc(100% - 10px) 52% / 5px 5px no-repeat,
    var(--nytte-white);
  border: 1px solid var(--nytte-border);
  border-radius: 999px;
  color: var(--nytte-forest);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  min-height: 42px;
  padding: 0.55rem 2.2rem 0.55rem 1rem;
}

.nytte-catalog-toolbar__form button {
  background: var(--nytte-forest);
  border: 0;
  border-radius: 999px;
  color: var(--nytte-white);
  cursor: pointer;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 800;
  min-height: 42px;
  padding: 0.55rem 0.9rem;
}

.nytte-catalog-toolbar__form button:hover,
.nytte-catalog-toolbar__form button:focus-visible {
  background: var(--nytte-leaf);
}

.nytte-js .nytte-catalog-toolbar__form button {
  display: none;
}

.nytte-catalog-results .wp-block-woocommerce-product-collection {
  margin: 0;
}

/* Kolonnerne reflower på indholdsbredde i stedet for viewport, så tabletter
   mellem 761 og 980 px ikke bliver stående med 3 klemte kolonner. */
.nytte-catalog-results .wc-block-product-template {
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important;
}

.nytte-catalog-results .wc-block-product {
  background: var(--nytte-white);
  border: 1.5px solid var(--nytte-border);
  border-radius: 20px;
  box-shadow: none;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  padding: 1rem;
  text-align: left;
  transition:
    box-shadow var(--nytte-transition),
    transform var(--nytte-transition);
}

/* Fodrækken: lagerstatus over en linje med pris til venstre og knap til højre,
   som i mockuppens produktkort. margin-top: auto flugter fodrækken på tværs af
   kort med forskellig tekstlængde. */
.nytte-catalog-results .nytte-card-foot {
  align-items: center;
  column-gap: 0.75rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  margin-top: auto !important;
  row-gap: 0.5rem;
}

/* WooCommerces »X er lagt i kurven«-kvitteringer stables i katalogets og
   produktsidens store-notices-blok og fyldte 3 × 78 = 266 px mellem hero og
   produkter, når kunden havde lagt tre varer i kurven (målt 2026-08-17).
   Kurv-draweren bekræfter allerede handlingen, så kvitteringerne er
   overflødige og skjules — men KUN `is-success`: fejl (`is-error`) og
   information (`is-info`) skal fortsat kunne nå kunden, fx hvis en vare
   ikke kan lægges i kurven. */
.nytte-catalog-page .wc-block-store-notices .wc-block-components-notice-banner.is-success,
.nytte-product-page .wc-block-store-notices .wc-block-components-notice-banner.is-success {
  display: none;
}

.nytte-catalog-results .nytte-card-foot > .nytte-stock {
  grid-column: 1 / -1;
  margin: 0;
}

/* Garantien og køleposelinjen kommer ind gennem samme filter som statussen
   og lander derfor også i fodrækkens grid. Uden dette deler de kolonne med
   prisen. CH-158: køleposelinjen manglede netop denne regel ved CH-157 og
   endte i kolonne 1 ved siden af prisen — knappen blev skubbet ned på en
   egen række og stod centreret i en kolonne, hvis bredde fulgte prisens.
   Med linjen på fuld række falder pris og knap tilbage på mockuppens
   mønster: pris i venstre 1fr-kolonne (der absorberer prisens skiftende
   bredde), knap i højre auto-kolonne med fast bredde — så flytter knappen
   sig ikke, når varianten vælges. */
.nytte-catalog-results .nytte-card-foot > .nytte-live-guarantee,
.nytte-related-products .nytte-card-foot > .nytte-live-guarantee,
.nytte-catalog-results .nytte-card-foot > .nytte-cooling-note,
.nytte-related-products .nytte-card-foot > .nytte-cooling-note {
  grid-column: 1 / -1;
  margin: 0;
}

/* Relaterede produkter bruger samme fodrække, blot i et smallere kort. */
.nytte-related-products .nytte-card-foot {
  align-items: center;
  column-gap: 0.5rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  margin-top: auto !important;
  row-gap: 0.4rem;
}

.nytte-related-products .nytte-card-foot > .nytte-stock {
  font-size: 0.8125rem;
  grid-column: 1 / -1;
  margin: 0;
}

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

.nytte-catalog-results .wp-block-woocommerce-product-image {
  background: var(--nytte-cream);
  border-radius: 14px;
  margin: 0 0 0.75rem;
  overflow: hidden;
}

.nytte-catalog-results .wp-block-woocommerce-product-image a,
.nytte-catalog-results .wc-block-components-product-image__inner-container {
  aspect-ratio: 1;
  display: block;
}

.nytte-catalog-results .wp-block-woocommerce-product-image img {
  height: 100%;
  object-fit: contain;
  padding: 0.35rem;
  width: 100%;
}

/* Designsystemets Label-rolle: 12-13 px, vægt 700, tracking 0,05-0,06em. */
.nytte-catalog-results .taxonomy-product_cat {
  color: var(--nytte-action);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.35;
  margin: 0 0 0.45rem;
  text-transform: uppercase;
}

.nytte-catalog-results .taxonomy-product_cat a {
  color: inherit;
}

.nytte-catalog-results .wp-block-post-title {
  color: var(--nytte-forest);
  font-family: var(--wp--preset--font-family--display);
  font-size: 1.0625rem !important;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.3 !important;
  margin: 0 0 0.5rem;
  text-align: left !important;
}

.nytte-catalog-results .wp-block-post-title a {
  color: inherit;
}

.nytte-catalog-results .wp-block-post-excerpt {
  color: #596655;
  font-size: 0.875rem;
  line-height: 1.5;
  margin: 0 0 0.75rem;
}

.nytte-catalog-results .wp-block-post-excerpt__excerpt {
  margin: 0;
}

.nytte-catalog-results .wp-block-woocommerce-product-price {
  color: var(--nytte-forest);
  font-family: var(--wp--preset--font-family--display);
  font-size: 1.25rem !important;
  font-weight: 800;
  margin: 0 !important;
  text-align: left !important;
}

.nytte-catalog-results .wp-block-woocommerce-product-button {
  margin: 0 !important;
}

.nytte-catalog-results .wc-block-components-product-button__button,
.nytte-related-products .wc-block-components-product-button__button {
  align-items: center;
  background: var(--nytte-forest);
  border: 0;
  border-radius: 999px;
  color: var(--nytte-white);
  display: flex;
  font-size: 0.82rem !important;
  font-weight: 750;
  justify-content: center;
  min-height: 44px;
  padding: 0.7rem 1.25rem;
  text-align: center;
}

.nytte-catalog-results .wc-block-components-product-button__button:hover,
.nytte-related-products .wc-block-components-product-button__button:hover {
  background: var(--nytte-leaf);
  color: var(--nytte-white);
}

.nytte-catalog-results .wp-block-query-pagination {
  margin-top: 2rem;
}

/* Hjælpesektionen over footeren følger designhandoffets opsætning: lys flade
   #E4EDDF, tekst til venstre og to udgange til højre — den primære til
   skadedyrsleksikonet, den sekundære til guiderne. Den var tidligere en mørk
   kasse med én rød knap, der på sortimentssiden pegede tilbage på sig selv. */
.nytte-catalog-guide {
  align-items: center;
  background: var(--nytte-pale);
  border-radius: 26px;
  color: #4a5844;
  display: grid;
  gap: clamp(2rem, 4vw, 3rem);
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  margin: clamp(3.5rem, 7vw, 6rem) auto 0;
  max-width: var(--nytte-content);
  padding: clamp(2rem, 4vw, 2.75rem) clamp(1.5rem, 4vw, 3.25rem);
  width: 100%;
}

.nytte-catalog-guide h2 {
  color: var(--nytte-forest);
  font-family: var(--wp--preset--font-family--display);
  font-size: clamp(1.6rem, 3vw, 2rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.15;
  margin: 0 0 0.75rem;
  text-wrap: balance;
}

.nytte-catalog-guide__copy {
  max-width: 520px;
}

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

.nytte-catalog-guide__copy p:last-child {
  margin-bottom: 0;
}

.nytte-catalog-guide__actions {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.nytte-catalog-guide__actions .nytte-button {
  justify-content: center;
  padding: 1.0625rem 1.875rem;
  text-align: center;
}

/* ── Bekæmper-filteret som chips ──────────────────────────────────────────
   Skadedyrene er tags og vises efter handoffets filterstil: pille, 1,5 px
   kant #C9D6C0, 8/14 px. Typelisten ovenfor beholder sin listeform. */
.nytte-filter-group--chips .nytte-filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nytte-filter-group--chips .nytte-filter-chips li {
  margin: 0;
}

.nytte-filter-group--chips .nytte-filter-chip {
  background: var(--nytte-white);
  border: 1.5px solid #c9d6c0;
  border-radius: 999px;
  color: var(--nytte-forest);
  display: inline-block;
  font-size: 0.875rem;
  font-weight: 600;
  /* Listestilen sætter min-height: 38px til rækkerne i typefilteret. Den
     gælder content-box, så pillens padding blev lagt oveni og gav 56 px mod
     mockuppens 36. Pillen skal følge sin egen tekst. */
  justify-content: initial;
  line-height: 1.2;
  min-height: 0;
  padding: 0.5rem 0.875rem;
  text-decoration: none;
  transition: background 0.15s ease, border-color 0.15s ease;
}

/* Undtag den aktive chip eksplicit. Specificiteten er her tilfældigvis ens
   med reglen nedenfor, så den aktive kun vinder på rækkefølge — det holder
   ikke, hvis reglerne flyttes. Den aktive har sin egen hover. */
.nytte-filter-group--chips .nytte-filter-chip:hover:not([aria-current="page"]) {
  background: #f2f7ef;
  border-color: var(--nytte-leaf);
}

.nytte-filter-group--chips .nytte-filter-chip[aria-current="page"] {
  background: var(--nytte-forest);
  border-color: var(--nytte-forest);
  border-width: 2px;
  color: var(--nytte-white);
}

/* Product page */
.nytte-product-hero {
  align-items: flex-start !important;
  gap: clamp(2rem, 5vw, 5rem);
  margin-block: 0 clamp(4rem, 8vw, 7rem) !important;
  margin-inline: auto !important;
  max-width: var(--nytte-content);
  width: 100%;
}

/* Mockuppens produkthero er 1fr 1fr med 56 px gap og align-items: start.
   Vi lå på 48/52 med 72 px gab, så billedet blev unødigt lille. */
.nytte-product-hero {
  align-items: flex-start !important;
  gap: 3.5rem !important;
}

.nytte-product-gallery-column {
  flex: 1 1 0 !important;
  min-width: 0;
}

/* Galleriet er kortere end resuméet på variable produkter — 546 mod 988 px —
   så det følger med ned i stedet for at efterlade et tomt felt. Toppen matcher
   filterpanelets, så den klæbende header ikke dækker billedet. */
@media (min-width: 981px) {
  .nytte-product-gallery-column {
    position: sticky;
    top: calc(7.5rem + var(--nytte-admin-bar, 0px));
  }
}

.nytte-product-summary {
  flex: 1 1 0 !important;
  min-width: 0;
  padding-top: 0.45rem;
}

/* WordPress' constrained layout satte max-width: 512px på galleriblokken, så
   billedet blev 473 px i en 596 px kolonne. Samme fælde som fri fragt-måleren
   i kurven — se NOTES.md. */
.nytte-product-gallery-column .wp-block-woocommerce-product-image-gallery {
  max-width: none;
}

.nytte-product-gallery-column .woocommerce-product-gallery {
  background: #e7eee3;
  border: 1px solid #dbe4d6;
  border-radius: 24px;
  box-sizing: border-box;
  margin: 0;
  overflow: hidden;
  padding: clamp(0.75rem, 1.4vw, 1.15rem);
  width: 100% !important;
}

.nytte-product-gallery-column .woocommerce-product-gallery__image {
  border-radius: 16px;
  overflow: hidden;
}

.nytte-product-gallery-column .woocommerce-product-gallery__image img {
  aspect-ratio: 1;
  height: auto;
  object-fit: contain;
  width: 100%;
}

/* FlexSliders miniaturer er floatede `li` uden afstand: billederne stødte
   direkte op ad hinanden med skarpe hjørner midt i et galleri, hvor både
   rammen og hovedbilledet er afrundet. Grid frem for float giver samme
   mellemrum hele vejen rundt, uanset hvor mange billeder produktet har. */
.nytte-product-gallery-column .flex-control-thumbs {
  display: grid;
  gap: 0.6rem;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  list-style: none;
  /* Samme mål som galleriets egen padding, så miniaturerne får lige så meget
     luft opad som ud til siderne. `!important` mod WooCommerces
     `.woocommerce div.product div.images .flex-control-thumbs { margin: 0 }`,
     der vejer 0-4-3 mod denne selektors 0-2-0 — uden det står miniaturerne
     klods op ad hovedbilledet. */
  margin: clamp(0.75rem, 1.4vw, 1.15rem) 0 0 !important;
  padding: 0;
}

/* `!important` mod WooCommerces egen regel: dens
   `.woocommerce div.product div.images .flex-control-thumbs li` vejer 0-4-3 og
   slår denne selektors 0-2-1. Uden det overlever `width: 25%`, som i et
   grid-spor bliver 25 % af sporet — 33 px i stedet for 132. */
.nytte-product-gallery-column .flex-control-thumbs li {
  float: none !important;
  margin: 0;
  width: auto !important;
}

/* `contain` som på hovedbilledet, så et produkt aldrig beskæres i
   miniaturen. Den hvide flade udfylder det, motivet ikke bruger. */
.nytte-product-gallery-column .flex-control-thumbs img {
  aspect-ratio: 1;
  background: #fff;
  border: 1.5px solid transparent;
  border-radius: 12px;
  box-sizing: border-box;
  cursor: pointer;
  display: block;
  height: auto;
  object-fit: contain;
  /* FlexSlider toner de fravalgte til 0,5. Med ringen nedenfor som markering
     af den viste er nedtoningen overflødig, og den gjorde motiverne svære at
     kende fra hinanden. Selektoren er 0-2-0 mod WooCommerces 0-4-4. */
  opacity: 1 !important;
  width: 100%;
}

.nytte-product-gallery-column .flex-control-thumbs img.flex-active,
.nytte-product-gallery-column .flex-control-thumbs img:hover {
  border-color: var(--nytte-forest, #17402a);
}

/* S22: prisintervallet »17,00 kr. - 100,00 kr.« blev stående, efter at
   WooCommerce havde opløst variantens faktiske pris — så prisen stod tre
   gange på siden. Intervallet skjules, når .woocommerce-variation-price har
   fået sit .price-element, dvs. når en variant er opløst. Uden
   :has()-understøttelse vises intervallet som hidtil; ingen regression. */
.nytte-product-summary:has(.woocommerce-variation-price .price)
  > .wp-block-woocommerce-product-price {
  display: none;
}

.nytte-product-summary .taxonomy-product_cat {
  color: var(--nytte-action);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  margin: 0 0 0.65rem;
  text-transform: uppercase;
}

.nytte-product-summary .taxonomy-product_cat a {
  color: inherit;
}

.nytte-product-summary > .wp-block-post-title {
  color: var(--nytte-forest);
  font-family: var(--wp--preset--font-family--display);
  font-size: clamp(2.25rem, 3.5vw, 2.625rem);
  font-weight: 800;
  letter-spacing: -0.045em;
  line-height: 0.98;
  margin: 0 0 0.85rem;
  text-wrap: balance;
}

.nytte-product-summary .wp-block-woocommerce-product-rating {
  margin: 0 0 0.8rem;
}

.nytte-product-summary > .wp-block-post-excerpt {
  color: #485545;
  font-size: clamp(1rem, 1.35vw, 1.08rem);
  line-height: 1.65;
  margin: 0 0 1.25rem;
}

.nytte-product-summary .wp-block-post-excerpt__excerpt {
  margin: 0;
}

.nytte-product-facts {
  border-block: 1px solid var(--nytte-border);
  display: grid;
  gap: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0 0 1.35rem;
  padding-block: 0.4rem;
}

.nytte-product-facts > div {
  padding: 0.7rem 0.8rem 0.7rem 0;
}

.nytte-product-facts dt {
  color: var(--nytte-muted);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.nytte-product-facts dd {
  color: var(--nytte-forest);
  font-size: 0.84rem;
  font-weight: 700;
  line-height: 1.35;
  margin: 0.25rem 0 0;
}

.nytte-product-summary > .wp-block-woocommerce-product-price {
  color: var(--nytte-forest);
  font-family: var(--wp--preset--font-family--display);
  font-size: clamp(1.65rem, 3vw, 2.25rem) !important;
  font-weight: 800;
  margin: 0 0 0.8rem;
}

.nytte-product-summary .wp-block-woocommerce-add-to-cart-form {
  background: var(--nytte-white);
  border: 1px solid var(--nytte-border);
  border-radius: 20px;
  box-shadow: 0 14px 38px rgb(23 64 42 / 7%);
  box-sizing: border-box;
  margin: 0;
  padding: 1.1rem;
}

.nytte-product-summary form.cart {
  margin: 0 !important;
}

.nytte-product-summary form.cart:not(.variations_form),
.nytte-product-summary .woocommerce-variation-add-to-cart {
  align-items: stretch;
  display: flex !important;
  gap: 0.75rem;
  width: 100%;
}

.nytte-product-summary form.cart::after {
  clear: both;
  content: "";
  display: table;
}

.nytte-product-summary form.cart:not(.variations_form)::after,
.nytte-product-summary .woocommerce-variation-add-to-cart::after {
  content: none;
}

.nytte-product-summary form.cart .quantity {
  flex: 0 0 auto;
  margin: 0 !important;
}

.nytte-product-summary form.cart .qty {
  background: var(--nytte-white);
  border: 1px solid #cfcbbf;
  border-radius: 999px;
  box-sizing: border-box;
  min-height: 48px;
  padding-inline: 0.5rem;
  width: 72px;
}

.nytte-product-summary form.cart .single_add_to_cart_button {
  align-items: center;
  background: var(--nytte-action) !important;
  border: 0;
  border-radius: 999px !important;
  box-sizing: border-box;
  color: var(--nytte-white) !important;
  display: inline-flex !important;
  float: none;
  flex: 1 1 auto;
  font-size: 1.0625rem;
  font-weight: 800;
  height: 54px;
  justify-content: center;
  min-height: 54px;
  min-width: 0;
  padding: 0 1.5rem !important;
  text-align: center;
}

.nytte-product-summary form.cart .single_add_to_cart_button:hover {
  background: #a93226 !important;
}

.nytte-product-summary form.variations_form .variations {
  border: 0;
  margin: 0 0 0.9rem;
  width: 100%;
}

.nytte-product-summary form.variations_form .variations th,
.nytte-product-summary form.variations_form .variations td {
  background: transparent;
  border: 0;
  display: block;
  padding: 0;
  text-align: left;
}

.nytte-product-summary form.variations_form .variations th {
  color: var(--nytte-forest);
  font-size: 0.82rem;
  margin-bottom: 0.35rem;
}

.nytte-product-summary form.variations_form select {
  background: var(--nytte-white);
  border: 1px solid #cfcbbf;
  border-radius: 12px;
  box-sizing: border-box;
  color: var(--nytte-forest);
  font: inherit;
  min-height: 48px;
  padding: 0.7rem 2.2rem 0.7rem 0.85rem;
  width: 100%;
}

.nytte-product-summary .reset_variations {
  color: var(--nytte-action);
  display: inline-block;
  font-size: 0.78rem;
  margin-top: 0.4rem;
}

.nytte-product-summary .single_variation_wrap {
  margin-top: 0.75rem;
}

.nytte-product-summary .woocommerce-variation-price {
  color: var(--nytte-forest);
  font-family: var(--wp--preset--font-family--display);
  font-size: 1.2rem;
  font-weight: 800;
  margin-bottom: 0.65rem;
}

.nytte-product-choice-intro {
  margin: 0.25rem 0 1rem;
}

.nytte-product-choice-intro .nytte-kicker {
  /* CH-170: var #ad3025 som sitets oevrige kickers, men lige HER laeses
     roed som en fejlbesked — »Vælg variant« i roedt ligner en advarsel om,
     at noget mangler (ejerens observation 2026-08-21). Daempet skovgroen
     som valgpanelets egen overskrift i stedet. */
  color: var(--nytte-forest, #17402a);
  font-size: 0.7rem;
  font-weight: 850;
  letter-spacing: 0.08em;
  margin: 0 0 0.35rem;
  text-transform: uppercase;
}

.nytte-product-choice-intro h2 {
  color: var(--nytte-forest);
  font-family: var(--wp--preset--font-family--display);
  font-size: clamp(1.2rem, 2.2vw, 1.5rem);
  margin: 0;
}

.nytte-product-choice-intro p:last-child {
  color: var(--nytte-muted);
  font-size: 0.9rem;
  line-height: 1.5;
  margin: 0.35rem 0 0;
}

.nytte-variation-choices {
  border: 0;
  margin: 0 0 1rem;
  min-width: 0;
  padding: 0;
}

.nytte-variation-choices legend {
  color: var(--nytte-forest);
  font-size: 0.82rem;
  font-weight: 800;
  margin-bottom: 0.55rem;
}

.nytte-variation-choices__list {
  display: grid;
  gap: 0.55rem;
}

.nytte-variation-choice {
  align-items: center;
  background: #fff;
  border: 1px solid #cfcec3;
  border-radius: 14px;
  color: var(--nytte-forest);
  cursor: pointer;
  display: grid;
  font: inherit;
  gap: 0.2rem 1rem;
  grid-template-columns: minmax(0, 1fr) auto;
  min-height: 64px;
  padding: 0.75rem 0.9rem;
  text-align: left;
  width: 100%;
}

.nytte-variation-choice:hover,
.nytte-variation-choice:focus-visible {
  border-color: var(--nytte-leaf);
  box-shadow: 0 0 0 3px rgb(86 116 64 / 12%);
  outline: 0;
}

.nytte-variation-choice[aria-checked="true"] {
  background: var(--nytte-pale);
  border-color: var(--nytte-forest);
  box-shadow: inset 0 0 0 1px var(--nytte-forest);
}

.nytte-variation-choice:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.nytte-variation-choice__name {
  font-weight: 800;
}

.nytte-variation-choice__price {
  font-family: var(--wp--preset--font-family--display);
  font-weight: 800;
  grid-column: 2;
  grid-row: 1 / span 2;
  justify-self: end;
}

.nytte-variation-choice.has-savings .nytte-variation-choice__price {
  grid-row: 1;
}

.nytte-variation-choice__saving {
  align-self: start;
  background: #e6f1df;
  border-radius: 999px;
  color: #31522b;
  font-size: 0.75rem;
  font-weight: 800;
  grid-column: 2;
  grid-row: 2;
  justify-self: end;
  line-height: 1;
  padding: 0.3rem 0.48rem;
  white-space: nowrap;
}

.nytte-variation-choice__stock {
  color: #4f5f49;
  font-size: 0.76rem;
}

.nytte-product-summary form.variations_form.is-nytte-enhanced .variations {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  display: none !important;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

.nytte-product-summary form.cart .quantity {
  align-items: center;
  background: #fff;
  border: 1px solid #cfcbbf;
  border-radius: 999px;
  box-sizing: border-box;
  display: inline-flex;
  height: 54px;
  min-height: 54px;
  overflow: hidden;
}

.nytte-product-summary form.cart .qty {
  appearance: textfield;
  border: 0;
  border-radius: 0;
  flex: 0 0 26px;
  min-height: 52px;
  padding: 0;
  text-align: center;
  width: 26px;
}

.nytte-product-summary form.cart .qty::-webkit-inner-spin-button,
.nytte-product-summary form.cart .qty::-webkit-outer-spin-button {
  appearance: none;
  margin: 0;
}

.nytte-quantity-step {
  align-items: center;
  align-self: stretch;
  background: transparent;
  border: 0;
  color: var(--nytte-forest);
  cursor: pointer;
  display: inline-flex;
  font-size: 1.15rem;
  font-weight: 800;
  justify-content: center;
  min-width: 46px;
}

.nytte-quantity-step:hover,
.nytte-quantity-step:focus-visible {
  background: var(--nytte-pale);
  outline: 0;
}

.nytte-quantity-step:disabled {
  cursor: not-allowed;
  opacity: 0.35;
}

.nytte-product-summary form.cart .single_add_to_cart_button[aria-busy="true"] {
  cursor: progress;
  opacity: 0.75;
}

.nytte-product-purchase-feedback {
  color: var(--nytte-muted);
  font-size: 0.78rem;
  line-height: 1.45;
  margin: 0.65rem 0 0;
  min-height: 1.15em;
}

.nytte-mobile-purchase-bar {
  display: none;
}

.nytte-product-summary .stock.out-of-stock {
  color: #8a2e25;
  font-weight: 800;
}

.nytte-product-unavailable {
  background: #fff7eb;
  border: 1px solid #e8cfa7;
  border-radius: 20px;
  margin: 0.5rem 0 0;
  padding: 1.1rem;
}

.nytte-product-unavailable__status {
  color: #8a4a16;
  font-size: 0.75rem;
  font-weight: 850;
  letter-spacing: 0.07em;
  margin: 0 0 0.45rem;
  text-transform: uppercase;
}

.nytte-product-unavailable h2 {
  color: var(--nytte-forest);
  font-family: var(--wp--preset--font-family--display);
  font-size: clamp(1.25rem, 2vw, 1.55rem);
  margin: 0;
}

.nytte-product-unavailable > p:not(.nytte-product-unavailable__status) {
  color: #554b3c;
  line-height: 1.55;
  margin: 0.45rem 0 0;
}

.nytte-product-alternative {
  align-items: center;
  background: #fff;
  border: 1.5px solid var(--nytte-border);
  border-radius: 20px;
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  margin-top: 1rem;
  padding: 0.85rem;
}

.nytte-product-alternative strong,
.nytte-product-alternative span {
  display: block;
}

.nytte-product-alternative strong {
  color: var(--nytte-forest);
}

.nytte-product-alternative span {
  color: var(--nytte-muted);
  font-size: 0.82rem;
  margin-top: 0.25rem;
}

.nytte-product-alternative .nytte-button {
  flex: 0 0 auto;
  white-space: nowrap;
}

.nytte-product-unavailable__catalog-link {
  color: var(--nytte-action);
  display: inline-block;
  font-size: 0.85rem;
  font-weight: 800;
  margin-top: 0.9rem;
}

/* Store Notices-blokken er det reelle barn af main; .woocommerce-notices-wrapper
   ligger ét niveau dybere, så den gamle direkte-barn-regel matchede aldrig.
   Uden den fik blokken WordPress' alignwide (1200 px, margin-inline 0) og lå
   klistret til venstre viewportkant, mens indholdet er 1248 px centreret. */
.nytte-product-page > .wc-block-store-notices,
.nytte-catalog-page > .wc-block-store-notices,
.nytte-product-page > .woocommerce-notices-wrapper,
.nytte-catalog-page > .woocommerce-notices-wrapper {
  box-sizing: border-box;
  margin-block: 0 1.25rem;
  margin-inline: auto !important;
  max-width: var(--nytte-content) !important;
  width: 100%;
}

.nytte-product-page .wc-block-components-notice-banner,
.nytte-catalog-page .wc-block-components-notice-banner {
  border-radius: 16px;
}

.nyttedyret-live-goods-note {
  background: #edf4e9;
  border: 1px solid #d2e2cc;
  border-radius: 12px;
  color: var(--nytte-forest);
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.45;
  margin: 0 0 0.8rem;
  padding: 0.75rem 0.85rem;
}

.nytte-purchase-trust {
  display: grid;
  gap: 0.5rem;
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
}

.nytte-purchase-trust li {
  align-items: center;
  color: #53604f;
  display: flex;
  font-size: 0.8rem;
  gap: 0.5rem;
}

.nytte-purchase-trust li::before {
  color: var(--nytte-leaf);
  content: "✓";
  font-weight: 900;
}

.nytte-product-guide {
  display: grid;
  gap: clamp(2rem, 5vw, 4.5rem);
  margin: 0 auto clamp(4rem, 8vw, 7rem);
  max-width: var(--nytte-content);
  width: 100%;
}

.nytte-product-guide__intro {
  background: var(--nytte-white);
  border: 1px solid var(--nytte-border);
  border-radius: 28px;
  display: grid;
  gap: clamp(2rem, 5vw, 5rem);
  grid-template-columns: minmax(0, 0.65fr) minmax(0, 1.35fr);
  padding: clamp(2rem, 5vw, 4rem);
}

.nytte-product-guide h2 {
  color: var(--nytte-forest);
  font-family: var(--wp--preset--font-family--display);
  font-size: clamp(1.75rem, 3vw, 2.65rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.05;
  margin: 0;
}

.nytte-product-guide__description {
  color: #465343;
  font-size: 1rem;
  line-height: 1.7;
}

.nytte-product-guide__description > :first-child {
  margin-top: 0;
}

.nytte-product-guide__description > :last-child {
  margin-bottom: 0;
}

.nytte-product-guide__description h2,
.nytte-product-guide__description h3 {
  font-size: 1.2rem;
  margin: 1.4rem 0 0.55rem;
}

/* CH-13/S2: 900 px gav et 169 px spring i venstrekanten mod resten af
   produktsiden, som ligger på --nytte-content. Layoutbredden flugter nu med
   siden; læsebredden begrænses separat i ch på selve teksten, så de to
   hensyn ikke skal løses med samme egenskab. */
.nytte-product-specifications,
.nytte-product-faq {
  margin-inline: auto;
  max-width: var(--nytte-content);
  width: 100%;
}

.nytte-product-specifications p,
.nytte-product-faq p {
  max-width: 68ch;
}

.nytte-product-specifications > h2,
.nytte-product-faq > h2 {
  font-size: clamp(1.7rem, 3vw, 2.25rem);
  margin-bottom: 1.2rem;
}

.nytte-product-specifications dl {
  background: var(--nytte-white);
  border: 1px solid var(--nytte-border);
  border-radius: 20px;
  margin: 0;
  overflow: hidden;
}

.nytte-product-specifications dl > div {
  display: grid;
  gap: 1rem;
  grid-template-columns: minmax(150px, 0.65fr) minmax(0, 1.35fr);
  padding: 0.9rem 1.2rem;
}

.nytte-product-specifications dl > div + div {
  border-top: 1px solid var(--nytte-border);
}

.nytte-product-specifications dt {
  color: var(--nytte-muted);
  font-size: 0.78rem;
  font-weight: 750;
}

.nytte-product-specifications dd {
  color: var(--nytte-forest);
  font-size: 0.9rem;
  font-weight: 700;
  margin: 0;
}

/* ── Specifikationer og spørgsmål side om side ────────────────────────────
   De to sektioner fyldte hver sin fulde bredde efter hinanden, hvilket gav
   meget scroll for lidt indhold. Mockuppen viser dem i to spalter. */
.nytte-product-details {
  display: grid;
  gap: clamp(1.75rem, 4vw, 3.5rem);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  margin-inline: auto;
  max-width: var(--nytte-content);
  width: 100%;
}

.nytte-product-details > * {
  margin-inline: 0;
  max-width: none;
}

/* Overskrifterne står nu over halve spalter og skal ikke fylde som en
   sektionsoverskrift i fuld bredde. */
.nytte-product-details > * > h2 {
  font-size: clamp(1.35rem, 2vw, 1.6rem);
  margin-bottom: 1rem;
}

/* Specifikationerne strammes op: ingen kasse om listen, kun tynde linjer
   mellem rækkerne, som i mockuppen. */
.nytte-product-details .nytte-product-specifications dl {
  background: none;
  border: 0;
  border-radius: 0;
  border-top: 1px solid var(--nytte-border);
}

.nytte-product-details .nytte-product-specifications dl > div {
  align-items: baseline;
  border-bottom: 1px solid var(--nytte-border);
  border-top: 0;
  gap: 1rem;
  grid-template-columns: minmax(0, 1fr) auto;
  padding: 0.8rem 0;
}

.nytte-product-details .nytte-product-specifications dt {
  font-size: 0.875rem;
  font-weight: 600;
}

.nytte-product-details .nytte-product-specifications dd {
  text-align: right;
}

/* Spørgsmålene stod som lukkede accordions. Svarene er korte nok til at stå
   åbne, så kunden ikke skal klikke for at læse dem. */
.nytte-product-faq dl {
  display: grid;
  gap: 1.25rem;
  margin: 0;
}

.nytte-product-faq dt {
  color: var(--nytte-forest);
  font-family: var(--wp--preset--font-family--display);
  font-size: 1rem;
  font-weight: 800;
  margin-bottom: 0.35rem;
}

.nytte-product-faq dd {
  color: #4f5d4c;
  font-size: 0.92rem;
  line-height: 1.65;
  margin: 0;
}

/* ── Brugstrin ────────────────────────────────────────────────────────────
   Nummererede kort med røde tal efter mockuppen. Indholdet kommer fra
   produktets eget felt; er det tomt, rendres sektionen ikke. */
/* Trinkortene er kalkfarvede som i handoffet, og sidens bund er også kalk, så
   kortene forsvandt i fladen. Sektionen får derfor en hvid flade under sig,
   præcis som anvendelsesblokken ovenfor — så er kortene synlige som kort. */
.nytte-product-steps {
  background: var(--nytte-white);
  border: 1px solid var(--nytte-border);
  border-radius: 28px;
  /* Uden border-box lagde clamp-paddingen 64 px oven på width: 100%, så
     sektionen målte 763 px i et 760 px vindue og gav vandret sidescroll på
     tablet. Temaet har ingen global reset; box-sizing sættes pr. regel. */
  box-sizing: border-box;
  margin-inline: auto;
  max-width: var(--nytte-content);
  padding: clamp(2rem, 4vw, 3rem);
  width: 100%;
}

.nytte-product-steps > h2 {
  font-size: clamp(1.5rem, 2.5vw, 1.9rem);
  margin-bottom: 1.25rem;
  margin-top: 0;
}

.nytte-product-steps__list {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
}

.nytte-product-step {
  background: var(--nytte-cream);
  border-radius: 18px;
  padding: 1.25rem 1.375rem 1.375rem;
}

.nytte-product-step__number {
  color: var(--nytte-action);
  display: block;
  font-family: var(--wp--preset--font-family--display);
  font-size: 1.6rem;
  font-weight: 800;
  line-height: 1;
  margin-bottom: 0.6rem;
}

.nytte-product-step__title {
  color: var(--nytte-forest);
  display: block;
  font-size: 0.95rem;
  font-weight: 800;
  line-height: 1.3;
  margin-bottom: 0.4rem;
}

.nytte-product-step p {
  color: #4f5d4c;
  font-size: 0.875rem;
  line-height: 1.6;
  margin: 0;
}

.nytte-related-products {
  margin-block: 0 !important;
  margin-inline: auto !important;
  max-width: var(--nytte-content);
  width: 100%;
}

.nytte-related-products > .wp-block-heading {
  font-size: clamp(1.8rem, 3vw, 2.65rem);
  margin-bottom: 1.5rem !important;
}

/* auto-fit kollapser de tomme spor, så to relaterede produkter blev 614 px
   brede med 588 px billeder, og tre blev 403 px. auto-fill beholder sporene,
   så kortene bliver 297 px uanset om der er to, tre eller fire — samme bredde
   som kategorisiden. Minimum er sat til kategorisidens 260 px, så de to gitre
   bryder ved samme vinduesbredde. (Den gamle note om 234 px stammer fra
   dengang minimum var 200 px og gav fem spor.) */
.nytte-related-products .wc-block-product-template {
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important;
}

/* Kortet skal være en flex-kolonne som kataloget. Uden det er fodrækkens
   margin-top: auto inaktiv, og fodrækkerne voksede nedad hver sin højde alt
   efter om produktet havde mængdevalg og garanti: knapperne stod målt 103 px
   forskudt i samme række. Som flex-kolonne skubbes fodrækken til bunden, så
   knapperne flugter. */
.nytte-related-products .wc-block-product {
  background: var(--nytte-white);
  border: 1.5px solid var(--nytte-border);
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  padding: 1rem;
  text-align: left;
  transition:
    box-shadow var(--nytte-transition),
    transform var(--nytte-transition);
}

.nytte-related-products .wp-block-woocommerce-product-image {
  background: var(--nytte-pale);
  border-radius: 12px;
  overflow: hidden;
}

.nytte-related-products .wp-block-woocommerce-product-image img {
  aspect-ratio: 1;
  object-fit: contain;
}

.nytte-related-products .wp-block-post-title {
  font-size: 1rem !important;
  line-height: 1.25;
}

.nytte-editor-placeholder {
  background: #edf3e9;
  border: 1px dashed #9bb195;
  border-radius: 12px;
  color: var(--nytte-forest);
  padding: 1rem;
}

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

  .nytte-catalog-hero__aside {
    max-width: 520px;
  }

  .nytte-catalog-layout {
    display: block !important;
  }

  .nytte-catalog-layout > .wp-block-column:first-child {
    margin-bottom: 1.25rem;
  }

  .nytte-catalog-filters {
    position: static;
  }

  .nytte-catalog-filters summary {
    display: flex;
  }

  /* Under 980 px foldes filtrene sammen bag én knap. Så giver det mening at
     samle dem i ét kort igen frem for tre kort, hvor det øverste bærer
     summary og de to andre svæver. */
  .nytte-catalog-filters details {
    background: var(--nytte-white);
    border: 1px solid var(--nytte-border);
    border-radius: 20px;
    overflow: hidden;
  }

  .nytte-catalog-filters details:not([open]) .nytte-catalog-filters__body {
    display: none;
  }

  .nytte-catalog-filters__body {
    border-top: 1px solid var(--nytte-border);
    display: grid;
    gap: 1.5rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 1.25rem;
  }

  .nytte-filter-group {
    background: none;
    border: 0;
    border-radius: 0;
    padding: 0;
  }

  .nytte-filter-help {
    grid-column: 1 / -1;
    margin: 0;
  }

  /* Under 981 px er galleriet ikke længere sticky, og kolonnerne må gerne
     være skæve: resuméet har mest indhold. !important matcher basisreglen. */
  .nytte-product-hero {
    gap: 2rem !important;
  }

  .nytte-product-gallery-column {
    flex: 0 0 44% !important;
  }

  .nytte-product-summary {
    flex: 1 1 auto !important;
  }
}

@media (max-width: 760px) {
  body.nytte-has-mobile-purchase-bar {
    padding-bottom: calc(98px + env(safe-area-inset-bottom)) !important;
  }

  .nytte-mobile-purchase-bar {
    background: var(--nytte-white);
    border-top: 1px solid var(--nytte-border);
    bottom: 0;
    box-shadow: 0 -10px 30px rgb(23 64 42 / 10%);
    box-sizing: border-box;
    display: block;
    left: 0;
    padding: 12px 16px calc(10px + env(safe-area-inset-bottom));
    position: fixed;
    right: 0;
    z-index: 65;
  }

  .nytte-mobile-purchase-bar__row {
    align-items: stretch;
    display: flex;
    gap: 12px;
  }

  .nytte-mobile-purchase-bar__quantity {
    align-items: center;
    border: 1px solid #cfcbbf;
    border-radius: 999px;
    box-sizing: border-box;
    display: flex;
    flex: 0 0 auto;
    height: 54px;
    overflow: hidden;
  }

  .nytte-mobile-purchase-bar__quantity button {
    align-items: center;
    align-self: stretch;
    background: transparent;
    border: 0;
    color: var(--nytte-forest);
    cursor: pointer;
    display: inline-flex;
    font: 800 1.125rem/1 var(--wp--preset--font-family--body);
    justify-content: center;
    min-width: 46px;
    padding: 0;
  }

  .nytte-mobile-purchase-bar__quantity button:disabled {
    cursor: not-allowed;
    opacity: 0.35;
  }

  .nytte-mobile-purchase-bar__quantity output {
    color: var(--nytte-forest);
    flex: 0 0 18px;
    font-size: 0.9375rem;
    font-weight: 700;
    text-align: center;
  }

  .nytte-mobile-purchase-bar__submit {
    align-items: center;
    background: var(--nytte-action);
    border: 0;
    border-radius: 999px;
    box-sizing: border-box;
    color: var(--nytte-white);
    display: inline-flex;
    flex: 1 1 auto;
    font-family: var(--wp--preset--font-family--body);
    font-size: 1rem;
    font-weight: 700;
    height: 54px;
    justify-content: center;
    min-width: 0;
    padding: 0 0.85rem;
    text-align: center;
  }

  .nytte-mobile-purchase-bar__submit:disabled {
    cursor: not-allowed;
    opacity: 0.55;
  }

  .nytte-mobile-purchase-bar__submit[aria-busy="true"] {
    cursor: progress;
    opacity: 0.75;
  }

  .nytte-mobile-purchase-bar > p {
    color: var(--nytte-muted);
    font-size: 0.8125rem;
    line-height: 1.25;
    margin: 8px 0 0;
    text-align: center;
  }

  body.nytte-has-mobile-purchase-bar
    .wp-block-woocommerce-add-to-cart-form.is-nytte-simple-purchase,
  body.nytte-has-mobile-purchase-bar
    .nytte-product-summary
    .woocommerce-variation-add-to-cart {
    display: none !important;
  }

  .nytte-catalog-page,
  .nytte-product-page {
    padding-block: 1rem 4rem;
  }

  /* CH-153: `padding-block`-shorthanden ovenfor gav katalogsiden sin
     top-padding tilbage. Reglen omkring linje 18 fjerner den bevidst, saa
     heroen ligger helt op ad headeren — men den staar tidligere i filen med
     samme specificitet og taber derfor paa mobil. Maalt: 16 px hul mellem
     header og hero paa /nyttedyr/ ved 390 px, 0 px paa desktop og 0 px paa
     skadedyrssiderne. Kun katalogsiden nulstilles; produktsiden skal
     beholde sin luft. */
  .nytte-catalog-page {
    padding-top: 0;
  }

  .nytte-catalog-page > .wc-block-breadcrumbs,
  .nytte-product-page > .wc-block-breadcrumbs {
    margin-bottom: 1rem;
  }

  .nytte-product-page > .wc-block-breadcrumbs {
    padding-inline: 1rem;
  }

  .nytte-catalog-hero {
    border-radius: 0;
    margin-bottom: 1.25rem;
    padding: 1.5rem 1rem;
  }

  .nytte-catalog-hero h1 {
    font-size: clamp(2.25rem, 11vw, 3.2rem);
  }

  .nytte-catalog-hero__lead {
    font-size: 1rem;
    line-height: 1.55;
  }

  .nytte-catalog-hero__aside {
    padding: 1rem;
  }

  .nytte-catalog-benefits {
    display: grid;
  }

  .nytte-catalog-filters__body {
    display: block;
  }

  .nytte-filter-group + .nytte-filter-group,
  .nytte-filter-help {
    border-top: 1px solid var(--nytte-border);
    margin-top: 1rem;
    padding-top: 1rem;
  }

  .nytte-catalog-toolbar {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.6rem;
  }

  .nytte-catalog-toolbar .wp-block-woocommerce-catalog-sorting {
    width: 100%;
  }

  .nytte-catalog-toolbar .woocommerce-ordering,
  .nytte-catalog-toolbar .woocommerce-ordering select,
  .nytte-catalog-toolbar__form {
    width: 100%;
  }

  .nytte-catalog-toolbar__form select {
    flex: 1;
    min-width: 0;
  }

  .nytte-catalog-guide,
  .nytte-product-guide__intro {
    border-radius: 22px;
    grid-template-columns: minmax(0, 1fr);
    padding: 1.5rem;
  }

  .nytte-product-hero {
    display: block !important;
    margin-bottom: 3.5rem !important;
  }

  .nytte-product-gallery-column {
    margin-bottom: 1.5rem !important;
    width: 100%;
  }

  .nytte-product-summary > .wp-block-post-title {
    font-size: 1.875rem;
  }

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

  .nytte-product-alternative .nytte-button {
    text-align: center;
  }

  .nytte-product-summary form.cart .quantity {
    box-sizing: border-box;
    margin: 0 0 0.65rem !important;
    width: 100%;
  }

  .nytte-product-summary form.cart {
    display: block !important;
  }

  .nytte-product-summary .woocommerce-variation-add-to-cart {
    display: block !important;
  }

  .nytte-product-summary form.cart .qty {
    flex: 1;
    width: auto;
  }

  .nytte-product-summary form.cart .single_add_to_cart_button {
    width: 100%;
  }
}

@media (max-width: 480px) {
  /* CH-155: kortet er lodret efter ejerens ønske 2026-08-21 — billedet i
     fuld kortbredde øverst, derefter navn, lagerstatus, pris og knap.
     Det afløste det vandrette kort, som var indført for at holde listen
     kort.

     CH-162: ÉN kolonne, ikke to. CH-155 valgte to kolonner for at begrænse
     scrollet (~2.050 mod ~6.100 px for 12 varer), men ejeren så resultatet
     på det live site og fandt kortene klemte ved ~165 px bredde. Én pr.
     række er hans informerede valg med scrollprisen kendt. Padding følger
     med op til 1 rem — kortet er nu ~342 px bredt og skal ikke stå med
     smalkorts-luft. */
  .nytte-catalog-results .wc-block-product-template,
  .nytte-related-products .wc-block-product-template {
    gap: 1rem;
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .nytte-catalog-results .wc-block-product,
  .nytte-related-products .wc-block-product {
    display: flex;
    flex-direction: column;
    padding: 1rem;
  }

  /* Billedet ud til kortets kanter; kortets egen padding er den eneste luft.
     Ingen `grid-row`/`align-self` mere — de hørte til det vandrette kort og
     ville i en flex-kolonne enten være uden virkning eller klemme billedet. */
  .nytte-catalog-results .wp-block-woocommerce-product-image,
  .nytte-related-products .wp-block-woocommerce-product-image {
    margin: 0 0 0.6rem;
    width: 100%;
  }

  /* Ved ~161 px kortbredde er der ikke plads til pris og knap side om side,
     så fodrækken stables og knappen fylder bredden. Gælder nu begge lister;
     tidligere var det kun de relaterede produkter. */
  .nytte-catalog-results .nytte-card-foot,
  .nytte-related-products .nytte-card-foot {
    grid-template-columns: minmax(0, 1fr);
  }

  .nytte-catalog-results .nytte-card-foot .wc-block-components-product-button__button,
  .nytte-related-products .nytte-card-foot .wc-block-components-product-button__button {
    min-height: 44px;
    min-width: 0;
    width: 100%;
  }

  /* Uddraget er fortsat for meget i et smalt kort. */
  .nytte-catalog-results .wp-block-post-excerpt {
    display: none;
  }

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

  .nytte-product-specifications dl > div {
    gap: 0.25rem;
    grid-template-columns: minmax(0, 1fr);
  }

  /* De to spalter stables, og specifikationernes værdi går tilbage til
     venstrestillet, når label og værdi står over hinanden. */
  .nytte-product-details {
    grid-template-columns: minmax(0, 1fr);
  }

  .nytte-product-details .nytte-product-specifications dl > div {
    grid-template-columns: minmax(0, 1fr);
  }

  .nytte-product-details .nytte-product-specifications dd {
    text-align: left;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nytte-catalog-results .wc-block-product {
    transition: none;
  }
}

/* ---------------------------------------------------------------------------
   Produktgalleri: lightbox
   WooCommerces PhotoSwipe og hover-zoom er slået fra i functions.php. Denne
   lightbox er temaets egen — lys, rolig flade i designsystemets farver.
   --------------------------------------------------------------------------- */

/* Hover-zoom efterlader et .zoomImg-lag hvis scriptet nogensinde skulle blive
   indlæst igen af en tredjepart. Skjul det for en sikkerheds skyld. */
.nytte-product-gallery-column .zoomImg {
  display: none !important;
}

.nytte-product-gallery-column .woocommerce-product-gallery__image a,
.nytte-product-gallery-column .woocommerce-product-gallery__image [role="button"] {
  cursor: zoom-in;
  display: block;
}

.nytte-product-gallery-column .woocommerce-product-gallery__trigger {
  align-items: center;
  background: var(--nytte-white, #fff);
  border: 1px solid var(--nytte-border, #e0ddce);
  border-radius: 999px;
  box-shadow: 0 6px 18px rgb(23 64 42 / 12%);
  display: flex;
  height: 2.75rem;
  justify-content: center;
  transition: transform 160ms ease, box-shadow 160ms ease;
  width: 2.75rem;
}

.nytte-product-gallery-column .woocommerce-product-gallery__trigger:hover {
  box-shadow: 0 10px 24px rgb(23 64 42 / 18%);
  transform: translateY(-1px);
}

.nytte-lightbox-open {
  overflow: hidden;
}

.nytte-lightbox {
  inset: 0;
  position: fixed;
  /* Samme grund som søgeoverlayet: admin-bjælken kan ikke overtrumfes. */
  top: var(--nytte-admin-bar, 0px);
  z-index: 9999;
}

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

/* display: flex/grid nedenfor overtrumfer browserens hidden-attribut, så
   skjulte kontroller skal have deres egen regel. Uden den viste lightboxen
   pile og thumbnails på produkter med kun ét billede. */
.nytte-lightbox [hidden] {
  display: none !important;
}

.nytte-lightbox__scrim {
  background: rgb(23 64 42 / 55%);
  inset: 0;
  opacity: 0;
  position: absolute;
  transition: opacity 200ms ease;
}

@supports (backdrop-filter: blur(4px)) {
  .nytte-lightbox__scrim {
    backdrop-filter: blur(6px);
    background: rgb(23 64 42 / 42%);
  }
}

.nytte-lightbox.is-open .nytte-lightbox__scrim {
  opacity: 1;
}

.nytte-lightbox__dialog {
  align-items: center;
  display: grid;
  gap: clamp(0.75rem, 2vw, 1.5rem);
  grid-template-areas:
    "prev stage next"
    "footer footer footer";
  grid-template-columns: auto minmax(0, 1fr) auto;
  height: 100%;
  margin-inline: auto;
  max-width: min(1100px, 100% - 2rem);
  opacity: 0;
  padding-block: clamp(3.5rem, 8vh, 5rem) clamp(1.25rem, 4vh, 2.25rem);
  position: relative;
  transform: scale(0.985);
  transition: opacity 200ms ease, transform 200ms ease;
}

.nytte-lightbox.is-open .nytte-lightbox__dialog {
  opacity: 1;
  transform: none;
}

.nytte-lightbox__stage {
  align-items: center;
  background: var(--nytte-white, #fff);
  border-radius: 22px;
  box-shadow: 0 24px 60px rgb(23 64 42 / 28%);
  display: flex;
  grid-area: stage;
  justify-content: center;
  margin: 0;
  min-height: 0;
  overflow: hidden;
  padding: clamp(0.75rem, 2vw, 1.5rem);
}

.nytte-lightbox__image {
  display: block;
  height: auto;
  max-height: min(72vh, 760px);
  max-width: 100%;
  object-fit: contain;
  width: auto;
}

.nytte-lightbox__close,
.nytte-lightbox__nav {
  align-items: center;
  background: var(--nytte-white, #fff);
  border: 0;
  border-radius: 999px;
  box-shadow: 0 8px 22px rgb(23 64 42 / 22%);
  color: var(--nytte-forest, #17402a);
  cursor: pointer;
  display: flex;
  flex: none;
  justify-content: center;
  transition: background 160ms ease, transform 160ms ease;
}

.nytte-lightbox__close {
  font-size: 1.6rem;
  height: 3rem;
  line-height: 1;
  position: absolute;
  right: 0;
  top: clamp(0.75rem, 3vh, 1.5rem);
  width: 3rem;
}

.nytte-lightbox__nav {
  font-size: 1.9rem;
  height: 3.25rem;
  line-height: 1;
  width: 3.25rem;
}

.nytte-lightbox__nav--prev {
  grid-area: prev;
}

.nytte-lightbox__nav--next {
  grid-area: next;
}

.nytte-lightbox__close:hover,
.nytte-lightbox__nav:hover {
  background: var(--nytte-pale, #e4eddf);
  transform: translateY(-1px);
}

.nytte-lightbox__close:focus-visible,
.nytte-lightbox__nav:focus-visible,
.nytte-lightbox__thumb:focus-visible {
  outline: 3px solid var(--nytte-white, #fff);
  outline-offset: 3px;
}

.nytte-lightbox__footer {
  align-items: center;
  display: grid;
  gap: 0.75rem;
  grid-area: footer;
  justify-items: center;
}

.nytte-lightbox__counter {
  color: var(--nytte-white, #fff);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  margin: 0;
  text-transform: uppercase;
}

.nytte-lightbox__thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
  max-width: 100%;
}

.nytte-lightbox__thumb {
  background: rgb(255 255 255 / 22%);
  border: 2px solid transparent;
  border-radius: 12px;
  cursor: pointer;
  height: 3.5rem;
  overflow: hidden;
  padding: 0;
  transition: border-color 160ms ease, opacity 160ms ease;
  width: 3.5rem;
}

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

.nytte-lightbox__thumb.is-active {
  border-color: var(--nytte-white, #fff);
}

.nytte-lightbox__thumb:not(.is-active) {
  opacity: 0.65;
}

.nytte-lightbox__thumb:hover {
  opacity: 1;
}

@media (max-width: 780px) {
  .nytte-lightbox__dialog {
    grid-template-areas:
      "stage stage stage"
      "prev footer next";
    grid-template-columns: auto minmax(0, 1fr) auto;
    max-width: calc(100% - 1.5rem);
  }

  .nytte-lightbox__nav,
  .nytte-lightbox__close {
    height: 2.875rem;
    width: 2.875rem;
  }

  .nytte-lightbox__image {
    max-height: 62vh;
  }

  .nytte-lightbox__thumb {
    height: 3rem;
    width: 3rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nytte-lightbox__scrim,
  .nytte-lightbox__dialog,
  .nytte-lightbox__close,
  .nytte-lightbox__nav,
  .nytte-lightbox__thumb {
    transition: none;
  }

  .nytte-lightbox__dialog {
    transform: none;
  }
}

/* Ét billede: dialogen skal ikke reservere plads til pilekolonnerne. */
.nytte-lightbox--single .nytte-lightbox__dialog {
  grid-template-areas: "stage";
  grid-template-columns: minmax(0, 1fr);
  padding-bottom: clamp(2rem, 6vh, 3.5rem);
}

@media (max-width: 780px) {
  .nytte-lightbox--single .nytte-lightbox__dialog {
    grid-template-areas: "stage";
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Lagerstatus-komponenten defineres i home.css, fordi den er global.
   Kun katalogspecifik placering hører hjemme her. */
@media (max-width: 480px) {
  /* Kortene er vandrette under 480 px; status skal blive i tekstkolonnen. */
  /* Statussen ligger nu inde i fodrækken og skal spænde dens to kolonner,
     ikke tvinges i kortets kolonne 2. */
  .nytte-catalog-results .nytte-stock {
    grid-column: 1 / -1;
  }

  /* I det vandrette kort er der ikke plads til pris og knap side om side:
     prisintervaller som »17,00 kr. - 1.065,00 kr.« pressede prisen ned til
     25 px. Fodrækken stables, og knappen fylder bredden. */
  .nytte-catalog-results .nytte-card-foot {
    grid-template-columns: minmax(0, 1fr);
  }

  .nytte-catalog-results .nytte-card-foot .wc-block-components-product-button__button {
    width: 100%;
  }
}

/* ── Relaterede produkter: fodrækken følger kataloget ─────────────────────
   Den stablede fodrække og den nedskalerede knap stammer fra dengang kortet
   var 208 px bredt. Med auto-fill er kortet 297 px som på kategorisiden, så
   pris og knap kan stå side om side igen. Prisen holdes på én linje, så
   »fra 19,00 kr.« ikke bryder i de 127 px, kolonnen giver. */
.nytte-related-products .nytte-card-foot > .wp-block-woocommerce-product-price {
  white-space: nowrap;
}

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

/* Billederne havde forskellig højde — 233 px mod 208 px — så det første kort
   skubbede titel, lagerstatus og fodrække ned i forhold til naboerne. Et fast
   kvadratisk forhold får alle fire kort til at flugte. */
.nytte-related-products .wp-block-woocommerce-product-image {
  aspect-ratio: 1 / 1;
  display: block;
  overflow: hidden;
}

.nytte-related-products .wp-block-woocommerce-product-image img {
  height: 100%;
  object-fit: contain;
  width: 100%;
}

/* Katalogets købsknap må gerne fylde mere; mockuppens er bredere end den
   tekstbrede knap, WooCommerce leverer. Knappen målte 93 px i de relaterede
   kort, fordi Woos egen `width: auto` har samme specificitet som temaets
   `width: 100%` og indlæses senere. min-width afgøres ikke af den strid, og
   fodrækkens auto-spor lægger sig om de 136 px. */
.nytte-catalog-results .wc-block-components-product-button__button,
.nytte-related-products .wc-block-components-product-button__button {
  min-width: 8.5rem;
}

/* Samme touch-mål som mængdepillerne; se home.css. */
.nytte-filter-group--chips .nytte-filter-chips {
  row-gap: 0.75rem;
}

.nytte-filter-group--chips .nytte-filter-chip {
  position: relative;
}

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

/* Den aktive kategori skal også reagere på musen uden at tabe kontrasten. */
.nytte-filter-group--chips .nytte-filter-chip[aria-current="page"]:hover {
  background: var(--nytte-leaf);
  border-color: var(--nytte-leaf);
}