/* Uniwear Concept 2: sektionerne, del 2 (Settings > Scripts; stylesheetet "Uniwear Concept 2 sektioner 2", efter
   "Uniwear Concept 2 sektioner"). Styres i repo: kilden er denne fil, pushes med MCP cms_set_site_css med sourcePath
   "EasyDAL/Setup/SiteCss/uniwear/concept2-sections-2.css". Delt fra concept2-sections.css, fordi et site-stylesheet højst
   må fylde 200 KB. Samme regler: hver regel afgrænset med [data-pattern=...]; grundlaget står i concept2.css.
   Ret ikke indholdet med SQL. */

/* ---- hero.split ---- */

/* Farveskyerne bag heroen ligger på sektionen, så de går bag både tekst og foto; giv sektionen fuld bredde, ellers
   stopper de ved containerens kant. Designets slørede cirkler er tegnet som radiale forløb. */
.c-section:has([data-pattern="hero.split"]) {
  position: relative;
  isolation: isolate;
}

.c-section:has([data-pattern="hero.split"])::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

/* home: en farvesky til højre, der skifter tone med den valgte fane (efter fanens plads), en sandfarvet nederst til
   venstre og et fint korn over det hele. */
.c-section:has([data-pattern="hero.split"][data-pattern-params~="variant=home"])::before {
  --uw-hero-r1: min(550px, 37vw);
  --uw-hero-r2: min(350px, 25vw);
  background:
    url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='180'%20height='180'%3E%3Cfilter%20id='n'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='.85'%20numOctaves='2'%20stitchTiles='stitch'/%3E%3CfeColorMatrix%20values='0%200%200%200%20.08%200%200%200%200%20.1%200%200%200%200%20.16%200%200%200%20.045%200'/%3E%3C/filter%3E%3Crect%20width='100%25'%20height='100%25'%20filter='url(%23n)'/%3E%3C/svg%3E"),
    radial-gradient(circle calc(var(--uw-hero-r1) + 90px) at calc(112% - var(--uw-hero-r1)) calc(var(--uw-hero-r1) - 18%), color-mix(in srgb, var(--uw-hero-tint, #eee5de) 95%, transparent) 45%, transparent),
    radial-gradient(circle calc(var(--uw-hero-r2) + 90px) at calc(var(--uw-hero-r2) - 14%) calc(130% - var(--uw-hero-r2)), color-mix(in srgb, #efe6d8 80%, transparent) 45%, transparent);
}

.c-section:has([data-pattern="hero.split"][data-pattern-params~="variant=home"] .c-tab:nth-child(2)[aria-selected="true"]) {
  --uw-hero-tint: #dfe4e8;
}

.c-section:has([data-pattern="hero.split"][data-pattern-params~="variant=home"] .c-tab:nth-child(3)[aria-selected="true"]) {
  --uw-hero-tint: #ede3df;
}

.c-section:has([data-pattern="hero.split"][data-pattern-params~="variant=home"] .c-tab:nth-child(4)[aria-selected="true"]) {
  --uw-hero-tint: #ede6d9;
}

.c-section:has([data-pattern="hero.split"][data-pattern-params~="variant=home"] .c-tab:nth-child(5)[aria-selected="true"]) {
  --uw-hero-tint: #e0e6dc;
}

/* kontakt og materialeguide: to skyer øverst, der toner ud nedad. */
.c-section:has([data-pattern="hero.split"][data-pattern-params~="variant=kontakt"])::before {
  --uw-hero-r1: min(460px, 32vw);
  --uw-hero-r2: min(320px, 23vw);
  background:
    radial-gradient(circle calc(var(--uw-hero-r1) + 110px) at calc(106% - var(--uw-hero-r1)) calc(var(--uw-hero-r1) - 380px), color-mix(in srgb, #dce3da 90%, transparent) 40%, transparent),
    radial-gradient(circle calc(var(--uw-hero-r2) + 110px) at calc(var(--uw-hero-r2) - 16%) calc(var(--uw-hero-r2) - 140px), color-mix(in srgb, #efe6d8 75%, transparent) 40%, transparent);
  -webkit-mask-image: linear-gradient(180deg, #000 50%, transparent);
  mask-image: linear-gradient(180deg, #000 50%, transparent);
}

.c-section:has([data-pattern="hero.split"][data-pattern-params~="variant=materialeguide"])::before {
  --uw-hero-r1: min(460px, 32vw);
  --uw-hero-r2: min(320px, 24vw);
  background:
    radial-gradient(circle calc(var(--uw-hero-r1) + 110px) at calc(106% - var(--uw-hero-r1)) calc(var(--uw-hero-r1) - 360px), color-mix(in srgb, #e9ded2 95%, transparent) 40%, transparent),
    radial-gradient(circle calc(var(--uw-hero-r2) + 110px) at calc(var(--uw-hero-r2) - 18%) calc(var(--uw-hero-r2) + 120px), color-mix(in srgb, #e0e6dc 75%, transparent) 40%, transparent);
  -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent);
  mask-image: linear-gradient(180deg, #000 55%, transparent);
}

/* Brødkrummen er sidetræets og står over mønstret, når sektionen har showBreadcrumb. */
.c-section:has([data-pattern="hero.split"]) .breadcrumb {
  --breadcrumb-separator: "";
  font-size: 13.5px;
  color: var(--uw-body);
}

.c-section:has([data-pattern="hero.split"]) .breadcrumb-sep::before {
  display: block;
  width: 14px;
  height: 14px;
  opacity: 1;
  background-color: var(--c-muted, var(--c-color-muted));
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='m9%2018%206-6-6-6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='m9%2018%206-6-6-6'/%3E%3C/svg%3E") center / contain no-repeat;
}

.c-section:has([data-pattern="hero.split"]) .breadcrumb-link {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  opacity: 1;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 4px;
  transition: text-decoration-color 0.2s, color 0.2s;
}

.c-section:has([data-pattern="hero.split"]) .breadcrumb-link:hover {
  color: var(--c-fg, var(--c-color-fg));
  text-decoration-color: currentColor;
}

.c-section:has([data-pattern="hero.split"]) .breadcrumb-current {
  font-weight: 500;
  color: var(--c-fg, var(--c-color-fg));
}

/* Overskriften: sidens h1 i to korte linjer. Bredden i em giver designets linjeskift; ord, der skal blive sammen på
   anden linje, bindes med hårde mellemrum i teksten. */
[data-pattern="hero.split"] [data-part="heading"].c-heading {
  color: var(--c-fg, var(--c-color-fg));
}

[data-pattern="hero.split"] [data-part="heading"].c-heading .c-accent {
  position: relative;
  white-space: nowrap;
}

/* Den håndtegnede grønne streg under det kursive ord tegner sig selv ind. */
[data-pattern="hero.split"] [data-part="heading"].c-heading .c-accent::after {
  content: "";
  position: absolute;
  left: 2%;
  right: 4%;
  bottom: -0.1em;
  height: 0.16em;
  background: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20240%2016'%20preserveAspectRatio='none'%3E%3Cpath%20d='M3%2010%20C%2040%203,%2070%2014,%20110%208%20S%20190%202,%20237%209'%20fill='none'%20stroke='%230ABF8B'%20stroke-width='4'%20stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
  transform-origin: left;
  animation: uw-hero-split-swash 1.2s 0.9s var(--uw-ease) both;
}

@keyframes uw-hero-split-swash {
  from {
    transform: scaleX(0);
  }
}

[data-pattern="hero.split"] [data-part="heading"].c-heading + .c-text {
  max-width: 44ch;
  margin-top: 30px;
  font-size: clamp(17px, 1.35vw, 19px);
  line-height: 1.6;
}

/* Etiketten over fanerne (home) og over kapitelpillerne (materialeguide). */
[data-pattern="hero.split"] [data-part="audiences-label"].c-text:has(+ .c-tabs),
[data-pattern="hero.split"][data-pattern-params~="variant=materialeguide"] [data-part="pills-label"].c-text {
  margin-bottom: var(--c-space-xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-muted, var(--c-color-muted));
}

/* Det sekundære link; et ankerlink på siden får en pil nedad. */
[data-pattern="hero.split"] > :first-child > :first-child > .c-link[href^="#"]::after {
  content: "";
  flex: none;
  width: 18px;
  height: 18px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M12%205v14'/%3E%3Cpath%20d='m19%2012-7%207-7-7'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M12%205v14'/%3E%3Cpath%20d='m19%2012-7%207-7-7'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: translate 0.25s;
}

[data-pattern="hero.split"] > :first-child > :first-child > .c-link[href^="#"]:hover::after {
  translate: 0 3px;
}

/* Billedteksten på fotoet: en frostet pille med en grøn prik. */
[data-pattern="hero.split"] :is([data-part="audience-caption"], [data-part="caption"]).c-text {
  display: inline-flex;
  align-items: center;
  gap: var(--c-space-2xs);
  margin: 20px;
  padding: 10px var(--c-space-sm);
  border-radius: 999px;
  background: color-mix(in srgb, var(--uw-paper) 86%, transparent);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
  color: var(--uw-ink);
}

[data-pattern="hero.split"] :is([data-part="audience-caption"], [data-part="caption"]).c-text::before {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--uw-green);
}

/* Den roterende badge: papircirkel med ringteksten (SVG) om en blæk-kerne med ikonet. */
[data-pattern="hero.split"] [data-part="ring"].c-box {
  position: absolute;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 150px;
  height: 150px;
  color: var(--uw-ink);
  pointer-events: none;
}

[data-pattern="hero.split"] .c-layer > .c-box > .c-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  animation: uw-hero-split-ring 32s linear infinite;
}

[data-pattern="hero.split"] [data-part="ring-icon"].c-icon[data-shape="circle"] {
  --c-icon-size: 22px;
  position: relative;
  z-index: 1;
  align-self: center;
  padding: 18px;
  background: var(--uw-ink);
  color: var(--uw-paper);
}

@keyframes uw-hero-split-ring {
  to {
    rotate: 360deg;
  }
}

/* ---- hero.split · home ---- */

/* Fanerne kan kun skifte deres eget panel (plan D5), så alt, der skifter med målgruppen (foto, billedtekst og knap),
   ligger i panelet. Tekstkolonnen, fanerne og det synlige panel lægges ud i ét gitter (display: contents), så
   panelets foto står i højre kolonne og knappen under fanerne ved siden af linket, som i designet. Rækkerne:
   1 og 9 fordeler højden, 2 eyebrow, 3 h1, 4 intro, 5 etiket, 6 faner, 7 knap og link, 8 løfter. */
[data-pattern="hero.split"][data-pattern-params~="variant=home"] [data-part="cols"] {
  grid-template-columns: max-content minmax(0, 1fr) clamp(28px, 5vw, 96px) calc((100% - clamp(28px, 5vw, 96px)) * 0.5192);
  grid-template-rows: 1fr repeat(7, auto) 1fr;
  gap: 0;
}

[data-pattern="hero.split"][data-pattern-params~="variant=home"] [data-part="copy"],
[data-pattern="hero.split"][data-pattern-params~="variant=home"] [data-part="audiences"].c-tabs,
[data-pattern="hero.split"][data-pattern-params~="variant=home"] [data-part="audiences"].c-tabs > .c-tab-panel:not([hidden]),
[data-pattern="hero.split"][data-pattern-params~="variant=home"] [data-part="audience"].c-tab-panel > div {
  display: contents;
}

/* Uden JavaScript: kun første målgruppe, og fanerækkens plads holdes, så intet flytter sig, når den vises. */
[data-pattern="hero.split"][data-pattern-params~="variant=home"] > :first-child > :first-child > .c-tabs:not([data-ready]) > .c-tab-panel ~ .c-tab-panel,
[data-pattern="hero.split"][data-pattern-params~="variant=home"] [data-part="audience"].c-tab-panel > h3 {
  display: none;
}

[data-pattern="hero.split"][data-pattern-params~="variant=home"] > :first-child > :first-child > .c-tabs > .c-tabs-list[hidden] {
  display: flex;
  visibility: hidden;
}

[data-pattern="hero.split"][data-pattern-params~="variant=home"] [data-part="copy"] > * {
  grid-column: 1 / 3;
}

[data-pattern="hero.split"][data-pattern-params~="variant=home"] [data-part="eyebrow"].c-eyebrow {
  grid-row: 2;
}

[data-pattern="hero.split"][data-pattern-params~="variant=home"] [data-part="heading"].c-heading {
  grid-row: 3;
  max-width: 5em;
  margin-top: var(--c-space-md);
  font-size: var(--c-font-display);
  line-height: 0.88;
  letter-spacing: -0.045em;
}

[data-pattern="hero.split"][data-pattern-params~="variant=home"] [data-part="heading"].c-heading + .c-text {
  grid-row: 4;
}

[data-pattern="hero.split"][data-pattern-params~="variant=home"] [data-part="audiences-label"].c-text:has(+ .c-tabs) {
  grid-row: 5;
  margin-top: 34px;
}

/* Fanerne som chips: hvide piller med en hårfin kant, den valgte blæk. */
[data-pattern="hero.split"][data-pattern-params~="variant=home"] .c-tabs-list {
  grid-row: 6;
  grid-column: 1 / 3;
  flex-wrap: wrap;
  gap: var(--c-space-2xs);
  margin: 0;
  border: 0;
  overflow: visible;
}

[data-pattern="hero.split"][data-pattern-params~="variant=home"] .c-tabs-list > .c-tab {
  display: inline-flex;
  align-items: center;
  height: 46px;
  padding: 0 20px;
  border: 0;
  border-radius: 999px;
  background: var(--uw-white);
  box-shadow: inset 0 0 0 1px var(--c-border, var(--c-color-border));
  font-size: 15px;
  font-weight: 500;
  white-space: nowrap;
  color: var(--c-fg, var(--c-color-fg));
  transition: background-color 0.3s, color 0.3s, box-shadow 0.3s;
}

[data-pattern="hero.split"][data-pattern-params~="variant=home"] .c-tabs-list > .c-tab[aria-selected="true"] {
  background: var(--uw-ink);
  box-shadow: inset 0 0 0 1px var(--uw-ink);
  color: var(--uw-paper);
}

[data-pattern="hero.split"][data-pattern-params~="variant=home"] .c-tabs-list > .c-tab:focus-visible {
  outline: 2px solid var(--uw-green-ink);
  outline-offset: 3px;
}

/* Panelets foto i højre kolonne over alle rækker: buen øverst og en blød skygge. */
[data-pattern="hero.split"][data-pattern-params~="variant=home"] [data-part="audience-media"].c-layer,
[data-pattern="hero.split"][data-pattern-params~="variant=home"] [data-part="media"] {
  grid-column: 4;
  grid-row: 1 / -1;
  justify-self: end;
  align-self: center;
  width: 100%;
  max-width: 660px;
}

[data-pattern="hero.split"][data-pattern-params~="variant=home"] [data-part="audience-media"].c-layer {
  background: #e8dfd2;
  box-shadow: 0 1px 1px color-mix(in srgb, var(--uw-ink) 5%, transparent), 0 20px 22px color-mix(in srgb, var(--uw-ink) 16%, transparent);
}

[data-pattern="hero.split"][data-pattern-params~="variant=home"][data-pattern-params~="imageShape=arch"] [data-part="audience-media"].c-layer {
  border-radius: 50% 50% 32px 32px / 42% 42% 32px 32px;
}

/* Designets beskæring pr. målgruppe, efter fanens plads. */
[data-pattern="hero.split"][data-pattern-params~="variant=home"] [data-part="audience-photo"].c-image > img {
  object-position: center 30%;
}

[data-pattern="hero.split"][data-pattern-params~="variant=home"] .c-tab-panel:nth-of-type(1) > div > .c-layer > .c-image > img {
  object-position: center 22%;
}

[data-pattern="hero.split"][data-pattern-params~="variant=home"] .c-tab-panel:nth-of-type(3) > div > .c-layer > .c-image > img {
  object-position: center 45%;
}

[data-pattern="hero.split"][data-pattern-params~="variant=home"] .c-tab-panel:nth-of-type(4) > div > .c-layer > .c-image > img {
  object-position: 40% center;
}

[data-pattern="hero.split"][data-pattern-params~="variant=home"] .c-tab-panel:nth-of-type(5) > div > .c-layer > .c-image > img {
  object-position: center 35%;
}

/* Badgen ligger i et tomt lag oven på panelets foto, så den står fast, mens fanerne skifter. */
[data-pattern="hero.split"][data-pattern-params~="variant=home"] [data-part="media"] {
  pointer-events: none;
}

[data-pattern="hero.split"][data-pattern-params~="variant=home"] [data-part="ring"].c-box {
  top: 7%;
  right: -26px;
}

/* Knap og link på samme række, linket 28px efter knappen. */
[data-pattern="hero.split"][data-pattern-params~="variant=home"] [data-part="audience-button"].btn-primary {
  grid-column: 1;
  grid-row: 7;
  justify-self: start;
  margin-top: 30px;
}

[data-pattern="hero.split"][data-pattern-params~="variant=home"] [data-part="secondary"].c-link {
  grid-column: 2;
  grid-row: 7;
  align-self: center;
  justify-self: start;
  margin: 30px 0 0 28px;
}

/* Løfterne. */
[data-pattern="hero.split"][data-pattern-params~="variant=home"] [data-part="promises"]:not(.c-link, .c-tabs) {
  grid-row: 8;
  gap: var(--c-space-xs) 26px;
  margin-top: 36px;
}

[data-pattern="hero.split"][data-pattern-params~="variant=home"] [data-part="promises"]:not(.c-link, .c-tabs) > * {
  gap: 9px;
}

[data-pattern="hero.split"][data-pattern-params~="variant=home"] [data-part="promises"]:not(.c-link, .c-tabs) .c-icon {
  --c-icon-size: 18px;
  color: var(--uw-green-ink);
}

[data-pattern="hero.split"][data-pattern-params~="variant=home"] [data-part="promises"]:not(.c-link, .c-tabs) .c-text {
  font-size: var(--c-font-sm);
  color: var(--uw-body);
}

/* Tablet: én kolonne, fotoet (højst 560px) centreret under teksten. */
@media (max-width: 1023.98px) {
  [data-pattern="hero.split"][data-pattern-params~="variant=home"] [data-part="cols"] {
    grid-template-columns: max-content minmax(0, 1fr);
    grid-template-rows: none;
  }

  [data-pattern="hero.split"][data-pattern-params~="variant=home"] [data-part="audience-media"].c-layer,
  [data-pattern="hero.split"][data-pattern-params~="variant=home"] [data-part="media"] {
    grid-column: 1 / -1;
    grid-row: 9;
    justify-self: center;
    max-width: var(--c-container-sm, 560px);
    margin-top: clamp(28px, 5vw, 96px);
  }

  [data-pattern="hero.split"][data-pattern-params~="variant=home"] [data-part="audience-caption"].c-text {
    display: none;
  }

  [data-pattern="hero.split"][data-pattern-params~="variant=home"] [data-part="ring"].c-box {
    right: -10px;
  }
}

/* Mobil: chipsene swipes sidelæns, knappen i fuld bredde med linket under, ingen løfter. */
@media (max-width: 639.98px) {
  [data-pattern="hero.split"][data-pattern-params~="variant=home"] [data-part="heading"].c-heading {
    font-size: clamp(58px, 17vw, 84px);
  }

  [data-pattern="hero.split"][data-pattern-params~="variant=home"] .c-tabs-list {
    flex-wrap: nowrap;
    margin: 0 calc(-1 * var(--uw-gutter));
    padding: 0 var(--uw-gutter) 4px;
    overflow-x: auto;
    scrollbar-width: none;
  }

  [data-pattern="hero.split"][data-pattern-params~="variant=home"] .c-tabs-list::-webkit-scrollbar {
    display: none;
  }

  [data-pattern="hero.split"][data-pattern-params~="variant=home"] [data-part="audience-button"].btn-primary {
    grid-column: 1 / -1;
    justify-self: stretch;
  }

  [data-pattern="hero.split"][data-pattern-params~="variant=home"] [data-part="secondary"].c-link {
    grid-column: 1 / -1;
    grid-row: 8;
    margin: var(--c-space-xs) 0 0;
  }

  [data-pattern="hero.split"][data-pattern-params~="variant=home"] [data-part="promises"]:not(.c-link, .c-tabs) {
    display: none;
  }

  [data-pattern="hero.split"][data-pattern-params~="variant=home"] [data-part="ring"].c-box {
    top: 4%;
    right: 4px;
    width: 108px;
    height: 108px;
  }

  [data-pattern="hero.split"][data-pattern-params~="variant=home"] [data-part="ring-icon"].c-icon[data-shape="circle"] {
    padding: 11px;
  }
}

/* ---- hero.split · kontakt ---- */

[data-pattern="hero.split"][data-pattern-params~="variant=kontakt"] [data-part="cols"] {
  column-gap: clamp(28px, 5vw, 96px);
}

/* Fraunces' optiske størrelse gør små grader bredere, så bredden er em plus et fast tillæg. */
[data-pattern="hero.split"][data-pattern-params~="variant=kontakt"] [data-part="heading"].c-heading {
  max-width: calc(4.4em + 60px);
  margin-top: 18px;
  font-size: clamp(48px, 6.3vw, 98px);
  line-height: 0.94;
  letter-spacing: -0.04em;
}

/* Åbningstiderne i en pille under introen. Designets levende åben/lukket-status kræver kode (plan D5). */
[data-pattern="hero.split"][data-pattern-params~="variant=kontakt"] [data-part="heading"].c-heading + .c-text + .c-text {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: var(--c-space-xs);
  min-height: 50px;
  margin-top: 30px;
  padding: 9px 22px 9px 18px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--uw-white) 86%, transparent);
  box-shadow: inset 0 0 0 1px var(--c-border, var(--c-color-border)), 0 14px 30px -22px color-mix(in srgb, var(--uw-ink) 40%, transparent);
  font-size: var(--c-font-body);
  font-weight: 500;
  line-height: 1.35;
  color: var(--c-fg, var(--c-color-fg));
}

[data-pattern="hero.split"][data-pattern-params~="variant=kontakt"] [data-part="heading"].c-heading + .c-text + .c-text::before {
  content: "";
  flex: none;
  width: 18px;
  height: 18px;
  background-color: var(--uw-green-ink);
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='12'%20cy='12'%20r='10'/%3E%3Cpath%20d='M12%206v6l4%202'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='12'%20cy='12'%20r='10'/%3E%3Cpath%20d='M12%206v6l4%202'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Fotoet i designets eget format (lidt bredere end kvadratisk), med badgen over hjørnet nederst til venstre. */
[data-pattern="hero.split"][data-pattern-params~="variant=kontakt"] [data-part="frame"].c-layer {
  aspect-ratio: 1.16;
}

[data-pattern="hero.split"][data-pattern-params~="variant=kontakt"] [data-part="photo"].c-image {
  background: #e8dfd2;
  box-shadow: var(--c-shadow-md);
}

[data-pattern="hero.split"][data-pattern-params~="variant=kontakt"] [data-part="photo"].c-image img {
  object-position: center 47%;
}

[data-pattern="hero.split"][data-pattern-params~="variant=kontakt"] [data-part="ring"].c-box {
  bottom: -46px;
  left: -46px;
}

/* Kontaktkortene: hvide kort med en hårfin kant; hele kortet er linket, og pilen drejer ved hover. */
[data-pattern="hero.split"][data-pattern-params~="variant=kontakt"] [data-part="cards"] {
  margin-top: clamp(64px, 7vw, 104px);
}

[data-pattern="hero.split"][data-pattern-params~="variant=kontakt"] [data-part="card"].c-box {
  --uw-card-pad: clamp(22px, 2.2vw, 30px);
  position: relative;
  padding: var(--uw-card-pad);
  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="hero.split"][data-pattern-params~="variant=kontakt"] [data-part="card"].c-box: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="hero.split"][data-pattern-params~="variant=kontakt"] [data-part="card-icon"].c-icon[data-shape="circle"] {
  --c-icon-size: 22px;
  align-self: flex-start;
  padding: 15px;
  background: var(--uw-linen);
  color: var(--uw-green-ink);
}

[data-pattern="hero.split"][data-pattern-params~="variant=kontakt"] [data-part="card-icon"].c-icon + .c-text {
  margin-top: 44px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-muted, var(--c-color-muted));
}

[data-pattern="hero.split"][data-pattern-params~="variant=kontakt"] [data-part="card-link"].c-link {
  position: static;
  min-height: 0;
  margin-top: 10px;
  font-family: var(--c-font-serif);
  font-size: clamp(28px, 2.6vw, 40px);
  font-weight: 300;
  font-variation-settings: "SOFT" 100, "WONK" 0;
  line-height: 1.04;
  letter-spacing: -0.025em;
  overflow-wrap: anywhere;
  text-decoration: none;
  color: var(--c-fg, var(--c-color-fg));
}

[data-pattern="hero.split"][data-pattern-params~="variant=kontakt"] [data-part="card-link"].c-link::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
}

[data-pattern="hero.split"][data-pattern-params~="variant=kontakt"] [data-part="card-link"].c-link:focus-visible {
  outline: none;
}

[data-pattern="hero.split"][data-pattern-params~="variant=kontakt"] [data-part="card-link"].c-link:focus-visible::before {
  outline: 2px solid var(--uw-green-ink);
  outline-offset: 3px;
}

[data-pattern="hero.split"][data-pattern-params~="variant=kontakt"] [data-part="card-link"].c-link::after {
  content: "";
  position: absolute;
  top: var(--uw-card-pad);
  right: var(--uw-card-pad);
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--uw-ink) 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") center / 18px no-repeat;
  transition: rotate 0.35s var(--uw-ease), translate 0.35s var(--uw-ease);
}

[data-pattern="hero.split"][data-pattern-params~="variant=kontakt"] [data-part="card"].c-box > .c-link[href^="#"]::after {
  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='M12%205v14'/%3E%3Cpath%20d='m19%2012-7%207-7-7'/%3E%3C/svg%3E");
}

[data-pattern="hero.split"][data-pattern-params~="variant=kontakt"] [data-part="card"].c-box:hover > .c-link::after {
  rotate: -45deg;
}

[data-pattern="hero.split"][data-pattern-params~="variant=kontakt"] [data-part="card"].c-box:hover > .c-link[href^="#"]::after {
  rotate: none;
  translate: 0 3px;
}

[data-pattern="hero.split"][data-pattern-params~="variant=kontakt"] [data-part="card-link"].c-link + .c-text {
  margin-top: var(--c-space-xs);
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--uw-body);
}

/* Tablet: teksten og et smallere, højt foto side om side; kortene stablet med ikonet til venstre og pilen til højre. */
@media (max-width: 1023.98px) {
  [data-pattern="hero.split"][data-pattern-params~="variant=kontakt"] [data-part="cols"] {
    column-gap: 28px;
  }

  [data-pattern="hero.split"][data-pattern-params~="variant=kontakt"] [data-part="frame"].c-layer {
    aspect-ratio: 0.82;
  }

  [data-pattern="hero.split"][data-pattern-params~="variant=kontakt"] [data-part="photo"].c-image img {
    object-position: center 52%;
  }

  [data-pattern="hero.split"][data-pattern-params~="variant=kontakt"] [data-part="ring"].c-box {
    bottom: -30px;
    left: -22px;
    width: 112px;
    height: 112px;
  }

  [data-pattern="hero.split"][data-pattern-params~="variant=kontakt"] [data-part="ring-icon"].c-icon[data-shape="circle"] {
    padding: 11px;
  }

  [data-pattern="hero.split"][data-pattern-params~="variant=kontakt"] [data-part="card"].c-box {
    --uw-card-pad: 22px;
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr) 46px;
    column-gap: 18px;
    align-content: start;
    padding: 20px 22px;
  }

  [data-pattern="hero.split"][data-pattern-params~="variant=kontakt"] [data-part="card-icon"].c-icon[data-shape="circle"] {
    grid-row: 1 / span 3;
  }

  [data-pattern="hero.split"][data-pattern-params~="variant=kontakt"] [data-part="card"].c-box > :not(.c-icon) {
    grid-column: 2;
  }

  [data-pattern="hero.split"][data-pattern-params~="variant=kontakt"] [data-part="card-icon"].c-icon + .c-text {
    margin-top: 0;
  }

  [data-pattern="hero.split"][data-pattern-params~="variant=kontakt"] [data-part="card-link"].c-link {
    margin-top: var(--c-space-3xs);
    font-size: var(--c-font-h4);
  }

  [data-pattern="hero.split"][data-pattern-params~="variant=kontakt"] [data-part="card-link"].c-link + .c-text {
    margin-top: 6px;
  }

  [data-pattern="hero.split"][data-pattern-params~="variant=kontakt"] [data-part="card-link"].c-link::after {
    top: 50%;
    translate: 0 -50%;
  }

  [data-pattern="hero.split"][data-pattern-params~="variant=kontakt"] [data-part="card"].c-box:hover > .c-link[href^="#"]::after {
    translate: 0 calc(-50% + 3px);
  }
}

/* Mobil: én kolonne, fotoet under pillen med badgen inde i fotoets hjørne, mindre kort. */
@media (max-width: 639.98px) {
  [data-pattern="hero.split"][data-pattern-params~="variant=kontakt"] [data-part="heading"].c-heading {
    margin-top: 14px;
    font-size: clamp(44px, 12.4vw, 56px);
  }

  [data-pattern="hero.split"][data-pattern-params~="variant=kontakt"] [data-part="heading"].c-heading + .c-text + .c-text {
    align-self: stretch;
    margin-top: 22px;
    padding: 10px 18px 10px var(--c-space-sm);
    border-radius: 20px;
    font-size: 14.5px;
  }

  [data-pattern="hero.split"][data-pattern-params~="variant=kontakt"] [data-part="frame"].c-layer {
    aspect-ratio: 1.2;
  }

  [data-pattern="hero.split"][data-pattern-params~="variant=kontakt"] [data-part="photo"].c-image img {
    object-position: center 46%;
  }

  [data-pattern="hero.split"][data-pattern-params~="variant=kontakt"] [data-part="ring"].c-box {
    right: 12px;
    bottom: 12px;
    left: auto;
    width: 100px;
    height: 100px;
  }

  [data-pattern="hero.split"][data-pattern-params~="variant=kontakt"] [data-part="ring-icon"].c-icon[data-shape="circle"] {
    --c-icon-size: 18px;
  }

  [data-pattern="hero.split"][data-pattern-params~="variant=kontakt"] [data-part="cards"] {
    margin-top: 28px;
  }

  [data-pattern="hero.split"][data-pattern-params~="variant=kontakt"] [data-part="card"].c-box {
    --uw-card-pad: var(--c-space-sm);
    grid-template-columns: 44px minmax(0, 1fr) 40px;
    column-gap: 14px;
    padding: 18px var(--c-space-sm) 18px 18px;
    border-radius: var(--c-radius-xl);
  }

  [data-pattern="hero.split"][data-pattern-params~="variant=kontakt"] [data-part="card-icon"].c-icon[data-shape="circle"] {
    padding: 11px;
  }

  [data-pattern="hero.split"][data-pattern-params~="variant=kontakt"] [data-part="card-link"].c-link {
    font-size: var(--c-font-h5);
  }

  [data-pattern="hero.split"][data-pattern-params~="variant=kontakt"] [data-part="card-link"].c-link::after {
    width: 40px;
    height: 40px;
  }

  [data-pattern="hero.split"][data-pattern-params~="variant=kontakt"] [data-part="card-link"].c-link + .c-text {
    font-size: var(--c-font-sm);
  }
}

/* ---- hero.split · materialeguide ---- */

[data-pattern="hero.split"][data-pattern-params~="variant=materialeguide"] [data-part="cols"] {
  column-gap: clamp(28px, 6vw, 112px);
}

[data-pattern="hero.split"][data-pattern-params~="variant=materialeguide"] [data-part="heading"].c-heading {
  max-width: 6.8em;
  margin-top: 20px;
  font-size: clamp(50px, 6.3vw, 98px);
  line-height: 0.93;
  letter-spacing: -0.042em;
}

[data-pattern="hero.split"][data-pattern-params~="variant=materialeguide"] [data-part="pills-label"].c-text {
  margin-top: 36px;
}

/* Hop-pillerne: hvid pille med et stofelt (efter pillens plads: bambus, bomuld, uld, merinould, uld/silke), et
   fortløbende nummer og materialets navn. Designets grønne "anbefalet"-prik følger vælgeren længere nede og kræver
   kode; den er udeladt. */
[data-pattern="hero.split"][data-pattern-params~="variant=materialeguide"] [data-part="pills"]:not(.c-text) {
  counter-reset: uw-hero-pill;
}

[data-pattern="hero.split"][data-pattern-params~="variant=materialeguide"] > :first-child > :first-child > div:not(.c-text) > .c-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 52px;
  min-height: 0;
  padding: 0 20px 0 6px;
  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-body);
  font-weight: 500;
  white-space: nowrap;
  text-decoration: none;
  color: var(--c-fg, var(--c-color-fg));
  counter-increment: uw-hero-pill;
  transition: box-shadow 0.25s, transform 0.35s var(--uw-ease);
}

[data-pattern="hero.split"][data-pattern-params~="variant=materialeguide"] > :first-child > :first-child > div:not(.c-text) > .c-link:hover {
  box-shadow: inset 0 0 0 1.5px var(--c-fg, var(--c-color-fg));
  transform: translateY(-2px);
}

[data-pattern="hero.split"][data-pattern-params~="variant=materialeguide"] > :first-child > :first-child > div:not(.c-text) > .c-link::before {
  content: "";
  flex: none;
  order: -2;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #e8dfd2;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--uw-ink) 6%, transparent);
}

[data-pattern="hero.split"][data-pattern-params~="variant=materialeguide"] > :first-child > :first-child > div:not(.c-text) > .c-link::after {
  content: counter(uw-hero-pill, decimal-leading-zero);
  order: -1;
  font-size: var(--c-font-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
  color: var(--c-muted, var(--c-color-muted));
}

[data-pattern="hero.split"][data-pattern-params~="variant=materialeguide"] > :first-child > :first-child > div:not(.c-text) > .c-link:nth-child(1)::before {
  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="hero.split"][data-pattern-params~="variant=materialeguide"] > :first-child > :first-child > div:not(.c-text) > .c-link:nth-child(2)::before {
  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="hero.split"][data-pattern-params~="variant=materialeguide"] > :first-child > :first-child > div:not(.c-text) > .c-link:nth-child(3)::before {
  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="hero.split"][data-pattern-params~="variant=materialeguide"] > :first-child > :first-child > div:not(.c-text) > .c-link:nth-child(4)::before {
  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="hero.split"][data-pattern-params~="variant=materialeguide"] > :first-child > :first-child > div:not(.c-text) > .c-link:nth-child(5)::before {
  background-color: #ecd9d2;
  background-image: linear-gradient(115deg, transparent 24%, color-mix(in srgb, var(--uw-white) 62%, transparent) 46%, transparent 68%);
}

[data-pattern="hero.split"][data-pattern-params~="variant=materialeguide"] [data-part="secondary"].c-link {
  margin-top: 20px;
}

/* Fotoet til højre (højst 590px) med badgen øverst til højre, billedteksten nederst og overblikskortet, der stikker
   ud over venstre kant. Kortet står uden for fotoets lag, så resten af fotoet ikke bliver et link. */
[data-pattern="hero.split"][data-pattern-params~="variant=materialeguide"] [data-part="media"] {
  position: relative;
  justify-self: end;
  width: 100%;
  max-width: 590px;
}

[data-pattern="hero.split"][data-pattern-params~="variant=materialeguide"] [data-part="frame"].c-layer {
  aspect-ratio: 0.86;
}

[data-pattern="hero.split"][data-pattern-params~="variant=materialeguide"] .c-layer > .c-image {
  border-radius: 32px;
  background: #e8dfd2;
  box-shadow: var(--c-shadow-md);
}

[data-pattern="hero.split"][data-pattern-params~="variant=materialeguide"] .c-layer > .c-image img {
  object-position: center 28%;
}

[data-pattern="hero.split"][data-pattern-params~="variant=materialeguide"] .c-layer > .c-text {
  margin: 18px;
  background: color-mix(in srgb, var(--uw-paper) 88%, transparent);
}

[data-pattern="hero.split"][data-pattern-params~="variant=materialeguide"] [data-part="ring"].c-box {
  top: 6%;
  right: -30px;
}

[data-pattern="hero.split"][data-pattern-params~="variant=materialeguide"] > :first-child > :last-child > .c-box {
  position: absolute;
  bottom: 84px;
  left: -56px;
  z-index: 3;
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) 44px;
  align-items: center;
  column-gap: 14px;
  width: min(320px, 80%);
  background: var(--uw-white);
  color: var(--c-fg, var(--c-color-fg));
  animation: uw-hero-split-bob 7s ease-in-out infinite;
}

/* Det lille prikgitter (fyldte og tomme prikker) i et linnedfelt. */
[data-pattern="hero.split"][data-pattern-params~="variant=materialeguide"] > :first-child > :last-child > .c-box::before {
  content: "";
  grid-row: 1 / span 2;
  grid-column: 1;
  width: 52px;
  height: 52px;
  border-radius: 16px;
  background: var(--uw-linen) url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='34'%20height='30'%20viewBox='0%200%2034%2030'%3E%3Cg%20fill='%23141C2B'%3E%3Ccircle%20cx='5'%20cy='5'%20r='3.2'/%3E%3Ccircle%20cx='5'%20cy='15'%20r='3.2'/%3E%3Ccircle%20cx='17'%20cy='15'%20r='3.2'/%3E%3Ccircle%20cx='5'%20cy='25'%20r='3.2'/%3E%3Ccircle%20cx='17'%20cy='25'%20r='3.2'/%3E%3Ccircle%20cx='29'%20cy='25'%20r='3.2'/%3E%3C/g%3E%3Cg%20fill='none'%20stroke='%23B9AE9E'%20stroke-width='1.4'%3E%3Ccircle%20cx='17'%20cy='5'%20r='2.6'/%3E%3Ccircle%20cx='29'%20cy='5'%20r='2.6'/%3E%3Ccircle%20cx='29'%20cy='15'%20r='2.6'/%3E%3C/g%3E%3C/svg%3E") center / 34px 30px no-repeat;
}

[data-pattern="hero.split"][data-pattern-params~="variant=materialeguide"] > :first-child > :last-child > .c-box > * {
  grid-column: 2;
}

[data-pattern="hero.split"][data-pattern-params~="variant=materialeguide"] > :first-child > :last-child > .c-box > .c-text {
  align-self: end;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-muted, var(--c-color-muted));
}

[data-pattern="hero.split"][data-pattern-params~="variant=materialeguide"] > :first-child > :last-child > .c-box > .c-link {
  position: static;
  align-self: start;
  min-height: 0;
  margin-top: 2px;
  font-size: 14.5px;
  font-weight: 500;
  line-height: 1.3;
  text-decoration: none;
  color: var(--c-fg, var(--c-color-fg));
}

[data-pattern="hero.split"][data-pattern-params~="variant=materialeguide"] > :first-child > :last-child > .c-box > .c-link::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
}

[data-pattern="hero.split"][data-pattern-params~="variant=materialeguide"] > :first-child > :last-child > .c-box > .c-link::after {
  content: "";
  position: absolute;
  top: 50%;
  right: var(--c-space-xs);
  width: 44px;
  height: 44px;
  margin-top: -22px;
  border-radius: 50%;
  background: var(--uw-ink) 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='M12%205v14'/%3E%3Cpath%20d='m19%2012-7%207-7-7'/%3E%3C/svg%3E") center / 18px no-repeat;
  transition: translate 0.3s;
}

[data-pattern="hero.split"][data-pattern-params~="variant=materialeguide"] > :first-child > :last-child > .c-box:hover > .c-link::after {
  translate: 0 3px;
}

@keyframes uw-hero-split-bob {
  50% {
    translate: 0 -10px;
  }
}

/* Tablet: et smallere foto (300px) side om side med teksten; billedtekst og overblikskort skjules. */
@media (max-width: 1023.98px) {
  [data-pattern="hero.split"][data-pattern-params~="variant=materialeguide"] .c-layer > .c-text,
  [data-pattern="hero.split"][data-pattern-params~="variant=materialeguide"] > :first-child > :last-child > .c-box {
    display: none;
  }

  [data-pattern="hero.split"][data-pattern-params~="variant=materialeguide"] [data-part="ring"].c-box {
    top: -18px;
    right: -8px;
    width: 112px;
    height: 112px;
  }

  [data-pattern="hero.split"][data-pattern-params~="variant=materialeguide"] [data-part="ring-icon"].c-icon[data-shape="circle"] {
    padding: 11px;
  }
}

/* Mobil: fotoet i fuld bredde og kvadratisk, pillerne swipes sidelæns. */
@media (max-width: 639.98px) {
  [data-pattern="hero.split"][data-pattern-params~="variant=materialeguide"] [data-part="heading"].c-heading {
    margin-top: 14px;
    font-size: clamp(44px, 12.4vw, 58px);
  }

  [data-pattern="hero.split"][data-pattern-params~="variant=materialeguide"] [data-part="pills-label"].c-text {
    margin-top: 26px;
  }

  [data-pattern="hero.split"][data-pattern-params~="variant=materialeguide"] [data-part="pills"]:not(.c-text) {
    margin: 0 calc(-1 * var(--uw-gutter));
    padding: 2px var(--uw-gutter) 6px;
    overflow-x: auto;
    scrollbar-width: none;
  }

  [data-pattern="hero.split"][data-pattern-params~="variant=materialeguide"] [data-part="pills"]:not(.c-text)::-webkit-scrollbar {
    display: none;
  }

  [data-pattern="hero.split"][data-pattern-params~="variant=materialeguide"] > :first-child > :first-child > div:not(.c-text) > .c-link {
    flex: none;
    height: 50px;
    padding: 0 var(--c-space-sm) 0 5px;
  }

  [data-pattern="hero.split"][data-pattern-params~="variant=materialeguide"] [data-part="secondary"].c-link {
    margin-top: 10px;
  }

  [data-pattern="hero.split"][data-pattern-params~="variant=materialeguide"] [data-part="media"] {
    justify-self: stretch;
    max-width: none;
  }

  [data-pattern="hero.split"][data-pattern-params~="variant=materialeguide"] [data-part="frame"].c-layer {
    aspect-ratio: 1;
  }

  [data-pattern="hero.split"][data-pattern-params~="variant=materialeguide"] .c-layer > .c-image {
    border-radius: 26px;
  }

  [data-pattern="hero.split"][data-pattern-params~="variant=materialeguide"] .c-layer > .c-text {
    display: inline-flex;
    margin: 12px;
  }

  [data-pattern="hero.split"][data-pattern-params~="variant=materialeguide"] [data-part="ring"].c-box {
    top: -24px;
    right: 10px;
    width: 100px;
    height: 100px;
  }
}

/* Mobil, alle varianter: introen lidt mindre og tættere på overskriften (home beholder 17px). */
@media (max-width: 639.98px) {
  [data-pattern="hero.split"]:not([data-pattern-params~="variant=home"]) [data-part="heading"].c-heading + .c-text {
    margin-top: 20px;
    font-size: 16.5px;
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-pattern="hero.split"] [data-part="heading"].c-heading .c-accent::after,
  [data-pattern="hero.split"] .c-layer > .c-box > .c-image,
  [data-pattern="hero.split"][data-pattern-params~="variant=materialeguide"] > :first-child > :last-child > .c-box {
    animation: none;
  }
}

/* Uniwear Concept 2, del "help": faq.answers, comparison.table, contact.form og products.pairs.
   Lead-agenten fletter blokkene ind i concept2-sections-2.css. Hver regel er afgrænset med mønstrets hook. */

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

/* Spørgsmålet: serif, en rund plus-knap til højre, der drejer til et blækkryds, når svaret er åbent.
   Accordionens egen chevron skjules; plusset tegnes med to forløb i currentColor. */
[data-pattern="faq.answers"] summary {
  gap: 20px;
  min-height: 80px;
  padding: var(--c-space-sm) 0;
  font-family: var(--c-font-serif);
  font-size: clamp(20px, 1.7vw, 25px);
  font-weight: 300;
  font-variation-settings: "SOFT" 100, "WONK" 0;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--c-fg, var(--c-color-fg));
}

[data-pattern="faq.answers"] summary > svg {
  display: none;
}

[data-pattern="faq.answers"] summary::after {
  content: "";
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background:
    linear-gradient(currentColor, currentColor) center / 13px 1.6px no-repeat,
    linear-gradient(currentColor, currentColor) center / 1.6px 13px no-repeat,
    var(--uw-white);
  box-shadow: inset 0 0 0 1px var(--c-border, var(--c-color-border));
  transition: background-color 0.35s, color 0.35s, transform 0.45s var(--uw-ease), box-shadow 0.35s;
}

[data-pattern="faq.answers"] summary:hover::after {
  box-shadow: inset 0 0 0 1px var(--c-fg, var(--c-color-fg));
}

[data-pattern="faq.answers"] details[open] > summary::after {
  background-color: var(--uw-ink);
  color: var(--uw-paper);
  box-shadow: inset 0 0 0 1px var(--uw-ink);
  transform: rotate(45deg);
}

[data-pattern="faq.answers"] [data-part="answer-text"].c-text {
  max-width: 66ch;
  font-size: 16.5px;
  line-height: 1.65;
}

[data-pattern="faq.answers"] details .c-link[data-style="arrow"] {
  font-size: var(--c-font-body);
}

/* kategori: streger mellem spørgsmålene, også over det første; svaret holder afstand til knappen. */
[data-pattern="faq.answers"][data-pattern-params~="variant=kategori"] details:first-child {
  border-top: 1px solid var(--c-border, var(--c-color-border));
}

[data-pattern="faq.answers"][data-pattern-params~="variant=kategori"] [data-part="answer"] > div {
  padding: 0 var(--c-space-2xl) 28px 0;
}

/* Kundeservicekortet: blæk (#141c2b), ikke nat, med én blød lyskegle øverst til højre. */
[data-pattern="faq.answers"][data-pattern-params~="variant=kategori"] [data-part="help"].c-box {
  overflow: hidden;
  background:
    radial-gradient(circle at calc(100% - 40px) 40px, color-mix(in srgb, #24345a 90%, transparent) 0 90px, transparent 200px),
    var(--uw-ink);
}

[data-pattern="faq.answers"][data-pattern-params~="variant=kategori"] [data-part="help-heading"].c-heading {
  margin-top: 14px;
  font-size: clamp(34px, 3vw, 46px);
  line-height: 1;
  letter-spacing: -0.025em;
  color: var(--uw-paper);
}

[data-pattern="faq.answers"][data-pattern-params~="variant=kategori"] [data-part="help-text"].c-text {
  margin-top: 14px;
  max-width: 34ch;
  font-size: 15.5px;
  line-height: 1.55;
  color: #d6d1c8;
}

[data-pattern="faq.answers"][data-pattern-params~="variant=kategori"] > .c-box a.c-link[href^="tel:"] {
  margin-top: 26px;
  min-height: 0;
  font-family: var(--c-font-serif);
  font-size: clamp(34px, 3vw, 44px);
  font-weight: 300;
  font-variation-settings: "SOFT" 100, "WONK" 0;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--uw-paper);
  text-decoration: none;
  transition: color 0.2s;
}

[data-pattern="faq.answers"][data-pattern-params~="variant=kategori"] > .c-box a.c-link[href^="tel:"]:hover {
  color: var(--c-accent, var(--uw-green));
}

[data-pattern="faq.answers"][data-pattern-params~="variant=kategori"] [data-part="help-email"].c-link[href^="mailto:"] {
  margin-top: 6px;
  font-size: 16px;
  color: var(--uw-paper);
  text-underline-offset: 5px;
  text-decoration-color: color-mix(in srgb, var(--uw-paper) 40%, transparent);
}

[data-pattern="faq.answers"][data-pattern-params~="variant=kategori"] [data-part="help-email"].c-link[href^="mailto:"]:hover {
  text-decoration-color: var(--uw-green);
}

/* Åbningstiderne: dage til venstre, tider til højre i tabeltal. */
[data-pattern="faq.answers"][data-pattern-params~="variant=kategori"] [data-part="help-hours"] {
  margin-top: 10px;
}

[data-pattern="faq.answers"][data-pattern-params~="variant=kategori"] > .c-box > :first-child > :last-child > * > .c-text {
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--c-muted, var(--c-color-muted));
}

[data-pattern="faq.answers"][data-pattern-params~="variant=kategori"] > .c-box > :first-child > :last-child > * > .c-text:first-child {
  color: #aeb5c1;
}

[data-pattern="faq.answers"][data-pattern-params~="variant=kategori"] > .c-box > :first-child > :last-child > * > .c-text:last-child {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Linkene: hele bredden med en hårfin streg over hver og pilen yderst til højre. */
[data-pattern="faq.answers"][data-pattern-params~="variant=kategori"] [data-part="help-links"] {
  margin-top: var(--c-space-md);
}

[data-pattern="faq.answers"][data-pattern-params~="variant=kategori"] [data-part="help-link"].c-link {
  justify-content: space-between;
  gap: var(--c-space-xs);
  min-height: 52px;
  border-top: 1px solid color-mix(in srgb, var(--uw-paper) 14%, transparent);
  font-size: var(--c-font-body);
  font-weight: 500;
  color: var(--uw-paper);
  text-decoration: none;
  transition: color 0.2s;
}

[data-pattern="faq.answers"][data-pattern-params~="variant=kategori"] [data-part="help-link"].c-link:hover {
  color: var(--c-accent, var(--uw-green));
}

/* topics: emnelisten til venstre (kun i første gruppe), gruppen til højre. */
[data-pattern="faq.answers"][data-pattern-params~="variant=topics"] [data-part="nav-label"].c-text,
[data-pattern="faq.answers"][data-pattern-params~="variant=topics"] [data-part="see-also-label"].c-text {
  font-size: var(--c-font-xs);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-muted, var(--c-color-muted));
}

[data-pattern="faq.answers"][data-pattern-params~="variant=topics"] [data-part="nav-topics"] {
  margin-top: 14px;
}

/* Et emne: rund ikonchip, navnet og antallet i en linnedpille; en hvid pille ved hover. */
[data-pattern="faq.answers"][data-pattern-params~="variant=topics"] [data-part="topic"].c-box {
  flex-direction: row;
  align-items: center;
  gap: var(--c-space-xs);
  min-height: 54px;
  padding: 0 var(--c-space-xs) 0 var(--c-space-2xs);
  border-radius: 999px;
  color: var(--c-fg, var(--c-color-fg));
  text-decoration: none;
  transition: background-color 0.3s, box-shadow 0.3s;
}

[data-pattern="faq.answers"][data-pattern-params~="variant=topics"] [data-part="topic"].c-box:hover {
  background: var(--uw-white);
  box-shadow: inset 0 0 0 1px var(--c-border, var(--c-color-border));
}

[data-pattern="faq.answers"][data-pattern-params~="variant=topics"] [data-part="topic-icon"].c-icon[data-shape="circle"] {
  --c-icon-size: 18px;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  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));
}

