/* Uniwear Concept 2: sektionerne, del 3 (Settings > Scripts; stylesheetet "Uniwear Concept 2 sektioner 3", efter
   "Uniwear Concept 2 sektioner 2"). Styres i repo: kilden er denne fil, pushes med MCP cms_set_site_css med sourcePath
   "EasyDAL/Setup/SiteCss/uniwear/concept2-sections-3.css". Delt fra concept2-sections-2.css, som er tæt på grænsen på
   200 KB pr. site-stylesheet. Reglerne her kommer efter del 2 og bygger videre på dens regler for de samme mønstre.
   Samme regler: hver regel afgrænset med [data-pattern=...]; grundlaget står i concept2.css. Ret ikke indholdet med SQL. */

/* ---- chooser.tabs ---- */

/* Ikonet er svarets (mønstrets icon-slot), men vises kun i kortet. */
[data-pattern="chooser.tabs"] [data-part="need-icon"].c-icon {
  display: none;
}

/* Kortene med indhold (Template02/wwwroot/js/concept2/materialeguide.js, data-c2-cards; handoff .mg-ncard): ikonet i en
   rund chip, titlen forneden, svarets sætning og de to stofprøver med svaret over en hårfin streg. Uden scriptet står
   kortene med titlen alene. */
[data-pattern="chooser.tabs"] > .c-tabs > .c-tabs-list[data-c2-cards] > .c-tab {
  flex-direction: column;
  align-items: flex-start;
  min-height: 320px;
  padding: clamp(22px, 2.4vw, 32px);
}

[data-pattern="chooser.tabs"] > .c-tabs > .c-tabs-list[data-c2-cards] > .c-tab::after {
  top: clamp(22px, 2.4vw, 32px);
  right: clamp(22px, 2.4vw, 32px);
}

[data-pattern="chooser.tabs"] .c2-need-ic {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: var(--uw-white);
  box-shadow: inset 0 0 0 1px var(--c-border, var(--c-color-border));
  color: var(--uw-ink);
  transition: background-color 0.4s, color 0.4s, box-shadow 0.4s, transform 0.6s var(--uw-ease);
}

[data-pattern="chooser.tabs"] .c2-need-ic svg {
  width: 26px;
  height: 26px;
  stroke-width: 1.6;
}

[data-pattern="chooser.tabs"] .c-tab[aria-selected="true"] .c2-need-ic {
  background: var(--uw-ink);
  box-shadow: inset 0 0 0 1px var(--uw-ink);
  color: var(--uw-paper);
  transform: rotate(-8deg);
}

[data-pattern="chooser.tabs"] .c2-need-t {
  margin-top: auto;
  padding-top: 40px;
}

[data-pattern="chooser.tabs"] :is(.c2-need-q, .c2-need-mats) {
  font-family: var(--c-font-sans);
  font-variation-settings: normal;
  letter-spacing: 0;
}

[data-pattern="chooser.tabs"] .c2-need-q {
  margin-top: 10px;
  max-width: 30ch;
  font-size: 15.5px;
  font-weight: 400;
  line-height: 1.55;
  color: var(--uw-body);
}

[data-pattern="chooser.tabs"] .c2-need-mats {
  display: flex;
  align-items: center;
  gap: var(--c-space-xs);
  width: 100%;
  margin-top: 20px;
  padding-top: var(--c-space-sm);
  border-top: 1px solid var(--c-border, var(--c-color-border));
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.3;
}

[data-pattern="chooser.tabs"] .c2-duo {
  display: flex;
}

[data-pattern="chooser.tabs"] .c2-duo .c2-sw {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  box-shadow: 0 0 0 2px var(--uw-paper), inset 0 0 0 1px color-mix(in srgb, var(--uw-ink) 6%, transparent);
}

[data-pattern="chooser.tabs"] .c2-duo .c2-sw + .c2-sw {
  margin-left: -9px;
}

[data-pattern="chooser.tabs"] .c-tab[aria-selected="true"] .c2-duo .c2-sw {
  box-shadow: 0 0 0 2px var(--uw-white), inset 0 0 0 1px color-mix(in srgb, var(--uw-ink) 6%, transparent);
}

/* Stofprøverne (handoff .mg-sw) efter kapitlets anker. */
[data-pattern="chooser.tabs"] .c2-sw {
  display: block;
  flex: none;
  background-color: #e4dccf;
}

[data-pattern="chooser.tabs"] .c2-sw[data-mat="bambus"] {
  background-color: #d9e2d3;
  background-image: repeating-linear-gradient(90deg, color-mix(in srgb, var(--uw-white) 50%, transparent) 0 1px, transparent 1px 6px);
}

[data-pattern="chooser.tabs"] .c2-sw[data-mat="bomuld"] {
  background-color: #efe6d8;
  background-image:
    repeating-linear-gradient(45deg, color-mix(in srgb, var(--uw-ink) 7%, transparent) 0 1px, transparent 1px 7px),
    repeating-linear-gradient(-45deg, color-mix(in srgb, var(--uw-ink) 7%, transparent) 0 1px, transparent 1px 7px);
}

[data-pattern="chooser.tabs"] .c2-sw[data-mat="uld"] {
  background-color: #d8d0c4;
  background-image:
    repeating-linear-gradient(60deg, color-mix(in srgb, var(--uw-white) 42%, transparent) 0 1px, transparent 1px 9px),
    repeating-linear-gradient(-60deg, color-mix(in srgb, var(--uw-white) 42%, transparent) 0 1px, transparent 1px 9px);
}

[data-pattern="chooser.tabs"] .c2-sw:is([data-mat="merinould"], [data-mat="merino"]) {
  background-color: #ded7cc;
  background-image: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--uw-white) 62%, transparent) 0 1.4px, transparent 1.8px);
  background-size: 9px 9px;
}

[data-pattern="chooser.tabs"] .c2-sw[data-mat="uldsilke"] {
  background-color: #ecd9d2;
  background-image: linear-gradient(115deg, transparent 24%, color-mix(in srgb, var(--uw-white) 62%, transparent) 46%, transparent 68%);
}

/* Tablet og mobil: kortet som en række med chippen til venstre, titel, sætning og stofprøver i midten og fluebenet
   øverst til højre. */