[data-pattern="faq.answers"][data-pattern-params~="variant=topics"] [data-part="topic-icon"].c-icon + .c-text {
  flex: 1;
  min-width: 0;
  font-size: var(--c-font-body);
  font-weight: 500;
  line-height: 1.25;
  color: var(--c-fg, var(--c-color-fg));
}

[data-pattern="faq.answers"][data-pattern-params~="variant=topics"] [data-part="nav-topics"] .c-text + .c-text {
  flex: none;
  min-width: 30px;
  height: 24px;
  padding: 0 var(--c-space-2xs);
  border-radius: 999px;
  background: var(--uw-linen);
  font-size: 12.5px;
  font-weight: 600;
  line-height: 24px;
  text-align: center;
  font-variant-numeric: tabular-nums;
  color: var(--c-fg, var(--c-color-fg));
}

/* "Se også": en streg over, linkene som rolige rækker med pilen til højre. */
[data-pattern="faq.answers"][data-pattern-params~="variant=topics"] [data-part="see-also"]:has(> *) {
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px solid var(--c-border, var(--c-color-border));
}

[data-pattern="faq.answers"][data-pattern-params~="variant=topics"] [data-part="see-also-label"].c-text {
  margin-bottom: 6px;
}

[data-pattern="faq.answers"][data-pattern-params~="variant=topics"] [data-part="see-also-link"].c-link {
  justify-content: space-between;
  min-height: 46px;
  padding: 0 6px 0 2px;
  font-size: var(--c-font-body);
  font-weight: 500;
  text-decoration: none;
}

/* Gruppens hoved: emnets ikon i en linnedcirkel, h2 og antallet under. */
[data-pattern="faq.answers"][data-pattern-params~="variant=topics"] [data-part="group-icon"].c-icon[data-shape="circle"] {
  --c-icon-size: 22px;
  padding: 16px;
  background: var(--uw-linen);
  color: var(--c-fg, var(--c-color-fg));
}

[data-pattern="faq.answers"][data-pattern-params~="variant=topics"] [data-part="heading"].c-heading {
  font-size: clamp(30px, 2.8vw, 42px);
  line-height: 1.02;
  letter-spacing: -0.025em;
}

[data-pattern="faq.answers"][data-pattern-params~="variant=topics"] [data-part="heading"].c-heading + .c-text {
  font-size: 13.5px;
  color: var(--c-muted, var(--c-color-muted));
}

/* Spørgsmålene som hvide kort; et åbent kort løfter sig med en blød skygge. */
[data-pattern="faq.answers"][data-pattern-params~="variant=topics"] [data-part="answers"][data-style="cards"] {
  gap: 10px;
}

[data-pattern="faq.answers"][data-pattern-params~="variant=topics"] [data-part="answers"][data-style="cards"] > details {
  padding: 0;
  border: 0;
  border-radius: var(--c-radius-lg);
  background: var(--uw-white);
  box-shadow: inset 0 0 0 1px var(--c-border, var(--c-color-border));
  transition: box-shadow 0.4s var(--uw-ease);
}

[data-pattern="faq.answers"][data-pattern-params~="variant=topics"] [data-part="answers"][data-style="cards"] > details:hover {
  box-shadow: inset 0 0 0 1px #d3c8b9;
}

[data-pattern="faq.answers"][data-pattern-params~="variant=topics"] [data-part="answers"][data-style="cards"] > details[open] {
  box-shadow:
    inset 0 0 0 1px var(--c-border, var(--c-color-border)),
    0 1px 2px color-mix(in srgb, var(--uw-ink) 4%, transparent),
    0 26px 48px -34px color-mix(in srgb, var(--uw-ink) 42%, transparent);
}

[data-pattern="faq.answers"][data-pattern-params~="variant=topics"] summary {
  padding: var(--c-space-sm) 18px var(--c-space-sm) 28px;
  border-radius: var(--c-radius-lg);
  font-size: clamp(19px, 1.6vw, 22.5px);
  line-height: 1.3;
  letter-spacing: -0.012em;
}

[data-pattern="faq.answers"][data-pattern-params~="variant=topics"] summary::after {
  background-color: var(--uw-paper);
}

[data-pattern="faq.answers"][data-pattern-params~="variant=topics"] [data-part="answer"] > div {
  padding: 0 28px 22px;
}

/* Afsnittene holder 64 tegn; trin-fliserne må bruge hele kortets bredde. */
[data-pattern="faq.answers"][data-pattern-params~="variant=topics"] [data-part="answer-text"].c-text {
  max-width: none;
}

[data-pattern="faq.answers"][data-pattern-params~="variant=topics"] [data-part="answer-text"].c-text :is(p, ul) {
  max-width: 64ch;
}

/* En nummereret liste i et svar bliver tre trin-fliser; en punktliste får streger mellem punkterne. */
[data-pattern="faq.answers"][data-pattern-params~="variant=topics"] [data-part="answer-text"].c-text ol {
  counter-reset: uw-faq-step;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--c-space-2xs);
  padding: 0;
  list-style: none;
}

[data-pattern="faq.answers"][data-pattern-params~="variant=topics"] [data-part="answer-text"].c-text ol > li {
  counter-increment: uw-faq-step;
  display: flex;
  align-items: center;
  gap: var(--c-space-xs);
  min-height: 64px;
  padding: 10px 14px 10px 10px;
  border-radius: var(--c-radius-md);
  background: var(--uw-paper);
  font-size: 14.5px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--c-fg, var(--c-color-fg));
}

[data-pattern="faq.answers"][data-pattern-params~="variant=topics"] [data-part="answer-text"].c-text ol > li::before {
  content: counter(uw-faq-step);
  flex: none;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--uw-ink);
  font-size: 13px;
  font-weight: 700;
  color: var(--uw-paper);
}

[data-pattern="faq.answers"][data-pattern-params~="variant=topics"] [data-part="answer-text"].c-text ul {
  padding: 0;
  list-style: none;
}

[data-pattern="faq.answers"][data-pattern-params~="variant=topics"] [data-part="answer-text"].c-text ul > li {
  padding: 10px 0;
  border-top: 1px solid var(--c-border, var(--c-color-border));
  font-size: var(--c-font-body);
  line-height: 1.45;
  color: var(--c-fg, var(--c-color-fg));
}

[data-pattern="faq.answers"][data-pattern-params~="variant=topics"] [data-part="answer-text"].c-text ul + p {
  margin-top: var(--c-space-sm);
}

/* Reklamationspanelet: linned, et stort tal ved siden af indledningen, tre nummererede trin på en stiplet
   linje og to hvide lister med flueben og streger. */
[data-pattern="faq.answers"][data-pattern-params~="variant=topics"] [data-part="panel"].c-box {
  margin-top: -6px;
}

[data-pattern="faq.answers"][data-pattern-params~="variant=topics"] [data-part="panel-heading"].c-heading {
  margin-top: 14px;
  font-size: clamp(36px, 3.6vw, 54px);
  line-height: 1;
  letter-spacing: -0.03em;
}

[data-pattern="faq.answers"][data-pattern-params~="variant=topics"] [data-part="panel-heading"].c-heading + .c-text {
  margin-top: 14px;
  max-width: 48ch;
  font-size: 16.5px;
  line-height: 1.6;
}

[data-pattern="faq.answers"][data-pattern-params~="variant=topics"] [data-part="panel-figure"]:not(:first-child) {
  flex: none;
  padding-bottom: var(--c-space-3xs);
}

[data-pattern="faq.answers"][data-pattern-params~="variant=topics"] [data-part="panel-figure"]:not(:first-child) > .c-text:first-child {
  font-family: var(--c-font-serif);
  font-size: clamp(84px, 8.4vw, 132px);
  font-weight: 300;
  font-variation-settings: "SOFT" 100, "WONK" 0;
  line-height: 0.78;
  letter-spacing: -0.055em;
  color: var(--c-fg, var(--c-color-fg));
}

[data-pattern="faq.answers"][data-pattern-params~="variant=topics"] [data-part="panel-figure"]:not(:first-child) > .c-text:last-child:not(:first-child) {
  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;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--c-fg, var(--c-color-fg));
}

[data-pattern="faq.answers"][data-pattern-params~="variant=topics"] [data-part="panel-steps"] {
  counter-reset: uw-faq-claim;
  position: relative;
}

/* Den stiplede linje løber fra første til sidste nummer. */
[data-pattern="faq.answers"][data-pattern-params~="variant=topics"] [data-part="panel-steps"]::before {
  content: "";
  position: absolute;
  top: 23px;
  left: 24px;
  right: calc((100% - 2 * var(--c-space-lg)) / 3 - 24px);
  border-top: 1.5px dashed color-mix(in srgb, var(--uw-ink) 24%, transparent);
}

[data-pattern="faq.answers"][data-pattern-params~="variant=topics"] [data-part="panel-step"] {
  counter-increment: uw-faq-claim;
  position: relative;
}

[data-pattern="faq.answers"][data-pattern-params~="variant=topics"] [data-part="panel-step"]::before {
  content: counter(uw-faq-claim);
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin-bottom: 18px;
  border-radius: 50%;
  background: var(--uw-ink);
  box-shadow: 0 0 0 8px var(--uw-linen);
  font-family: var(--c-font-serif);
  font-size: 22px;
  font-style: italic;
  font-weight: 300;
  line-height: 1;
  color: var(--uw-paper);
}

[data-pattern="faq.answers"][data-pattern-params~="variant=topics"] [data-part="panel-step-title"].c-heading {
  font-size: var(--c-font-lead);
  line-height: 1.3;
}

[data-pattern="faq.answers"][data-pattern-params~="variant=topics"] [data-part="panel-step-text"].c-text {
  margin-top: 6px;
  max-width: 34ch;
  font-size: var(--c-font-body);
  line-height: 1.55;
}

[data-pattern="faq.answers"][data-pattern-params~="variant=topics"] [data-part="panel-lists"] > .c-box {
  padding: 22px var(--c-space-md) 10px;
  background: var(--uw-white);
}

[data-pattern="faq.answers"][data-pattern-params~="variant=topics"] [data-part="panel-lists"] h4.c-heading {
  display: flex;
  align-items: center;
  gap: var(--c-space-xs);
  font-size: 16px;
}

/* Mærket før listens titel: flueben på grønt for det dækkede, kryds på linned for det andet. */
[data-pattern="faq.answers"][data-pattern-params~="variant=topics"] [data-part="panel-lists"] h4.c-heading::before {
  content: "";
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background:
    url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%2308704f'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M20%206%209%2017l-5-5'/%3E%3C/svg%3E") center / 16px no-repeat,
    #e3f1ea;
}

[data-pattern="faq.answers"][data-pattern-params~="variant=topics"] [data-part="panel-not-covered"].c-box:not(:first-child) h4.c-heading::before {
  background:
    url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%233a4352'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M18%206%206%2018M6%206l12%2012'/%3E%3C/svg%3E") center / 16px no-repeat,
    var(--uw-linen);
}

[data-pattern="faq.answers"][data-pattern-params~="variant=topics"] [data-part="panel-lists"] .c-text ul {
  padding: 0;
  list-style: none;
}

[data-pattern="faq.answers"][data-pattern-params~="variant=topics"] [data-part="panel-lists"] .c-text li {
  display: flex;
  align-items: flex-start;
  gap: var(--c-space-xs);
  margin: 0;
  padding: var(--c-space-xs) 0;
  border-top: 1px solid var(--c-border, var(--c-color-border));
  font-size: var(--c-font-body);
  line-height: 1.45;
  color: var(--c-fg, var(--c-color-fg));
}