@media (max-width: 1023.98px) {
  [data-pattern="chooser.tabs"] > .c-tabs > .c-tabs-list[data-c2-cards] > .c-tab {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr);
    grid-template-areas: "ic t" "ic q" "ic m";
    column-gap: 18px;
    align-items: center;
    min-height: 0;
    padding: 18px 64px 18px 18px;
    border-radius: var(--c-radius-xl);
  }

  [data-pattern="chooser.tabs"] > .c-tabs > .c-tabs-list[data-c2-cards] > .c-tab::after {
    top: 18px;
    right: 20px;
    translate: none;
  }

  [data-pattern="chooser.tabs"] .c2-need-ic {
    grid-area: ic;
    align-self: start;
  }

  [data-pattern="chooser.tabs"] .c-tab[aria-selected="true"] .c2-need-ic {
    transform: none;
  }

  [data-pattern="chooser.tabs"] .c2-need-t {
    grid-area: t;
    margin: 0;
    padding: 0;
  }

  [data-pattern="chooser.tabs"] .c2-need-q {
    grid-area: q;
    margin-top: var(--c-space-3xs);
    font-size: var(--c-font-body);
  }

  [data-pattern="chooser.tabs"] .c2-need-mats {
    grid-area: m;
    margin-top: var(--c-space-xs);
    padding-top: var(--c-space-xs);
  }
}

@media (max-width: 639.98px) {
  [data-pattern="chooser.tabs"] > .c-tabs > .c-tabs-list[data-c2-cards] > .c-tab {
    grid-template-columns: 48px minmax(0, 1fr);
    column-gap: 14px;
    padding: var(--c-space-sm) 52px var(--c-space-sm) 14px;
  }

  [data-pattern="chooser.tabs"] > .c-tabs > .c-tabs-list[data-c2-cards] > .c-tab::after {
    top: var(--c-space-sm);
    right: 14px;
    width: 28px;
    height: 28px;
  }

  [data-pattern="chooser.tabs"] .c2-need-ic {
    width: 48px;
    height: 48px;
  }

  [data-pattern="chooser.tabs"] .c2-need-ic svg {
    width: 22px;
    height: 22px;
  }

  [data-pattern="chooser.tabs"] .c2-need-t {
    font-size: 25px;
  }

  [data-pattern="chooser.tabs"] .c2-need-q {
    font-size: 14.5px;
  }

  [data-pattern="chooser.tabs"] .c2-need-mats {
    font-size: var(--c-font-sm);
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-pattern="chooser.tabs"] .c2-need-ic {
    transition: none;
  }
}

/* ---- anchor.nav ---- */

/* Kapitlet, man læser (Template02/wwwroot/js/concept2/materialeguide.js, aria-current="location"; handoff
   .mg-rail__a[aria-current]), er en blækpille; den grønne linje under bjælken viser, hvor langt man er gennem
   kapitlerne (.mg-rail__prog). */
[data-pattern="anchor.nav"] {
  position: relative;
}

[data-pattern="anchor.nav"] [data-part="chapter"].c-link[aria-current="location"] {
  background: var(--uw-ink);
  box-shadow: none;
  color: var(--uw-paper);
}

[data-pattern="anchor.nav"] .c2-rail-progress {
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 2px;
  background: var(--uw-green);
  transform: scaleX(0);
  transform-origin: left;
  pointer-events: none;
}

/* Anbefalet til det valgte behov (data-c2-rec, sat af samme script): en grøn prik efter navnet i bjælken og på
   materialeguidens hero-piller, og pillen får blækring (handoff .mg-dot, .mg-pill[data-rec]). */
:is([data-pattern="anchor.nav"], [data-pattern="hero.split"]) .c2-rec-dot {
  flex: none;
  width: 7px;
  height: 7px;
  margin-left: -2px;
  border-radius: 50%;
  background: var(--uw-green);
  transform: scale(0);
  transition: transform 0.45s var(--uw-ease);
}

:is([data-pattern="anchor.nav"], [data-pattern="hero.split"]) [data-c2-rec] > .c2-rec-dot {
  transform: scale(1);
}

[data-pattern="hero.split"][data-pattern-params~="variant=materialeguide"] .c-link[data-c2-rec] {
  box-shadow: inset 0 0 0 1.5px var(--uw-ink);
}

@media (prefers-reduced-motion: reduce) {
  :is([data-pattern="anchor.nav"], [data-pattern="hero.split"]) .c2-rec-dot {
    transition: none;
  }
}

/* ---- comparison.table ---- */

/* Med Template02/wwwroot/js/concept2/materialeguide.js (handoff .mg-cmp): Fremhæv-bjælken og forklaringen mellem
   overskriften og tabellen, og foden (hint og link) under tabellen. Mønstrets rod lægger sine børn i sektionens kolonne
   (display: contents), så tabellen kan stå imellem; DOM'en er uændret, så del 2's regler for mønstret gælder stadig. */
.c-section-body > [data-pattern="comparison.table"]:has(> .c2-cmp-bar) {
  display: contents;
}

.c-section-body > [data-pattern="comparison.table"]:has(> .c2-cmp-bar) > :last-child {
  order: 1;
}

[data-pattern="comparison.table"] .c2-cmp-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px var(--c-space-md);
  margin-top: 22px;
}

[data-pattern="comparison.table"] .c2-seg {
  display: flex;
  align-items: center;
  gap: var(--c-space-3xs);
  max-width: 100%;
  padding: 5px;
  border-radius: 999px;
  background: var(--uw-white);
  box-shadow: inset 0 0 0 1px var(--c-border, var(--c-color-border));
  overflow-x: auto;
  scrollbar-width: none;
}

[data-pattern="comparison.table"] .c2-seg::-webkit-scrollbar {
  display: none;
}

[data-pattern="comparison.table"] .c2-seg-l {
  flex: none;
  padding: 0 10px 0 14px;
  font-size: var(--c-font-xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-muted, var(--c-color-muted));
}

[data-pattern="comparison.table"] .c2-seg > button {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: var(--c-space-2xs);
  height: 44px;
  padding: 0 18px 0 14px;
  border: 0;
  border-radius: 999px;
  background: none;
  font-size: 14.5px;
  font-weight: 500;
  white-space: nowrap;
  color: var(--c-fg, var(--c-color-fg));
  cursor: pointer;
  transition: background-color 0.35s, color 0.35s;
}

[data-pattern="comparison.table"] .c2-seg > button:hover {
  background: var(--uw-paper);
}

[data-pattern="comparison.table"] .c2-seg > button[aria-pressed="true"] {
  background: var(--uw-ink);
  color: var(--uw-paper);
}

[data-pattern="comparison.table"] .c2-seg > button svg {
  width: 18px;
  height: 18px;
  stroke-width: 1.6;
}

[data-pattern="comparison.table"] .c2-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--c-space-2xs) 18px;
  margin: 0;
  font-size: 13.5px;
  color: var(--uw-body);
}

[data-pattern="comparison.table"] .c2-legend > span {
  display: inline-flex;
  align-items: center;
  gap: var(--c-space-2xs);
}

/* Prikkerne (handoff .mg-dots): en til tre fyldte af tre. I cellen står de over ordet, som bliver stående. */
:is([data-pattern="comparison.table"], [data-pattern="comparison.table"] + [role="region"]) .c2-dots {
  display: inline-flex;
  gap: 6px;
}

:is([data-pattern="comparison.table"], [data-pattern="comparison.table"] + [role="region"]) .c2-dots i {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px #cfc5b6;
}