[data-pattern="faq.answers"][data-pattern-params~="variant=topics"] [data-part="panel-lists"] .c-text li::before {
  content: "";
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: 2px;
  background-color: var(--uw-green-ink);
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M20%206%209%2017l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M20%206%209%2017l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
}

[data-pattern="faq.answers"][data-pattern-params~="variant=topics"] [data-part="panel-not-covered"].c-box:not(:first-child) .c-text li::before {
  background-color: var(--c-muted, var(--c-color-muted));
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%3E%3Cpath%20d='M5%2012h14'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%3E%3Cpath%20d='M5%2012h14'/%3E%3C/svg%3E");
}

[data-pattern="faq.answers"][data-pattern-params~="variant=topics"] [data-part="panel-ctas"] {
  column-gap: 28px;
}

@media (max-width: 1023.98px) {
  /* Kortet under spørgsmålene: tekst og tider til venstre, linkene til højre ved bunden. */
  [data-pattern="faq.answers"][data-pattern-params~="variant=kategori"] [data-part="help"].c-box {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    column-gap: 40px;
    align-items: end;
  }

  [data-pattern="faq.answers"][data-pattern-params~="variant=kategori"] [data-part="help-links"] {
    margin-top: 0;
  }

  /* Emnelisten bliver en chip-række, der swipes sidelæns (ikke klæbende: D5). */
  [data-pattern="faq.answers"][data-pattern-params~="variant=topics"] [data-part="nav-label"].c-text,
  [data-pattern="faq.answers"][data-pattern-params~="variant=topics"] [data-part="see-also"] {
    display: none;
  }

  [data-pattern="faq.answers"][data-pattern-params~="variant=topics"] [data-part="nav-topics"] {
    flex-direction: row;
    gap: 6px;
    margin: 0 calc(var(--uw-gutter) * -1);
    padding: 11px var(--uw-gutter);
    overflow-x: auto;
    border-block: 1px solid var(--c-border, var(--c-color-border));
    scrollbar-width: none;
  }

  [data-pattern="faq.answers"][data-pattern-params~="variant=topics"] [data-part="nav-topics"]::-webkit-scrollbar {
    display: none;
  }

  [data-pattern="faq.answers"][data-pattern-params~="variant=topics"] [data-part="topic"].c-box {
    flex: none;
    gap: var(--c-space-2xs);
    min-height: 44px;
    padding: 0 10px 0 var(--c-space-sm);
    background: var(--uw-white);
    box-shadow: inset 0 0 0 1px var(--c-border, var(--c-color-border));
    white-space: nowrap;
  }

  [data-pattern="faq.answers"][data-pattern-params~="variant=topics"] [data-part="topic-icon"].c-icon[data-shape] {
    display: none;
  }

  [data-pattern="faq.answers"][data-pattern-params~="variant=topics"] [data-part="topic-icon"].c-icon + .c-text {
    font-size: 14.5px;
  }

  [data-pattern="faq.answers"][data-pattern-params~="variant=topics"] [data-part="nav-topics"] .c-text + .c-text {
    min-width: 26px;
    padding: 0 7px;
    font-size: var(--c-font-xs);
  }
}

@media (max-width: 639.98px) {
  [data-pattern="faq.answers"] summary {
    gap: 14px;
    min-height: 72px;
    font-size: 20px;
  }

  [data-pattern="faq.answers"] [data-part="answer-text"].c-text {
    font-size: 16px;
  }

  [data-pattern="faq.answers"][data-pattern-params~="variant=kategori"] [data-part="answer"] > div {
    padding-right: 0;
  }

  [data-pattern="faq.answers"][data-pattern-params~="variant=kategori"] [data-part="help"].c-box {
    display: flex;
    align-items: stretch;
  }

  [data-pattern="faq.answers"][data-pattern-params~="variant=kategori"] [data-part="help-links"] {
    margin-top: var(--c-space-md);
  }

  [data-pattern="faq.answers"][data-pattern-params~="variant=topics"] [data-part="group-icon"].c-icon {
    display: none;
  }

  [data-pattern="faq.answers"][data-pattern-params~="variant=topics"] [data-part="heading"].c-heading {
    font-size: clamp(26px, 7.4vw, 30px);
  }

  [data-pattern="faq.answers"][data-pattern-params~="variant=topics"] [data-part="answers"][data-style="cards"] {
    gap: var(--c-space-2xs);
  }

  [data-pattern="faq.answers"][data-pattern-params~="variant=topics"] [data-part="answers"][data-style="cards"] > details,
  [data-pattern="faq.answers"][data-pattern-params~="variant=topics"] summary {
    border-radius: var(--c-radius-md);
  }

  [data-pattern="faq.answers"][data-pattern-params~="variant=topics"] summary {
    gap: 14px;
    padding: 14px var(--c-space-xs) 14px 18px;
    font-size: 19px;
  }

  [data-pattern="faq.answers"][data-pattern-params~="variant=topics"] summary::after {
    width: 40px;
    height: 40px;
  }

  [data-pattern="faq.answers"][data-pattern-params~="variant=topics"] [data-part="answer"] > div {
    padding: 0 18px 18px;
  }

  [data-pattern="faq.answers"][data-pattern-params~="variant=topics"] [data-part="answer-text"].c-text ol {
    grid-template-columns: minmax(0, 1fr);
  }

  [data-pattern="faq.answers"][data-pattern-params~="variant=topics"] [data-part="panel"].c-box {
    border-radius: var(--c-radius-xl);
  }

  /* Trinene står under hinanden; den stiplede linje går lodret gennem numrene. */
  [data-pattern="faq.answers"][data-pattern-params~="variant=topics"] [data-part="panel-steps"]::before {
    top: 24px;
    bottom: 24px;
    left: 23px;
    right: auto;
    border-top: 0;
    border-left: 1.5px dashed color-mix(in srgb, var(--uw-ink) 24%, transparent);
  }

  [data-pattern="faq.answers"][data-pattern-params~="variant=topics"] [data-part="panel-step"] {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    column-gap: var(--c-space-sm);
    align-content: start;
  }

  [data-pattern="faq.answers"][data-pattern-params~="variant=topics"] [data-part="panel-step"]::before {
    grid-row: span 2;
    margin-bottom: 0;
  }

  [data-pattern="faq.answers"][data-pattern-params~="variant=topics"] [data-part="panel-step-title"].c-heading {
    margin-top: var(--c-space-3xs);
  }

  [data-pattern="faq.answers"][data-pattern-params~="variant=topics"] [data-part="panel-lists"] > .c-box {
    padding: 18px 18px 6px;
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-pattern="faq.answers"] summary::after,
  [data-pattern="faq.answers"] [data-part="answer"] {
    transition: none;
  }
}

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

/* Mønstret er overskriften; tabellen er sidens table-node lige efter det i samme sektion (rowHeaders, wrap). */
.c-section-body:has(> [data-pattern="comparison.table"] + [role="region"]) {
  gap: 18px;
}

[data-pattern="comparison.table"] [data-part="intro"].c-text {
  max-width: 40ch;
}

@media (min-width: 1024px) {
  [data-pattern="comparison.table"] [data-part="intro"].c-text {
    flex: 0 1 40ch;
  }

  /* Hintet gælder kun, hvor tabellen ruller sidelæns. */
  [data-pattern="comparison.table"] [data-part="hint"]:has(> .c-icon) {
    display: none;
  }
}

[data-pattern="comparison.table"] [data-part="hint"]:has(> .c-icon) .c-text {
  color: var(--uw-body);
}

[data-pattern="comparison.table"] [data-part="link"].c-link {
  min-height: 44px;
  font-size: var(--c-font-sm);
  text-underline-offset: 5px;
}

/* Et ankerlink peger ned ad siden: pilen drejes. */
[data-pattern="comparison.table"] [data-part="link"].c-link[href^="#"]::after {
  width: 16px;
  height: 16px;
  rotate: 90deg;
}

[data-pattern="comparison.table"] [data-part="link"].c-link[href^="#"]:hover::after {
  translate: 0 3px;
}

/* Tabellen: et hvidt kort med afrundede hjørner, egenskaberne i en fast første kolonne. */
[data-pattern="comparison.table"] + [role="region"] {
  border-radius: var(--c-radius-2xl);
  background: var(--uw-white);
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
}

[data-pattern="comparison.table"] + [role="region"]:focus-visible {
  outline-offset: -3px;
}

[data-pattern="comparison.table"] + [role="region"] > table {
  min-width: 900px;
  table-layout: fixed;
}

[data-pattern="comparison.table"] + [role="region"] :is(th, td) {
  padding: 20px;
  vertical-align: middle;
  font-size: 14.5px;
  font-weight: 500;
  line-height: 1.45;
  color: var(--c-fg, var(--c-color-fg));
}

[data-pattern="comparison.table"] + [role="region"] :is(thead th, tbody th) {
  background: var(--uw-white);
}

[data-pattern="comparison.table"] + [role="region"] thead th {
  border-bottom: 0;
  padding: var(--c-space-md) 20px 20px;
  vertical-align: top;
  font-family: var(--c-font-serif);
  font-size: clamp(22px, 1.8vw, 27px);
  font-weight: 300;
  font-variation-settings: "SOFT" 100, "WONK" 0;
  line-height: 1;
  letter-spacing: -0.02em;
}

/* Hjørnecellen ("Materiale") som en lille label midt i hovedet. */
[data-pattern="comparison.table"] + [role="region"] thead th:first-child {
  width: 200px;
  vertical-align: middle;
  font-family: var(--c-font-sans);
  font-size: var(--c-font-xs);
  font-weight: 600;
  font-variation-settings: normal;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-muted, var(--c-color-muted));
}

[data-pattern="comparison.table"] + [role="region"] tbody th {
  font-size: var(--c-font-body);
  font-weight: 600;
}

/* swatches = materials: stofprøven over hvert materiales navn, i guidens rækkefølge. */
[data-pattern="comparison.table"][data-pattern-params~="swatches=materials"] + [role="region"] thead th:nth-child(n + 2)::before {
  content: "";
  display: block;
  width: 46px;
  height: 46px;
  margin-bottom: 20px;
  border-radius: 50%;
  background-color: #e8dfd2;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--uw-ink) 6%, transparent);
}

[data-pattern="comparison.table"][data-pattern-params~="swatches=materials"] + [role="region"] thead th:nth-child(2)::before {
  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="comparison.table"][data-pattern-params~="swatches=materials"] + [role="region"] thead th:nth-child(3)::before {
  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="comparison.table"][data-pattern-params~="swatches=materials"] + [role="region"] thead th:nth-child(4)::before {
  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="comparison.table"][data-pattern-params~="swatches=materials"] + [role="region"] thead th:nth-child(5)::before {
  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="comparison.table"][data-pattern-params~="swatches=materials"] + [role="region"] thead th:nth-child(6)::before {
  background-color: #ecd9d2;
  background-image: linear-gradient(115deg, transparent 24%, color-mix(in srgb, var(--uw-white) 62%, transparent) 46%, transparent 68%);
}

@media (max-width: 639.98px) {
  [data-pattern="comparison.table"] + [role="region"] {
    border-radius: var(--c-radius-lg);
  }

  [data-pattern="comparison.table"] + [role="region"] > table {
    min-width: 780px;
  }

  [data-pattern="comparison.table"] + [role="region"] :is(th, td) {
    padding: var(--c-space-sm) 14px;
    font-size: var(--c-font-sm);
  }

  [data-pattern="comparison.table"] + [role="region"] thead th {
    padding: 18px 14px var(--c-space-sm);
    font-size: var(--c-font-h6);
  }

  [data-pattern="comparison.table"] + [role="region"] thead th:first-child {
    width: 118px;
    font-size: var(--c-font-xs);
  }

  [data-pattern="comparison.table"][data-pattern-params~="swatches=materials"] + [role="region"] thead th:nth-child(n + 2)::before {
    width: 38px;
    height: 38px;
    margin-bottom: 14px;
  }
}

/* ---- contact.form ---- */

/* Mønstret er overskriften og kortet med hurtige svar; formularen er sidens form-node lige efter det i samme
   sektion. Emne-chips er faner inde i kortet (D5: en fane kan ikke også være formularens emnefelt). */
[data-pattern="contact.form"] [data-part="intro"].c-text {
  max-width: 40ch;
}

/* Kortet: linned, en chip pr. emne, og pr. emne en titel, tre svar som hvide kort og en fod med genvej og link. */
[data-pattern="contact.form"] .c-tabs-list:not([hidden]) {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: var(--c-space-2xs);
  margin-bottom: var(--c-space-md);
  border: 0;
  overflow: visible;
}

[data-pattern="contact.form"] [data-part="topic-tabs"][data-style="pill"] .c-tab {
  height: 46px;
  padding: 0 18px;
  border-radius: 999px;
  background: var(--uw-paper);
  box-shadow: inset 0 0 0 1px var(--c-border, var(--c-color-border));
  font-size: var(--c-font-body);
  font-weight: 500;
  color: var(--c-fg, var(--c-color-fg));
  transition: background-color 0.25s, color 0.25s, box-shadow 0.25s;
}

[data-pattern="contact.form"] [data-part="topic-tabs"][data-style="pill"] .c-tab:hover {
  box-shadow: inset 0 0 0 1.5px var(--c-fg, var(--c-color-fg));
}

[data-pattern="contact.form"] [data-part="topic-tabs"][data-style="pill"] .c-tab[aria-selected="true"] {
  background: var(--uw-ink);
  box-shadow: inset 0 0 0 1px var(--uw-ink);
  color: var(--uw-paper);
}

[data-pattern="contact.form"] [data-part="topic-title"].c-heading {
  font-size: clamp(32px, 2.8vw, 42px);
  line-height: 1.02;
  letter-spacing: -0.025em;
}

[data-pattern="contact.form"] [data-part="topic-title"].c-heading + .c-text {
  margin-top: var(--c-space-xs);
  max-width: 40ch;
  line-height: 1.55;
}

[data-pattern="contact.form"] [data-part="topic-questions"][data-style="cards"] {
  gap: var(--c-space-2xs);
  margin-top: 22px;
}

[data-pattern="contact.form"] [data-part="topic-questions"][data-style="cards"] > details {
  padding: 0;
  border: 0;
  border-radius: var(--c-radius-md);
  background: var(--uw-white);
  transition: box-shadow 0.3s;
}

[data-pattern="contact.form"] [data-part="topic-questions"][data-style="cards"] > details[open] {
  box-shadow:
    0 1px 2px color-mix(in srgb, var(--uw-ink) 4%, transparent),
    0 18px 34px -26px color-mix(in srgb, var(--uw-ink) 35%, transparent);
}

[data-pattern="contact.form"] summary {
  gap: var(--c-space-sm);
  min-height: 64px;
  padding: var(--c-space-xs) 14px var(--c-space-xs) 20px;
  font-size: 15.5px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--c-fg, var(--c-color-fg));
}

/* Plusset i en papircirkel, der bliver et blækkryds, når svaret er åbent. */
[data-pattern="contact.form"] summary > svg {
  display: none;
}

[data-pattern="contact.form"] summary::after {
  content: "";
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background:
    linear-gradient(currentColor, currentColor) center / 12px 1.6px no-repeat,
    linear-gradient(currentColor, currentColor) center / 1.6px 12px no-repeat,
    var(--uw-paper);
  transition: background-color 0.35s, color 0.35s, transform 0.45s var(--uw-ease);
}

[data-pattern="contact.form"] summary:hover::after {
  background-color: #e8dfd2;
}

[data-pattern="contact.form"] [data-part="q1"][open] > summary::after {
  background-color: var(--uw-ink);
  color: var(--uw-paper);
  transform: rotate(45deg);
}

[data-pattern="contact.form"] [data-part="topic"].c-tab-panel details > div {
  padding: 0 22px 20px 20px;
}

[data-pattern="contact.form"] details .c-text {
  line-height: 1.62;
}

[data-pattern="contact.form"] details .c-link {
  font-size: 14.5px;
  text-underline-offset: 5px;
}

/* Foden: en hårfin streg, genvejen som en hvid pille med ikonet i en blækcirkel, og FAQ-linket. */
[data-pattern="contact.form"] [data-part="topic-foot"]:not([data-style]):has(> *) {
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid color-mix(in srgb, var(--uw-ink) 10%, transparent);
}

[data-pattern="contact.form"] [data-part="topic-shortcut"].btn-secondary {
  min-height: 52px;
  padding: 0 20px 0 7px;
  gap: var(--c-space-xs);
  background: var(--uw-white);
  font-size: 14.5px;
  white-space: normal;
  transition: box-shadow 0.25s;
}

[data-pattern="contact.form"] [data-part="topic-shortcut"].btn-secondary:hover {
  box-shadow: inset 0 0 0 1.5px var(--uw-ink);
}

[data-pattern="contact.form"] .c-tab-panel .btn-secondary > svg {
  order: -1;
  width: 38px;
  height: 38px;
  padding: 10px;
  border-radius: 50%;
  background: var(--uw-ink);
  color: var(--uw-paper);
  stroke-width: 1.7;
}

[data-pattern="contact.form"] .c-tab-panel .btn-secondary:hover > svg {
  transform: none;
}

[data-pattern="contact.form"] [data-part="topic-shortcut"].btn-secondary::after {
  content: "";
  flex: none;
  width: 16px;
  height: 16px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M5%2012h14M12%205l7%207-7%207'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M5%2012h14M12%205l7%207-7%207'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: translate 0.25s;
}

[data-pattern="contact.form"] [data-part="topic-shortcut"].btn-secondary:hover::after {
  translate: 3px 0;
}

/* Formularen (sidens form-node): et hvidt kort. Felterne styles gennem deres elementer; c-field-klasserne er interne. */
[data-pattern="contact.form"] + div:has(> form) {
  padding: clamp(26px, 2.8vw, 40px);
  border-radius: var(--c-radius-2xl);
  background: var(--uw-white);
  box-shadow: inset 0 0 0 1px var(--c-border, var(--c-color-border));
}

[data-pattern="contact.form"] + div > form fieldset {
  gap: 18px var(--c-space-sm);
}

/* Et overskriftsfelt i formularen ("Din besked") står som designets trin-label med en streg efter. */
[data-pattern="contact.form"] + div > form h4 {
  display: flex;
  align-items: center;
  gap: var(--c-space-xs);
  font-family: var(--c-font-sans);
  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="contact.form"] + div > form h4::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--c-border, var(--c-color-border));
}

/* Trinnenes numre (handoff .kt-stepl b): overskriftsfelterne tælles, 01 og 02, i en blækcirkel før teksten. Fra det
   andet trin står en hårfin streg over hele kortets bredde, som mellem designets emneboks og felter. */
[data-pattern="contact.form"] + div > form fieldset {
  counter-reset: uw-contact-step;
}

[data-pattern="contact.form"] + div > form h4::before {
  counter-increment: uw-contact-step;
  content: counter(uw-contact-step, decimal-leading-zero);
  flex: none;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--uw-ink);
  font-size: var(--c-font-xs);
  letter-spacing: 0;
  color: var(--uw-paper);
}

[data-pattern="contact.form"] + div > form fieldset > div:has(> h4) ~ div:has(> h4) {
  margin: 10px calc(-1 * clamp(26px, 2.8vw, 40px)) 0;
  padding: clamp(26px, 2.6vw, 36px) clamp(26px, 2.8vw, 40px) 0;
  border-top: 1px solid var(--c-border, var(--c-color-border));
}

/* Emnet er et radiofelt, vist som designets emne-chips (handoff .kt-topic): papir med et grønt ikon, valgt i blæk.
   Feltets egen etiket ("Emne") er skjult for øjet; trinnets overskrift står over chips'ene. Ikonet følger værdien
   (formularens valgmulighed); en værdi uden ikon står uden. Radioknappen er usynlig, men kan stadig fokuseres. */
[data-pattern="contact.form"] + div > form fieldset > div:has(input[type="radio"]) > span:first-child {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

[data-pattern="contact.form"] + div > form fieldset > div:has(input[type="radio"]) > div {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(186px, 1fr));
  gap: var(--c-space-2xs);
}

[data-pattern="contact.form"] + div > form fieldset > div:has(input[type="radio"]) > div > label {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: 46px;
  padding: 0 19px 0 15px;
  border-radius: 999px;
  background: var(--uw-paper);
  box-shadow: inset 0 0 0 1px var(--c-border, var(--c-color-border));
  font-size: var(--c-font-body);
  font-weight: 500;
  line-height: 1.2;
  color: var(--c-fg, var(--c-color-fg));
  cursor: pointer;
  transition: background-color 0.25s, color 0.25s, box-shadow 0.25s;
}

[data-pattern="contact.form"] + div > form fieldset > div:has(input[type="radio"]) > div > label:hover {
  box-shadow: inset 0 0 0 1.5px var(--c-fg, var(--c-color-fg));
}

[data-pattern="contact.form"] + div > form fieldset > div:has(input[type="radio"]) > div > label:has(> input:checked) {
  background: var(--uw-ink);
  box-shadow: inset 0 0 0 1px var(--uw-ink);
  color: var(--uw-paper);
}

[data-pattern="contact.form"] + div > form fieldset > div:has(input[type="radio"]) > div > label:has(> input:focus-visible) {
  outline: 2px solid var(--uw-green-ink);
  outline-offset: 3px;
}

[data-pattern="contact.form"] + div > form fieldset > div:has(input[type="radio"]) > div > label > input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

[data-pattern="contact.form"] + div > form fieldset > div:has(input[type="radio"]) > div > label:has(> input:is([value="min_ordre"], [value="levering"], [value="retur_&_bytte"], [value="størrelse"], [value="materialer_&_pleje"], [value="andet"]))::before {
  content: "";
  flex: none;
  width: 18px;
  height: 18px;
  background-color: var(--uw-green-ink);
  -webkit-mask: var(--uw-topic-icon) center / contain no-repeat;
  mask: var(--uw-topic-icon) center / contain no-repeat;
  transition: background-color 0.25s;
}

[data-pattern="contact.form"] + div > form fieldset > div:has(input[type="radio"]) > div > label:has(> input:checked)::before {
  background-color: #7fe3c3;
}

[data-pattern="contact.form"] + div > form label:has(> input[value="min_ordre"]) {
  --uw-topic-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'1.7'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M11%2021.73a2%202%200%200%200%202%200l7-4A2%202%200%200%200%2021%2016V8a2%202%200%200%200-1-1.73l-7-4a2%202%200%200%200-2%200l-7%204A2%202%200%200%200%203%208v8a2%202%200%200%200%201%201.73z'%2F%3E%3Cpath%20d%3D'M12%2022V12'%2F%3E%3Cpolyline%20points%3D'3.29%207%2012%2012%2020.71%207'%2F%3E%3Cpath%20d%3D'm7.5%204.27%209%205.15'%2F%3E%3C%2Fsvg%3E");
}

[data-pattern="contact.form"] + div > form label:has(> input[value="levering"]) {
  --uw-topic-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'1.7'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M14%2018V6a2%202%200%200%200-2-2H4a2%202%200%200%200-2%202v11a1%201%200%200%200%201%201h2'%2F%3E%3Cpath%20d%3D'M15%2018H9'%2F%3E%3Cpath%20d%3D'M19%2018h2a1%201%200%200%200%201-1v-3.65a1%201%200%200%200-.22-.624l-3.48-4.35A1%201%200%200%200%2017.52%208H14'%2F%3E%3Ccircle%20cx%3D'17'%20cy%3D'18'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'7'%20cy%3D'18'%20r%3D'2'%2F%3E%3C%2Fsvg%3E");
}

[data-pattern="contact.form"] + div > form label:has(> input[value="retur_&_bytte"]) {
  --uw-topic-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'1.7'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M3%2012a9%209%200%201%200%209-9%209.75%209.75%200%200%200-6.74%202.74L3%208'%2F%3E%3Cpath%20d%3D'M3%203v5h5'%2F%3E%3C%2Fsvg%3E");
}

[data-pattern="contact.form"] + div > form label:has(> input[value="størrelse"]) {
  --uw-topic-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'1.7'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M21.3%2015.3a2.4%202.4%200%200%201%200%203.4l-2.6%202.6a2.4%202.4%200%200%201-3.4%200L2.7%208.7a2.41%202.41%200%200%201%200-3.4l2.6-2.6a2.41%202.41%200%200%201%203.4%200Z'%2F%3E%3Cpath%20d%3D'm14.5%2012.5%202-2'%2F%3E%3Cpath%20d%3D'm11.5%209.5%202-2'%2F%3E%3Cpath%20d%3D'm8.5%206.5%202-2'%2F%3E%3Cpath%20d%3D'm17.5%2015.5%202-2'%2F%3E%3C%2Fsvg%3E");
}

[data-pattern="contact.form"] + div > form label:has(> input[value="materialer_&_pleje"]) {
  --uw-topic-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'1.7'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M12%2022a7%207%200%200%200%207-7c0-2-1-3.9-3-5.5s-3.5-4-4-6.5c-.5%202.5-2%204.9-4%206.5C6%2011.1%205%2013%205%2015a7%207%200%200%200%207%207z'%2F%3E%3C%2Fsvg%3E");
}

[data-pattern="contact.form"] + div > form label:has(> input[value="andet"]) {
  --uw-topic-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'1.7'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M2.992%2016.342a2%202%200%200%201%20.094%201.167l-1.065%203.29a1%201%200%200%200%201.236%201.168l3.413-.998a2%202%200%200%201%201.099.092%2010%2010%200%201%200-4.777-4.719'%2F%3E%3Cpath%20d%3D'M8%2012h.01'%2F%3E%3Cpath%20d%3D'M12%2012h.01'%2F%3E%3Cpath%20d%3D'M16%2012h.01'%2F%3E%3C%2Fsvg%3E");
}

/* Når formularens emner styrer kortets svar (Template02/wwwroot/js/concept2/contact-form.js, data-c2-topics), er
   kortets egne faner skjult. Uden scriptet bliver de stående. */
[data-pattern="contact.form"][data-c2-topics] .c-tabs-list:not([hidden]) {
  display: none;
}

/* Ordrenummeret venter bag "Tilføj ordrenummer" (handoff .kt-addord), som scriptet sætter ind i feltets sted. */
[data-pattern="contact.form"] + div > form fieldset > div[hidden] {
  display: none;
}

[data-pattern="contact.form"] + div > form .c2-add-order {
  display: inline-flex;
  grid-column: 1 / -1;
  justify-self: start;
  align-items: center;
  gap: var(--c-space-2xs);
  min-height: 44px;
  margin-top: -8px;
  padding: 0;
  border: 0;
  background: none;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--c-fg, var(--c-color-fg));
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 5px;
  text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
  cursor: pointer;
  transition: text-decoration-color 0.2s;
}

[data-pattern="contact.form"] + div > form .c2-add-order:hover {
  text-decoration-color: var(--uw-green);
}

[data-pattern="contact.form"] + div > form .c2-add-order > svg {
  color: var(--uw-green-ink);
}

[data-pattern="contact.form"] + div > form label {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--c-fg, var(--c-color-fg));
}

/* Designet viser ingen stjerner; påkrævede felter har required. */
[data-pattern="contact.form"] + div > form label > span[aria-hidden="true"] {
  display: none;
}

[data-pattern="contact.form"] + div > form :is(input:not([type="hidden"], [type="checkbox"], [type="radio"], [type="file"]), select, textarea) {
  height: 56px;
  padding: 0 18px;
  border: 0;
  border-radius: var(--c-radius-sm);
  background-color: var(--uw-paper);
  box-shadow: inset 0 0 0 1px var(--c-border, var(--c-color-border));
  font-size: 16px;
  color: var(--c-fg, var(--c-color-fg));
  outline: none;
  transition: background-color 0.2s, box-shadow 0.2s;
}

[data-pattern="contact.form"] + div > form :is(input, textarea)::placeholder {
  color: var(--c-muted, var(--c-color-muted));
}

[data-pattern="contact.form"] + div > form :is(input, select, textarea):hover {
  box-shadow: inset 0 0 0 1px #d6cbbb;
}

[data-pattern="contact.form"] + div > form :is(input, select, textarea):focus {
  background-color: var(--uw-white);
  box-shadow: inset 0 0 0 1.5px var(--uw-ink), 0 0 0 4px color-mix(in srgb, var(--uw-green-ink) 16%, transparent);
  outline: none;
}

[data-pattern="contact.form"] + div > form select {
  padding-right: 46px;
  -webkit-appearance: none;
  appearance: none;
  background-image: 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='m6%209%206%206%206-6'/%3E%3C/svg%3E");
  background-position: right 18px center;
  background-repeat: no-repeat;
  background-size: 18px;
}

[data-pattern="contact.form"] + div > form textarea {
  height: auto;
  min-height: 172px;
  padding: var(--c-space-sm) 18px;
  border-radius: var(--c-radius-md);
  line-height: 1.55;
  resize: vertical;
}

/* Hjælpetekst under et felt, med et info-ikon. */
[data-pattern="contact.form"] + div > form fieldset > span {
  display: flex;
  align-items: flex-start;
  gap: var(--c-space-2xs);
  margin-top: -8px;
  font-size: var(--c-font-sm);
  line-height: 1.45;
  color: var(--uw-body);
}

[data-pattern="contact.form"] + div > form fieldset > span::before {
  content: "";
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: 1px;
  background-color: var(--uw-green-ink);
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='12'%20cy='12'%20r='10'/%3E%3Cpath%20d='M12%2016v-4M12%208h.01'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='12'%20cy='12'%20r='10'/%3E%3Cpath%20d='M12%2016v-4M12%208h.01'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Send-knappen får pilen; svartiden (et tekstfelt i formularen) står under den med et ur. */
[data-pattern="contact.form"] + div > form button[type="submit"] {
  min-width: 196px;
  margin-top: var(--c-space-2xs);
}

[data-pattern="contact.form"] + div > form button[type="submit"]::after {
  content: "";
  flex: none;
  width: 18px;
  height: 18px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M5%2012h14M12%205l7%207-7%207'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M5%2012h14M12%205l7%207-7%207'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: translate 0.25s;
}

[data-pattern="contact.form"] + div > form button[type="submit"]:hover::after {
  translate: 4px 0;
}

[data-pattern="contact.form"] + div > form fieldset > div > p {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: var(--c-font-sm);
  line-height: 1.45;
  color: var(--uw-body);
}

[data-pattern="contact.form"] + div > form fieldset > div > p::before {
  content: "";
  flex: none;
  width: 16px;
  height: 16px;
  background-color: var(--uw-green-ink);
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='12'%20cy='12'%20r='10'/%3E%3Cpath%20d='M12%206v6l4%202'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='12'%20cy='12'%20r='10'/%3E%3Cpath%20d='M12%206v6l4%202'/%3E%3C/svg%3E") center / contain no-repeat;
}

[data-pattern="contact.form"] + div > form > [role="status"] {
  padding: var(--c-space-sm) 18px;
  border-radius: var(--c-radius-md);
  background: #eaf3ee;
  color: var(--uw-green-ink);
}

/* Desktop: overskriften over det hele, formularen til venstre og kortet til højre, klæbende under menuen.
   Mønstrets rod lægger sine børn direkte i sektionens gitter (display: contents), så formularen kan stå imellem. */
@media (min-width: 1024px) {
  [data-pattern="contact.form"] [data-part="intro"].c-text {
    flex: 0 1 40ch;
  }

  .c-section-body:has(> [data-pattern="contact.form"] + div > form) {
    display: grid;
    grid-template-columns: minmax(0, 1.24fr) minmax(0, 0.86fr);
    column-gap: clamp(16px, 2.4vw, 36px);
    align-items: start;
  }

  .c-section-body > [data-pattern="contact.form"]:has(+ div > form) {
    display: contents;
  }

  .c-section-body > [data-pattern="contact.form"]:has(+ div > form) > :first-child {
    grid-column: 1 / -1;
  }

  .c-section-body > [data-pattern="contact.form"]:has(+ div > form) > .c-box {
    position: sticky;
    top: 6rem;
    grid-column: 2;
    grid-row: 2;
  }

  .c-section-body > [data-pattern="contact.form"] + div:has(> form) {
    grid-column: 1;
    grid-row: 2;
  }
}

/* Tablet og mobil: overskrift, kortet og formularen under hinanden, tæt sammen. */
@media (max-width: 1023.98px) {
  .c-section-body:has(> [data-pattern="contact.form"] + div > form) {
    gap: var(--c-space-xs);
  }
}

@media (max-width: 639.98px) {
  [data-pattern="contact.form"] .c-tabs-list:not([hidden]) {
    display: flex;
    margin-inline: calc(var(--c-space-md) * -1);
    padding: 0 var(--c-space-md) var(--c-space-3xs);
    overflow-x: auto;
    scrollbar-width: none;
  }

  [data-pattern="contact.form"] .c-tabs-list:not([hidden])::-webkit-scrollbar {
    display: none;
  }

  [data-pattern="contact.form"] [data-part="topic-tabs"][data-style="pill"] .c-tab {
    flex: none;
    height: 44px;
    padding: 0 var(--c-space-sm);
    font-size: 14.5px;
  }

  [data-pattern="contact.form"] summary {
    min-height: 60px;
    padding: var(--c-space-xs) var(--c-space-xs) var(--c-space-xs) var(--c-space-sm);
    font-size: var(--c-font-body);
  }

  [data-pattern="contact.form"] [data-part="topic"].c-tab-panel details > div {
    padding-inline: var(--c-space-sm);
  }

  [data-pattern="contact.form"] + div:has(> form) {
    padding: var(--c-space-md) 20px 26px;
  }

  [data-pattern="contact.form"] + div > form button[type="submit"] {
    width: 100%;
  }

  [data-pattern="contact.form"] + div > form fieldset > div:has(> h4) ~ div:has(> h4) {
    margin-inline: -20px;
    padding-inline: 20px;
  }

  [data-pattern="contact.form"] + div > form fieldset > div:has(input[type="radio"]) > div {
    display: flex;
    margin-inline: -20px;
    padding: 0 20px var(--c-space-3xs);
    overflow-x: auto;
    scrollbar-width: none;
  }

  [data-pattern="contact.form"] + div > form fieldset > div:has(input[type="radio"]) > div::-webkit-scrollbar {
    display: none;
  }

  [data-pattern="contact.form"] + div > form fieldset > div:has(input[type="radio"]) > div > label {
    flex: none;
    height: 44px;
    padding: 0 var(--c-space-sm) 0 13px;
    font-size: 14.5px;
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-pattern="contact.form"] summary::after,
  [data-pattern="contact.form"] [data-part="topic-shortcut"].btn-secondary::after {
    transition: none;
  }
}

/* ---- products.pairs ---- */

/* Mønstret er overskriften; produkterne er sidens products-node lige efter det i samme sektion (standardkort,
   D5: det kompakte kort med begrundelse pr. produkt er Template02-kode). Kortenes indre styles ikke her. */
[data-pattern="products.pairs"] [data-part="intro"].c-text {
  max-width: 40ch;
}

/* Desktop: overskriften til venstre (ca. 40 %), produkterne til højre. */
@media (min-width: 1024px) {
  .c-section-body:has(> [data-pattern="products.pairs"] + .c-products) {
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    column-gap: clamp(32px, 6vw, 104px);
    align-items: start;
  }
}

/* ---- feature.tabs ---- */

/* Sektionens stemning følger den valgte fane (efter placering): 1 varm hør, 2 rosa, 3 nat. Mørket på nat sætter
   fladens variabler, så eyebrow, tekst og ring skifter med. */
.c-section:has([data-pattern="feature.tabs"]) {
  background-color: #f3eadc;
  color: var(--uw-ink);
  transition: background-color 0.9s ease, color 0.9s ease;
}

.c-section:has([data-pattern="feature.tabs"] > .c-tabs > .c-tabs-list > .c-tab:nth-child(2)[aria-selected="true"]) {
  background-color: #edd7cc;
}

.c-section:has([data-pattern="feature.tabs"] > .c-tabs > .c-tabs-list > .c-tab:nth-child(3)[aria-selected="true"]) {
  --c-bg: var(--c-color-secondary, #1b2740);
  --c-fg: var(--uw-paper);
  --c-muted: #c7ccd5;
  --c-accent: #7fe3c3;
  --c-border: color-mix(in srgb, var(--uw-paper) 14%, transparent);
  --uw-body: var(--uw-paper);
  background-color: var(--c-color-secondary, #1b2740);
  color: var(--uw-paper);
}

/* Produkterne er sidens: én products-node pr. fane lige efter mønstret. Kun den valgte fanes står fremme. */
.c-section-body:has(> [data-pattern="feature.tabs"] .c-tab:nth-child(1)[aria-selected="true"]) > [data-pattern="feature.tabs"] ~ :not([data-pattern="feature.tabs"] + *),
.c-section-body:has(> [data-pattern="feature.tabs"] .c-tab:nth-child(2)[aria-selected="true"]) > [data-pattern="feature.tabs"] ~ :not([data-pattern="feature.tabs"] + * + *),
.c-section-body:has(> [data-pattern="feature.tabs"] .c-tab:nth-child(3)[aria-selected="true"]) > [data-pattern="feature.tabs"] ~ :not([data-pattern="feature.tabs"] + * + * + *),
.c-section-body:has(> [data-pattern="feature.tabs"] .c-tab:nth-child(4)[aria-selected="true"]) > [data-pattern="feature.tabs"] ~ :not([data-pattern="feature.tabs"] + * + * + * + *) {
  display: none;
}

/* Når fanerne er klar (composer.js), bliver sektionen ét gitter: fotoet fra det valgte panel i venstre kolonne,
   eyebrow, faner, tekst, produkter og knap i højre. Mønstret, fanerne og panelets indhold lægger sig i gitteret
   (display: contents og subgrid), så fotoet kan stå ved siden af faner, der står uden for panelet. Uden script står
   panelerne under hinanden. Rækker: 1 luft, 2 eyebrow, 3 faner, 4 overskrift, 5 tekst, 6 produkter, 7 knap, 8 luft. */
.c-section-body:has(> [data-pattern="feature.tabs"] > .c-tabs[data-ready]) {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: 1fr repeat(6, auto) 1fr;
  column-gap: var(--c-space-2xl);
  row-gap: 0;
}

.c-section-body > [data-pattern="feature.tabs"]:has(> .c-tabs[data-ready]) {
  display: contents;
}

[data-pattern="feature.tabs"] [data-part="tabs"].c-tabs[data-ready],
[data-pattern="feature.tabs"] [data-part="tabs"].c-tabs[data-ready] > .c-tab-panel:not([hidden]) {
  display: grid;
  grid-template-columns: subgrid;
  grid-template-rows: subgrid;
  grid-column: 1 / -1;
  grid-row: 1 / -1;
}

[data-pattern="feature.tabs"] [data-part="tabs"].c-tabs[data-ready] > .c-tab-panel > div,
[data-pattern="feature.tabs"] [data-part="tabs"].c-tabs[data-ready] > .c-tab-panel > div > .c-layer + * {
  display: contents;
}

/* Kolonne -2 er højre kolonne på desktop og den eneste på tablet og mobil. */
[data-pattern="feature.tabs"]:has(> .c-tabs[data-ready]) [data-part="eyebrow"].c-eyebrow {
  grid-column: -2;
  grid-row: 2;
  align-self: end;
}

[data-pattern="feature.tabs"] [data-part="tabs"].c-tabs[data-ready] > .c-tabs-list {
  grid-column: -2;
  grid-row: 3;
  position: relative;
  z-index: 1;
}

[data-pattern="feature.tabs"] [data-part="tabs"].c-tabs[data-ready] .c-layer {
  grid-column: 1;
  grid-row: 1 / -1;
  align-self: center;
}

[data-pattern="feature.tabs"] [data-part="tabs"].c-tabs[data-ready] .c-layer + * > .c-heading {
  grid-column: -2;
  grid-row: 4;
}

[data-pattern="feature.tabs"] [data-part="tabs"].c-tabs[data-ready] .c-layer + * > .c-text {
  grid-column: -2;
  grid-row: 5;
}

.c-section-body:has(> [data-pattern="feature.tabs"] > .c-tabs[data-ready]) > [data-pattern="feature.tabs"] ~ * {
  grid-column: -2;
  grid-row: 6;
  margin-top: var(--c-space-lg);
}

/* Produkterne er designets minikort (handoff'ens .k2-mini): tre i en række, pakshottet på hvidt, navn og pris i
   sektionens farve på et lyst felt, på nat et svagt lyst slør. Mærke, favorit, hurtigkøb, størrelser og mærkater
   står ikke på minikortet. Bundlens kort farver teksten med tokenets blæk, ikke fladens, så nat ville gøre den usynlig. */
[data-pattern="feature.tabs"] ~ .c-products .c-products-grid {
  gap: var(--c-space-xs);
}

[data-pattern="feature.tabs"] ~ .c-products .c-pcard {
  padding: 10px;
  border-radius: 20px;
  background: color-mix(in srgb, var(--uw-white) 55%, transparent);
  color: var(--c-fg, var(--uw-ink));
  transition: transform 0.3s;
}

[data-pattern="feature.tabs"] ~ .c-products .c-pcard:hover {
  transform: translateY(-4px);
}

.c-section:has([data-pattern="feature.tabs"] > .c-tabs > .c-tabs-list > .c-tab:nth-child(3)[aria-selected="true"]) [data-pattern="feature.tabs"] ~ .c-products .c-pcard {
  background: color-mix(in srgb, var(--uw-paper) 8%, transparent);
}

[data-pattern="feature.tabs"] ~ .c-products .c-pcard-media {
  aspect-ratio: 1;
  border-radius: var(--c-radius-sm);
  background: var(--uw-white);
}

[data-pattern="feature.tabs"] ~ .c-products .c-pcard-media img {
  padding: 10%;
  mix-blend-mode: multiply;
}

[data-pattern="feature.tabs"] ~ .c-products :is(.c-pcard-brand, .c-pcard-fav, .c-pcard-variants, .c2-pcard-add, .c-pcard-badges) {
  display: none;
}

[data-pattern="feature.tabs"] ~ .c-products .c-pcard-body {
  padding: 10px 0 0;
}

[data-pattern="feature.tabs"] ~ .c-products :is(.c-pcard-text, .c-pcard-title, .c-pcard-price) {
  color: inherit;
}

[data-pattern="feature.tabs"] ~ .c-products .c-pcard-title {
  margin-top: 0;
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.3;
  -webkit-line-clamp: 2;
}

[data-pattern="feature.tabs"] ~ .c-products .c-pcard-price-row {
  margin-top: 3px;
}

[data-pattern="feature.tabs"] ~ .c-products .c-pcard-price {
  font-size: 13.5px;
  font-weight: 600;
}

@media (max-width: 639.98px) {
  [data-pattern="feature.tabs"] ~ .c-products .c-products-grid {
    gap: var(--c-space-2xs);
  }

  [data-pattern="feature.tabs"] ~ .c-products .c-pcard {
    padding: 6px;
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-pattern="feature.tabs"] ~ .c-products .c-pcard,
  [data-pattern="feature.tabs"] ~ .c-products .c-pcard:hover {
    transition: none;
    transform: none;
  }
}

[data-pattern="feature.tabs"] [data-part="tabs"].c-tabs[data-ready] .c-layer + * > .btn-primary {
  grid-column: -2;
  grid-row: 7;
  justify-self: start;
}

/* Faneliste: segmenteret pille med en tynd ring; den valgte fane er blæk. Ikonet følger placeringen. */
[data-pattern="feature.tabs"] [data-part="tabs"].c-tabs > .c-tabs-list {
  gap: var(--c-space-3xs);
  width: fit-content;
  max-width: 100%;
  margin: var(--c-space-md) 0 0;
  padding: 5px;
  border: 0;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c-fg, var(--c-color-fg)) 18%, transparent);
  transition: box-shadow 0.9s;
}

[data-pattern="feature.tabs"] [data-part="tabs"].c-tabs > .c-tabs-list > .c-tab {
  display: inline-flex;
  align-items: center;
  gap: var(--c-space-2xs);
  height: 46px;
  padding: 0 20px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  font-size: var(--c-font-body);
  font-weight: 500;
  color: var(--c-fg, var(--c-color-fg));
  transition: background-color 0.4s, color 0.4s;
}

[data-pattern="feature.tabs"] [data-part="tabs"].c-tabs > .c-tabs-list > .c-tab[aria-selected="true"] {
  background: var(--uw-ink);
  color: var(--uw-paper);
}

[data-pattern="feature.tabs"] [data-part="tabs"].c-tabs > .c-tabs-list > .c-tab:nth-child(-n + 3)::before {
  content: "";
  flex: none;
  width: 18px;
  height: 18px;
  background-color: currentColor;
  -webkit-mask: var(--uw-tab-icon) center / contain no-repeat;
  mask: var(--uw-tab-icon) center / contain no-repeat;
}

[data-pattern="feature.tabs"] [data-part="tabs"].c-tabs > .c-tabs-list > .c-tab:nth-child(1) {
  --uw-tab-icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='12'%20cy='12'%20r='4'/%3E%3Cpath%20d='M12%202v2'/%3E%3Cpath%20d='M12%2020v2'/%3E%3Cpath%20d='m4.93%204.93%201.41%201.41'/%3E%3Cpath%20d='m17.66%2017.66%201.41%201.41'/%3E%3Cpath%20d='M2%2012h2'/%3E%3Cpath%20d='M20%2012h2'/%3E%3Cpath%20d='m6.34%2017.66-1.41%201.41'/%3E%3Cpath%20d='m19.07%204.93-1.41%201.41'/%3E%3C/svg%3E");
}

[data-pattern="feature.tabs"] [data-part="tabs"].c-tabs > .c-tabs-list > .c-tab:nth-child(2) {
  --uw-tab-icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M12%2010V2'/%3E%3Cpath%20d='m4.93%2010.93%201.41%201.41'/%3E%3Cpath%20d='M2%2018h2'/%3E%3Cpath%20d='M20%2018h2'/%3E%3Cpath%20d='m19.07%2010.93-1.41%201.41'/%3E%3Cpath%20d='M22%2022H2'/%3E%3Cpath%20d='m16%206-4%204-4-4'/%3E%3Cpath%20d='M16%2018a4%204%200%200%200-8%200'/%3E%3C/svg%3E");
}

[data-pattern="feature.tabs"] [data-part="tabs"].c-tabs > .c-tabs-list > .c-tab:nth-child(3) {
  --uw-tab-icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M20.985%2012.486a9%209%200%201%201-9.473-9.472c.405-.022.617.46.402.803a6%206%200%200%200%208.268%208.268c.344-.215.825-.004.803.401'/%3E%3C/svg%3E");
}

/* Fotoet: løftet med en blød skygge, mørkere mod bunden, og klokkeslættet stort i serif nederst til venstre. */
[data-pattern="feature.tabs"] [data-part="media"].c-layer {
  background: color-mix(in srgb, var(--uw-black) 8%, transparent);
  filter: drop-shadow(0 1px 1px color-mix(in srgb, var(--uw-ink) 5%, transparent)) drop-shadow(0 20px 22px color-mix(in srgb, var(--uw-ink) 16%, transparent));
}

[data-pattern="feature.tabs"] [data-part="media"].c-layer img {
  object-position: center 30%;
}

[data-pattern="feature.tabs"] [data-part="media"].c-layer::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  z-index: 1;
  height: 40%;
  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--uw-ink) 45%, transparent));
  pointer-events: none;
}