:is([data-pattern="comparison.table"], [data-pattern="comparison.table"] + [role="region"]) :is(.c2-dots[data-lv="1"] i:nth-child(1), .c2-dots[data-lv="2"] i:nth-child(-n + 2), .c2-dots[data-lv="3"] i) {
  background: var(--uw-ink);
  box-shadow: inset 0 0 0 1.5px var(--uw-ink);
}

[data-pattern="comparison.table"] + [role="region"] td > .c2-dots {
  display: flex;
  width: max-content;
  margin-bottom: var(--c-space-2xs);
}

/* Rækkernes ikoner og vaskens balje (handoff .mg-th svg) står på linje med ordet. */
[data-pattern="comparison.table"] + [role="region"] :is(th, td) > svg {
  display: inline-block;
  margin-right: var(--c-space-2xs);
  vertical-align: -3px;
}

[data-pattern="comparison.table"] + [role="region"] tbody th > svg {
  margin-right: var(--c-space-xs);
  color: var(--uw-green-ink);
}

/* Det valgte behovs materialer (data-c2-rec): kolonnen bliver lysegrøn, og hovedet får "Anbefalet"
   (handoff .mg-td[data-on], .mg-ch2__rec). */
[data-pattern="comparison.table"] + [role="region"] :is(th, td) {
  transition: background-color 0.45s;
}

[data-pattern="comparison.table"] + [role="region"] :is(th, td)[data-c2-rec] {
  background: #f1f7f3;
}

[data-pattern="comparison.table"] + [role="region"] thead th .c2-rec-tag {
  display: flex;
  align-items: center;
  gap: 6px;
  width: max-content;
  height: 26px;
  margin-top: 8px;
  padding: 0 10px;
  border-radius: 999px;
  background: #e3f1ea;
  font-family: var(--c-font-sans);
  font-size: 11.5px;
  font-style: normal;
  font-weight: 600;
  font-variation-settings: normal;
  letter-spacing: 0;
  text-transform: none;
  color: var(--uw-green-ink);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.35s, transform 0.45s var(--uw-ease);
}

[data-pattern="comparison.table"] + [role="region"] thead th[data-c2-rec] .c2-rec-tag {
  opacity: 1;
  transform: none;
}

[data-pattern="comparison.table"] + [role="region"] thead th .c2-rec-tag > i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--uw-green);
}