[data-pattern="feature.tabs"] [data-part="clock"].c-text {
  z-index: 2;
  font-family: var(--c-font-serif);
  font-weight: 300;
  font-variation-settings: "SOFT" 100, "WONK" 0;
  line-height: 1;
  letter-spacing: -0.03em;
  color: color-mix(in srgb, var(--uw-paper) 95%, transparent);
  text-shadow: 0 2px 24px color-mix(in srgb, var(--uw-ink) 30%, transparent);
}

/* Fanens foto toner frem, når fanen skifter. */
@keyframes uw-feature-tabs-in {
  from {
    opacity: 0;
  }
}

[data-pattern="feature.tabs"] [data-part="tabs"].c-tabs[data-ready] > .c-tab-panel:not([hidden]) .c-layer > .c-image {
  animation: uw-feature-tabs-in 0.8s ease both;
}

[data-pattern="feature.tabs"] [data-part="media"].c-layer + * > .c-heading {
  margin-top: var(--c-space-lg);
  line-height: 0.98;
}

[data-pattern="feature.tabs"] [data-part="media"].c-layer + * > .c-text {
  max-width: 46ch;
  margin-top: var(--c-space-md);
  line-height: 1.6;
  color: var(--c-fg, var(--c-color-fg));
}

[data-pattern="feature.tabs"] [data-part="media"].c-layer + * > .btn-primary {
  margin-top: var(--c-space-lg);
}

/* Nat: den valgte fane og knappen bliver lyse på mørket, og ringen lysere. */
[data-pattern="feature.tabs"]:has(> .c-tabs > .c-tabs-list > .c-tab:nth-child(3)[aria-selected="true"]) > .c-tabs > .c-tabs-list {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--uw-paper) 28%, transparent);
}

[data-pattern="feature.tabs"]:has(> .c-tabs > .c-tabs-list > .c-tab:nth-child(3)[aria-selected="true"]) > .c-tabs > .c-tabs-list > .c-tab[aria-selected="true"],
[data-pattern="feature.tabs"]:has(> .c-tabs > .c-tabs-list > .c-tab:nth-child(3)[aria-selected="true"]) .btn-primary {
  background: var(--uw-paper);
  color: var(--uw-ink);
}

@media (min-width: 1024px) {
  [data-pattern="feature.tabs"] [data-part="media"].c-layer {
    aspect-ratio: 0.9;
  }
}

/* Tablet og mobil: én kolonne med fotoet øverst. */
@media (max-width: 1023.98px) {
  .c-section-body:has(> [data-pattern="feature.tabs"] > .c-tabs[data-ready]) {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: repeat(7, auto);
  }

  [data-pattern="feature.tabs"] [data-part="tabs"].c-tabs[data-ready] .c-layer {
    grid-row: 1;
  }

  [data-pattern="feature.tabs"]:has(> .c-tabs[data-ready]) [data-part="eyebrow"].c-eyebrow {
    margin-top: var(--c-space-xl);
  }

  [data-pattern="feature.tabs"] [data-part="media"].c-layer + * > .c-heading {
    margin-top: var(--c-space-md);
  }

  [data-pattern="feature.tabs"] [data-part="media"].c-layer + * > .c-text {
    margin-top: var(--c-space-sm);
  }
}

@media (max-width: 639.98px) {
  [data-pattern="feature.tabs"]:has(> .c-tabs[data-ready]) [data-part="eyebrow"].c-eyebrow {
    margin-top: var(--c-space-lg);
  }

  [data-pattern="feature.tabs"] [data-part="tabs"].c-tabs > .c-tabs-list {
    width: 100%;
  }

  [data-pattern="feature.tabs"] [data-part="tabs"].c-tabs > .c-tabs-list > .c-tab {
    flex: 1;
    justify-content: center;
    padding: 0 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .c-section:has([data-pattern="feature.tabs"]),
  [data-pattern="feature.tabs"] [data-part="tabs"].c-tabs > .c-tabs-list,
  [data-pattern="feature.tabs"] [data-part="tabs"].c-tabs > .c-tabs-list > .c-tab {
    transition: none;
  }

  [data-pattern="feature.tabs"] [data-part="tabs"].c-tabs[data-ready] > .c-tab-panel:not([hidden]) .c-layer > .c-image {
    animation: none;
  }
}

/* ---- materials.panels ---- */

/* Intro og link til højre for overskriften på desktop, højst 40 tegn bred. */
[data-pattern="materials.panels"] [data-part="aside"] {
  max-width: 40ch;
}

[data-pattern="materials.panels"] [data-part="intro"].c-text {
  color: var(--uw-body);
}

@media (min-width: 1024px) {
  [data-pattern="materials.panels"] [data-part="aside"] {
    flex: 0 1 40ch;
  }
}

/* Panelerne er en harmonika (details) med ét åbent; tallet 01, 02 … tælles i CSS. */
[data-pattern="materials.panels"] [data-part="panels"] {
  counter-reset: uw-material;
  gap: var(--c-space-xs);
}

[data-pattern="materials.panels"] [data-part="panel"] {
  position: relative;
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: var(--c-radius-2xl);
  overflow: hidden;
  counter-increment: uw-material;
  background-color: #e8dfd2;
  color: var(--uw-ink);
}

[data-pattern="materials.panels"] [data-part="panel"] > summary {
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 10px;
  padding: 26px 26px 0;
  font-family: var(--c-font-serif);
  font-size: clamp(28px, 2.4vw, 40px);
  font-weight: 300;
  font-variation-settings: "SOFT" 100, "WONK" 0;
  line-height: 1.02;
  letter-spacing: -0.02em;
}

[data-pattern="materials.panels"] [data-part="panel"] > summary:focus-visible {
  outline-offset: -4px;
}

[data-pattern="materials.panels"] [data-part="panel"] > summary::before {
  content: counter(uw-material, decimal-leading-zero);
  font-family: var(--c-font-sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--uw-body-light);
}

/* Chevronen bliver et plus i en lys cirkel; det åbne panel har intet plus. */
[data-pattern="materials.panels"] > :last-child > details > summary > svg {
  display: none;
}

[data-pattern="materials.panels"] [data-part="panel"] > summary::after {
  content: "";
  position: absolute;
  right: 20px;
  bottom: 20px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background:
    linear-gradient(var(--uw-ink), var(--uw-ink)) center / 15px 1.7px no-repeat,
    linear-gradient(var(--uw-ink), var(--uw-ink)) center / 1.7px 15px no-repeat,
    color-mix(in srgb, var(--uw-white) 70%, transparent);
}

[data-pattern="materials.panels"] [data-part="panels"] > details[open] > summary::after {
  display: none;
}

/* Det åbne panels indhold: tre kvaliteter med streg over, Shop-linket og et rundt foto. Ingen z-index og ingen
   udfyldt animation her: en egen stablingskontekst ville gøre packshottets hvide baggrund hvid i cirklen
   (mix-blend-mode). */
@keyframes uw-materials-in {
  from {
    opacity: 0;
    translate: 0 10px;
  }
}

[data-pattern="materials.panels"] [data-part="panel"] > div {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
  align-items: end;
  gap: var(--c-space-md);
  padding: 0;
  animation: uw-materials-in 0.6s 0.15s var(--uw-ease) backwards;
}

[data-pattern="materials.panels"] [data-part="quality"]:has(> .c-icon) {
  padding: 11px 0;
  border-top: 1px solid color-mix(in srgb, var(--uw-ink) 12%, transparent);
}

[data-pattern="materials.panels"] [data-part="quality"]:has(> .c-icon) > .c-icon {
  align-self: center;
  color: var(--uw-green-ink);
}

[data-pattern="materials.panels"] [data-part="quality"]:has(> .c-icon) > .c-text {
  font-size: 15.5px;
  font-weight: 500;
  color: var(--uw-ink);
}

[data-pattern="materials.panels"] [data-part="shop-link"].c-link {
  margin-top: 10px;
  color: var(--uw-ink);
}

[data-pattern="materials.panels"] [data-part="panel-image"].c-image {
  overflow: hidden;
  border-radius: 50%;
  background: color-mix(in srgb, var(--uw-white) 55%, transparent);
}

[data-pattern="materials.panels"] [data-part="panel-image"].c-image img {
  padding: 14%;
  mix-blend-mode: multiply;
}

/* Farve og stoftekstur efter placering: bambus, bomuld, merinould, uld og silke, uld. */
[data-pattern="materials.panels"] [data-part="panels"] > details:nth-child(1) {
  background-color: #d9e2d3;
  background-image: repeating-linear-gradient(90deg, color-mix(in srgb, var(--uw-white) 42%, transparent) 0 1px, transparent 1px 6px);
}

[data-pattern="materials.panels"] [data-part="panels"] > details:nth-child(2) {
  background-color: #efe6d8;
  background-image:
    repeating-linear-gradient(45deg, color-mix(in srgb, var(--uw-ink) 5%, transparent) 0 1px, transparent 1px 7px),
    repeating-linear-gradient(-45deg, color-mix(in srgb, var(--uw-ink) 5%, transparent) 0 1px, transparent 1px 7px);
}

[data-pattern="materials.panels"] [data-part="panels"] > details:nth-child(3) {
  background-color: #ded7cc;
  background-image: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--uw-white) 50%, transparent) 0 1.4px, transparent 1.8px);
  background-size: 9px 9px;
}

[data-pattern="materials.panels"] [data-part="panels"] > details:nth-child(4) {
  background-color: #ecd9d2;
  background-image: linear-gradient(115deg, transparent 28%, color-mix(in srgb, var(--uw-white) 55%, transparent) 46%, transparent 64%);
}

[data-pattern="materials.panels"] > :last-child > details:nth-child(5) {
  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);
}

/* Desktop: høje paneler side om side; det åbne vokser til godt tre gange bredden. Hele det lukkede panel er
   knappen, og det åbne kan ikke klikkes lukket med musen, så ét altid står åbent. */
@media (min-width: 1024px) {
  [data-pattern="materials.panels"] [data-part="panels"] {
    flex-direction: row;
    height: clamp(460px, 40vw, 560px);
  }

  [data-pattern="materials.panels"] [data-part="panel"] {
    flex: 1 1 0;
    transition: flex-grow 0.7s var(--uw-ease);
  }

  [data-pattern="materials.panels"] [data-part="panels"] > details[open] {
    flex-grow: 3.2;
  }

  [data-pattern="materials.panels"] [data-part="panel"] > summary {
    position: absolute;
    inset: 0;
  }

  [data-pattern="materials.panels"] [data-part="panels"] > details[open] > summary {
    pointer-events: none;
  }

  [data-pattern="materials.panels"] [data-part="panel"] > div {
    position: absolute;
    left: 26px;
    right: 26px;
    bottom: 26px;
  }
}

/* Tablet og mobil: panelerne stablet; plusset står øverst til højre, og fotoet er lille ved siden af listen. */
@media (max-width: 1023.98px) {
  [data-pattern="materials.panels"] [data-part="panel"] {
    min-height: 96px;
  }

  [data-pattern="materials.panels"] [data-part="panel"] > summary {
    padding: var(--c-space-md) 80px 22px var(--c-space-md);
    font-size: 28px;
  }

  [data-pattern="materials.panels"] [data-part="panel"] > summary::after {
    top: 26px;
    bottom: auto;
  }

  [data-pattern="materials.panels"] [data-part="panel"] > div {
    grid-template-columns: minmax(0, 1fr) 120px;
    padding: 0 var(--c-space-md) var(--c-space-md);
  }
}

@media (max-width: 639.98px) {
  [data-pattern="materials.panels"] [data-part="panel"] > div {
    grid-template-columns: minmax(0, 1fr) 92px;
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-pattern="materials.panels"] [data-part="panel"] {
    transition: none;
  }

  [data-pattern="materials.panels"] [data-part="panel"] > div {
    animation: none;
  }
}

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

/* Teksten står til højre for overskriften på desktop, højst 40 tegn bred. */
[data-pattern="chooser.tabs"] [data-part="intro"].c-text {
  max-width: 40ch;
}

@media (min-width: 1024px) {
  [data-pattern="chooser.tabs"] [data-part="intro"].c-text {
    flex: 0 1 40ch;
  }
}

/* Behovene er fanerne, tegnet som store kort: det valgte løftes med blækkant og et grønt flueben i cirklen.
   En fane kan kun bære en titel; designets ikon, beskrivelse og stofprøver er udeladt. */
[data-pattern="chooser.tabs"] [data-part="needs"].c-tabs > .c-tabs-list:not([hidden]) {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: var(--c-space-md);
  margin-bottom: var(--c-space-md);
  padding-top: 6px;
  border: 0;
  overflow: visible;
}

[data-pattern="chooser.tabs"] [data-part="needs"].c-tabs > .c-tabs-list > .c-tab {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 150px;
  padding: var(--c-space-lg) 72px var(--c-space-lg) var(--c-space-lg);
  border: 0;
  border-radius: var(--c-radius-2xl);
  background: var(--uw-paper);
  box-shadow: inset 0 0 0 1px var(--c-border, var(--c-color-border));
  font-family: var(--c-font-serif);
  font-size: clamp(28px, 2.6vw, 40px);
  font-weight: 300;
  font-variation-settings: "SOFT" 100, "WONK" 0;
  line-height: 1.02;
  letter-spacing: -0.02em;
  text-align: left;
  white-space: normal;
  color: var(--uw-ink);
  transition: transform 0.45s var(--uw-ease), box-shadow 0.45s var(--uw-ease), background-color 0.3s;
}

[data-pattern="chooser.tabs"] [data-part="needs"].c-tabs > .c-tabs-list > .c-tab: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="chooser.tabs"] [data-part="needs"].c-tabs > .c-tabs-list > .c-tab[aria-selected="true"] {
  border: 0;
  background: var(--uw-white);
  transform: translateY(-6px);
  box-shadow: inset 0 0 0 1.5px var(--uw-ink), 0 34px 54px -34px color-mix(in srgb, var(--uw-ink) 55%, transparent);
}

[data-pattern="chooser.tabs"] [data-part="needs"].c-tabs > .c-tabs-list > .c-tab::after {
  content: "";
  position: absolute;
  top: var(--c-space-lg);
  right: var(--c-space-lg);
  width: 30px;
  height: 30px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px #e8dfd2;
  transition: background-color 0.35s, box-shadow 0.35s;
}

[data-pattern="chooser.tabs"] [data-part="needs"].c-tabs > .c-tabs-list > .c-tab[aria-selected="true"]::after {
  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='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M20%206%209%2017l-5-5'/%3E%3C/svg%3E") center / 16px no-repeat, var(--uw-green);
  box-shadow: none;
}

/* Svarpanelet: hvidt med tynd kant, teksten til venstre og de to kapitelkort til højre. */
@keyframes uw-chooser-in {
  from {
    opacity: 0;
    translate: 0 8px;
  }
}

[data-pattern="chooser.tabs"] [data-part="need"].c-tab-panel > div {
  padding: clamp(22px, 2.6vw, 36px);
  border-radius: var(--c-radius-2xl);
  background: var(--uw-white);
  box-shadow: inset 0 0 0 1px var(--c-border, var(--c-color-border));
}

[data-pattern="chooser.tabs"] [data-part="needs"].c-tabs[data-ready] > .c-tab-panel:not([hidden]) > div > * {
  animation: uw-chooser-in 0.6s var(--uw-ease) backwards;
}

[data-pattern="chooser.tabs"] [data-part="needs"].c-tabs[data-ready] > .c-tab-panel:not([hidden]) > div > :last-child {
  animation-delay: 0.12s;
}

[data-pattern="chooser.tabs"] [data-part="answer-title"].c-heading {
  font-size: clamp(32px, 3.2vw, 50px);
  line-height: 1;
  letter-spacing: -0.03em;
}

[data-pattern="chooser.tabs"] [data-part="answer-why"].c-text {
  max-width: 38ch;
  font-size: 16px;
  color: var(--uw-body);
}

/* Kapitelkortene: stoffeltet med nummeret, kicker, navn og "Bedst til", og en mørk pil. Navnet er linket, og
   det dækker hele kortet. */
[data-pattern="chooser.tabs"] [data-part="answer-links"] {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

[data-pattern="chooser.tabs"] [data-part="compare"].c-link {
  grid-column: 1 / -1;
  margin-top: 2px;
}

[data-pattern="chooser.tabs"] [data-part="option"].c-box {
  position: relative;
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) 44px;
  grid-template-rows: 1fr auto auto auto 1fr;
  column-gap: var(--c-space-sm);
  align-items: center;
  padding: 10px var(--c-space-xs) 10px 10px;
  background: var(--uw-paper);
  color: var(--uw-ink);
  transition: background-color 0.25s, box-shadow 0.25s;
}

[data-pattern="chooser.tabs"] [data-part="option"].c-box:hover {
  background: var(--uw-white);
  box-shadow: inset 0 0 0 1.5px var(--uw-ink);
}

[data-pattern="chooser.tabs"] [data-part="option-number"] {
  grid-column: 1;
  grid-row: 1 / -1;
  align-self: center;
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  border-radius: var(--c-radius-md);
  background-color: #e8dfd2;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--uw-ink) 6%, transparent);
  font-family: var(--c-font-serif);
  font-size: 24px;
  font-style: italic;
  font-weight: 300;
  color: var(--uw-ink);
}

[data-pattern="chooser.tabs"] [data-part="option-kicker"] {
  grid-column: 2;
  grid-row: 2;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-muted, var(--c-color-muted));
}

[data-pattern="chooser.tabs"] [data-part="option-link"].c-link {
  grid-column: 2;
  grid-row: 3;
  min-height: 0;
  margin-top: 2px;
  font-family: var(--c-font-serif);
  font-size: var(--c-font-h5);
  font-weight: 300;
  font-variation-settings: "SOFT" 100, "WONK" 0;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--uw-ink);
  text-decoration: none;
}

[data-pattern="chooser.tabs"] [data-part="option-link"].c-link::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

[data-pattern="chooser.tabs"] [data-part="option"].c-box:has(> .c-link:focus-visible) {
  outline: 2px solid var(--c-accent, var(--uw-green-ink));
  outline-offset: 3px;
}

[data-pattern="chooser.tabs"] [data-part="option-link"].c-link:focus-visible {
  outline: 0;
}

[data-pattern="chooser.tabs"] [data-part="option-best"] {
  grid-column: 2;
  grid-row: 4;
  margin-top: var(--c-space-3xs);
  font-size: 13.5px;
  line-height: 1.35;
  color: var(--uw-body);
}

[data-pattern="chooser.tabs"] [data-part="option-arrow"].c-icon {
  --c-icon-size: 20px;
  grid-column: 3;
  grid-row: 1 / -1;
  align-self: center;
  padding: 12px;
  background: var(--uw-ink);
  color: var(--uw-paper);
  transition: transform 0.3s;
}

[data-pattern="chooser.tabs"] [data-part="option"].c-box:hover > .c-icon {
  transform: translateY(3px);
}

/* Stoffeltet får materialets tekstur, når kortet linker til et kapitel med materialets navn (#bambus …). Uld står
   først: bomuld og merinould ender også på "uld" og vinder, fordi de kommer efter. */
[data-pattern="chooser.tabs"] .c-box:has(> .c-link[href$="uld"]) > :first-child {
  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"] .c-box:has(> .c-link[href$="bambus"]) > :first-child {
  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"] .c-box:has(> .c-link[href$="bomuld"]) > :first-child {
  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"] .c-box:is(:has(> .c-link[href$="merino"]), :has(> .c-link[href$="merinould"])) > :first-child {
  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"] .c-box:has(> .c-link[href$="silke"]) > :first-child {
  background-color: #ecd9d2;
  background-image: linear-gradient(115deg, transparent 24%, color-mix(in srgb, var(--uw-white) 62%, transparent) 46%, transparent 68%);
}

@media (min-width: 1024px) {
  [data-pattern="chooser.tabs"] [data-part="need"].c-tab-panel > div {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.3fr);
    align-items: center;
    gap: clamp(20px, 3vw, 56px);
  }
}

/* Tablet og mobil: kortene stablet som rækker med titlen til venstre og cirklen til højre; svaret over kortene. */
@media (max-width: 1023.98px) {
  /* :not([hidden]) som grundreglen, ellers vinder dens grid-auto-flow: column på specificitet. */
  [data-pattern="chooser.tabs"] [data-part="needs"].c-tabs > .c-tabs-list:not([hidden]) {
    grid-auto-flow: row;
    gap: 10px;
    padding-top: 0;
  }

  [data-pattern="chooser.tabs"] [data-part="needs"].c-tabs > .c-tabs-list > .c-tab {
    align-items: center;
    min-height: 0;
    padding: 22px 64px 22px 22px;
    border-radius: var(--c-radius-xl);
    font-size: 28px;
  }

  [data-pattern="chooser.tabs"] [data-part="needs"].c-tabs > .c-tabs-list > .c-tab::after {
    top: 50%;
    right: 20px;
    translate: 0 -50%;
  }

  [data-pattern="chooser.tabs"] [data-part="needs"].c-tabs > .c-tabs-list > .c-tab:hover,
  [data-pattern="chooser.tabs"] [data-part="needs"].c-tabs > .c-tabs-list > .c-tab[aria-selected="true"] {
    transform: none;
  }
}

@media (max-width: 639.98px) {
  [data-pattern="chooser.tabs"] [data-part="needs"].c-tabs > .c-tabs-list > .c-tab {
    padding: var(--c-space-sm) 56px var(--c-space-sm) var(--c-space-sm);
    font-size: 25px;
  }

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

  [data-pattern="chooser.tabs"] [data-part="need"].c-tab-panel > div {
    padding: 20px var(--c-space-sm) 18px;
    border-radius: var(--c-radius-xl);
  }

  [data-pattern="chooser.tabs"] [data-part="answer-title"].c-heading {
    font-size: 34px;
  }

  [data-pattern="chooser.tabs"] [data-part="answer-links"] {
    grid-template-columns: minmax(0, 1fr);
  }

  [data-pattern="chooser.tabs"] [data-part="option"].c-box {
    grid-template-columns: 60px minmax(0, 1fr) 40px;
    column-gap: var(--c-space-xs);
    padding: var(--c-space-2xs) 10px var(--c-space-2xs) var(--c-space-2xs);
    border-radius: 20px;
  }

  [data-pattern="chooser.tabs"] [data-part="option-number"] {
    width: 60px;
    height: 60px;
    border-radius: 15px;
    font-size: var(--c-font-h6);
  }

  [data-pattern="chooser.tabs"] [data-part="option-link"].c-link {
    font-size: 23px;
  }

  [data-pattern="chooser.tabs"] [data-part="option-arrow"].c-icon {
    padding: 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-pattern="chooser.tabs"] [data-part="needs"].c-tabs > .c-tabs-list > .c-tab,
  [data-pattern="chooser.tabs"] [data-part="option"].c-box,
  [data-pattern="chooser.tabs"] [data-part="option-arrow"].c-icon {
    transition: none;
  }

  [data-pattern="chooser.tabs"] [data-part="needs"].c-tabs > .c-tabs-list > .c-tab:hover,
  [data-pattern="chooser.tabs"] [data-part="needs"].c-tabs > .c-tabs-list > .c-tab[aria-selected="true"],
  [data-pattern="chooser.tabs"] [data-part="option"].c-box:hover > .c-icon {
    transform: none;
  }

  [data-pattern="chooser.tabs"] [data-part="needs"].c-tabs[data-ready] > .c-tab-panel:not([hidden]) > div > * {
    animation: none;
  }
}

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

/* Sektionen hænger fast under headeren (desktop: den faste hovednavigation, h-16). Den kan kun hænge inden for sin
   forælder, så den bliver hængende til sidens indhold slutter, ikke kun mens kapitlerne er på skærmen.
   --uw-header-h kan sættes af headeren, hvis dens højde ændres. */
.c-section:has(> .c-section-body > [data-pattern="anchor.nav"]) {
  position: sticky;
  top: var(--uw-header-h, 0px);
  z-index: 15;
}

/* Ankre i sektionerne efter bjælken lander under både header og bjælke. */
.c-section:has(> .c-section-body > [data-pattern="anchor.nav"]) ~ .c-section[id] {
  scroll-margin-top: calc(var(--uw-header-h, 0px) + 76px);
}

@media (min-width: 1024px) {
  .c-section:has(> .c-section-body > [data-pattern="anchor.nav"]) {
    top: var(--uw-header-h, 4rem);
  }

  .c-section:has(> .c-section-body > [data-pattern="anchor.nav"]) ~ .c-section[id] {
    scroll-margin-top: calc(var(--uw-header-h, 4rem) + 84px);
  }
}

/* Bjælken: gennemsigtigt papir med sløring og en tynd kant forneden; indholdet holder sidebredden. */
[data-pattern="anchor.nav"] {
  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);
  border-bottom: 1px solid var(--c-border, var(--c-color-border));
}

/* Navnet er kun til skærmlæsere. */
[data-pattern="anchor.nav"] [data-part="bar-label"].c-text {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

[data-pattern="anchor.nav"] [data-part="bar-row"] {
  width: 100%;
  max-width: var(--c-container-xl);
  min-height: 68px;
  margin-inline: auto;
  padding-inline: var(--uw-gutter);
}

[data-pattern="anchor.nav"] [data-part="chapter-links"] {
  min-width: 0;
  padding: 4px 0;
  overflow-x: auto;
  scrollbar-width: none;
}

[data-pattern="anchor.nav"] [data-part="chapter-links"]::-webkit-scrollbar {
  display: none;
}

[data-pattern="anchor.nav"] [data-part="extra-links"] {
  flex: none;
}

[data-pattern="anchor.nav"] .c-link {
  flex: none;
  gap: 10px;
  height: 46px;
  min-height: 0;
  padding: 0 18px;
  border-radius: 999px;
  font-size: 14.5px;
  font-weight: 500;
  white-space: nowrap;
  color: var(--uw-ink);
  text-decoration: none;
  transition: background-color 0.35s, box-shadow 0.35s;
}

[data-pattern="anchor.nav"] .c-link:focus-visible {
  outline-offset: -2px;
}

[data-pattern="anchor.nav"] [data-part="chapter"].c-link:hover {
  background: var(--uw-white);
  box-shadow: inset 0 0 0 1px var(--c-border, var(--c-color-border));
}

/* De ekstra links er hvide piller med ring. */
[data-pattern="anchor.nav"] [data-part="extra"].c-link {
  font-weight: 600;
  background: var(--uw-white);
  box-shadow: inset 0 0 0 1px var(--c-border, var(--c-color-border));
}

[data-pattern="anchor.nav"] [data-part="extra"].c-link:hover {
  box-shadow: inset 0 0 0 1.5px var(--uw-ink);
}

/* Stofprøven foran et kapitel, hvis ankeret ender på et materiale. Uld står først: bomuld og merinould ender også
   på "uld" og vinder, fordi de kommer efter. */
[data-pattern="anchor.nav"] [data-part="chapter"].c-link:is([href$="uld"], [href$="bambus"], [href$="merino"], [href$="silke"]) {
  padding-left: 7px;
}

[data-pattern="anchor.nav"] [data-part="chapter"].c-link:is([href$="uld"], [href$="bambus"], [href$="merino"], [href$="silke"])::before {
  content: "";
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--uw-ink) 6%, transparent);
}

[data-pattern="anchor.nav"] [data-part="chapter-links"] > .c-link[href$="uld"]::before {
  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="anchor.nav"] [data-part="chapter-links"] > .c-link[href$="bambus"]::before {
  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="anchor.nav"] [data-part="chapter-links"] > .c-link[href$="bomuld"]::before {
  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="anchor.nav"] [data-part="chapter-links"] > .c-link:is([href$="merino"], [href$="merinould"])::before {
  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="anchor.nav"] [data-part="chapter-links"] > .c-link[href$="silke"]::before {
  background-color: #ecd9d2;
  background-image: linear-gradient(115deg, transparent 24%, color-mix(in srgb, var(--uw-white) 62%, transparent) 46%, transparent 68%);
}

/* Tablet: kun kapitlerne. */
@media (max-width: 1023.98px) {
  [data-pattern="anchor.nav"] [data-part="extra-links"] {
    display: none;
  }
}

/* Mobil: mindre piller, der swipes vandret og toner ud mod højre kant. */
@media (max-width: 639.98px) {
  [data-pattern="anchor.nav"] [data-part="bar-row"] {
    min-height: 60px;
    padding-inline: 0;
  }

  [data-pattern="anchor.nav"] [data-part="chapter-links"] {
    padding: 8px var(--uw-gutter);
    -webkit-mask-image: linear-gradient(90deg, var(--uw-black) calc(100% - 28px), transparent);
    mask-image: linear-gradient(90deg, var(--uw-black) calc(100% - 28px), transparent);
  }

  [data-pattern="anchor.nav"] .c-link {
    height: 44px;
    padding: 0 15px;
    font-size: var(--c-font-sm);
  }

  [data-pattern="anchor.nav"] [data-part="chapter"].c-link:is([href$="uld"], [href$="bambus"], [href$="merino"], [href$="silke"]) {
    padding-left: 6px;
  }

  [data-pattern="anchor.nav"] [data-part="chapter"].c-link:is([href$="uld"], [href$="bambus"], [href$="merino"], [href$="silke"])::before {
    width: 30px;
    height: 30px;
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-pattern="anchor.nav"] .c-link {
    transition: none;
  }
}

/* Uniwear Concept 2: footerens sektioner (footer.newsletter, footer.links, footer.legal). Del-stylesheet; lead-agenten
   fletter det ind i concept2-sections-2.css. footer.wordmark står allerede i concept2-sections.css.
   Footer-siden har fire sektioner på surface-inverse med baggrund i fuld bredde og uden padding: mønstrene ejer deres
   afstand og de hårfine streger, så stregerne følger containerens bredde som i designet. */

/* ---- footer.newsletter ---- */

/* Footeren begynder med designets stiplede søm 10px under kanten, i hele bredden. */
.c-section:has([data-pattern="footer.newsletter"]) {
  position: relative;
}

.c-section:has([data-pattern="footer.newsletter"])::before {
  content: "";
  position: absolute;
  top: 10px;
  right: 0;
  left: 0;
  border-top: 1.5px dashed color-mix(in srgb, var(--uw-paper) 26%, transparent);
  pointer-events: none;
}

/* Sektionen holder mønstret, sidens formular-node og en tekst-node med det med småt. */
.c-section-body:has(> [data-pattern="footer.newsletter"]) {
  gap: 0;
  padding: clamp(56px, 6vw, 96px) 0 clamp(40px, 5vw, 72px);
  border-bottom: 1px solid var(--c-border, var(--c-color-border));
}

[data-pattern="footer.newsletter"] [data-part="heading"].c-heading {
  font-size: clamp(38px, 4.2vw, 64px);
  color: var(--c-fg, var(--c-color-fg));
}

[data-pattern="footer.newsletter"] [data-part="text"].c-text,
.c-section-body > [data-pattern="footer.newsletter"] ~ .c-text {
  max-width: 42ch;
  font-size: 16px;
  line-height: 1.55;
}

.c-section-body > [data-pattern="footer.newsletter"] ~ div:has(> form) {
  margin-top: var(--c-space-lg);
}

.c-section-body > [data-pattern="footer.newsletter"] ~ .c-text {
  margin-top: var(--c-space-sm);
}

/* Desktop: overskrift og tekst til venstre, formular og småt til højre, bundjusteret. */
@media (min-width: 1024px) {
  .c-section-body:has(> [data-pattern="footer.newsletter"]) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: var(--c-space-2xl);
    align-items: end;
  }

  .c-section-body > [data-pattern="footer.newsletter"] {
    grid-row: 1 / span 2;
  }

  .c-section-body > [data-pattern="footer.newsletter"] ~ * {
    grid-column: 2;
  }

  .c-section-body > [data-pattern="footer.newsletter"] ~ div:has(> form) {
    margin-top: 0;
  }
}

/* Formularen (en CMS-formular med et e-mailfelt og et submit-felt) er én pille med feltet og knappen side om side.
   Etiketten er skjult visuelt, men læses op: designet viser kun feltets placeholder. */
[data-pattern="footer.newsletter"] ~ div > form fieldset {
  display: flex;
  gap: var(--c-space-2xs);
  padding: 6px;
  border-radius: var(--c-radius-full);
  background: color-mix(in srgb, var(--uw-paper) 8%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--uw-paper) 18%, transparent);
}

[data-pattern="footer.newsletter"] ~ div > form fieldset:has(input:focus-visible) {
  outline: 2px solid var(--c-accent, var(--uw-green-ink));
  outline-offset: 3px;
}

[data-pattern="footer.newsletter"] ~ div > form fieldset > div {
  flex: none;
  gap: 0;
}

[data-pattern="footer.newsletter"] ~ div > form fieldset > div:has(> input) {
  flex: 1;
}

[data-pattern="footer.newsletter"] ~ div > form label {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

[data-pattern="footer.newsletter"] ~ div > form input:not([type="hidden"]) {
  width: 100%;
  height: 52px;
  padding: 0 20px;
  border: 0;
  border-radius: var(--c-radius-full);
  background: transparent;
  font: inherit;
  font-size: 15.5px;
  color: var(--c-fg, var(--c-color-fg));
  outline: none;
}

[data-pattern="footer.newsletter"] ~ div > form input::placeholder {
  color: #aeb5c1;
  opacity: 1;
}

/* Tilmeld: den grønne pille, 52px så den sidder inde i feltets ramme; ingen løft ved hover. */
[data-pattern="footer.newsletter"] ~ div > form button[type="submit"] {
  height: 52px;
  min-height: 52px;
  padding: 0 26px;
  background-color: var(--uw-green);
  color: var(--uw-ink);
  font-size: var(--c-font-body);
  font-weight: 700;
  transition: background-color 0.2s;
}

[data-pattern="footer.newsletter"] ~ div > form button[type="submit"]:hover {
  background-color: #3cd6a6;
  color: var(--uw-ink);
  transform: none;
  box-shadow: none;
}

/* Formularens svar (succes- og fejlteksten) i lys tekst på natfladen; succesteksten erstatter pillen. */
[data-pattern="footer.newsletter"] ~ div > form > :is([role="status"], [role="alert"]) {
  font-size: 16px;
  color: var(--c-fg, var(--c-color-fg));
}

[data-pattern="footer.newsletter"] ~ div > form > [role="status"] {
  margin-top: 0;
}

@media (max-width: 639.98px) {
  [data-pattern="footer.newsletter"] ~ div > form fieldset {
    flex-direction: column;
    border-radius: 26px;
  }

  [data-pattern="footer.newsletter"] ~ div > form fieldset > div:has(> input) {
    flex: none;
  }

  [data-pattern="footer.newsletter"] ~ div > form button[type="submit"] {
    width: 100%;
  }
}

/* ---- footer.links ---- */

[data-pattern="footer.links"] {
  padding: clamp(40px, 5vw, 72px) 0;
}

/* Spaltetitlerne og kundeservice-etiketten: små versaler i designets dæmpede grå (#9aa3b2 findes ikke som token). */
[data-pattern="footer.links"] h3.c-heading {
  font-size: var(--c-font-xs);
  font-weight: 600;
  line-height: 1.55;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #9aa3b2;
}

/* Telefonnummeret, stort i serif. */
[data-pattern="footer.links"] > :first-child > :last-child > .c-link:first-child {
  min-height: 0;
  margin-bottom: 6px;
  font-family: var(--c-font-serif);
  font-size: var(--c-font-h4);
  font-weight: 300;
  font-optical-sizing: auto;
  font-variation-settings: "SOFT" 100, "WONK" 0;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--c-fg, var(--c-color-fg));
  text-decoration: none;
}