@media (max-width: 639.98px) {
  /* Én linje, så knapperne kan gå ud til skærmens kanter og rulle; ombrudt ville linjen være lige så bred som dem. */
  [data-pattern="comparison.table"] .c2-cmp-bar {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
  }

  [data-pattern="comparison.table"] .c2-seg {
    max-width: none;
    margin-inline: calc(var(--uw-gutter) * -1);
    padding: 0 var(--uw-gutter);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  [data-pattern="comparison.table"] .c2-seg-l {
    display: none;
  }

  [data-pattern="comparison.table"] .c2-seg > button {
    background: var(--uw-white);
    box-shadow: inset 0 0 0 1px var(--c-border, var(--c-color-border));
  }

  [data-pattern="comparison.table"] .c2-seg > button[aria-pressed="true"] {
    background: var(--uw-ink);
    box-shadow: inset 0 0 0 1px var(--uw-ink);
  }

  [data-pattern="comparison.table"] + [role="region"] tbody th > svg {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-pattern="comparison.table"] + [role="region"] :is(th, td),
  [data-pattern="comparison.table"] + [role="region"] thead th .c2-rec-tag,
  [data-pattern="comparison.table"] .c2-seg > button {
    transition: none;
  }
}

/* ---- faq.answers ---- */

/* Emnelistens ikonchip står midt for navnet og antallet (handoff .fq-tbtn: align-items center); boksen lægger ellers
   ikonet øverst. */
[data-pattern="faq.answers"][data-pattern-params~="variant=topics"] [data-part="topic-icon"].c-icon[data-shape="circle"] {
  align-self: center;
}

/* Det valgte emne (Template02/wwwroot/js/concept2/faq.js, aria-current="true"; handoff .fq-tbtn[aria-current]): en
   blækpille med lyst ikon og antallet i grønt. */
[data-pattern="faq.answers"][data-pattern-params~="variant=topics"] [data-part="topic"].c-box[aria-current="true"] {
  background: var(--uw-ink);
  box-shadow: none;
}

[data-pattern="faq.answers"][data-pattern-params~="variant=topics"] [data-part="topic"].c-box[aria-current="true"] .c-icon[data-shape="circle"] {
  background: color-mix(in srgb, var(--uw-paper) 10%, transparent);
  box-shadow: none;
  color: var(--uw-paper);
}

[data-pattern="faq.answers"][data-pattern-params~="variant=topics"] [data-part="topic"].c-box[aria-current="true"] .c-icon + .c-text {
  color: var(--uw-paper);
}

[data-pattern="faq.answers"][data-pattern-params~="variant=topics"] [data-part="topic"].c-box[aria-current="true"] .c-text + .c-text {
  background: var(--uw-green);
  color: var(--uw-ink);
}

/* Med samme script (data-c2-faq; handoff .fq-layout, .fq-side, .fq-chipbar): de andre emners sektioner står i første
   mønster foran dets egen gruppe, men vises efter den (order). Emnelisten spænder over alle grupperne og klæber ved
   dem. Kun det valgte emnes gruppe vises (data-c2-off), og den toner frem (data-c2-in). Uden scriptet står én sektion
   pr. emne som før. */
[data-pattern="faq.answers"][data-c2-faq] > [data-part="main"] {
  order: 1;
}

[data-pattern="faq.answers"][data-c2-faq] > .c-section {
  order: 2;
  max-width: none;
  margin: 0;
  padding: 0;
}

[data-pattern="faq.answers"][data-c2-faq] > .c-section [data-pattern="faq.answers"] {
  display: block;
}

[data-pattern="faq.answers"][data-c2-faq] > :is([data-c2-off], [data-c2-empty]) {
  display: none;
}

[data-pattern="faq.answers"][data-c2-faq] > [data-c2-in] {
  animation: uw-faq-in 0.45s var(--uw-ease) both;
}

/* Under en søgning er emner uden træffere grå og kan ikke vælges (faq.js, aria-disabled; handoff .fq-tbtn[data-off]). */
[data-pattern="faq.answers"][data-pattern-params~="variant=topics"] [data-part="topic"].c-box[aria-disabled="true"] {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Statuslinjen under søgefeltet: tallet fremhævet (faq.js skriver "32 svar" i fed før "fordelt på 6 emner"; handoff
   .fq-status b). */
[data-pattern="hero.centered"] .c-faq-search > p b {
  font-weight: 600;
  color: var(--uw-ink);
}

/* "Åbn alle" / "Luk alle" for enden af gruppens overskrift (faq.js, .c2-faq-toggle; handoff .fq-gtoggle). */
[data-pattern="faq.answers"][data-c2-faq] :has(> .c2-faq-toggle) > :not(.c-icon, .c2-faq-toggle) {
  flex: 1;
  min-width: 0;
}

[data-pattern="faq.answers"][data-c2-faq] .c2-faq-toggle {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: var(--c-space-2xs);
  height: 44px;
  padding: 0 14px 0 18px;
  border-radius: 999px;
  background: var(--uw-white);
  box-shadow: inset 0 0 0 1px var(--c-border, var(--c-color-border));
  font-size: var(--c-font-sm);
  font-weight: 600;
  color: var(--uw-ink);
  white-space: nowrap;
  cursor: pointer;
  transition: box-shadow 0.2s;
}

[data-pattern="faq.answers"][data-c2-faq] .c2-faq-toggle:hover {
  box-shadow: inset 0 0 0 1.5px var(--uw-ink);
}

@keyframes uw-faq-in {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
}

@media (min-width: 1024px) {
  [data-pattern="faq.answers"][data-c2-faq] {
    row-gap: clamp(52px, 5.6vw, 80px);
  }

  [data-pattern="faq.answers"][data-c2-faq] > .c-box {
    position: sticky;
    top: calc(var(--uw-header-h, 4rem) + 31px);
    grid-row: 1 / span var(--c2-faq-groups, 1);
    align-self: start;
  }

  [data-pattern="faq.answers"][data-c2-faq] > :not(.c-box) {
    grid-column: 2;
  }

  [data-pattern="faq.answers"][data-pattern-params~="variant=topics"] [data-part="topic"].c-box[aria-disabled="true"]:hover {
    background: none;
    box-shadow: none;
  }
}

@media (max-width: 639.98px) {
  [data-pattern="faq.answers"][data-c2-faq] .c2-faq-toggle {
    padding: 0 var(--c-space-xs) 0 14px;
    font-size: 13.5px;
  }
}

/* Tablet og mobil: chip-rækken klæber under headeren på gennemsigtigt papir (handoff .fq-chipbar). Mønstret er en
   kolonne, så rækken kan klæbe ved alle grupperne. */
@media (max-width: 1023.98px) {
  [data-pattern="faq.answers"][data-c2-faq] {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  [data-pattern="faq.answers"][data-c2-faq] > .c-box {
    position: sticky;
    top: var(--uw-header-h, 79px);
    z-index: 15;
    margin-bottom: clamp(24px, 3vw, 36px);
  }

  [data-pattern="faq.answers"][data-c2-faq] [data-part="nav-topics"] {
    background: color-mix(in srgb, var(--uw-paper) 94%, transparent);
    -webkit-backdrop-filter: saturate(1.4) blur(16px);
    backdrop-filter: saturate(1.4) blur(16px);
  }

  [data-pattern="faq.answers"][data-c2-faq] > .c-section {
    margin-top: clamp(52px, 5.6vw, 80px);
  }

  [data-pattern="faq.answers"][data-pattern-params~="variant=topics"] [data-part="topic"].c-box[aria-current="true"] {
    box-shadow: inset 0 0 0 1px var(--uw-ink);
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-pattern="faq.answers"][data-c2-faq] > [data-c2-in] {
    animation: none;
  }
}

/* ---- category.index: fotoet følger rækken ---- */

/* Med Template02/wwwroot/js/concept2/category-index.js (data-c2-index; handoff .k2-index__frame): én kopi af fotoet pr.
   række ligger oven på slottets foto, og den viste (data-c2-on) toner frem og falder på plads (0,55 s, 1,05 → 1).
   Billedteksten får rækkens nummer (data-c2-pos); uden scriptet står der 01 som før. */
[data-pattern="category.index"] [data-part="preview"].c-image[data-c2-index] {
  position: relative;
  overflow: hidden;
}

[data-pattern="category.index"] [data-part="preview"].c-image[data-c2-index] > img {
  opacity: 0;
  transform: scale(1.05);
  transition: opacity 0.55s ease, transform 1.2s var(--uw-ease);
}

[data-pattern="category.index"] [data-part="preview"].c-image[data-c2-index] > img + img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

[data-pattern="category.index"] [data-part="preview"].c-image[data-c2-index] > img[data-c2-on] {
  opacity: 1;
  transform: none;
}

[data-pattern="category.index"] [data-part="caption"].c-box[data-c2-pos]::after {
  content: attr(data-c2-pos) " / " counter(row, decimal-leading-zero);
}

@media (prefers-reduced-motion: reduce) {
  [data-pattern="category.index"] [data-part="preview"].c-image[data-c2-index] > img {
    transform: none;
    transition: opacity 0.2s ease;
  }
}

/* ---- hero.compact uden foto (gruppesiden) ---- */

/* Gruppesiden (handoff pages/gruppe.html, kc-hero[data-variant="gruppe"]) har intet foto, så kategorikortene står over
   folden: én kolonne, og fotoets tomme ramme vises ikke. Introen holder en læsbar bredde. */
[data-pattern="hero.compact"]:not(:has(img)) {
  grid-template-columns: minmax(0, 1fr);
}

[data-pattern="hero.compact"]:not(:has(img)) > :nth-child(2) {
  display: none;
}

[data-pattern="hero.compact"]:not(:has(img)) > :first-child > .c-text {
  max-width: 70ch;
}

/* ---- subpages.group ---- */

/* Gruppens kategorier (handoff pages/gruppe.html, .gc-cats): hvide kort, der skifter layout med antallet af
   undersider. Composers subpages sætter data-count på roden (krogen c-subpages); gitteret er rodens div, kortet
   krogen c-subpage-card (billedet, så navnet), og pilen er en ::after. --g-cols, --g-ratio og --g-name følger
   designets tabel i notes/gruppe.md; fra 7 undersider er kortene små og kvadratiske uden pil. */
[data-pattern="subpages.group"] .c-subpages {
  --g-cols: 3;
  --g-ratio: 4 / 3;
  --g-name: clamp(24px, 2.1vw, 30px);
  --g-go: 40px;
}

[data-pattern="subpages.group"] .c-subpages[data-count="2"] {
  --g-cols: 2;
  --g-ratio: 1 / 1;
  --g-name: clamp(34px, 3.4vw, 52px);
  --g-go: 48px;
}

[data-pattern="subpages.group"] .c-subpages[data-count="4"] {
  --g-cols: 4;
  --g-ratio: 1 / 1;
  --g-name: clamp(22px, 1.9vw, 27px);
}

[data-pattern="subpages.group"] .c-subpages:is([data-count="5"], [data-count="6"]) {
  --g-ratio: 4 / 5;
  --g-name: clamp(19px, 1.5vw, 22px);
  --g-go: 34px;
}

[data-pattern="subpages.group"] .c-subpages[data-count="5"] {
  --g-cols: 5;
}

[data-pattern="subpages.group"] .c-subpages[data-count="6"] {
  --g-cols: 6;
}

/* Fra 7: to lige rækker, højst 7 kolonner (7–8 → 4, 9–10 → 5, 11–12 → 6, ellers 7). */
[data-pattern="subpages.group"] .c-subpages:not([data-count="1"], [data-count="2"], [data-count="3"], [data-count="4"], [data-count="5"], [data-count="6"]) {
  --g-cols: 7;
  --g-ratio: 1 / 1;
  --g-name: clamp(17px, 1.3vw, 19px);
}

[data-pattern="subpages.group"] .c-subpages:is([data-count="7"], [data-count="8"]) {
  --g-cols: 4;
}

[data-pattern="subpages.group"] .c-subpages:is([data-count="9"], [data-count="10"]) {
  --g-cols: 5;
}

[data-pattern="subpages.group"] .c-subpages:is([data-count="11"], [data-count="12"]) {
  --g-cols: 6;
}

[data-pattern="subpages.group"] .c-subpages > div {
  grid-template-columns: repeat(var(--g-cols), minmax(0, 1fr));
  gap: clamp(10px, 1.3vw, 18px);
}

[data-pattern="subpages.group"] .c-subpage-card {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
  padding: var(--c-space-2xs);
  border-radius: var(--c-radius-xl);
  background: var(--uw-white);
  box-shadow: inset 0 0 0 1px var(--c-border, var(--c-color-border));
  color: var(--c-fg, var(--c-color-fg));
  transition: transform 0.45s var(--uw-ease), box-shadow 0.45s var(--uw-ease);
}

[data-pattern="subpages.group"] .c-subpage-card:hover {
  transform: translateY(-4px);
  box-shadow: inset 0 0 0 1px var(--c-border, var(--c-color-border)), 0 26px 44px -30px color-mix(in srgb, var(--uw-ink) 50%, transparent);
}

[data-pattern="subpages.group"] .c-subpage-card > span:first-child {
  aspect-ratio: var(--g-ratio);
  border-radius: var(--c-radius-md);
  background: radial-gradient(120% 90% at 50% 38%, var(--uw-white) 0%, #f9f6f1 55%, #f1ebe2 100%);
}

[data-pattern="subpages.group"] .c-subpage-card > span:first-child > img {
  transition: scale 1.1s var(--uw-ease);
}

[data-pattern="subpages.group"] .c-subpage-card:hover > span:first-child > img {
  scale: 1.05;
}

/* Foden: navnet i serif og den omridsede pil, der fyldes og drejer ved hover. */
[data-pattern="subpages.group"] .c-subpage-card > span:last-child {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--c-space-xs);
  padding: 14px var(--c-space-2xs) 6px;
  font-family: var(--c-font-serif);
  font-size: var(--g-name);
  font-weight: 300;
  font-variation-settings: "SOFT" 100, "WONK" 0;
  line-height: 1.05;
  letter-spacing: -0.02em;
  overflow-wrap: break-word;
  hyphens: auto;
}

[data-pattern="subpages.group"] .c-subpage-card > span:last-child::after {
  content: "";
  flex: none;
  width: var(--g-go);
  height: var(--g-go);
  border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px var(--uw-ink);
  background: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23141c2b'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M5%2012h14'/%3E%3Cpath%20d='m12%205%207%207-7%207'/%3E%3C/svg%3E") center / 16px no-repeat;
  transition: background-color 0.3s, transform 0.3s;
}

[data-pattern="subpages.group"] .c-subpage-card:hover > span:last-child::after {
  background-color: var(--uw-ink);
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23faf7f2'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M5%2012h14'/%3E%3Cpath%20d='m12%205%207%207-7%207'/%3E%3C/svg%3E");
  transform: rotate(-45deg);
}

/* To undersider: brede kort med billedet til venstre og navnet stort til højre, pilen nederst. */
[data-pattern="subpages.group"] .c-subpages[data-count="2"] .c-subpage-card {
  flex-direction: row;
  align-items: stretch;
}

[data-pattern="subpages.group"] .c-subpages[data-count="2"] .c-subpage-card > span:first-child {
  flex: 0 0 50%;
}

[data-pattern="subpages.group"] .c-subpages[data-count="2"] .c-subpage-card > span:last-child {
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
  padding: clamp(18px, 2.2vw, 32px) clamp(16px, 2vw, 28px) clamp(12px, 1.4vw, 20px);
}

/* Fra 7: mindre kort uden pil. */
[data-pattern="subpages.group"] .c-subpages:not([data-count="1"], [data-count="2"], [data-count="3"], [data-count="4"], [data-count="5"], [data-count="6"]) > div {
  gap: clamp(8px, 1vw, 14px);
}

[data-pattern="subpages.group"] .c-subpages:not([data-count="1"], [data-count="2"], [data-count="3"], [data-count="4"], [data-count="5"], [data-count="6"]) .c-subpage-card {
  padding: 6px;
  border-radius: 20px;
}

[data-pattern="subpages.group"] .c-subpages:not([data-count="1"], [data-count="2"], [data-count="3"], [data-count="4"], [data-count="5"], [data-count="6"]) .c-subpage-card > span:first-child {
  border-radius: 15px;
}

[data-pattern="subpages.group"] .c-subpages:not([data-count="1"], [data-count="2"], [data-count="3"], [data-count="4"], [data-count="5"], [data-count="6"]) .c-subpage-card > span:last-child {
  padding: 11px 6px 5px;
}

[data-pattern="subpages.group"] .c-subpages:not([data-count="1"], [data-count="2"], [data-count="3"], [data-count="4"], [data-count="5"], [data-count="6"]) .c-subpage-card > span:last-child::after {
  display: none;
}

@media (max-width: 1023.98px) {
  [data-pattern="subpages.group"] .c-subpages {
    --g-name: 24px;
  }

  [data-pattern="subpages.group"] .c-subpages[data-count="2"] {
    --g-ratio: 4 / 3;
    --g-name: 30px;
  }

  [data-pattern="subpages.group"] .c-subpages[data-count="2"] .c-subpage-card {
    flex-direction: column;
  }

  [data-pattern="subpages.group"] .c-subpages[data-count="2"] .c-subpage-card > span:first-child {
    flex: none;
  }

  [data-pattern="subpages.group"] .c-subpages[data-count="2"] .c-subpage-card > span:last-child {
    flex-direction: row;
    align-items: center;
    padding: 14px var(--c-space-2xs) 6px;
  }

  [data-pattern="subpages.group"] .c-subpages[data-count="3"] {
    --g-ratio: 1 / 1;
  }

  [data-pattern="subpages.group"] .c-subpages[data-count="4"] {
    --g-name: 21px;
  }

  [data-pattern="subpages.group"] .c-subpages[data-count="4"] .c-subpage-card > span:last-child::after {
    display: none;
  }

  [data-pattern="subpages.group"] .c-subpages:is([data-count="5"], [data-count="6"]) {
    --g-cols: 3;
    --g-ratio: 1 / 1;
    --g-name: 22px;
  }

  [data-pattern="subpages.group"] .c-subpages:not([data-count="1"], [data-count="2"], [data-count="3"], [data-count="4"], [data-count="5"], [data-count="6"]) {
    --g-cols: 5;
    --g-name: 17px;
  }
}

@media (max-width: 639.98px) {
  [data-pattern="subpages.group"] [data-part="all"].c-link {
    display: none;
  }

  [data-pattern="subpages.group"] .c-subpages,
  [data-pattern="subpages.group"] .c-subpages[data-count] {
    --g-cols: 2;
    --g-ratio: 1 / 1;
    --g-name: 21px;
  }

  [data-pattern="subpages.group"] .c-subpages > div {
    gap: 10px;
  }

  [data-pattern="subpages.group"] .c-subpage-card {
    padding: 6px;
    border-radius: 20px;
  }

  [data-pattern="subpages.group"] .c-subpage-card > span:first-child {
    border-radius: 15px;
  }

  [data-pattern="subpages.group"] .c-subpage-card > span:last-child {
    padding: 11px 5px var(--c-space-3xs);
  }

  [data-pattern="subpages.group"] .c-subpage-card > span:last-child::after {
    display: none;
  }

  [data-pattern="subpages.group"] .c-subpages[data-count="2"] {
    --g-name: 22px;
  }

  [data-pattern="subpages.group"] .c-subpages[data-count="2"] .c-subpage-card > span:last-child {
    padding: 11px 5px var(--c-space-3xs);
  }

  /* 3 og 5: det første kort over hele bredden (16:9), så rækkerne går op. */
  [data-pattern="subpages.group"] .c-subpages:is([data-count="3"], [data-count="5"]) .c-subpage-card:first-child {
    grid-column: 1 / -1;
  }

  [data-pattern="subpages.group"] .c-subpages:is([data-count="3"], [data-count="5"]) .c-subpage-card:first-child > span:first-child {
    aspect-ratio: 16 / 9;
  }

  [data-pattern="subpages.group"] .c-subpages:not([data-count="1"], [data-count="2"], [data-count="3"], [data-count="4"], [data-count="5"], [data-count="6"]) {
    --g-cols: 3;
    --g-name: 13.5px;
  }

  [data-pattern="subpages.group"] .c-subpages:not([data-count="1"], [data-count="2"], [data-count="3"], [data-count="4"], [data-count="5"], [data-count="6"]) > div {
    gap: var(--c-space-2xs);
  }

  [data-pattern="subpages.group"] .c-subpages:not([data-count="1"], [data-count="2"], [data-count="3"], [data-count="4"], [data-count="5"], [data-count="6"]) .c-subpage-card {
    padding: 5px;
    border-radius: 16px;
  }

  [data-pattern="subpages.group"] .c-subpages:not([data-count="1"], [data-count="2"], [data-count="3"], [data-count="4"], [data-count="5"], [data-count="6"]) .c-subpage-card > span:first-child {
    border-radius: 12px;
  }

  [data-pattern="subpages.group"] .c-subpages:not([data-count="1"], [data-count="2"], [data-count="3"], [data-count="4"], [data-count="5"], [data-count="6"]) .c-subpage-card > span:last-child {
    padding: var(--c-space-2xs) var(--c-space-3xs) 3px;
    font-family: var(--c-font-sans);
    font-weight: 600;
    font-variation-settings: normal;
    letter-spacing: 0;
    line-height: 1.2;
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-pattern="subpages.group"] .c-subpage-card,
  [data-pattern="subpages.group"] .c-subpage-card > span:first-child > img,
  [data-pattern="subpages.group"] .c-subpage-card > span:last-child::after {
    transition: none;
  }

  [data-pattern="subpages.group"] .c-subpage-card:hover {
    transform: none;
  }

  [data-pattern="subpages.group"] .c-subpage-card:hover > span:first-child > img {
    scale: none;
  }
}

/* ---- section.heading ---- */

/* Overskriften over gruppesidens produktliste (handoff .gc-shop__head): luft ned til chipsene. */
[data-pattern="section.heading"] {
  margin-bottom: clamp(16px, 1.8vw, 24px);
}

/* ---- brands.logos: SVG-logoer ---- */

/* Et SVG-logo med kun viewBox har ingen egen størrelse, så del 1's width/height: auto gav det 0 × 0 i den krympende
   figur. En fast højde (loftet 52px) giver bredden af logoets format; for brede logoer holder max-width 150px og
   object-fit: contain dem inden for cellen. Rasterlogoer får samme kasse. */
[data-pattern="brands.logos"] [data-part="logo"].c-image img {
  height: 52px;
}

/* ---- footer.links: Følg os ---- */

/* Sociale medier under kundeservice (handoff: footerens "Følg os" under åbningstiderne). I mønstret står de før
   telefon-blokken, så del 2's regler (kolonnens sidste barn = telefon, e-mail og åbningstider) gælder uændret; order
   sætter dem nederst. Runde 44px-knapper med en tynd lys ring, der fyldes grønne ved hover; navnet er kun for
   skærmlæsere, og ikonet tegnes med designets 1.6-streg. */
[data-pattern="footer.links"] [data-part="social"]:not(:last-child) {
  order: 1;
  margin-top: var(--c-space-sm);
}

[data-pattern="footer.links"] > :first-child > :nth-child(2):not(:last-child) a {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #e4e7ec 28%, transparent);
  color: #e4e7ec;
  transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
}

[data-pattern="footer.links"] > :first-child > :nth-child(2):not(:last-child) a:hover {
  background: var(--uw-green);
  box-shadow: inset 0 0 0 1px var(--uw-green);
  color: var(--uw-ink);
}

[data-pattern="footer.links"] > :first-child > :nth-child(2):not(:last-child) a > span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

[data-pattern="footer.links"] > :first-child > :nth-child(2):not(:last-child) a > svg {
  width: 24px;
  height: 24px;
  margin: 0;
  stroke-width: 1.6;
}

/* Mobil: kundeservice-spalten fylder bredden øverst, så knapperne står lige under telefon og åbningstider. */
@media (max-width: 639.98px) {
  [data-pattern="footer.links"] [data-part="social"]:not(:last-child) {
    margin-top: var(--c-space-xs);
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-pattern="footer.links"] > :first-child > :nth-child(2):not(:last-child) a {
    transition: none;
  }
}

/* ---- Kundeservice uden telefon: e-mailen i telefonnummerets sted ---- */

/* Uniwear har kun mail (Jens 2026-10-30). Uden telefonnummer står e-mailen stort i serif, som nummeret stod i designet:
   i footerens kundeservice-spalte (kolonnens sidste barn har intet telefonlink) og i kategori-FAQ'ens mørke hjælpekort
   (introen har kun ét link). Vælgerne er strukturelle, fordi Cloudflare skriver mailto-linket om på de offentlige sider. */
[data-pattern="footer.links"][data-pattern-params~="variant=default"] > :first-child > :last-child:not(:has(> .c-link)) > :last-child > .c-link:first-child,
[data-pattern="faq.answers"][data-pattern-params~="variant=kategori"] > .c-box > :first-child > a.c-link:only-of-type {
  min-height: 0;
  font-family: var(--c-font-serif);
  font-size: 1.875rem;
  font-weight: 300;
  font-optical-sizing: auto;
  font-variation-settings: "SOFT" 100, "WONK" 0;
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-decoration: none;
  transition: color 0.2s;
}

[data-pattern="footer.links"][data-pattern-params~="variant=default"] > :first-child > :last-child:not(:has(> .c-link)) > :last-child > .c-link:first-child {
  margin-bottom: 6px;
  color: var(--c-fg, var(--c-color-fg));
}

[data-pattern="faq.answers"][data-pattern-params~="variant=kategori"] > .c-box > :first-child > a.c-link:only-of-type {
  margin-top: 26px;
  color: var(--uw-paper);
}

[data-pattern="footer.links"][data-pattern-params~="variant=default"] > :first-child > :last-child:not(:has(> .c-link)) > :last-child > .c-link:first-child:hover,
[data-pattern="faq.answers"][data-pattern-params~="variant=kategori"] > .c-box > :first-child > a.c-link:only-of-type:hover {
  color: var(--uw-green);
}

@media (prefers-reduced-motion: reduce) {
  [data-pattern="footer.links"][data-pattern-params~="variant=default"] > :first-child > :last-child:not(:has(> .c-link)) > :last-child > .c-link:first-child,
  [data-pattern="faq.answers"][data-pattern-params~="variant=kategori"] > .c-box > :first-child > a.c-link:only-of-type {
    transition: none;
  }
}

/* ---- footer.legal: betalingslogoer ---- */

/* Logoerne (handoff: kurvens hvide 46×32-kort) står i mønstret sidst, så del 2's regel for linkene (andet barn) gælder
   uændret; order sætter dem mellem copyright og links på desktop og øverst på mobil. */
[data-pattern="footer.legal"] [data-part="legal-links"] {
  order: 2;
}

[data-pattern="footer.legal"] [data-part="payments"] {
  order: 1;
  gap: 6px;
}

[data-pattern="footer.legal"] > :nth-child(3) .c-image {
  flex: none;
  width: 46px;
  height: 32px;
}

[data-pattern="footer.legal"] > :nth-child(3) .c-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Desktop: logoerne står præcis midt i rækken (Steven, 2026-10-30), uanset hvor brede copyright og links er: tre
   spalter, hvor de to yderste er lige brede. Under 1024px er der ikke plads, så rækken bryder som før. */
@media (min-width: 1024px) {
  [data-pattern="footer.legal"] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
  }

  [data-pattern="footer.legal"] [data-part="payments"] {
    grid-column: 2;
    grid-row: 1;
  }

  [data-pattern="footer.legal"] [data-part="legal-links"] {
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
  }
}

@media (max-width: 639.98px) {
  [data-pattern="footer.legal"] [data-part="payments"] {
    order: -1;
    flex-basis: 100%;
    margin-bottom: var(--c-space-2xs);
  }
}

/* ---- hero.split · home: det svævende produktkort ---- */

/* Designets .k2-float. Hver målgruppe-fane kan have et produkt (hero.split v4, slottet "product"), som Composers
   product-node renderer med data-style="float"; composer.css overlader udseendet til sitet. Fanens panel er
   display: contents (del 2), så kortet er et element i heroens gitter: i fotoets celle, nederst til venstre ud over
   fotoets kant, og det skifter med fanen ligesom fotoet. Under 1024px står fotoet under teksten (række 9), centreret og
   højst 560px bredt. */
[data-pattern="hero.split"][data-pattern-params~="variant=home"] [data-part="audience-product"].c-product[data-style="float"] {
  position: relative;
  z-index: 3;
  grid-column: 4;
  grid-row: 1 / -1;
  align-self: end;
  justify-self: start;
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr) 44px;
  align-items: center;
  gap: 14px;
  width: min(340px, 86%);
  margin: 0 0 72px -64px;
  padding: 12px 14px 12px 12px;
  border-radius: 24px;
  background: #fff;
  color: var(--uw-ink);
  text-decoration: none;
  box-shadow: 0 1px 2px rgba(20, 28, 43, 0.05), 0 22px 44px -22px rgba(20, 28, 43, 0.32);
  animation: uw-hero-float-bob 7s ease-in-out infinite;
}

[data-pattern="hero.split"][data-pattern-params~="variant=home"] [data-part="audience-product"].c-product[data-style="float"] .c-product-media {
  width: 84px;
  height: 84px;
  border-radius: 18px;
  background: var(--uw-linen, #f2ece3);
  overflow: hidden;
}

[data-pattern="hero.split"][data-pattern-params~="variant=home"] [data-part="audience-product"].c-product[data-style="float"] .c-product-media > img {
  width: 100%;
  height: 100%;
  padding: 6px;
  border-radius: 0;
  object-fit: contain;
  mix-blend-mode: multiply;
}

[data-pattern="hero.split"][data-pattern-params~="variant=home"] [data-part="audience-product"].c-product[data-style="float"] .c-product-brand {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: #5f6675;
}

[data-pattern="hero.split"][data-pattern-params~="variant=home"] [data-part="audience-product"].c-product[data-style="float"] .c-product-title {
  display: -webkit-box;
  margin-top: 2px;
  overflow: hidden;
  font-family: inherit;
  font-size: 14.5px;
  font-weight: 500;
  line-height: 1.3;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

[data-pattern="hero.split"][data-pattern-params~="variant=home"] [data-part="audience-product"].c-product[data-style="float"] .c-product-price {
  margin-top: 4px;
  font-size: 14px;
}

[data-pattern="hero.split"][data-pattern-params~="variant=home"] [data-part="audience-product"].c-product[data-style="float"] .c-product-arrow {
  display: block;
  box-sizing: border-box;
  width: 44px;
  height: 44px;
  padding: 12px;
  border-radius: 50%;
  background: var(--uw-ink);
  color: var(--uw-paper, #faf7f2);
  transition: transform 0.25s;
}

[data-pattern="hero.split"][data-pattern-params~="variant=home"] [data-part="audience-product"].c-product[data-style="float"]:hover .c-product-arrow {
  transform: rotate(-45deg);
}

@keyframes uw-hero-float-bob {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-pattern="hero.split"][data-pattern-params~="variant=home"] [data-part="audience-product"].c-product[data-style="float"] {
    animation: none;
  }
}

@media (max-width: 1220px) {
  [data-pattern="hero.split"][data-pattern-params~="variant=home"] [data-part="audience-product"].c-product[data-style="float"] {
    margin-left: -24px;
  }
}

@media (max-width: 1023.98px) {
  [data-pattern="hero.split"][data-pattern-params~="variant=home"] [data-part="audience-product"].c-product[data-style="float"] {
    grid-column: 1 / -1;
    grid-row: 9;
    margin: 0 0 22px calc(max(0px, (100% - var(--c-container-sm, 560px)) / 2) + 12px);
  }
}

@media (max-width: 639.98px) {
  [data-pattern="hero.split"][data-pattern-params~="variant=home"] [data-part="audience-product"].c-product[data-style="float"] {
    grid-template-columns: 64px minmax(0, 1fr) 40px;
    justify-self: stretch;
    width: auto;
    margin: 0 10px 14px;
    padding: 10px;
  }

  [data-pattern="hero.split"][data-pattern-params~="variant=home"] [data-part="audience-product"].c-product[data-style="float"] .c-product-media {
    width: 64px;
    height: 64px;
  }

  [data-pattern="hero.split"][data-pattern-params~="variant=home"] [data-part="audience-product"].c-product[data-style="float"] .c-product-arrow {
    width: 40px;
    height: 40px;
    padding: 10px;
  }
}

/* ---- hero.split: introen er aldrig etiketten, og én fane er ingen faner ---- */

/* Del 2 giver "teksten lige før fanerne" etikettens udseende (versaler, spærret, grå; .c-text:has(+ .c-tabs)). Uden
   etiket (audiencesLabel tom, fx afdelingssiderne) er introen den tekst, og den fik versaler. Introen står altid lige
   efter h1'en, det gør etiketten aldrig: her får introen sit eget udseende og sin række tilbage, med forsidens
   værdier. Del 2 er tæt på grænsen på 200 KB, så rettelsen står her og ikke i dens vælger. */
[data-pattern="hero.split"] > :first-child > :first-child > h1.c-heading + .c-text:has(+ .c-tabs) {
  grid-row: 4;
  margin-top: 30px;
  margin-bottom: 0;
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
  color: var(--uw-body);
}

/* Én målgruppe er intet at skifte imellem: fanerækken og dens etiket vises ikke. Panelets foto og knap står som før. */
[data-pattern="hero.split"] .c-tabs-list:has(> .c-tab:only-child),
[data-pattern="hero.split"] > :first-child > :first-child > .c-text:not(h1.c-heading + .c-text):has(+ .c-tabs > .c-tabs-list > .c-tab:only-child) {
  display: none;
}

/* ---- Tomme felter må ikke flytte andres udseende (data-part, 2026-11-03) ---- */

/* Composer udelader en node, hvis felt er tomt, så regler, der vælger efter plads ("teksten lige efter titlen"), kan
   ramme det næste element. Siden 2026-11-03 bærer hver node i et mønster sit navn fra mønstret (data-part), og reglerne
   her vælger ved navn. Del 1 og 2 vælger stadig efter plads: reglerne her retter de tilfælde, revisionen fandt (hvert
   mønsters eksempel med ét valgfrit felt ad gangen tomt), og står med nok vægt til at vinde over dem. Med alle felter
   udfyldt er siderne uændrede. */

/* text.rich · columns: faktalisten med streger og etiketter, også uden venstre titel (del 1 finder den som
   ".c-heading + :not(.c-text)"). */
[data-pattern="text.rich"][data-pattern-params~="variant=columns"] [data-part="facts"][data-part="facts"] {
  border-top: 1px solid var(--c-border, var(--c-color-border));
}

[data-pattern="text.rich"][data-pattern-params~="variant=columns"] [data-part="fact"][data-part="fact"] {
  padding-block: var(--c-space-sm);
  border-bottom: 1px solid var(--c-border, var(--c-color-border));
}

[data-pattern="text.rich"][data-pattern-params~="variant=columns"] [data-part="fact-label"][data-part="fact-label"] {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-muted, var(--c-color-muted));
}

[data-pattern="text.rich"][data-pattern-params~="variant=columns"] [data-part="fact-value"][data-part="fact-value"] {
  font-size: 16.5px;
  font-weight: 500;
  overflow-wrap: anywhere;
  color: var(--c-fg, var(--c-color-fg));
}

/* text.rich · columns: indledningen i serif, også uden højre titel (del 1 finder den som "h2 + .c-text"), og brødteksten
   altid som brødtekst, også uden indledning, hvor del 1 ellers giver den indledningens udseende. "> .c-text" løfter
   vælgerne over del 1's. */
[data-pattern="text.rich"][data-pattern-params~="variant=columns"] [data-part="right"][data-part="right"] > .c-text[data-part="column-lead"] {
  max-width: 20em;
  font-family: var(--c-font-serif);
  font-size: clamp(26px, 2.5vw, 38px);
  font-weight: 300;
  font-variation-settings: "SOFT" 100, "WONK" 0;
  line-height: 1.16;
  letter-spacing: -0.02em;
  color: var(--c-fg, var(--c-color-fg));
}

[data-pattern="text.rich"][data-pattern-params~="variant=columns"] [data-part="right"][data-part="right"] > .c-text[data-part="column-lead"] a {
  font-weight: inherit;
  font-style: italic;
  color: inherit;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.16em;
}

[data-pattern="text.rich"][data-pattern-params~="variant=columns"] [data-part="right"][data-part="right"] > .c-text[data-part="column-text"] {
  max-width: 56ch;
  font-family: var(--c-font-sans);
  font-size: 16.5px;
  font-weight: 400;
  font-variation-settings: normal;
  line-height: 1.65;
  letter-spacing: normal;
  color: var(--uw-body);
}

[data-pattern="text.rich"][data-pattern-params~="variant=columns"] [data-part="right"][data-part="right"] > .c-text[data-part="column-text"] a {
  font-style: normal;
  font-weight: 600;
  color: var(--uw-ink);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 4px;
}

[data-pattern="text.rich"][data-pattern-params~="variant=columns"] [data-part="column-lead"][data-part="column-lead"] + [data-part="column-text"] {
  margin-top: 18px;
}

/* faq.answers · topics: det store tal og dets etiket. Del 2 giver rækkens første tekst tallets udseende, så en etiket
   uden tal fik tallets 84-132px; her har etiketten altid sit eget. Vælgeren gentager del 2's sti for at veje lige så
   meget og vinder ved at stå senere. Et tal uden etiket er rækkens første tekst og står rigtigt allerede. */
[data-pattern="faq.answers"][data-pattern-params~="variant=topics"] [data-part="panel-figure"]:not(:first-child) > .c-text[data-part="panel-figure-label"] {
  max-width: 9em;
  padding-bottom: 2px;
  font-family: var(--c-font-serif);
  font-size: clamp(18px, 1.6vw, 23px);
  font-style: italic;
  font-weight: 300;
  font-variation-settings: normal;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--c-fg, var(--c-color-fg));
}