/* E-mail og åbningstider. */
[data-pattern="footer.links"] [data-part="contact-lines"] > * {
  font-size: var(--c-font-body);
  line-height: 1.7;
  color: var(--c-muted, var(--c-color-muted));
}

[data-pattern="footer.links"] [data-part="email"].c-link {
  min-height: 0;
  font-weight: 400;
  text-decoration-thickness: 1px;
  text-decoration-color: currentColor;
  text-underline-offset: 4px;
}

[data-pattern="footer.links"] [data-part="email"].c-link:hover {
  color: var(--c-fg, var(--c-color-fg));
}

/* Linkene i grupperne og i kassens række. */
[data-pattern="footer.links"] > :not(:first-child) .c-link {
  font-weight: 400;
  color: #e4e7ec;
  text-decoration: none;
  transition: color 0.2s;
}

[data-pattern="footer.links"] > :not(:first-child) .c-link:hover {
  color: var(--uw-green);
}

[data-pattern="footer.links"][data-pattern-params~="variant=default"] [data-part="group"]:not(:first-child) .c-link {
  min-height: 0;
  padding: 6px 0;
  font-size: var(--c-font-body);
  line-height: 1.55;
}

/* checkout: kontakten til venstre og linkrækken til højre, bundjusteret. Rækken brydes ned under kontakten, når der
   ikke er plads (designets flex-wrap, som et gitter ikke kan); afstandene er variantens gap og rowGap. */
[data-pattern="footer.links"][data-pattern-params~="variant=checkout"] {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  padding: clamp(40px, 4vw, 56px) 0 28px;
}

/* E-mail og åbningstider står på én linje, der brydes som almindelig tekst. */
[data-pattern="footer.links"][data-pattern-params~="variant=checkout"] [data-part="contact-lines"] {
  display: block;
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--c-muted, var(--c-color-muted));
}

[data-pattern="footer.links"][data-pattern-params~="variant=checkout"] [data-part="email"],
[data-pattern="footer.links"][data-pattern-params~="variant=checkout"] > :first-child > :last-child > :last-child > .c-text > p {
  display: inline;
  font-size: 14.5px;
}

[data-pattern="footer.links"][data-pattern-params~="variant=checkout"] > :first-child > :last-child > :last-child > .c-text::before {
  content: " · ";
}

[data-pattern="footer.links"][data-pattern-params~="variant=checkout"] [data-part="checkout-links"] {
  row-gap: var(--c-space-3xs);
}

[data-pattern="footer.links"][data-pattern-params~="variant=checkout"] [data-part="checkout-link"].c-link {
  min-height: 44px;
  font-size: 14.5px;
}

/* Kassens footer har ingen nyhedsbrevssektion, så sømmen sidder over kundeservice. */
.c-section:has([data-pattern="footer.links"][data-pattern-params~="variant=checkout"]) {
  position: relative;
}

.c-section:has([data-pattern="footer.links"][data-pattern-params~="variant=checkout"])::before {
  content: "";
  position: absolute;
  top: 10px;
  right: 0;
  left: 0;
  border-top: 1.5px dashed color-mix(in srgb, var(--uw-paper) 26%, transparent);
  pointer-events: none;
}

@media (max-width: 639.98px) {
  [data-pattern="footer.links"][data-pattern-params~="variant=checkout"] > :first-child > :last-child > .c-link:first-child {
    font-size: var(--c-font-h5);
  }
}

/* ---- footer.legal ---- */

[data-pattern="footer.legal"] {
  padding: 22px 0 30px;
  border-top: 1px solid var(--c-border, var(--c-color-border));
}

[data-pattern="footer.legal"] [data-part="copyright"].c-text,
[data-pattern="footer.legal"] [data-part="legal-link"].c-link {
  font-size: 13px;
  line-height: 1.55;
  color: #9aa3b2;
}

[data-pattern="footer.legal"] [data-part="legal-links"] {
  gap: 6px 22px;
}

[data-pattern="footer.legal"] [data-part="legal-link"].c-link {
  min-height: 0;
  font-weight: 400;
  text-decoration: none;
  transition: color 0.2s;
}

[data-pattern="footer.legal"] [data-part="legal-link"].c-link:hover {
  color: var(--c-fg, var(--c-color-fg));
}

/* ---- subpages.tiles ---- */

/* Den automatiske "Se også": samme tonede fliser som category.tiles (see-also), over Composers sidekort (krogen
   c-subpage-card: billedet, så sidens titel). Kortet har ingen målgruppe over navnet; pilen er en ::after. */
[data-pattern="subpages.tiles"] .c-subpage-card {
  gap: 0;
  min-width: 0;
  padding: 10px;
  border-radius: 26px;
  background-color: #dfe4e8;
  transition: transform 0.45s var(--uw-ease), box-shadow 0.45s var(--uw-ease);
}

[data-pattern="subpages.tiles"] .c-subpage-card:nth-child(2) {
  background-color: #ede6d9;
}

[data-pattern="subpages.tiles"] .c-subpage-card:nth-child(3) {
  background-color: #e0e6dc;
}

[data-pattern="subpages.tiles"] .c-subpage-card:nth-child(4) {
  background-color: #ede3df;
}

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

/* Billedet: 4:5 (kvadratisk på tablet) på et lyst skær. Kortbilledet hentes i 2:3 og beskæres midt i. */
[data-pattern="subpages.tiles"] .c-subpage-card > span:first-child {
  aspect-ratio: 4 / 5;
  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.tiles"] .c-subpage-card > span:first-child > img {
  transition: scale 1.1s var(--uw-ease);
}

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

/* Foden: navnet i serif og den runde pileknap til højre. */
[data-pattern="subpages.tiles"] .c-subpage-card > span:last-child {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--c-space-xs);
  padding: var(--c-space-sm) var(--c-space-2xs) var(--c-space-2xs);
  font-family: var(--c-font-serif);
  font-size: clamp(26px, 2.2vw, 34px);
  font-weight: 300;
  font-variation-settings: "SOFT" 100, "WONK" 0;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--c-fg, var(--c-color-fg));
}

[data-pattern="subpages.tiles"] .c-subpage-card > span:last-child::after {
  content: "";
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--uw-ink) 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") center / 18px no-repeat;
  transition: transform 0.3s;
}

[data-pattern="subpages.tiles"] .c-subpage-card:hover > span:last-child::after {
  transform: rotate(-45deg);
}

@media (max-width: 1023.98px) {
  [data-pattern="subpages.tiles"] .c-subpage-card > span:first-child {
    aspect-ratio: 1;
  }
}

@media (max-width: 639.98px) {
  [data-pattern="subpages.tiles"] .c-subpage-card {
    padding: 7px;
    border-radius: var(--c-radius-lg);
  }

  [data-pattern="subpages.tiles"] .c-subpage-card > span:first-child {
    aspect-ratio: 4 / 5;
    border-radius: 15px;
  }

  [data-pattern="subpages.tiles"] .c-subpage-card > span:last-child {
    padding: var(--c-space-xs) 5px 5px;
    gap: var(--c-space-2xs);
    font-size: 22px;
  }

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

/* ---- tile.sizeguide ---- */

/* Feltet står i dag som egen sektion og senere som et felt to kolonner bredt i produktlisten (ca. 620 px ved 1440,
   hele bredden på mobil). Layoutet følger derfor feltets egen bredde (container query), mens størrelserne er
   designets vw-værdier, så feltet i listen bliver som designets ved enhver skærmbredde. */
[data-pattern="tile.sizeguide"] {
  container: uw-tile-size / inline-size;
}

/* Blæk (primary), ikke nattens inverse flade; teksten og overlinjen tager fladens lyse farver. Feltet fylder sin
   celles højde, når en række i produktlisten strækker det. Brødteksten er 400 som i designet (bundlen sætter body
   til 300). */
[data-pattern="tile.sizeguide"] [data-part="tile"].c-box {
  flex: 1 1 auto;
  gap: var(--c-space-sm);
  padding: clamp(22px, 2.2vw, 32px);
  background-color: var(--c-color-primary, var(--uw-ink));
  font-weight: 400;
}

[data-pattern="tile.sizeguide"] [data-part="tile"].c-box:has(> .c-image) {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
}

/* Designets tablet giver tegningen lidt mere plads. */
@media (max-width: 1023.98px) {
  [data-pattern="tile.sizeguide"] [data-part="tile"].c-box:has(> .c-image) {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  }
}

[data-pattern="tile.sizeguide"] [data-part="eyebrow"].c-eyebrow {
  line-height: 1.55;
}

[data-pattern="tile.sizeguide"] [data-part="eyebrow"].c-eyebrow + .c-heading {
  margin-top: 14px;
}

[data-pattern="tile.sizeguide"] [data-part="heading"].c-heading {
  font-size: clamp(32px, 3vw, 46px);
  line-height: 1;
  letter-spacing: -0.025em;
  color: var(--c-fg, var(--uw-paper));
}

[data-pattern="tile.sizeguide"] [data-part="lead"].c-text {
  margin-top: 14px;
  max-width: 38ch;
  font-size: var(--c-font-body);
  line-height: 1.55;
  color: #d6d1c8;
}

/* Målepunkterne: tallet i en grøn cirkel, målet med fed og forklaringen i samme linje efter en tankestreg. */
[data-pattern="tile.sizeguide"] [data-part="steps"]:has(> .c-box) {
  margin-top: var(--c-space-sm);
  counter-reset: uw-tile-size;
}

[data-pattern="tile.sizeguide"] [data-part="steps"]:has(> .c-box) > .c-box {
  display: block;
  position: relative;
  min-height: 49px;
  padding: 10px 0 10px 40px;
  border-top: 1px solid var(--c-border, color-mix(in srgb, var(--uw-paper) 14%, transparent));
  counter-increment: uw-tile-size;
  font-size: 14.5px;
  line-height: 1.45;
  color: #d6d1c8;
}

[data-pattern="tile.sizeguide"] [data-part="steps"]:has(> .c-box) > .c-box::before {
  content: counter(uw-tile-size);
  position: absolute;
  top: 10px;
  left: 0;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--c-color-accent, var(--uw-green));
  color: var(--c-color-fg, var(--uw-ink));
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1;
}

[data-pattern="tile.sizeguide"] [data-part="steps"]:has(> .c-box) > .c-box > .c-text {
  display: inline;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
}

[data-pattern="tile.sizeguide"] [data-part="steps"]:has(> .c-box) > .c-box > .c-text:first-child {
  font-weight: 600;
  color: var(--c-fg, var(--uw-paper));
}

[data-pattern="tile.sizeguide"] [data-part="steps"]:has(> .c-box) > .c-box > .c-text + .c-text::before {
  content: "– ";
}

/* Knappen står nederst i spalten med mindst 18 px luft over sig. */
[data-pattern="tile.sizeguide"] [data-part="steps"]:has(+ .btn-secondary) {
  margin-bottom: 18px;
}

[data-pattern="tile.sizeguide"] [data-part="button"].btn-secondary {
  min-height: 52px;
}

[data-pattern="tile.sizeguide"] .btn-secondary > svg {
  width: 18px;
  height: 18px;
}

/* Tegningen i en svag lyskegle, højst 230 px bred. */
[data-pattern="tile.sizeguide"] [data-part="art"].c-image {
  display: grid;
  place-items: center;
  min-height: 240px;
  border-radius: var(--c-radius-md);
  background: radial-gradient(closest-side, color-mix(in srgb, var(--uw-paper) 9%, transparent), transparent);
}

[data-pattern="tile.sizeguide"] [data-part="art"].c-image > img {
  width: 100%;
  max-width: 230px;
  height: auto;
}

/* Smalt felt (mobil): en lille tegning øverst til højre, knappen i hele spaltens bredde. Pilen er væk som i designet,
   hvor den ikke er plads til. */
@container uw-tile-size (max-width: 439.98px) {
  [data-pattern="tile.sizeguide"] [data-part="tile"].c-box {
    gap: 10px;
    padding: 22px;
  }

  [data-pattern="tile.sizeguide"] [data-part="tile"].c-box:has(> .c-image) {
    grid-template-columns: minmax(0, 1fr) 112px;
  }

  [data-pattern="tile.sizeguide"] [data-part="art"].c-image {
    align-self: start;
    min-height: 0;
    margin-top: 26px;
  }

  [data-pattern="tile.sizeguide"] [data-part="button"].btn-secondary {
    align-self: stretch;
  }

  [data-pattern="tile.sizeguide"] .btn-secondary > svg {
    display: none;
  }
}

/* ---- tile.materials ---- */

/* Som tile.sizeguide: layoutet følger feltets egen bredde, størrelserne designets vw-værdier. */
[data-pattern="tile.materials"] {
  container: uw-tile-materials / inline-size;
}

/* To spalter, der deler rækker (subgrid), så navne, fordele og knapper står på linje på tværs. Række 1 er hovedet og
   guidelinket; den tager den ekstra højde, når en række i produktlisten strækker feltet, og "eller" står midt på
   skellet i den. */
[data-pattern="tile.materials"] [data-part="tile"].c-box {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: minmax(0, 1fr) auto auto auto;
  color: var(--c-color-fg, var(--uw-ink));
}

[data-pattern="tile.materials"] :is([data-part="first"], [data-part="second"]).c-box {
  grid-row: 1 / span 4;
  display: grid;
  grid-template-rows: subgrid;
  row-gap: 0;
  padding: clamp(22px, 2.2vw, 32px);
}

/* Stofteksturerne: krydsvævet bomuld og stribet bambus, som i materials.panels. */
[data-pattern="tile.materials"] [data-part="first"].c-box {
  grid-column: 1;
  background-color: #efe6d8;
  background-image:
    repeating-linear-gradient(45deg, color-mix(in srgb, var(--c-color-primary, var(--uw-ink)) 5%, transparent) 0 1px, transparent 1px 7px),
    repeating-linear-gradient(-45deg, color-mix(in srgb, var(--c-color-primary, var(--uw-ink)) 5%, transparent) 0 1px, transparent 1px 7px);
}

[data-pattern="tile.materials"] [data-part="second"].c-box {
  grid-column: 2;
  background-color: #d9e2d3;
  background-image: repeating-linear-gradient(90deg, color-mix(in srgb, var(--uw-white) 45%, transparent) 0 1px, transparent 1px 6px);
}

[data-pattern="tile.materials"] [data-part="head"]:has(> .c-heading) {
  grid-row: 1;
  padding-bottom: var(--c-space-md);
}

/* Designets overlinje står i en tekstlinje og sidder derfor 5 px lavere end i tile.sizeguide. */
[data-pattern="tile.materials"] [data-part="eyebrow"].c-eyebrow {
  margin-top: 5px;
  line-height: 1.55;
}

[data-pattern="tile.materials"] [data-part="eyebrow"].c-eyebrow + .c-heading {
  margin-top: 14px;
}

[data-pattern="tile.materials"] [data-part="heading"].c-heading {
  font-size: clamp(32px, 3vw, 46px);
  line-height: 1;
  letter-spacing: -0.025em;
  color: var(--c-color-fg, var(--uw-ink));
}

/* Materialets navn med nummeret foran; nummeret følger spalten. */
[data-pattern="tile.materials"] :is([data-part="first-name"], [data-part="second-name"]).c-text {
  grid-row: 2;
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-family: var(--c-font-serif);
  font-size: clamp(24px, 2vw, 30px);
  font-weight: 300;
  font-optical-sizing: auto;
  font-variation-settings: "SOFT" 100, "WONK" 0;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--c-color-fg, var(--uw-ink));
}

[data-pattern="tile.materials"] :is([data-part="first-name"], [data-part="second-name"]).c-text::before {
  content: "01";
  font-family: var(--c-font-sans);
  font-size: 12.5px;
  font-weight: 600;
  font-variation-settings: normal;
  letter-spacing: 0.1em;
  color: var(--uw-body);
}

[data-pattern="tile.materials"] [data-part="second-name"].c-text::before {
  content: "02";
}

[data-pattern="tile.materials"] :is([data-part="first-points"], [data-part="second-points"]) {
  grid-row: 3;
  align-self: start;
  margin-top: var(--c-space-xs);
}

[data-pattern="tile.materials"] :is([data-part="first-points"], [data-part="second-points"]) > * {
  gap: 10px;
  padding: 10px 0;
  border-top: 1px solid color-mix(in srgb, var(--c-color-fg, var(--uw-ink)) 12%, transparent);
}

[data-pattern="tile.materials"] :is([data-part="first-points"], [data-part="second-points"]) .c-icon {
  --c-icon-size: 17px;
  margin-top: 1px;
  color: var(--c-accent, var(--uw-green-ink));
}

[data-pattern="tile.materials"] :is([data-part="first-points"], [data-part="second-points"]) .c-icon svg {
  stroke-width: 2;
}

[data-pattern="tile.materials"] :is([data-part="first-points"], [data-part="second-points"]) .c-text {
  font-size: 14.5px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--c-color-fg, var(--uw-ink));
}

/* Knappen: en lys pille med pilen i en blæk-cirkel. */
[data-pattern="tile.materials"] .btn-outline {
  grid-row: 4;
  align-self: end;
  justify-self: start;
  gap: 10px;
  height: 46px;
  min-height: 46px;
  margin-top: 14px;
  padding: 0 var(--c-space-2xs) 0 18px;
  background-color: color-mix(in srgb, var(--uw-white) 78%, transparent);
  box-shadow: none;
  font-size: 14.5px;
  color: var(--c-color-fg, var(--uw-ink));
  transition: background-color 0.2s, box-shadow 0.2s;
}

[data-pattern="tile.materials"] .btn-outline:hover {
  background-color: var(--uw-white);
  box-shadow: inset 0 0 0 1px var(--c-color-fg, var(--uw-ink));
  color: var(--c-color-fg, var(--uw-ink));
  transform: none;
}

[data-pattern="tile.materials"] .btn-outline > svg {
  box-sizing: border-box;
  width: 32px;
  height: 32px;
  padding: 8.5px;
  border-radius: 50%;
  background-color: var(--c-color-primary, var(--uw-ink));
  color: var(--uw-paper);
  stroke-width: 2;
}

[data-pattern="tile.materials"] .btn-outline:hover > svg {
  transform: none;
}

/* Guidelinket øverst til højre med en pil ned. */
[data-pattern="tile.materials"] [data-part="guide-link"].c-link {
  grid-row: 1;
  align-self: start;
  justify-self: end;
  font-size: 14.5px;
}

[data-pattern="tile.materials"] [data-part="guide-link"].c-link:hover {
  text-decoration-color: var(--c-color-fg, var(--uw-ink));
}

[data-pattern="tile.materials"] [data-part="guide-link"].c-link[data-style="arrow"]::after {
  width: 16px;
  height: 16px;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M12%205v14'/%3E%3Cpath%20d='m19%2012-7%207-7-7'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M12%205v14'/%3E%3Cpath%20d='m19%2012-7%207-7-7'/%3E%3C/svg%3E");
}

[data-pattern="tile.materials"] [data-part="guide-link"].c-link[data-style="arrow"]:hover::after {
  translate: none;
}

/* "eller": en papircirkel midt på skellet, i hovedets række. */
[data-pattern="tile.materials"] [data-part="or"].c-text {
  grid-column: 1 / -1;
  grid-row: 1;
  align-self: center;
  justify-self: center;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: var(--uw-paper);
  box-shadow: var(--c-shadow-md);
  font-family: var(--c-font-serif);
  font-size: 20px;
  font-style: italic;
  font-weight: 300;
  font-variation-settings: "SOFT" 100, "WONK" 0;
  line-height: 1;
  color: var(--c-color-fg, var(--uw-ink));
}

/* Smalt felt (mobil): spalterne stables, "eller" skjules, fordelene er kun så brede som teksten, og guidelinket står
   nederst. */
@container uw-tile-materials (max-width: 439.98px) {
  [data-pattern="tile.materials"] [data-part="tile"].c-box {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
  }

  [data-pattern="tile.materials"] :is([data-part="first"], [data-part="second"]).c-box {
    grid-row: auto;
    display: flex;
    flex-direction: column;
    padding: 22px;
  }

  [data-pattern="tile.materials"] [data-part="first"].c-box {
    grid-column: 1;
    padding-bottom: 34px;
  }

  [data-pattern="tile.materials"] [data-part="second"].c-box {
    grid-column: 1;
    padding-top: 34px;
  }

  [data-pattern="tile.materials"] [data-part="or"].c-text {
    display: none;
  }

  [data-pattern="tile.materials"] :is([data-part="first-points"], [data-part="second-points"]) {
    align-self: flex-start;
  }

  [data-pattern="tile.materials"] .btn-outline {
    align-self: flex-start;
    margin-top: 18px;
  }

  [data-pattern="tile.materials"] [data-part="guide-link"].c-link {
    align-self: flex-start;
    margin-top: 6px;
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-pattern="tile.materials"] .btn-outline {
    transition: none;
  }
}