/** Shopify CDN: Minification failed
Line 1194:2 Unexpected "{"
Line 1194:3 Expected identifier but found "%"
Line 1195:31 Expected identifier but found whitespace
Line 1195:41 Expected identifier but found whitespace
Line 1205:3 Expected identifier but found "%"
**/
/* SHOPIFY_STYLESHEETS_VERSION: 1.0 */
/* CSS from section stylesheet tags */
/* START_SECTION:anmeld (INDEX:1) */
.anmeld { --anmeld-accent: #C03527; background: var(--color-paper); padding-bottom: clamp(64px, 9vw, 120px); }
.anmeld__head { padding: clamp(16px, 2vw, 28px) var(--tile-inset) 0; }
.anmeld__crumbs {
display: flex; align-items: center; gap: 8px;
font-family: var(--font-primary--family); font-weight: 600; font-size: 11px;
letter-spacing: var(--tracking-ui); text-transform: uppercase; color: var(--color-ink-mute);
}
.anmeld__crumbs a { color: inherit; background-image: none; }
.anmeld__crumbs a:hover { color: var(--color-ink); }
.anmeld__card {
box-sizing: border-box;
width: min(560px, calc(100% - 2 * var(--tile-inset) - 10px));
margin: clamp(40px, 7vw, 96px) auto 0;
padding: clamp(36px, 5vw, 56px) clamp(24px, 3.5vw, 48px);
background: var(--color-paper);
border: 2px solid var(--color-ink);
box-shadow: 10px 10px 0 var(--anmeld-accent);
}
.anmeld__title {
margin: 0;
font-family: var(--font-display--family); font-weight: var(--font-display--weight);
font-size: clamp(1.75rem, 4vw, 2.75rem); line-height: 0.95;
letter-spacing: var(--tracking-display); text-transform: uppercase; color: var(--color-ink);
}
.anmeld__text { margin: 14px 0 0; max-width: 46ch; font-size: 15px; line-height: 1.55; color: var(--color-ink-soft); }
.anmeld__label {
display: block; padding: 0; margin: 0 0 6px;
font-family: var(--font-primary--family); font-weight: 600; font-size: 11px;
letter-spacing: var(--tracking-ui); text-transform: uppercase; color: var(--color-ink);
}
.anmeld__label span { font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--color-ink-mute); }
.anmeld__navn { margin-top: 24px; }
.anmeld__input {
box-sizing: border-box; width: 100%; min-height: 46px; padding: 12px 14px;
border: 1px solid var(--color-line); border-radius: var(--corner-radius-default);
background: var(--color-paper); color: var(--color-ink);
font-family: var(--font-primary--family); font-size: 15px;
}
.anmeld__input::placeholder { color: var(--color-ink-mute); opacity: 0.6; }
.anmeld__input:focus { outline: 2px solid var(--color-ink); outline-offset: -1px; }
.anmeld__input--code { letter-spacing: 0.3em; font-variant-numeric: tabular-nums; }
.anmeld__textarea { resize: vertical; line-height: 1.5; }
.anmeld__liste { margin-top: 28px; display: grid; gap: 20px; }
.anmeld__vare { padding-top: 20px; border-top: 1px solid var(--color-line-soft); }
.anmeld__vare-top { display: flex; align-items: center; gap: 12px; }
.anmeld__thumb {
flex: 0 0 auto; width: 56px; height: 56px; overflow: hidden;
border: 1px solid var(--color-line); background: var(--color-paper);
}
.anmeld__thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
.anmeld__vare-title { margin: 0; font-family: var(--font-primary--family); font-weight: 600; font-size: 15px; line-height: 1.3; color: var(--color-ink); }
.anmeld__form { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.anmeld__form--login { margin-top: 22px; }
/* Login-trin og ordreliste (indgang 2). Samme kort, samme knap. */
.anmeld__ordrer { margin-top: 24px; display: grid; gap: 18px; }
.anmeld__ordre { padding-top: 18px; border-top: 1px solid var(--color-line-soft); }
.anmeld__ordre-top { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; color: var(--color-ink); }
.anmeld__ordre-dato { font-size: 12px; color: var(--color-ink-mute); white-space: nowrap; }
.anmeld__ordre-varer { margin: 6px 0 12px; font-size: 13px; line-height: 1.5; color: var(--color-ink-soft); }
.anmeld__small a { color: inherit; }
/* Stjernerne: radio-knapperne er visuelt skjulte men fokuserbare; labels er
tegnene. Valgt = alle stjerner op til og med den valgte er gule; hover
forhåndsviser på samme måde. */
.anmeld__stars { margin: 0; padding: 0; border: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 2px; }
.anmeld__stars legend { width: 100%; }
.anmeld__stars input { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.anmeld__stars label { cursor: pointer; font-size: 30px; line-height: 1; color: var(--color-line); transition: color 120ms ease; user-select: none; }
.anmeld__stars:has(input:checked) label { color: #E0A431; }
.anmeld__stars input:checked ~ label { color: var(--color-line); }
.anmeld__stars input:checked + label { color: #E0A431; }
.anmeld__stars:hover label { color: #E0A431; }
.anmeld__stars label:hover ~ label { color: var(--color-line); }
.anmeld__stars input:focus-visible + label { outline: 2px solid var(--color-ink); outline-offset: 2px; }
.anmeld__btn {
display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box;
align-self: flex-start; min-height: 46px; padding: 0 24px; border: 0; cursor: pointer;
border-radius: var(--corner-radius-default);
background: var(--color-ink); color: var(--color-paper);
font-family: var(--font-primary--family); font-weight: 600; font-size: 12px;
letter-spacing: var(--tracking-ui); text-transform: uppercase; text-decoration: none; background-image: none;
transition: background-color var(--transition-base);
}
.anmeld__btn:hover { background: var(--anmeld-accent); color: var(--color-paper); }
.anmeld__btn[disabled] { opacity: 0.5; cursor: default; }
.anmeld__hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.anmeld__done { margin: 12px 0 0; font-size: 14px; color: var(--color-green); }
.anmeld__error { margin: 8px 0 0; font-size: 13px; color: var(--anmeld-accent); }
.anmeld__small { margin: 28px 0 0; font-size: 12px; line-height: 1.6; color: var(--color-ink-mute); }
/* END_SECTION:anmeld */
/* START_SECTION:article (INDEX:2) */
/* ============ Artiklens ramme ============ */
/* HVID (Mikkel 2026-09-03: "goer baggrunden bag alt det her med guides hvid");
overtrumfer cream=laesestof-husreglen for guide-fladerne. */
.hd-artikel { background-color: var(--color-paper); }
.hd-artikel__inner {
max-width: 820px;
margin: 0 auto;
padding: clamp(24px, 3vw, 48px) clamp(20px, 3vw, 40px) 0;
}
.hd-artikel__sti {
display: flex;
gap: 8px;
font-family: var(--font-primary--family);
font-size: 13px;
color: var(--color-ink-mute);
}
.hd-artikel__sti a { color: inherit; background-image: none; }
.hd-artikel__sti a:hover { color: var(--color-ink); }
.hd-artikel__hoved { margin-top: 22px; }
.hd-artikel__titel {
font-family: var(--font-display--family);
font-weight: var(--weight-heavy, 900);
letter-spacing: var(--tracking-display);
text-transform: uppercase;
font-size: clamp(23px, 3.4vw, 40px);
line-height: 1.04;
color: var(--color-ink);
margin: 0;
}
.hd-artikel__meta {
margin: 14px 0 0;
font-family: var(--font-primary--family);
font-size: 13px;
color: var(--color-ink-mute);
}
.hd-artikel__topbillede {
margin: 26px 0 0;
}
.hd-artikel__topbillede img {
display: block;
width: 100%;
height: auto;
aspect-ratio: 16 / 10;
object-fit: cover;
}
/* ============ Broedteksten (hd-art) ============ */
.hd-art {
margin-top: clamp(28px, 4vw, 44px);
font-family: var(--font-primary--family);
font-size: 16.5px;
line-height: 1.65;
color: var(--color-ink);
}
.hd-art p { margin: 0 0 18px; }
.hd-art a {
color: var(--color-ink);
text-decoration: underline;
text-underline-offset: 3px;
text-decoration-color: var(--color-olive);
background-image: none;
}
.hd-art a:hover { text-decoration-color: var(--color-ink); }
.hd-art h2 {
font-family: var(--font-display--family);
font-weight: var(--weight-heavy, 900);
letter-spacing: var(--tracking-display);
text-transform: uppercase;
font-size: clamp(17px, 2vw, 22px);
line-height: 1.15;
margin: 44px 0 14px;
scroll-margin-top: calc(var(--sticky-stack-pinned) + 24px);
}
.hd-art h3 {
font-family: var(--font-primary--family);
font-weight: 600;
font-size: 17px;
margin: 26px 0 8px;
}
.hd-art ul { margin: 0 0 18px; padding-left: 22px; }
.hd-art li { margin-bottom: 9px; }
/* Ingen uppercase/mono mikro-labels i laesestof (husregel fra artikel-laget):
etiketten er en lille graa udgave af broedtekstfonten, normal case. */
.hd-art__label {
font-size: 13px;
font-weight: 600;
color: var(--color-ink-mute);
margin: 0 0 6px;
}
.hd-art__short {
background-color: var(--color-paper);
border: 1px solid var(--color-line);
padding: 20px 22px;
margin-bottom: 26px;
}
.hd-art__short p:last-child { margin-bottom: 0; }
.hd-art__toc {
margin-bottom: 30px;
}
.hd-art__toc ul {
margin: 0;
padding: 0;
list-style: none;
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.hd-art__toc a {
display: inline-block;
padding: 7px 12px;
border: 1px solid var(--color-line);
background-color: var(--color-paper);
font-size: 13.5px;
color: var(--color-ink-soft);
text-decoration: none;
transition: border-color var(--transition-base), color var(--transition-base);
}
.hd-art__toc a:hover { border-color: var(--color-ink); color: var(--color-ink); }
.hd-art__fig {
margin: 26px 0;
background-color: var(--color-paper);
border: 1px solid var(--color-line);
padding: 18px;
}
.hd-art__fig svg { display: block; width: 100%; height: auto; }
.hd-art__fig svg text { font-family: var(--font-primary--family); }
.hd-art__fig--photo { padding: 0; overflow: hidden; }
.hd-art__fig--photo img { display: block; width: 100%; height: auto; }
.hd-art__fig figcaption {
padding: 12px 18px 2px;
font-size: 13px;
color: var(--color-ink-mute);
}
.hd-art__fig--photo figcaption { padding: 12px 18px 14px; }
.hd-art__tablewrap {
margin: 26px 0;
overflow-x: auto;
border: 1px solid var(--color-line);
background-color: var(--color-paper);
}
.hd-art__tablewrap table {
width: 100%;
border-collapse: collapse;
font-size: 14.5px;
line-height: 1.5;
}
.hd-art__tablewrap th,
.hd-art__tablewrap td {
text-align: left;
vertical-align: top;
padding: 12px 16px;
border-bottom: 1px solid var(--color-line-soft);
min-width: 130px;
}
.hd-art__tablewrap th:first-child,
.hd-art__tablewrap td:first-child { min-width: 110px; }
.hd-art__tablewrap thead th {
font-weight: 600;
border-bottom: 1px solid var(--color-line);
}
.hd-art__tablewrap tbody td:first-child { font-weight: 600; }
.hd-art__tablewrap tbody tr:last-child td { border-bottom: 0; }
.hd-art__tip {
background-color: var(--color-blush);
padding: 18px 22px;
margin: 26px 0;
}
.hd-art__tip .hd-art__label { color: var(--color-ink-soft); }
.hd-art__tip p:last-child { margin-bottom: 0; }
.hd-art__cta {
background-color: var(--color-bg-soft);
padding: 18px 22px;
margin: 30px 0 0;
}
.hd-art__cta p { margin: 0; }
/* ============ Fra guiden ============ */
/* Varer paa hvidt (husreglen), som en stille to-korts udgave af gitteret. */
.hd-artikel__produkter {
margin-top: clamp(36px, 5vw, 56px);
background-color: var(--color-paper);
border-top: 1px solid var(--color-line);
border-bottom: 1px solid var(--color-line);
}
.hd-artikel__produkter-inner {
max-width: 820px;
margin: 0 auto;
padding: clamp(28px, 4vw, 44px) clamp(20px, 3vw, 40px);
}
.hd-artikel__produkter-titel {
font-family: var(--font-display--family);
font-weight: var(--weight-heavy, 900);
letter-spacing: var(--tracking-display);
text-transform: uppercase;
font-size: clamp(17px, 2vw, 22px);
margin: 0 0 20px;
color: var(--color-ink);
}
.hd-artikel__produktraekke {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
gap: 20px;
margin: 0;
padding: 0;
list-style: none;
}
.hd-artikel__produkt {
display: block;
background-image: none;
color: var(--color-ink);
}
.hd-artikel__produkt-billede {
display: block;
aspect-ratio: 4 / 5;
background-color: var(--color-paper);
border: 1px solid var(--color-line-soft);
overflow: hidden;
}
.hd-artikel__produkt-billede img {
width: 100%;
height: 100%;
object-fit: contain;
padding: 10%;
}
.hd-artikel__produkt-navn {
display: block;
margin-top: 10px;
font-family: var(--font-primary--family);
font-size: 14px;
font-weight: 500;
line-height: 1.35;
}
.hd-artikel__produkt:hover .hd-artikel__produkt-navn { text-decoration: underline; text-underline-offset: 3px; }
.hd-artikel__produkt-pris {
display: block;
margin-top: 4px;
font-family: var(--font-primary--family);
font-size: 14px;
color: var(--color-ink-soft);
}
.hd-artikel__produkt-pris s { margin-left: 8px; color: var(--color-ink-mute); }
@media (max-width: 549px) {
.hd-artikel__produktraekke { grid-template-columns: 1fr 1fr; gap: 12px; }
}
/* END_SECTION:article */
/* START_SECTION:blog (INDEX:3) */
/* Hvid som resten af guide-fladerne (Mikkel 2026-09-03). */
.hd-blogindex { background-color: var(--color-paper); }
.hd-blogindex__inner {
max-width: 1600px;
margin: 0 auto;
padding: clamp(32px, 4vw, 56px) clamp(24px, 3vw, 40px) clamp(48px, 5vw, 72px);
}
.hd-blogindex__hoved { margin-bottom: clamp(28px, 4vw, 44px); }
.hd-blogindex__eyebrow {
font-family: var(--font-primary--family);
font-weight: 600;
font-size: 11px;
text-transform: uppercase;
letter-spacing: var(--tracking-ui);
color: var(--color-ink-mute);
}
.hd-blogindex__titel {
margin-top: 10px;
font-size: clamp(30px, 4.5vw, 56px);
color: var(--color-ink);
}
.hd-blogindex__brev { margin-top: 8px; }
.hd-blogindex__brev a { color: var(--color-ink); text-decoration: underline; text-underline-offset: 3px; }
.hd-blogindex__lede {
margin-top: 12px;
max-width: 52ch;
font-family: var(--font-primary--family);
font-size: 15.5px;
line-height: 1.55;
color: var(--color-ink-soft);
}
/* Gitteret laaner hd-guides__row (3 kolonner fra 768px); paa store skaerme
har indekset plads til fire. */
@media (min-width: 1200px) {
.hd-blogindex__gitter { grid-template-columns: repeat(4, 1fr); }
}
.hd-blogindex__tom {
font-family: var(--font-primary--family);
font-size: 15px;
color: var(--color-ink-soft);
}
/* END_SECTION:blog */
/* START_SECTION:brands (INDEX:4) */
/* Samme regel som kategorisiden: cream er headerens, alt herunder er hvidt. */
.brands { background: var(--color-paper); padding-bottom: clamp(56px, 8vw, 96px); }
/* Toppen uden bånd: brødkrumme + introlinje, samme kant som alt andet. */
.brands__head { padding: clamp(16px, 2vw, 28px) var(--tile-inset) 0; }
.brands__crumbs {
display: flex;
align-items: center;
gap: 8px;
font-family: var(--font-primary--family);
font-weight: 600;
font-size: 11px;
letter-spacing: var(--tracking-ui);
text-transform: uppercase;
color: var(--color-ink-mute);
}
.brands__crumbs a { color: inherit; background-image: none; }
.brands__crumbs a:hover { color: var(--color-ink); }
.brands__intro {
margin: 14px 0 0;
font-size: 15px;
line-height: 1.5;
color: var(--color-ink-soft);
}
/* A-Å-indekset. Bogstavgrupperne flyder i spalter; break-inside holder et
bogstav og dets mærker samlet, så "B" aldrig står alene i bunden af en
spalte. Venstrekanten er --tile-inset som alt andet på sitet. */
.brands__index {
padding-inline: var(--tile-inset);
margin-top: clamp(28px, 3.6vw, 52px);
columns: 2;
column-gap: clamp(32px, 4vw, 64px);
}
@media (min-width: 900px) { .brands__index { columns: 3; } }
@media (min-width: 1280px) { .brands__index { columns: 4; } }
.brands__group {
break-inside: avoid;
margin: 0 0 clamp(28px, 3vw, 44px);
}
.brands__letter {
margin: 0 0 10px;
padding-bottom: 8px;
border-bottom: 1px solid var(--color-line-soft);
font-family: var(--font-display--family);
font-weight: var(--font-display--weight);
font-size: clamp(1.3rem, 2vw, 1.8rem);
line-height: 1;
letter-spacing: var(--tracking-display);
text-transform: uppercase;
color: var(--color-ink);
}
.brands__list { list-style: none; margin: 0; padding: 0; }
.brands__item { margin: 0; }
.brands__link {
display: flex;
align-items: baseline;
gap: 8px;
padding: 6px 0;
background-image: none;
transition: opacity var(--transition-base);
}
.brands__link:hover { opacity: 0.55; }
.brands__name {
font-family: var(--font-display--family);
font-weight: var(--weight-heavy);
font-size: clamp(14px, 1.15vw, 16px);
letter-spacing: var(--tracking-label);
text-transform: uppercase;
color: var(--color-ink);
}
/* Tallet er under 13px og skal derfor stå i tekstsnittet, ikke i Univers
(HEY-DARLING.md: alt <= 13px kører Instrument Sans). */
.brands__count {
font-family: var(--font-primary--family);
font-weight: 500;
font-size: 12px;
color: var(--color-ink-mute);
white-space: nowrap;
}
/* END_SECTION:brands */
/* START_SECTION:brevkasse (INDEX:5) */
/* Spoergsmaalet staar oeverst og er det stoerste felt; resten er som kontaktsiden. */
.brevkasse .kontakt__felt textarea { min-height: 160px; }
/* END_SECTION:brevkasse */
/* START_SECTION:cart (INDEX:6) */
/* HVID som resten af sitet (2026-09-02). Kurven var den sidste sidetype der
malede sin egen cream-flade, efter at body gik hvid i critical.css. Samme
valg som .plp og .pdp. */
.cart { background: var(--color-paper); }
.cart__inner { max-width: 1280px; margin: 0 auto; padding: clamp(32px, 4vw, 56px) clamp(20px, 3vw, 40px) clamp(64px, 7vw, 104px); }
.cart__head { border-bottom: 1px solid var(--color-line); padding-bottom: clamp(20px, 2.5vw, 28px); }
.cart__eyebrow { font-size: 11px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--color-ink-mute); }
.cart__title { margin-top: 10px; font-size: clamp(25px, 3.72vw, 47px); font-weight: 700; color: var(--color-ink); }
.cart__count { margin-top: 10px; font-size: 14px; color: var(--color-ink-soft); }
/* ---------- tom kurv ---------- */
.cart__empty { padding-block: clamp(40px, 6vw, 72px); max-width: 34rem; }
.cart__empty-text { font-size: 16px; line-height: 1.6; color: var(--color-ink-soft); }
.cart__empty-links { margin-top: 28px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.cart__cta {
display: inline-flex; align-items: center; background: var(--color-ink); color: var(--color-paper);
border: 0; border-radius: var(--corner-radius-default); padding: 13px 26px;
font-size: 12px; font-weight: 500; background-image: none;
font-family: var(--font-primary--family);
font-weight: 600;
letter-spacing: var(--tracking-ui);
text-transform: uppercase;
}
.cart__cta:hover { background: var(--color-plum); }
.cart__ghost {
display: inline-flex; align-items: center; border: 1px solid var(--color-line);
border-radius: var(--corner-radius-full); padding: 10px 18px; font-size: 13px;
color: var(--color-ink-soft); background: var(--color-paper); background-image: none;
}
.cart__ghost:hover { border-color: var(--color-ink-soft); color: var(--color-ink); }
/* ---------- layout ---------- */
.cart__layout { display: grid; gap: clamp(28px, 4vw, 56px); align-items: start; padding-top: clamp(24px, 3vw, 40px); }
@media (min-width: 1024px) { .cart__layout { grid-template-columns: minmax(0, 1fr) 380px; } }
/* ---------- linjer ---------- */
.cart__lines { list-style: none; margin: 0; padding: 0; }
/* Mobil: billedet spænder over begge rækker i sin egen smalle kolonne, så
mængdevælgeren får den fleksible midterkolonne og ikke klemmes ned i 96px. */
.cart-line {
display: grid;
grid-template-columns: 96px minmax(0, 1fr) auto;
grid-template-areas:
"media info info"
"media qty price";
column-gap: 20px;
row-gap: 16px;
padding: 22px 0;
border-bottom: 1px solid var(--color-line-soft);
}
.cart-line:first-child { padding-top: 4px; }
/* Smalle telefoner: 96px billede + 2x20px luft levner 152px til maengdevaelger
OG linjepris paa samme raekke, og de to stod klods op ad hinanden ved 320px.
Billedkolonnen og luften giver 40px tilbage, saa de kan staa fri. */
@media (max-width: 479px) {
.cart-line {
grid-template-columns: 72px minmax(0, 1fr) auto;
column-gap: 14px;
}
}
@media (min-width: 640px) {
.cart-line {
grid-template-columns: 120px minmax(0, 1fr) auto auto;
grid-template-areas: "media info qty price";
column-gap: 24px;
align-items: center;
}
}
.cart-line__media {
grid-area: media;
align-self: start;
display: block;
background: var(--color-paper);
border: 1px solid var(--color-line-soft);
border-radius: var(--corner-radius-default);
overflow: hidden;
aspect-ratio: 4 / 5;
background-image: none;
}
.cart-line__media img { width: 100%; height: 100%; object-fit: contain; }
.cart-line__info { grid-area: info; min-width: 0; }
.cart-line__vendor { font-size: 11px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-ink-mute); }
.cart-line__title { margin-top: 4px; font-family: var(--font-primary--family); font-size: 15px; font-weight: 500; line-height: 1.35; color: var(--color-ink); }
.cart-line__title a { background-image: none; }
.cart-line__title a:hover { color: var(--color-rose); }
.cart-line__meta { margin-top: 4px; font-size: 13px; color: var(--color-ink-mute); }
.cart-line__sep { margin: 0 6px; color: var(--color-line); }
/* Bundlens dele. Daempet og indrykket med en streg, saa de laeses som INDHOLD
i linjen ovenover og ikke som selvstaendige varer man kan fjerne hver for sig
(det kan man ikke: en bundle er én linje). */
.cart-line__parts {
margin: 6px 0 0;
padding: 0 0 0 10px;
list-style: none;
border-left: 1px solid var(--color-line);
font-family: var(--font-primary--family);
font-size: 12px;
line-height: 1.45;
color: var(--color-ink-mute);
}
.cart-line__discount { margin-top: 6px; font-size: 12px; font-weight: 500; color: var(--color-green); }
.cart-line__remove {
display: inline-block; margin-top: 10px; font-size: 12px; color: var(--color-ink-mute);
background-image: linear-gradient(currentColor, currentColor); background-size: 0 1px;
}
.cart-line__remove:hover { color: var(--color-sale); background-size: 100% 1px; }
.cart-line__qty { grid-area: qty; }
.cart-line__unit { margin-top: 8px; font-size: 12px; color: var(--color-ink-mute); text-align: center; }
.cart-qty {
display: inline-flex; align-items: center;
border: 1px solid var(--color-line);
border-radius: var(--corner-radius-default);
background: var(--color-paper);
}
.cart-qty__btn { width: 40px; height: 42px; font-size: 17px; line-height: 1; color: var(--color-ink-soft); background: none; border: 0; cursor: pointer; }
.cart-qty__btn:hover { color: var(--color-ink); }
.cart-qty__val {
width: 40px; height: 42px; text-align: center; border: 0; background: transparent;
font-size: 14px; font-weight: 500; font-variant-numeric: tabular-nums; outline: none;
}
.cart-line__price { grid-area: price; text-align: right; align-self: center; }
.cart-line__now { font-size: 15px; font-weight: 600; color: var(--color-ink); font-variant-numeric: tabular-nums; }
.cart-line__now.is-sale { color: var(--color-sale); }
.cart-line__was { font-size: 12px; color: var(--color-ink-mute); text-decoration: line-through; }
.cart__lines-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding-top: 22px; }
.cart__back { font-size: 13px; color: var(--color-ink-soft); background-image: none; }
.cart__back:hover { color: var(--color-ink); }
.cart__update {
display: none; align-items: center; border: 1px solid var(--color-line);
background: var(--color-paper); color: var(--color-ink); border-radius: var(--corner-radius-default);
padding: 10px 18px; font-size: 13px; cursor: pointer;
}
.cart__note { margin-top: 28px; }
.cart__note-label { display: block; font-size: 11px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-ink-mute); }
.cart__note textarea {
margin-top: 10px; width: 100%; resize: vertical;
border: 1px solid var(--color-line); border-radius: var(--corner-radius-default);
background: var(--color-paper); color: var(--color-ink);
padding: 12px 14px; font-size: 14px; line-height: 1.5; outline: none;
}
.cart__note textarea:focus { border-color: var(--color-ink-soft); }
/* ---------- opsummering ---------- */
.cart__summary-col { position: relative; }
@media (min-width: 1024px) {
/* --pinned, ikke --total: servicebåndet ruller væk, så det er kun hovedbjælken
og kategoribåndet der stadig dækker toppen når man er nået herned. */
.cart__summary { position: sticky; top: calc(var(--sticky-stack-pinned) + 24px); }
}
.cart__summary {
background: var(--color-paper);
border: 1px solid var(--color-line);
border-radius: var(--corner-radius-default);
padding: clamp(20px, 2.2vw, 28px);
}
.cart__ship { padding-bottom: 20px; margin-bottom: 20px; border-bottom: 1px solid var(--color-line-soft); }
.cart__ship-text { font-size: 13px; color: var(--color-ink-soft); }
.cart__ship-text strong { font-weight: 600; color: var(--color-ink); }
.cart__ship-text--done { color: var(--color-green); font-weight: 500; }
.cart__ship-track { margin-top: 10px; height: 4px; border-radius: var(--corner-radius-full); background: var(--color-bg-soft); overflow: hidden; }
.cart__ship-fill { display: block; height: 100%; background: var(--color-ink); transition: width 400ms cubic-bezier(0.22, 0.61, 0.36, 1); }
.cart__summary-title { font-size: 22px; color: var(--color-ink); }
.cart__rows { margin: 18px 0 0; }
.cart__row { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 7px 0; font-size: 14px; color: var(--color-ink-soft); }
.cart__row dd { margin: 0; color: var(--color-ink); }
.cart__row--muted dd { color: var(--color-ink-mute); font-size: 13px; }
.cart__row--discount dd { color: var(--color-green); }
.cart__row--total {
margin-top: 8px; padding-top: 16px; border-top: 1px solid var(--color-line-soft);
font-size: 15px; color: var(--color-ink);
}
.cart__row--total dt { font-weight: 500; }
.cart__row--total dd { font-size: 20px; font-weight: 600; }
.cart__vat { margin-top: 6px; font-size: 12px; color: var(--color-ink-mute); }
.cart__error {
margin-top: 14px; padding: 10px 12px; border-radius: var(--corner-radius-default);
background: var(--color-sale-soft); color: var(--color-sale); font-size: 13px;
}
.cart__checkout {
margin-top: 18px; width: 100%; background: var(--color-ink); color: var(--color-paper);
border: 0; border-radius: var(--corner-radius-default); padding: 15px 24px;
font-size: 12px; font-weight: 500; cursor: pointer; transition: background-color var(--transition-base);
font-family: var(--font-primary--family);
font-weight: 600;
letter-spacing: var(--tracking-ui);
text-transform: uppercase;
}
.cart__checkout:hover { background: var(--color-plum); }
.cart__delivery { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--color-line-soft); }
.cart__delivery-head { display: flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-ink); }
.cart__delivery-head svg { color: var(--color-ink-soft); }
.cart__delivery-text { margin-top: 8px; font-size: 13px; line-height: 1.55; color: var(--color-ink-soft); }
.cart__trust { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.cart__trust li {
font-size: 11px; letter-spacing: 0.06em; color: var(--color-ink-soft);
background: var(--color-bg); border: 1px solid var(--color-line-soft);
border-radius: var(--corner-radius-full); padding: 6px 12px;
}
/* Mens en opdatering er undervejs */
[data-cart-root][data-busy] .cart__lines { opacity: 0.55; pointer-events: none; }
[data-cart-root] .cart__lines { transition: opacity 150ms ease-out; }
/* END_SECTION:cart */
/* START_SECTION:collection (INDEX:7) */
/* clip (not hidden) — hidden would turn this into a scroll container and break the
sticky header. Needed because the full-bleed grid uses 100vw, which on Windows
includes the scrollbar and would otherwise cause a horizontal scroll. */
/* SIDENS BUND ER HVID. Cream (--color-background) er reserveret til de to
baand i toppen: headeren og filterbaren. Alt derunder — luften omkring
gitteret, de tomme celler i sidste raekke og kortene selv — er samme hvide
flade, fordi produktbillederne har hvid baggrund og de faerreste er PNG.
Mikkel, 2026-08-25: "ikke kategorisiden altsaa reel baggrund, den skal
stadig vaere hvid." */
.plp { background: var(--color-paper); overflow-x: clip; }
/* /collections/all: intet baand — kun en broedkrumme over filterbaren. */
.plp__plain-head { padding: clamp(14px, 1.8vw, 26px) var(--tile-inset) 2px; }
.plp__plain-crumbs { display: flex; align-items: center; gap: 8px;
font-family: var(--font-primary--family); font-weight: 600; font-size: 11px;
letter-spacing: var(--tracking-ui); text-transform: uppercase; color: var(--color-ink-mute); }
.plp__plain-crumbs a { color: inherit; background-image: none; }
.plp__plain-crumbs a:hover { color: var(--color-ink); }
/* === Hero === */
/* FLADEN ER VAEK (Mikkel, 2026-08-31). Baandet havde en gul bund (--hd-sand
#FEE8B6) med et korn ovenpaa, og ordet og billedteksten stod i hvid paa den
(--hd-ivory). Nu svaever ord, idol og billedtekst frit paa sidens egen cream,
og de to tekster er sat i ink.
Kun FARVER er aendret. Hoejde, scene, koordinatsystem, ordets y og
billedtekstens 9 % staar praecis hvor de stod, saa kompositionen er den
samme — det er kun bunden der er taget ud under den.
Historik, hvis fladen skal tilbage: --hd-sand var samplet ud af Nickis eget
baand (rgb(224,204,171)) og senere gjort lysere til #FEE8B6 efter tre runder
2026-08-27; --hd-ivory var hans off-white rgb(237,233,230), sat til ren hvid
samme dag. Kornet var en indlejret feTurbulence-SVG paa .hd-hero__media. */
/* Baandet er ikke laengere fuld skaermbredde (Mikkel, 2026-08-27): det staar i
gitterets kolonne, altsaa samme venstre- og hoejrekant som broedkrumme,
hyldecirkler og produktgitter, og har luft op til headeren saa det svaever i
stedet for at haenge fast i den.
Scenen BESKAERES i siderne — den skaleres ikke ned. Graden paa ordet og
idolets stoerrelse er dermed uaendrede; det er kun sandet ude i kanterne der
forsvinder. Ordet fylder hoejst 2100 af scenens 2800 enheder (se Graden), saa
der er 12,5 % sand i hver side at tage af, og beskaeringen er 4-14 % pr. side
hen over hele desktop-omraadet. */
.hd-hero {
/* Ingen baggrund. Idolerne er PNG med aegte alfa (un-premultiplied), saa de
staar lige saa rent paa cream som de gjorde paa den gule flade. */
margin-inline: var(--tile-inset);
margin-top: clamp(12px, 1.6vw, 24px);
/* Baandet er sit EGET lag i sideskiftet, saa det toner fra den gamle kategori
til den nye i stedet for at blinke. Se @view-transition i critical.css.
Navnet skal vaere unikt paa siden — der er ét baand. */
view-transition-name: hd-hero;
}
.hd-hero__media {
/* Bundgraensen var 200px. Den er saenket til 150, fordi baandet nu er smallere
end skaermen: med 200px som gulv blev scenen paa en 800px skaerm 1141px bred
i en 752px kasse, altsaa 34 % beskaering, og saa ville ORDET blive skaaret
over. Med 150 holder beskaeringen sig under 18 % ved enhver bredde. */
/* 20 % lavere end foer (17,5vw / 150-310px), fordi Mikkel bad om at vinde
hoejde i toppen af siden. ALT i baandet skalerer med hoejden, saa ordet og
idolet blev 20 % mindre med den — og ordet er derfor traukket tilsvarende
bredere i squashen nedenfor, saa det stadig spaender lige saa bredt paa
skaermen som foer. */
/* Endnu 20 % lavere 2026-08-31 (var 14vw / 120-248px). Det er den aendring
der flyttede billedteksterne ud i siderne: med teksterne UNDER ordet skulle
baandet baere to vandrette baelter, og under ~200px hoejde er der ikke
hoejde nok til begge. Nu staar tekst, ord, tekst paa ÉN linje, og hoejden
er kun ordets. */
height: clamp(96px, 11.2vw, 198px);
/* overflow: hidden BLIVER. Idolet er 585 hoejt mod scenens 491 og skal
skaeres af i bunden praecis som foer; uden den ville figuren haenge ned
over hyldecirklerne. Kornet er vaek sammen med fladen: det var et lag paa
den gule bund, og paa cream ville det tegne et graat rektangel netop dér
hvor der ikke laengere skal vaere en kasse. */
overflow: hidden;
}
/* Hele Nickis bånd skal være synligt på enhver skærmbredde. Hans format har med
vilje meget tom sandflade ude i siderne omkring ordet og modellen, og den luft
ER designet — den tidligere `cover`-beskæring spiste præcis den luft og viste
kun 71 % af bredden ved 1440px.
Båndet centrerer derfor scenen og lader den stå på bunden, så modellen bløder
ud i underkanten som tegnet. Overskydende bredde bliver til sand i begge
sider, og fordi sandet er den samme flade som scenens bund er sømmen der
ikke. 17,5vw er valgt så scenens bredde (højde x 5,703) lander på 99,8vw:
den fylder båndet ud uden at skulle beskæres. */
.hd-hero__media {
display: flex;
justify-content: center;
align-items: flex-end;
}
.hd-hero__art {
position: relative;
height: 100%;
aspect-ratio: 2800 / 491;
/* max-width: 100% er vaek. Med den blev scenen KLEMT ned i den smallere kasse,
og SVG'ens preserveAspectRatio lagde sand under figuren i stedet for at lade
den blive skaaret af baandets bund. Uden den beholder scenen sin hoejde-
bestemte bredde og loeber ud over kassen, som klipper den. */
flex: 0 0 auto;
}
.hd-hero__stage {
display: block;
width: 100%;
height: 100%;
}
/* === Ordet ===
Snittet er Shantell Sans SemiBold kursiv — samme skrift som SilicaBox' store
ordmaerke, som Mikkel bad om at faa herind i stedet for det braendte SUMMER.
Farven er sidens ink (Mikkel, 2026-08-31): ordet stod hvidt saa laenge der
var en gul flade at staa paa, og hvidt paa cream ville forsvinde.
Grad og filter staar som ATTRIBUTTER i markuppen, ikke her: de regnes ud af
ordets laengde i liquid-blokken oeverst, og de to skal folge hinanden. */
.hd-hero__word {
font-family: 'Shantell Sans', cursive;
font-style: italic;
font-weight: 600;
/* Knibningen. Snittet er sat ret luftigt fra fabrikken, og ved denne grad
laeser mellemrummene som huller i stedet for som ét ord. Ved -0,07 roerer
bogstaverne hinanden flere steder i ordet, hvilket er meningen: det skal
laese som ét stykke og ikke som otte bogstaver.
-0,09 og opefter blev proevet og forkastet: R og F i "PARFUM" smeltede
sammen til én form, og E'ernes taellere lukkede sig.
Stregen er tykkere med en stroke i SAMME farve som fyldet. Snittet findes
kun i SemiBold i vores fil, saa vaegten kan ikke skrues op ad den vej;
0,02 em stroke lægger 0,01 em paa hver side af hver kontur og giver den
ekstra tyngde uden at aendre bogstavformen.
Begge er i em, saa de foelger graden. Aendres de, skal breddebudgettet i
liquid-blokken oeverst regnes om. */
letter-spacing: -0.07em;
fill: var(--color-ink);
stroke: var(--color-ink);
/* 0,0325em: praecis midt mellem de gamle 0,02 og de 0,045 der blev proevet
(Mikkel, 2026-09-03: "goer den sjove vilde font lidt federe", derefter
"den blev for tyk denne her, saa midt i mellem"). Snittet findes kun i
SemiBold i vores woff2, saa vaegten kan ikke skrues op ad skriftens egen
vej — stroken er den eneste. Halvdelen lander uden for konturen, altsaa
0,01625em paa hver side af hver streg: ved fuld grad paa 1440px gaar
stammerne fra ca. 12 til ca. 13,3px (0,045 gav ca. 14,5).
Stroken goer ogsaa hvert bogstav BREDERE, saa breddebudgettet i
liquid-blokken oeverst er regnet om med den (3685 -> 3613, 1195 -> 1176).
Over 0,05em lukker E'ernes taellere og R'ets oeje sig, praecis som ved
knibning under -0,09. */
stroke-width: 0.0325em;
}
.hd-hero__word--sm { display: none; }
/* === Billedteksterne ===
Nicki har dem braendt ind i billedet paa engelsk, hvor de hverken kan
oversaettes, laeses af en soegemaskine eller rettes. De er derfor retoucheret
ud af filen og sat som rigtig tekst her i stedet.
Placeringen er maalt paa hans eget baand (3966x696): venstre blok x 1170-1742,
hoejre blok x 2192-2654, begge med bundlinje ved y 558. Omregnet til procent af
scenen, saa de sidder samme sted i kompositionen paa enhver bredde. Venstre
blok er venstrestillet, hoejre er hoejrestillet, praecis som han har sat dem.
De flankerede oprindeligt modellen; hun er ude, men afstanden ud til siderne
er hans, saa de er blevet staaende vandret og kun rykket ned.
Graden foelger IKKE billedet. Nicki har tegnet i et ~2000px vindue, og skaleret
med billedet ville teksten lande paa 7px paa en 1440px skaerm. */
.hd-hero__cap {
position: absolute;
/* Nicki havde dem paa 19 % (y 357-398), derefter 13 % og 5 % efterhaanden som
ordet rykkede ind i midten og baandet blev lavere. De staar ikke laengere
UNDER ordet: 2026-08-31 blev baandet 20 % lavere igen, og hoejden raekker
ikke til to vandrette baelter. De er derfor flyttet ud i hver sin side AF
ordet. Der er kun ÉN tilbage, og den staar UNDER ordet, midtstillet om
baandets midte — samme akse som ordet staar paa. Klassen hedder stadig
--right, fordi den navngiver Nickis hoejre TEKST og ikke en position, og
fordi cap_right er sat paa 40 kategorier og hylder i liquid-blokken.
Kassen er BAANDET og ikke scenen, se kommentaren i markuppen. */
left: 50%;
transform: translateX(-50%);
/* max-content: teksten er praecis saa bred som saetningen. max-width var
min(60%, 720px) - Nickis linjebudget for to flankerende blokke - og det
braekkede den laengste tekst ("FRA GENTLE TIL POWERFUL EKSFOLIATERS VI
SVAERGER PAA", 508px ved 14px) over to linjer under 950px, hvor anden
linje gik OP i ordet (maalt 2026-09-04 ved 900: 60 % af 846 = 508 minus).
Teksten er bundforankret, saa et linjeskift er altid en kollision; den
maa derfor bruge hele baandet. Den laengste tekst er 590px ved 1440 og
508px paa gulvet, baandet er 705px ved 750 - alle 40 tekster holder én
linje hele vejen ned til mobilgraensen. */
width: max-content;
max-width: 100%;
/* Blush-fladen er VAEK (Nickis hey-darling-05.pdf side 2, 2026-09-04). Den kom
til 2026-08-31 som vaern mod idolets produktfoto, som teksten forsvandt i,
og idolerne er ude siden 2026-09-03. Nu staar teksten naken paa sidens
bund, lige under ordet. Skal fladen tilbage: var(--color-blush),
padding 7px 14px, border-radius 0 (firkantet som .product-card__badge),
og bottom skal have kassens bundpolstring trukket fra igen. */
background: none;
padding: 0;
text-align: center;
margin: 0;
/* DISPLAY-snittet, ikke tekstsnittet (samme PDF). Billedteksten stod i
Instrument Sans 700 fordi den ved 9-16px var for lille til den extended
tegning - samme regel som alle husets smaa labels (css-variables.liquid).
Mockuppen saetter den i Univers Next Pro Extended ved ca. 17,5px paa 1680,
og dér holder snittet; det er den samme stemme som menuen lige over.
Vaegten er --weight-black som headeren (kittet har kun 900, se
css-variables.liquid om Nickis vaegte). */
font-family: var(--font-display--family);
font-weight: var(--weight-black);
/* Graden er MAALT paa mockuppen (et 1680px-skud af live): versalhoejde
12,6px og blaekbredde 447,8px for "ALT DIN HUD CRAVER SAMLET ÉT STED".
Menuens versaler maaler 11,5px ved 16px i samme snit, saa versalhoejden
giver 17,5px og bredden 17,3px; 1,03vw rammer imellem (17,3 ved 1680).
Skalerer med vw som baandet (11,2vw), saa tekst/baand er fast 9,2 % i
hele det omraade hvor begge skalerer. Gulvet paa 14px holder snittet over
de 13px hvor huset skifter til tekstfonten; loftet er 1,03 x 1768, dér
hvor baandet selv rammer sit loft paa 198px. */
font-size: clamp(14px, 1.03vw, 18.2px);
line-height: 1;
letter-spacing: var(--tracking-label);
text-transform: uppercase;
/* Ink af samme grund som ordet: hvid var en farve til den gule flade. */
color: var(--color-ink);
}
/* De to blokke er SPEJLET om baandets midte: venstre 33,1-44,5 %, hoejre
55,5-66,9 %. Nickis egne maal gav 29,5 % i venstre side og 33,1 % i hoejre,
fordi de sad om modellen, som ikke stod midt i baandet. Da hun forsvandt og
ordet rykkede ind i midten, laa venstre blok 3,6 % laengere ude end hoejre
og skaevheden blev tydelig. Hoejre blok er beholdt og venstre er spejlet ind
efter den. Yderkanterne er det oejet maaler paa, saa teksten er stadig
venstre- og hoejrestillet. */
/* Højdebudgettet i båndet, målt ved 1440 hvor båndet er 161 px. Ordet står
centreret om y 180 af 491 (36,7 %). Teksten stod her på 9 % oppe fra bunden
med et probe-krav på over 25 enheders luft; BEGGE dele er afløst 2026-09-04.
Teksten sidder nu tæt under ordet (se .hd-hero__cap--right herunder), luften
er Nickis 24 enheder under hvert ord, og `_pw-verify-hero.mjs` kræver 15-33.
Luften måles på PIXELS med teksten skjult — em-kassen i markuppen melder altid
alt vel, fordi den er det tal ankeret selv bruger, og accenterne É og Å står
over versalerne og forurener en måling med teksten synlig. */
/* Teksten er RYKKET OP under ordet (Nickis hey-darling-05.pdf side 2,
2026-09-04; stod paa calc(9% - 7px) med blush-fladen). Placeringen regnes
fra ORDET og ikke fra bunden, og i em, saa luften holder ogsaa naar graden
rammer sit gulv paa smalle skaerme:
ordets blaekbund ligger 34,0 % oppe fra baandets bund (maalt 1680:
y 124,3 af 188), mockuppens luft ned til versalernes top er 8,7px =
4,6 % af baandet, versalhoejden er 0,72em, og en line-height:1-kasse
har 0,15em under grundlinjen (maalt: grundlinjen sidder 85 % nede).
34,0 - 4,6 = 29,3 %; 0,72 + 0,15 = 0,87em.
Versalernes bund lander dermed 22,8 % oppe; mockuppen maaler 22,9 %
(y 323,1). Ordets y er IKKE regnet om: mockuppen lader ordet staa (blaek
y 203,7-302,3 paa begge sider) og rykker kun teksten op, saa den gamle
regel om at ordet staar midt i sin egen halvdel er afloest af tegningen.
Kun kassens TOP maales af _pw-verify-hero.mjs; den ligger 0,12em over
versalerne (grundlinje 0,85 minus versalhoejde 0,73).
ORDETS BLAEKBUND ER IKKE DEN SAMME FOR ALLE ORD. Boelgen (feDisplacementMap)
og goo'en lader nogle ord ende langt lavere end andre: maalt paa alle hylder
2026-09-04 fra EAU DE TOILETTE 292 til ANSIGTSOLIE/KOLLAGEN/FUGTCREME 353
enheder, HUDPLEJE 323. Med ét fast tal ramte teksten ordet paa fem hylder
og laa under 1px fra paa syv mere. Tallet kan ikke regnes i Liquid
(displacementet er per pixel), saa det er MAALT og ligger pr. ord i
snippets/hero-ord-bund.liquid; sektionen saetter det som --hd-ord-bund.
Teksten rykker (bund - 323) enheder ned, 1 enhed = 1/4,91 % af baandet,
saa luften er Nickis 24 enheder under ALLE ord. 323 er HUDPLEJEs tal og
SKAL foelge tabellen hvis den maales om (sweepet skriver nulpunktet ud).
Ukendt ord = 355 = mest luft, aldrig kollision. */
.hd-hero__cap--right { bottom: calc(29.3% - 0.87em - (var(--hd-ord-bund, 355) - 323) * 1% / 4.91); }
/* Paa telefon er baandet for lavt til at teksten kan staa uden at ramme
modellen, og mobil-udsnittet er et andet billede med andre proportioner. */
@media (max-width: 749px) {
.hd-hero__cap { display: none; }
}
/* Paa telefon bliver et 8:1-baand til en meget haard beskaering: en fast hoejde
med cover skar SUMMER-ordet midt over og efterlod tilfaeldige bogstavstumper.
Mobil-udsnittet er derfor klippet til PRAECIS den aspekt det vises i, og
baandet faar sin hoejde af billedet i stedet for omvendt. Ingen CSS-beskaering,
hele kompositionen er med. */
/* Paa telefon bliver et bredt baand til en meget haard beskaering: en fast hoejde
med cover skar SUMMER-ordet midt over og efterlod tilfaeldige bogstavstumper.
Mobil-udsnittet er klippet om ordet og modellen, og baandet faar sin hoejde af
billedet i stedet for omvendt. Ingen CSS-beskaering, hele kompositionen er med. */
/* Scenen beholder sit eget forhold og faar hoejden af baandet; overskuddet i
bredden loeber ud over kanten og klippes af .hd-hero__media. Det er praecis
den beskaering det gamle mobilbillede var klippet til, bare regnet i stedet
for skaaret. Det synlige udsnit er altid 1.255 enheder bredt — baandhoejden
skalerer med skaermbredden, saa zoomen er den samme paa enhver telefon.
Derfor kan mobilgraden staa som ét tal og ikke som en clamp. */
.hd-hero__idol--sm { display: none; }
@media (max-width: 749px) {
/* `max-height` og ikke en ny hoejde: telefonen skal vaere BYTE-identisk, for
ordets grad og udsnittet er tunet mod netop den geometri. Uden loftet vokser
baandet lineaert med bredden helt op til graensen — maalt paa live: 113px
ved 320, 140 ved 390 (begge under loftet, altsaa uroerte), men 221 ved 600
og 275 ved 749, hvor desktop-reglen ét pixel senere giver 96. Et baand paa
275px er 37 % af skaermen paa en telefon paa tvaers, og springet paa 179px
ved 750 var ikke tilsigtet: forholdet 1240/485 stammer fra det gamle
mobil-UDSNIT med modellen i, og modellen har ikke vaeret i baandet siden
rev 251. Loftet bider foerst over ~430px, saa scenen beskaeres bare mere i
siderne — praecis den mekanik baandet allerede bruger. */
/* `aspect-ratio` + `max-height` duer IKKE: naar loftet bider, regner
browseren BREDDEN tilbage af forholdet, saa baandet ogsaa blev smallere
(maalt: 409px paa en 749px skaerm). Hoejden regnes derfor direkte af
baandets egen bredde med det samme forhold — 1240/485 = 2,5567 — og
loftet laegges paa DEN. Baandet er stadig fuld bredde; kun scenen inde i
det beskaeres mere i siderne. */
/* HERO-ORDET ER VAEK PAA TELEFON (Mikkel, 2026-09-07: "fjern også hero text på de
her telefon sider, teksten ser mærkelig ud, og cirklerne er nok branding i sig
selv på telefon"). Hele scenen (SVG med ordet + goo) er display: none under 750px;
det eneste der bliver af baandet er broedkrummen, som gaar fra absolut placeret
oven paa sandet til almindeligt flow, saa sektionen falder sammen til én linje
(maalt: .hd-hero 16px, header-bund 106 -> cirkler 134 ved 390). Reglerne for
--sm-ordet og loftet paa 160px herunder er dermed doede paa telefon, men bliver
staaende som dokumentation af den geometri der gaelder, hvis ordet kommer
tilbage. Font-preloaden af Shantell Sans har media="(min-width: 750px)" af
samme grund. Broedkrummens position: static staar ved .hd-hero__crumbs
laengere nede — den SKAL staa efter grundreglen, ellers vinder absolute
paa samme specificitet (rev 290 gik live med krummen oven i cirklerne). */
.hd-hero__media {
display: none;
aspect-ratio: auto;
height: min(calc((100vw - 2 * var(--tile-inset)) / 2.5567), 160px);
}
.hd-hero__art { max-width: none; }
.hd-hero__word--lg { display: none; }
.hd-hero__word--sm { display: block; }
.hd-hero__idol--lg { display: none; }
.hd-hero__idol--sm { display: block; }
}
/* Broedkrummen ligger nu OVENPAA sandet, oeverst til venstre i baandet. Den
hvide stribe under baandet (.hd-hero__head) er vaek, saa hyldecirklerne
starter direkte under baandkanten.
Farven er ink og ikke ivory: den skal kunne laeses, og ivory er heroens
dekorative farve. Sand og ink har rigelig kontrast ved 10px.
Placeringen hoerer paa .hd-hero og ikke paa scenen, saa den flugter med
sidens venstremargen ogsaa naar scenen er smallere end baandet. */
.hd-hero { position: relative; }
.hd-hero__crumbs {
position: absolute;
top: clamp(12px, 1.3vw, 20px);
/* Var var(--tile-inset), derefter 0. Nul lagde den KLODS op ad baandets
venstrekant, og med rammen omkring skar den kanten. Den staar nu samme
stykke inde fra kanten som den staar nede fra toppen. */
left: clamp(12px, 1.3vw, 20px);
z-index: 1;
display: flex;
align-items: center;
gap: 8px;
font-family: var(--font-primary--family);
font-weight: 600;
/* Graden er Mikkels fra 2026-08-27. Farven var den dybe roede #C03527 (og foer
den den daempede oliven) og er GRAA fra 2026-08-31: de tre roede
handlingscirkler staar lige under broedkrummen, og med den ogsaa i roedt
blev toppen af siden for roed.
#6E6B68 er en varm neutral graa — den hoerer til paa cream uden at trakke
mod oliven — og maaler 4,81:1 mod sidens bund, altsaa over AA ved 13px.
Hele broedkrummen, ogsaa det aktive led, saa den laeses som ét element. */
font-size: 13px;
letter-spacing: var(--tracking-ui);
text-transform: uppercase;
color: #6E6B68;
}
/* Samme greb som PDP'ens broedkrumme: linket er 16px hoejt, og en usynlig
`::before` goer trykfladen 28px uden at flytte noget. */
.hd-hero__crumbs a { color: inherit; background-image: none; position: relative; }
.hd-hero__crumbs a::before { content: ""; position: absolute; inset: -6px -2px; }
.hd-hero__crumbs a:hover { color: var(--color-ink); }
.hd-hero__crumbs-current { color: #6E6B68; }
/* TELEFON: scenen er display: none (se mobil-blokken ved .hd-hero__media), saa
broedkrummen er det eneste i baandet og gaar i almindeligt flow — sektionen
falder sammen til krummens 16px, og cirklerne starter lige under. Reglen staar
HER og ikke i mobil-blokken ovenfor, fordi grundreglen (position: absolute)
kommer senere i filen end den blok og vinder paa samme specificitet. Maalt paa
rev 290, hvor den stod for tidligt: hero 0px hoej, krummen oven i cirklerne. */
@media (max-width: 749px) {
.hd-hero__crumbs { position: static; }
}
/* h1'en er .visually-hidden i markuppen. Reglen staar i footer-sektionens
stylesheet, som Shopify sammensaetter til den samme fil, men den gentages
her saa kategorisiden ikke afhaenger af at footeren render'es. */
.hd-hero__title.visually-hidden {
position: absolute;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* Ingen egen max-width længere: bredden ER gitterets, og polstringen er kanten.
Dermed flugter discs, filterbar, gitter, tom-tilstand og paginering alle med
den første kolonnes venstrekant. */
.plp__body { max-width: none; margin: 0 auto; padding-inline: var(--tile-inset); }
/* Discs */
/* scroll-margin-top holder cirklerne fri af den klæbende header når man lander
her fra et pager-link. Uden den ville browseren stille cirklernes overkant på
skærmkant 0 og lægge dem bag hovedbjælken. */
.plp__discs { margin-inline: calc(-1 * var(--tile-inset)); padding: 18px var(--tile-inset) 4px; overflow-x: auto; scroll-margin-top: var(--sticky-stack-pinned); }
/* Mærket har ingen højde og må ikke lave luft; det findes kun som mål for et
fragment. Marginen er den samme som cirklernes, ellers lander baren bag headeren. */
.plp__anchor { height: 0; scroll-margin-top: var(--sticky-stack-pinned); }
/* position: relative er markoerens koordinatsystem. Den er absolut placeret og
dermed UDE af flex-floedet, saa den hverken faar en plads eller et gap. */
/* Raekken er CENTRERET (Mikkel, 2026-09-03). Den stod venstrestillet under et
baand hvor ordet staar i midten, og paa de hylder der kun har fire-fem
cirkler laeste den som skaev.
width: max-content + margin auto og IKKE justify-content: center. Raekken
ligger i en scroller (.plp__discs har overflow-x: auto), og en centreret
flex-raekke der er bredere end sin kasse loeber ud over BEGGE kanter — det
venstre overloeb kan man ikke scrolle hen til. Med max-content er raekken
praecis saa bred som cirklerne: passer de, centrerer auto-marginerne dem;
passer de ikke, bliver auto til 0, og alt overloeb ligger til hoejre hvor
scrolleren kan naa det.
position: relative BLIVER — det er markoerens koordinatsystem, og JS'ens
knap.offsetLeft maales i det. Centreringen flytter raekken, ikke knappernes
plads inde i den, saa skiven lander samme sted som foer. */
.plp__discs-row { --disc-ring: 4px; position: relative; display: flex; gap: 24px; list-style: none; margin: 0 auto; padding: 0; width: max-content; }
/* Markoeren er en UDFYLDT SORT cirkel bag den aktive hyldecirkel (Mikkel
2026-09-03, afloeser den roede gloed der foerst blev nedtonet og saa
fjernet). Cirklen selv er uigennemsigtig og daekker midten, saa det man
ser er en 4 px sort RING hele vejen rundt. Ingen blur: kanten skal staa
skarpt. Flytte-adfaerden er uaendret (fade ud, hop, oejeblikkeligt ind);
Udhaenget er --disc-ring (4 px paa desktop, 3 paa telefon), og JS'ens saet()
laeser den SAMME variabel og traekker den fra i translate(), saa de to
ikke kan komme fra hinanden. top/left er 0: hele placeringen ligger i
translate, ogsaa lodret, fordi raekken paa telefon er et gitter med flere
raekker (se mobil-blokken nederst). */
.plp__disc-marker {
position: absolute;
top: 0;
left: 0;
width: calc(100px + 2 * var(--disc-ring));
height: calc(100px + 2 * var(--disc-ring));
border-radius: 9999px;
background: var(--color-ink);
/* KUN opacity. Skiven skal IKKE glide (Mikkel, 2026-08-31): den fader ud
dér hvor den staar, flytter usynligt, og fader ind det nye sted. */
opacity: 1;
/* 80ms, ikke --transition-base (200): hover-til-svar skal foeles instant
(Mikkel, 2026-08-31). */
transition: opacity 80ms ease-out;
pointer-events: none;
}
/* IND er oejeblikkeligt: udfadet er farvel til en plads man har set, indfadet
er svaret paa den hover man LIGE har lavet, og et fade dér er forsinkelse. */
.plp__disc-marker.er-paa-vej-ind { transition-duration: 0s; }
.plp__disc-marker[hidden] { display: none; }
/* UDEN JS er ringen den eneste markering af den aktive hylde (2026-09-04).
Labelen bar den foer: den stod i 500, og `.is-active` gav den 600 + ink. Fra
hey-darling-05 staar ALLE labels i 700 + ink, saa den forskel findes ikke mere,
og markoeren er et JS-element — uden script var der ingen markering tilbage.
Serveren saetter selv `is-active`, saa den samme ring kan tegnes i ren CSS.
Scopet til raekker UDEN `data-markoer-bundet` (attributten JS'en saetter naar den
overtager), saa de to aldrig tegner oven paa hinanden. Spread er praecis
markoerens udhaeng (--disc-ring). */
.plp__discs-row:not([data-markoer-bundet]) .plp__disc-btn.is-active .plp__disc {
box-shadow: 0 0 0 var(--disc-ring) var(--color-ink);
}
/* Uden bevaegelse er varigheden 0, og JS'ens ventetid bliver dermed ogsaa 0. */
@media (prefers-reduced-motion: reduce) { .plp__disc-marker { transition: none; } }
.plp__disc-btn { position: relative; display: flex; flex-direction: column; align-items: center; width: 100px; background: none; border: 0; cursor: pointer; background-image: none; }
{%- comment -%}
Cirklerne er selv position: relative. Det er ikke pynt: markoeren er absolut
placeret og males derfor i det POSITIONEREDE lag, altsaa efter alt almindeligt
indhold, uanset at den staar foerst i traeet. Maalt live paa et tidligere
forsoeg: uden position paa cirklen laa den roede skive OVEN PAA fotoet, og
hele hylden blev en roed plade. Naar cirklen selv er positioneret, males de to
i traeraekkefoelge, og markoeren ligger bagved.
Derfor position: relative og ikke z-index: -1 paa markoeren: et negativt
z-index ville sende den bag raekkens egen baggrund og dermed afhaenge af at
ALT ovenover er gennemsigtigt.
{%- endcomment -%}
/* --disc saettes inline pr. hylde. Fallback til den gamle bloede flade, saa en
hylde uden farve stadig tegner en cirkel og ikke et hul.
Ingen ramme paa farvecirklerne: en 1px linje i --color-line-soft laa som en
lys kant oven i en maettet farve og saa ud som en fejl. "Alle" beholder sin,
for den er hvid indeni og ville ellers forsvinde. */
.plp__disc { position: relative; display: flex; align-items: center; justify-content: center; height: 100px; width: 100px; overflow: hidden; border-radius: 9999px; background: var(--disc, var(--color-bg-soft)); transition: box-shadow var(--transition-base), transform var(--transition-base); }
.plp__disc img { height: 100%; width: 100%; object-fit: cover; display: block; }
/* FARVEFILTER over fotoet (Nickis hey-darling-05.pdf side 2, 2026-09-04):
hyldens egen farve lagt oven paa billedet med halv daekning, saa alle ti
cirkler traekker mod deres bund og raekken laeser som én palet i stedet for
ti loese produktfotos. Alfa er MAALT paa mockuppen mod et live-skud i samme
bredde, pixel for pixel i alle ti cirkler: median 0,516, kvartiler
0,50-0,54, altsaa 50 %, normal blanding (samme alfa paa lyse og moerke
pixels, saa det er ikke multiply). Bundpixels aendrer sig ikke (delta under
1), fordi fotoets bund ER farven - derfor er det ogsaa ligegyldigt om laget
ligger over fotoet eller fotoet faar opacity .5; matematikken er ens.
::after alligevel, fordi det er det Nicki har gjort, og fordi 'ets
egen indlaesning og lazy-fade saa ikke roeres.
KUN fotocirkler: tekst- og handlingscirklerne (--tekst) baerer navnet inde
i cirklen, og et halvgennemsigtigt lag ville vaske det ud. Cirklen er
position: relative og overflow: hidden, saa laget klippes rundt og maler
over det ikke-positionerede ; markoeren ligger stadig bag cirklen. */
.plp__disc:not(.plp__disc--tekst)::after { content: ""; position: absolute; inset: 0; background: var(--disc, var(--color-bg-soft)); opacity: 0.5; pointer-events: none; }
/* Handlingscirklerne: Alle, Bundles, Tilbud. Farven staar paa cirklen som
--disc/--disc-ink, saa de arver tekst-discens typografi uendret nedenfor.
HVID cirkel med SORT tekst og en tynd sort kant (Mikkel, 2026-08-31).
Proevede varianter, saa de ikke skal proeves om — alle samme dag:
fyldt roed #C03527 for meget roedt oeverst paa siden; det var ogsaa dét
der flyttede broedkrummen til graa og BRANDS til sort
hvid + roed tekst 5,56:1, men stadig roedt
sort + roed tekst kun 3,03:1, og teksten ER linkets navn
lime / orange kun proevet paa den ene bundles-cirkel, se historikken
Nu: hvid med ink, 16,83:1. Cirklen baerer ingen farve laengere — den er ren
typografi, som resten af headeren og filterbaren.
Kanten er ikke pynt: hvid paa cream er 1,04:1, saa uden den ville cirklen
ikke findes. Den er 1px ink — samme greb som den gamle "Alle" havde, bare i
sort i stedet for --color-line-soft, saa den holder mod produktcirklerne.
Padding 6px og ikke tekst-discens 8: box-sizing er border-box, saa kanten
spiser 2px af de 100. Ved 8px var der 82px tilbage til "BUNDLES", som maaler
81,6 — det braekker paa en subpixel. 6px giver 86 og dermed 4,4px luft. */
.plp__disc--util {
--disc: var(--color-paper);
--disc-ink: var(--color-ink);
border: 1px solid var(--color-ink);
}
.plp__disc--util .font-grotesk { padding-inline: 6px; }
/* Tekst-disc: hylde uden foto. Samme skrift som "Alle", men paa hyldens egen
farve, med den ink der maaler hoejest kontrast paa netop den (--disc-ink-N).
12px/0,04em og ikke "Alle"s 13px/0,08em: maalt i univers-next-pro-extended
er "BUNDLES" 92,0 px ved 13/0,08 og der er 100 px cirkel. Det braekkede ordet
over to linjer ("BUNDLE" + "S"). Ved 12/0,04 maaler det 81,6 px og staar paa
én linje inden for de 84 px som luften levner. overflow-wrap: normal, saa et
ord ALDRIG brydes; flerordede navne bryder mellem ordene. */
.plp__disc--tekst .font-grotesk { padding: 0 8px; font-size: 12px; font-weight: 600; line-height: 1.15; text-align: center; text-transform: uppercase; letter-spacing: 0.04em; overflow-wrap: normal; color: var(--disc-ink, var(--color-ink)); }
/* Navnet under cirklen er FEDT og i ink (Nickis hey-darling-05.pdf side 2,
2026-09-04; stod i 500 og --color-ink-soft). 700 er et RIGTIGT snit:
Instrument Sans laa self-hostet i 400/500/600, og font-weight: 700 faldt
tilbage paa 600-filen (maalt: noejagtig samme bredder for 600/700/800), saa
_selfhost-fonts.mjs henter nu ogsaa 700, og theme.liquid preloader det.
Graden er stadig 13px: mockuppens labels maaler 16 % bredere, men med lavere
versaler, saa det er et andet snit (Nickis egen Univers Bold, som kittet
ikke har) og ikke en stoerre grad. Mikkels ord var "federe".
Den aktive hylde har ikke laengere sin egen label-regel: alle staar ens, og
den aktive kendes paa den sorte ring (.plp__disc-marker). */
.plp__disc-label { margin-top: 12px; font-size: 13px; font-weight: 700; color: var(--color-ink); }
/* TELEFON: 6 CIRKLER PR. RAEKKE, INGEN SCROLLER (Mikkel, 2026-09-07: "cirklerne
under hver collection er for store, de skal vaere meget mindre, 2 raekker af
5 cirkler skal der vaere plads til" — og samme dag: "6 per række i stedet").
Foer stod de 100 px i én vandret scroller: paa 390 px saa man 3,5 cirkler af
hudplejes 12, og resten laa ude til hoejre hvor ingen vidste de var. Nu er
raekken et gitter med seks kolonner (--disc-cols), og hylderne fylder det op:
hudpleje 6+6, haar 6+4, krop 6+3, makeup 6+2, duft 6. Fem gav hudpleje 5+5+2.
Cirklen er kolonnens bredde (aspect-ratio 1) og altsaa flydende:
41 px ved 320, 48 ved 360, 53 ved 390, 60 ved 430. Ingen fast stoerrelse,
for seks faste cirkler + fem gaps kan ikke passe paa alle telefoner.
Labelen er 700 som paa desktop men i clamp(8, 2.5vw, 10): 13 px "Ansigtscreme"
er 90 px bred og kolonnen 53. De laengste ord (Ansigtscreme 66 px ved 390,
Deodoranter 60) stikker ud i gap'et paa hver side — maalt: ingen label roerer
sin nabo paa 360/390/430, fordi de lange ord aldrig staar ved siden af hinanden.
Ved 320 roerte Eksfoliering og Ansigtsolie hinanden med 9 px-labels; 8 px
loeser det (spild 3 px i et gap paa 8). Teksten er centreret under sin cirkel
(flex-item i en align-items: center-kolonne overloeber symmetrisk).
Teksten INDE i cirklerne (Alle/Bundles/Tilbud + hylder uden foto) staar paa
telefon i TEKSTSNITTET (Instrument Sans via --font-primary--family, 700) og
ikke i det extended display-snit: "BUNDLES" maaler 46 px ved 7 px extended, og
en 41-48 px cirkel med kant og padding har 35-42 px. Husreglen er i forvejen at
alt under 13 px koerer paa tekstsnittet; cirklerne var undtagelsen paa desktop,
hvor der er 100 px at goere godt med. Graden er container-units, 15cqw klemt
til 8-10 px. Maalt paa alle fire bredder: alt staar paa én linje inde i cirklen.
Markoeren regnes af de samme tal som kolonnerne (100 % af raekken minus
(cols-1) gaps, delt i cols) plus ringen, saa den er altid praecis cirklen + 3 px.
Ringen er 3 og ikke 4: 4 px om en 41 px cirkel laeste som en tyk ramme.
overflow-x: visible paa .plp__discs: ellers klipper scrolleren markoerens
ring og labelen paa de yderste kolonner. Der er ikke laengere noget at rulle.
Prototype uden push: _resp-discs-proto.mjs/.css (addStyleTag paa live). Probe
efter push: _resp-discs.mjs --rev N --w 320|390 [--klik 6] (antal pr. raekke,
labels, tekst-i-cirkel, kollisioner, markoerens ring). */
@media (max-width: 749px) {
.plp__discs { overflow-x: visible; padding-top: 14px; }
.plp__discs-row { --disc-cols: 6; --disc-gap: 8px; --disc-ring: 3px; display: grid; grid-template-columns: repeat(var(--disc-cols), minmax(0, 1fr)); gap: 14px var(--disc-gap); width: auto; margin: 0; }
.plp__disc-btn { width: auto; container-type: inline-size; }
.plp__disc { width: 100%; height: auto; aspect-ratio: 1; }
.plp__disc-label { margin-top: 6px; font-size: clamp(8px, 2.5vw, 10px); line-height: 1.2; text-align: center; }
.plp__disc--tekst .font-grotesk { font-family: var(--font-primary--family); font-weight: 700; font-size: clamp(8px, 15cqw, 10px); padding: 0 3px; letter-spacing: 0.02em; }
.plp__disc--util .font-grotesk { padding-inline: 2px; }
.plp__disc-marker { width: calc((100% - (var(--disc-cols) - 1) * var(--disc-gap)) / var(--disc-cols) + 2 * var(--disc-ring)); height: auto; aspect-ratio: 1; }
}
/* Filter/sort bar CSS moved to snippets/filter-bar.liquid (shared with search). */
/* Grid — tile system.
minmax(0, 1fr) forces every column to EXACTLY equal width (1fr alone = minmax(auto,1fr),
which lets columns grow to content -> unequal widths -> unequal box SIZES).
gap:0 — the cards carry right+bottom hairlines, the grid paints top+left, so
neighbours share ONE line instead of stacking two.
margin-inline: calc(50% - 50vw) breaks ONLY the product grid out of .plp__body's
1600px column; the hero, discs, filter bar and pagination keep their width.
5 kolonner på desktop. Sidestørrelsen var 25 fra 2026-08-06, fordi 25 går op i
5 og gav fem fulde rækker.
26 FRA 2026-08-17, og det er kampagnefelterne der flytter den. Felterne lægger
celler til gitteret, og med 25 produkter gik regnestykket ikke op på nogen
bredde undtagen 3: der stod én tom celle tilbage i sidste række, også på
desktop hvor der før var nul. Feltstørrelserne er 2x2, 2x1 og 1x2, altså kun
LIGE arealer, og et gitter kan kun lukkes af et ULIGE areal når produktantal og
kolonneantal har forskellig paritet.
Med 26 lukker alle fire bredder: 2 kolonner + areal 2 = 28, 3 kolonner + 4 = 30,
4 kolonner + 2 = 28, 5 kolonner + 4 = 30. Mikkels formulering var at rykke et
produkt frem fra næste side frem for at leve med hullet, og det er præcis hvad
det her er — side 1 tager én med, side 2 starter ved 27. Intet produkt tabes,
ingen dubletter, og der skulle ikke opfindes nye feltformater.
Ændrer du sidestørrelsen, så husk PER_PAGE i plp-filter.js. */
.plp__grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0;
margin-block: 40px;
/* Gitteret fylder .plp__body's indholdsboks, som er præcis --tile-grid-width
bred. Højdeloftet (2,25 synlige rækker) sidder på variablen i
css-variables.liquid, ikke her. Kolonnerne er 1fr af den bredde, så kortene
beholder deres 4:5 — de bliver mindre, rækkerne bliver ikke højere. */
width: 100%;
border-top: 1px solid var(--color-line-soft);
border-left: 1px solid var(--color-line-soft);
}
@media (min-width: 768px) { .plp__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .plp__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .plp__grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
/* .plp__empty er væk (2026-09-01): en tom kategori viser ingenting i stedet for
en fejlside. Se kommentaren over paginate-blokken i gitteret.
SKRIV IKKE et Liquid-tag i klartekst her. Liquid parser HELE filen, også inde
i en CSS-kommentar, så en henvisning til grenen skrevet ud som tag blev læst
som en rigtig, foraeldreloes else — theme check: "Attempting to end parsing
before LiquidBranch 'else' was closed". */
/* Pagination */
/* Bundpolstringen var 72px OVEN PAA at det der foelger efter selv har luft:
paa en kategoriside har `.plp__about` 48px margen plus 40px polstring, saa
der stod 160px hvidt mellem knapperne og "OM ". Den kan ikke bare
fjernes — paa soegesiden er pagerens egen polstring det ENESTE der skiller
den fra footeren (maalt: 72px, og intet andet) — men den kan halveres. */
.plp__pagination { display: flex; justify-content: center; align-items: center; gap: 6px; padding: 8px 0 40px; }
.plp__page, .plp__page-arrow { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 12px; border: 1px solid var(--color-line); border-radius: var(--corner-radius-default); background: var(--color-paper); color: var(--color-ink-soft); font-size: 14px; background-image: none; }
a.plp__page:hover, a.plp__page-arrow:hover { border-color: var(--color-ink-soft); color: var(--color-ink); }
.plp__page.is-current { background: var(--color-ink); color: var(--color-paper); border-color: var(--color-ink); font-weight: 600; }
.plp__page-gap { min-width: 20px; text-align: center; color: var(--color-ink-mute); }
/* Paa telefon fyldte pageren 120px lodret for én raekke knapper paa 40px, og
gitterets 40px margen laa oveni i begge ender. Knapperne bliver 36px (stadig
over WCAG 2.2 AAs 24), luften omkring dem skaeres, og gitterets margen
halveres — det sidste lukker samtidig det tomrum der stod mellem filterbaren
og foerste kort. Maalt fra sidste vare til "OM ": 248px foer, 174px nu. */
@media (max-width: 749px) {
.plp__grid { margin-block: 24px; }
.plp__pagination { gap: 4px; padding: 4px 0 24px; }
.plp__page, .plp__page-arrow { min-width: 36px; height: 36px; padding: 0 9px; font-size: 13px; }
.plp__page-gap { min-width: 14px; }
}
/* Kategori-tekst + FAQ. Renderes kun når der ER indhold, så en tom kategori ser
præcis ud som før. Læsebredden holdes på 68ch: gitteret er fuld bredde, men en
tekstlinje på 1600px kan ikke læses. Ingen nye farver eller fonte, kun de tokens
resten af siden allerede bruger. */
/* Introduktion under cirklerne, ikke bundtekst.
Typen ligger tæt på heroens tagline (17px) men en tak større, så teksten
læses som en indledning uden at skrige højere end overskriften den hører under.
Bredden er sat i px og ikke som fuld bredde: ved fuld bredde blev linjerne
omkring 150 tegn, og det kan man ikke læse i ét greb.
To spalter blev afprøvet og forkastet. Teksterne er fra to til fire linjer,
og en tre-linjers tekst balancerer 2+1, så anden spalte stod med to ord. */
/* Tonet fuldbredde-bånd nederst, efter Matas-mønstret. Båndet går kant til kant,
mens selve læselinjen holdes på 900px.
Baggrunden er HVID (Mikkel 2026-09-03, afløser cream-valget fra 2026-08-26):
SEO-teksten skal stå på hvid, ikke på sidens cream-ramme. */
.plp__about { margin-inline: calc(50% - 50vw); padding-inline: var(--tile-inset);
margin-top: clamp(48px, 6vw, 88px); padding-block: clamp(40px, 5vw, 76px);
background: #fff; }
/* Centreret spalte, som Matas gør det. Både tekst og FAQ ligger i den, så hele
bundblokken har én venstrekant og hviler på samme creme. */
.plp__about-inner { max-width: 900px; margin-inline: auto; }
.plp__about-title { font-size: clamp(21px, 2vw, 26px); font-weight: 600; letter-spacing: -0.015em;
color: var(--color-ink); margin: 0 0 14px; }
/* Lysere end brødtekst-inken, men ikke helt nede på --color-ink-mute (#8C8378),
som er tænkt til 11px labels og kun giver 3,6:1 mod papir. Blandingen lander
omkring #574E47, altså stadig over AAA for brødtekst. */
.plp__copy { max-width: none; font-size: 16px; line-height: 1.7;
color: color-mix(in srgb, var(--color-ink-soft) 65%, var(--color-ink-mute)); }
/* :where() saa reglen vejer (0,1,0) og ikke (0,1,1): ellers slaar den
`> * + *` nedenfor, og afsnit efter afsnit fik 0 i stedet for 1.25em.
Maalt paa om-siden 2026-09-11 (P mt=0px), hvor Annes tekst er lange
afsnit i traek. Browserens egne p-marginer nulstilles stadig. */
.plp__copy > :where(p) { margin: 0; }
/* 1.25em, ikke 0.9: ved line-height 1.7 er et mindre spring smallere end en
linje, og så læses flere afsnit i træk som én klump tekst. */
.plp__copy > * + * { margin-top: 1.25em; }
.plp__copy h2, .plp__copy h3 { color: var(--color-ink); font-weight: 600; letter-spacing: -0.01em; }
/* 20px holder sig under .plp__about-title (op til 26px), så overskrifterne
inde i teksten ikke konkurrerer med sektionens egen titel. */
.plp__copy h2 { font-size: 20px; margin-top: 2.3em; }
.plp__copy h3 { font-size: 18px; margin-top: 1.9em; }
/* En overskrift skal sidde tættere på sin egen tekst end på afsnittet før. */
.plp__copy h2 + *, .plp__copy h3 + * { margin-top: 0.7em; }
.plp__copy a { color: var(--color-ink); text-decoration: underline; text-underline-offset: 2px; }
.plp__copy ul, .plp__copy ol { padding-left: 1.15em; }
.plp__copy li + li { margin-top: 0.55em; }
.plp__copy li::marker { color: var(--color-ink-mute); }
.plp__copy strong { color: var(--color-ink); font-weight: 600; }
/* ── Kategoritekst-moduler ──────────────────────────────────────────────
PRÆCIS FIRE former for tekst, og det tal skal holdes:
(ingen klasse) almindelig brødtekst
.cmod--split tekst til venstre, illustration til højre
.cmod--bullets punktform
.cmod--table sammenligningstabel
Dertil ét stort billede øverst, .cmod-hero, altid som første element.
Tabellen kom til 2026-08-14 som den fjerde form. Begrundelsen er at
AI-oversigter løfter tabeller direkte ind i svaret, hvilket ingen af de
tre andre former gør. Prisen er at siderne kan komme til at se uens ud,
så den har én regel: den bruges KUN når indholdet reelt er to eller flere
ting stillet op mod hinanden på de samme akser (EDT mod EDP, deodorant mod
antiperspirant). Er der kun én ting at beskrive, er det punktform. */
.plp__copy > .cmod-hero { margin: 0 0 clamp(30px, 3.4vw, 52px);
/* Bryder ud af tekstspalten og helt ud til samme inset som produktgitteret. */
margin-inline: calc(50% - 50vw + var(--tile-inset)); }
.plp__copy > .cmod-hero img { display: block; width: 100%;
height: clamp(230px, 27vw, 430px); object-fit: cover;
border-radius: var(--corner-radius-default); }
/* Delt på midten, lige store spalter. Ikke en bred tekst med en smal billedstribe. */
.plp__copy .cmod--split { display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: clamp(26px, 3.2vw, 48px); align-items: start; margin-top: 1.7em; }
.plp__copy .cmod--split > figure { margin: 0; }
/* Detaljebilledet i split-modulet er et FOTO (2026-09-03, Mikkel: stregtegning
i brun blæk er forkastet). Derfor ingen mix-blend-mode her, det ville gøre
fotoet mørkt. Samme hjørneradius som heroen, så de to billeder hører sammen. */
.plp__copy .cmod--split img { display: block; width: 100%; height: auto;
border-radius: var(--corner-radius-default); }
.plp__copy .cmod--split > div > * { margin: 0; }
.plp__copy .cmod--split > div > * + * { margin-top: 0.95em; }
.plp__copy .cmod--bullets { list-style: none; padding: 0; margin-top: 1.4em; }
.plp__copy .cmod--bullets > li { position: relative; padding-left: 24px; margin: 0; }
.plp__copy .cmod--bullets > li + li { margin-top: 0.9em; }
/* Streg frem for prik: rolige, vandrette markeringer klæder den serif-tunge sats. */
.plp__copy .cmod--bullets > li::before { content: ""; position: absolute; left: 2px;
top: 0.66em; width: 9px; height: 1px; background: var(--color-brand); }
.plp__copy .cmod--bullets > li > strong:first-child { display: block; }
/* Tabellen. Wrapperen scroller, tabellen selv gør ikke, så en bred
sammenligning kan læses på telefon uden at kolonnerne mases sammen. */
.plp__copy .cmod--table { margin-top: 1.6em; overflow-x: auto;
-webkit-overflow-scrolling: touch; }
.plp__copy .cmod--table table { width: 100%; min-width: 460px;
border-collapse: collapse; font-size: 15px; }
.plp__copy .cmod--table th, .plp__copy .cmod--table td {
text-align: left; vertical-align: top; padding: 11px 16px 11px 0;
border-bottom: 1px solid var(--color-line); }
.plp__copy .cmod--table thead th { padding-top: 0; font-weight: 600;
font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase;
color: var(--color-ink-mute); border-bottom-color: var(--color-ink); }
/* Første kolonne er raden's navn og skal kunne skimmes lodret. */
.plp__copy .cmod--table tbody th, .plp__copy .cmod--table td:first-child {
font-weight: 600; color: var(--color-ink); white-space: nowrap; }
.plp__copy .cmod--table tbody tr:last-child th,
.plp__copy .cmod--table tbody tr:last-child td { border-bottom: 0; }
/* Skal stå EFTER grundreglen, ellers vinder den på mobil pga. samme specificitet. */
@media (max-width: 760px) {
.plp__copy { font-size: 15px; }
.plp__about-inner { max-width: none; }
.plp__copy .cmod--split { grid-template-columns: minmax(0, 1fr); gap: 20px; }
.plp__copy > .cmod-hero img { height: clamp(190px, 46vw, 260px); }
.plp__copy .cmod--table table { font-size: 14px; }
.plp__copy .cmod--table th, .plp__copy .cmod--table td { padding-right: 12px; }
}
/* Ligger inde i .plp__about-inner, så bredden og centreringen kommer derfra.
Ingen egen bundpolstring: båndets padding-block afslutter blokken. */
.plp__faq { max-width: none; margin-top: clamp(32px, 4vw, 56px); }
.plp__faq-title { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; color: var(--color-ink); }
.plp__faq-list { margin-top: 16px; border-top: 1px solid var(--color-line); }
.plp__faq-item { border-bottom: 1px solid var(--color-line); }
.plp__faq-q { cursor: pointer; list-style: none; padding: 16px 32px 16px 0; position: relative; font-size: 16px; font-weight: 500; color: var(--color-ink); }
.plp__faq-q::-webkit-details-marker { display: none; }
.plp__faq-q::after { content: "+"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%); font-size: 20px; line-height: 1; color: var(--color-ink-mute); }
.plp__faq-item[open] .plp__faq-q::after { content: "−"; }
.plp__faq-a { padding: 0 32px 20px 0; font-size: 15px; line-height: 1.65; color: var(--color-ink-soft); }
.plp__faq-a > * + * { margin-top: 0.8em; }
/* END_SECTION:collection */
/* START_SECTION:collections (INDEX:8) */
/* Samme sidekant som gitteret, heroen og filterbaren overalt ellers. Uden den
lå indholdet klods op ad vinduets kant og flugtede ikke med noget. */
.cats { padding-inline: var(--tile-inset); padding-bottom: clamp(56px, 8vw, 96px); background: var(--color-paper); }
.cats__head { padding-block: clamp(28px, 4vw, 48px) clamp(24px, 3vw, 40px); }
.cats__crumbs { font-family: var(--font-primary--family); font-weight: 600;
font-size: 10px; letter-spacing: var(--tracking-ui); text-transform: uppercase; color: var(--color-ink-mute); }
.cats__crumbs a { color: inherit; background-image: none; }
.cats__crumbs a:hover { color: var(--color-ink); }
.cats__crumbs span { margin: 0 8px; }
.cats__crumbs span:last-child { margin-right: 0; color: var(--color-ink-soft); }
.cats__title {
margin: 14px 0 0;
font-size: clamp(1.375rem, 3.1vw, 2.356rem);
line-height: 0.95;
color: var(--color-ink);
}
.cats__intro { margin: 14px 0 0; max-width: 52ch; font-size: 15px; line-height: 1.5; color: var(--color-ink-soft); }
.cats__grid { display: grid; grid-template-columns: 1fr; gap: clamp(28px, 3vw, 40px); }
@media (min-width: 700px) { .cats__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1180px) { .cats__grid { grid-template-columns: repeat(3, 1fr); } }
.cats__card { display: flex; flex-direction: column; min-width: 0; }
.cats__media {
position: relative;
display: block;
aspect-ratio: 3 / 2;
overflow: hidden;
border-radius: var(--corner-radius-default);
background: var(--color-bg-soft);
background-image: none;
isolation: isolate;
}
.cats__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2;
transition: transform 600ms cubic-bezier(0.2, 0, 0.2, 1); }
.cats__media:hover img { transform: scale(1.04); }
.cats__tint { position: absolute; inset: 0; z-index: -1;
background: linear-gradient(0deg, rgba(6,4,3,0.78) 0%, rgba(6,4,3,0.3) 45%, rgba(6,4,3,0.05) 100%); }
.cats__label { position: absolute; inset-inline: 0; bottom: 0; display: flex; align-items: baseline;
gap: 12px; padding: 18px 20px; }
.cats__name {
font-family: var(--font-display--family);
font-weight: var(--font-display--weight);
font-size: clamp(1.3rem, 2vw, 1.8rem);
line-height: 1;
letter-spacing: var(--tracking-display);
text-transform: uppercase;
color: var(--color-background);
}
.cats__count { font-size: 12px; color: rgba(244,234,217,0.7); white-space: nowrap; }
/* Kategori uden bannerfil: en ren flade i stedet for et laant foto.
Navnet staar paa fuld daekning, saa det skal ikke bruge den lyse tekstfarve
der hoerer til et moerkt billede. */
.cats__media--ink { background: var(--color-black); }
.cats__media--ink .cats__name { color: var(--color-background); }
.cats__media--ink .cats__count { color: rgba(249,243,239,0.72); }
.cats__media--sand { background: var(--color-sand); }
.cats__media--blush { background: var(--color-blush); }
.cats__media--lime { background: var(--color-lime); }
.cats__media--soft { background: var(--color-bg-soft); }
.cats__media--sand .cats__name,
.cats__media--blush .cats__name,
.cats__media--lime .cats__name,
.cats__media--soft .cats__name { color: var(--color-ink); }
.cats__media--sand .cats__count,
.cats__media--blush .cats__count,
.cats__media--lime .cats__count,
.cats__media--soft .cats__count { color: var(--color-ink-mute); }
.cats__body { padding-top: 14px; }
.cats__tagline { margin: 0; font-size: 14px; line-height: 1.5; color: var(--color-ink-soft); }
/* Hylderne som en tæt, læsbar liste. Prikkerne står MELLEM navnene og ikke foran,
så rækken læses som én linje tekst i stedet for som otte punkter under hinanden. */
.cats__shelves { display: flex; flex-wrap: wrap; list-style: none; margin: 12px 0 0; padding: 0; }
.cats__shelves li { display: flex; align-items: center; }
.cats__shelves li:not(:last-child)::after {
content: "·";
margin: 0 8px;
color: var(--color-ink-mute);
opacity: 0.6;
}
.cats__shelves a {
font-size: 13px;
line-height: 1.9;
color: var(--color-ink-soft);
background-image: none;
text-underline-offset: 3px;
}
.cats__shelves a:hover { color: var(--color-ink); text-decoration: underline; }
.cats__all {
display: inline-block;
margin-top: 14px;
font-size: 13px;
font-weight: 500;
color: var(--color-ink);
background-image: none;
text-decoration: underline;
text-underline-offset: 4px;
}
.cats__all:hover { color: var(--color-plum); }
/* END_SECTION:collections */
/* START_SECTION:contact (INDEX:9) */
/* Samme regel som brands/profil: cream er headerens, siden selv er hvid. */
.kontakt { background: var(--color-paper); padding-bottom: clamp(64px, 9vw, 120px); }
.kontakt__head { padding: clamp(16px, 2vw, 28px) var(--tile-inset) 0; }
.kontakt__crumbs {
display: flex;
align-items: center;
gap: 8px;
font-family: var(--font-primary--family);
font-weight: 600;
font-size: 11px;
letter-spacing: var(--tracking-ui);
text-transform: uppercase;
color: var(--color-ink-mute);
}
.kontakt__crumbs a { color: inherit; background-image: none; }
.kontakt__crumbs a:hover { color: var(--color-ink); }
.kontakt__title {
margin: clamp(20px, 2.4vw, 36px) 0 0;
font-family: var(--font-display--family);
font-weight: var(--font-display--weight);
font-size: clamp(2rem, 4vw, 3.4rem);
line-height: 1;
letter-spacing: var(--tracking-display);
text-transform: uppercase;
color: var(--color-ink);
}
.kontakt__intro {
margin: 14px 0 0;
font-size: 15px;
line-height: 1.5;
max-width: 52ch;
color: var(--color-ink-soft);
}
.kontakt__grid {
padding-inline: var(--tile-inset);
margin-top: clamp(28px, 3.6vw, 52px);
display: grid;
grid-template-columns: minmax(0, 560px) minmax(0, 1fr);
gap: clamp(32px, 6vw, 96px);
align-items: start;
}
.kontakt__form { position: relative; display: flex; flex-direction: column; gap: 18px; max-width: 560px; }
.kontakt__felt { display: flex; flex-direction: column; gap: 8px; }
.kontakt__felt label {
font-family: var(--font-primary--family);
font-weight: 600;
font-size: 11px;
letter-spacing: var(--tracking-ui);
text-transform: uppercase;
color: var(--color-ink-mute);
}
.kontakt__felt input,
.kontakt__felt textarea {
border: 1px solid var(--color-line);
background: var(--color-paper);
padding: 12px 14px;
border-radius: var(--corner-radius-default);
font-family: var(--font-primary--family);
font-size: 14px;
color: var(--color-ink);
outline: 0;
transition: border-color var(--transition-base);
}
.kontakt__felt textarea { resize: vertical; min-height: 140px; }
.kontakt__felt input:focus,
.kontakt__felt textarea:focus { border-color: var(--color-ink); }
.kontakt__send {
align-self: flex-start;
background: var(--color-ink);
color: var(--color-paper);
border: 0;
padding: 13px 26px;
border-radius: 0;
font-family: var(--font-primary--family);
font-weight: 600;
font-size: 11px;
letter-spacing: var(--tracking-ui);
text-transform: uppercase;
cursor: pointer;
transition: background-color var(--transition-base);
}
/* UI-accent er husets røde, ikke lime (HEY-DARLING.md). */
.kontakt__send:hover { background: #C03527; }
.kontakt__send:disabled { opacity: 0.6; cursor: default; }
.kontakt__svar {
margin: 0;
padding: 12px 14px;
font-family: var(--font-primary--family);
font-size: 14px;
line-height: 1.5;
color: var(--color-ink);
}
.kontakt__svar:empty { display: none; }
.kontakt__svar.is-ok { background: var(--color-blush); }
.kontakt__svar.is-fejl { border: 1px solid #C03527; color: #C03527; }
/* Honeypot. IKKE display:none — flere bots springer skjulte felter over. Feltet
er i flowet, men flyttet ud af skærmen og ude af tabrunde og a11y-træ. */
.kontakt__faelde { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.kontakt__info { display: flex; flex-direction: column; gap: clamp(24px, 3vw, 40px); max-width: 380px; }
.kontakt__info-blok h2 {
margin: 0 0 8px;
font-family: var(--font-display--family);
font-weight: var(--font-display--weight);
font-size: 15px;
letter-spacing: var(--tracking-display);
text-transform: uppercase;
color: var(--color-ink);
}
.kontakt__info-blok p {
margin: 0;
font-family: var(--font-primary--family);
font-size: 14px;
line-height: 1.6;
color: var(--color-ink-soft);
}
.kontakt__info-blok a { color: inherit; background-image: none; }
.kontakt__info-blok a:hover { color: var(--color-ink); text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 899px) {
.kontakt__grid { grid-template-columns: 1fr; }
.kontakt__info { max-width: 560px; }
}
/* END_SECTION:contact */
/* START_SECTION:custom-section (INDEX:10) */
.custom-section {
position: relative;
overflow: hidden;
width: 100%;
}
.custom-section__background {
position: absolute;
width: 100%;
height: 100%;
z-index: -1;
overflow: hidden;
}
.custom-section__background img {
position: absolute;
width: 100%;
height: auto;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.custom-section__content {
display: grid;
grid-template-columns: var(--content-grid);
}
.custom-section__content > * {
grid-column: 2;
}
/* END_SECTION:custom-section */
/* START_SECTION:faktaside (INDEX:11) */
/* Sidens egne tre elementer. Alt andet arves af .plp__copy. */
.faktaside { background-color: var(--color-paper); }
.faktaside__sti {
display: flex;
gap: 8px;
align-items: center;
font-size: 12px;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--color-ink-mute);
margin-bottom: 18px;
}
.faktaside__sti a { color: inherit; text-decoration: none; }
.faktaside__sti a:hover { color: var(--color-ink); text-decoration: underline; text-underline-offset: 2px; }
.faktaside__titel { margin-top: 0; }
.faktaside__lede {
font-size: 17px;
line-height: 1.6;
color: var(--color-ink-mute);
max-width: 62ch;
margin: 0.6em 0 0;
}
/* Adskilt fra brødteksten, men ikke som en fodnote: linjen er et tillidssignal og
bliver citeret, så den skal kunne læses. */
.faktaside__opdateret {
margin-top: clamp(36px, 4vw, 56px);
padding-top: 18px;
border-top: 1px solid var(--color-line, rgba(30, 29, 28, 0.14));
font-size: 13px;
color: var(--color-ink-mute);
}
/* END_SECTION:faktaside */
/* START_SECTION:footer (INDEX:12) */
/* Svar fra nyhedsbrevs-formularen (snippets/nyhedsbrev-form.liquid). */
.site-footer .nyhedsbrev-status { margin: 8px 0 0; font-size: 13px; line-height: 1.4; }
.site-footer .nyhedsbrev-status.is-fejl { color: #C03527; }
.visually-hidden {
position: absolute;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden;
clip: rect(0,0,0,0);
white-space: nowrap;
border: 0;
}
.site-footer {
margin-top: 96px;
border-top: 1px solid var(--color-line);
background-color: var(--color-paper);
color: var(--color-ink);
}
.site-footer a {
color: inherit;
background-image: none;
}
.site-footer__inner {
max-width: 1600px;
margin: 0 auto;
padding: clamp(48px, 6vw, 80px) clamp(16px, 3vw, 40px) 48px;
display: grid;
grid-template-columns: 1.5fr 1fr 1fr 1fr;
gap: clamp(32px, 5vw, 64px);
}
/* Brand column */
.site-footer__brand-col { display: flex; flex-direction: column; gap: 18px; }
.site-footer__brand {
display: inline-flex;
align-items: center;
gap: 12px;
background-image: none;
}
.site-footer__brand-wordmark {
font-family: var(--font-display--family);
font-weight: var(--font-display--weight);
font-size: 26px;
line-height: 1;
letter-spacing: var(--tracking-display);
text-transform: uppercase;
color: var(--color-ink);
}
.site-footer__brand-dot {
display: inline-block;
width: 0.17em;
height: 0.17em;
margin-inline: 0.1em;
border-radius: var(--corner-radius-full);
background: currentColor;
vertical-align: 0.28em;
}
.site-footer__tagline {
font-family: var(--font-primary--family);
font-size: 14px;
line-height: 1.6;
max-width: 38ch;
color: var(--color-ink-soft);
margin: 0;
}
/* Newsletter */
.site-footer__newsletter-wrap { margin-top: 8px; }
/* Kvitteringen (ring/hak fra snippets/nyhedsbrev-form.liquid) centreres over
formularens bredde, ikke hele kolonnens. Farven er ink, ikke kolonnens graa. */
.site-footer .nyhedsbrev { max-width: 380px; }
.site-footer .nyhedsbrev__kvit { color: var(--color-ink); }
.site-footer__newsletter-eyebrow {
font-family: var(--font-primary--family);
font-weight: 600;
font-size: 11px;
text-transform: uppercase;
letter-spacing: var(--tracking-ui);
color: var(--color-ink-mute);
margin-bottom: 10px;
}
/* flex-wrap + min-width:0 er ikke pynt. Et har en intrinsisk
minimumsbredde (size=20 ~ 180px) og skrumper derfor ikke af sig selv, saa paa
390px skubbede knappen 46px ud over skaermkanten og gav HELE sitet vandret
scroll. Maalt paa live 2026-08-25. */
.site-footer__newsletter {
display: flex;
flex-wrap: wrap;
gap: 8px;
max-width: 380px;
}
.site-footer__newsletter input[type="email"] {
flex: 1 1 190px;
min-width: 0;
border: 1px solid var(--color-line);
background-color: var(--color-bg);
padding: 10px 14px;
border-radius: var(--corner-radius-default);
font-family: var(--font-primary--family);
font-size: 14px;
color: var(--color-ink);
outline: 0;
transition: border-color var(--transition-base);
}
.site-footer__newsletter input[type="email"]:focus { border-color: var(--color-ink); }
.site-footer__newsletter input::placeholder { color: var(--color-ink-mute); }
.site-footer__newsletter button {
flex: 0 0 auto;
background: var(--color-ink);
color: var(--color-background);
border: 0;
padding: 11px 20px;
border-radius: 0;
font-family: var(--font-primary--family);
font-weight: 600;
font-size: 11px;
letter-spacing: var(--tracking-ui);
text-transform: uppercase;
cursor: pointer;
transition: background-color var(--transition-base);
}
.site-footer__newsletter button:hover { background: var(--color-plum-soft); }
/* Link columns */
.site-footer__col h4 {
font-family: var(--font-primary--family);
font-size: 11px;
font-weight: 600;
letter-spacing: var(--tracking-ui);
text-transform: uppercase;
color: var(--color-ink);
margin: 0 0 16px;
}
.site-footer__col ul {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 10px;
}
.site-footer__col a {
font-family: var(--font-primary--family);
font-size: 14px;
color: var(--color-ink-soft);
transition: color var(--transition-base);
}
.site-footer__col a:hover { color: var(--color-ink); }
/* Trykfladen, ikke tegningen. Linkene staar 18px hoeje med 10px imellem, og
paa en telefon er 18px en lille ting at ramme. `::before` laegger en usynlig
flade 5px op og ned, saa fladen bliver 28px = raekkens fulde skridt: intet
flytter sig, og to naboer kan ikke overlappe hinanden.
`.link-underline` er allerede `position: relative`, saa ankeret er der. */
.site-footer__col a::before {
content: "";
position: absolute;
inset: -5px 0;
}
/* Bottom row */
.site-footer__bottom { border-top: 1px solid var(--color-line-soft); }
.site-footer__bottom-inner {
max-width: 1600px;
margin: 0 auto;
padding: 24px clamp(16px, 3vw, 40px);
display: flex;
justify-content: space-between;
align-items: center;
gap: 24px;
flex-wrap: wrap;
font-family: var(--font-primary--family);
font-size: 12px;
color: var(--color-ink-mute);
}
.site-footer__contact a { color: inherit; }
.site-footer__contact a:hover { color: var(--color-ink); text-decoration: underline; text-underline-offset: 4px; }
.site-footer__payments { display: flex; gap: 8px; align-items: center; }
.site-footer__payments svg { height: 20px; width: auto; }
@media (max-width: 989px) {
.site-footer__inner { grid-template-columns: 1fr 1fr; }
.site-footer__brand-col { grid-column: 1 / -1; }
}
@media (max-width: 549px) {
.site-footer__inner { grid-template-columns: 1fr; }
}
/* END_SECTION:footer */
/* START_SECTION:header (INDEX:15) */
/* ================== Site header ================== */
/* Make the whole header section-group sticky (the wrapper's containing block is
, so it pins across the entire page). Putting sticky on .site-header alone
fails because its parent wrapper is only header-height tall, so it scrolls away.
Det NEGATIVE top er hele tricket bag "servicebåndet bliver i toppen": gruppen
klæber først når dens overkant er nået 36px op over skærmkanten, altså præcis når
båndet med fri fragt er rullet ud af syne. Så står hovedbjælken og kategorierne
limet til kant 0 resten af vejen ned, og båndet kommer først til syne igen når man
er helt oppe. Det koster ingen JS og kan ikke komme ud af trit med rulningen. */
.shopify-section-group-header-group {
position: sticky;
top: calc(-1 * var(--sticky-utility-height));
z-index: 50;
}
.site-header {
position: relative;
z-index: 50;
/* Cream, ikke hvid. Headeren staar paa samme flade som resten af siden, saa
der ikke er en kant mellem header og indhold. Kun produktkortene er hvide,
fordi produktbillederne har hvid baggrund. Mikkel 2026-08-25. */
background-color: var(--color-background);
color: var(--color-ink);
}
/* ---- Forsiden: headeren flyder sammen med canvasset ---- */
/* Paa forsiden staar hovedbjaelken og kategorimenuen paa INGENTING, saa den
hvide flade loeber uafbrudt fra toppen af siden og ned, og forside-figuren
kan stige op igennem menuen. Delelinjen under menuen er vaek af samme grund:
en streg dér ville netop tegne den kant vi forsoeger at fjerne.
Kampagnebaandet i toppen beholder sin lime — det er ikke en flade der skal
forsvinde, det er et element.
Stakken passer sig selv: header-gruppen er sticky med z-index 50, og
canvas-sektionen har z-index auto, saa figuren tegnes UNDER headeren. Naar
baggrunden er gennemsigtig, ses hun alligevel — men menuteksten ligger
ovenpaa hende og bliver derfor ved med at vaere laesbar dér hvor kasketten
skyder op mellem DUFT og KROP. Det er hele grunden til at hun ligger under
og ikke over.
Paa scroll fader fladen ind igen (klassen saettes af scriptet nederst i
sektionen), og den lukker sig hen over kasketten. */
.site-header--flyder,
.site-header--flyder .site-header__main,
.site-header--flyder .site-header__cat-nav {
background-color: transparent;
}
.site-header--flyder .site-header__cat-nav {
border-bottom-color: transparent;
}
.site-header--flyder,
.site-header--flyder .site-header__main,
.site-header--flyder .site-header__cat-nav {
transition: background-color 260ms ease, border-color 260ms ease;
}
.site-header--flyder.er-rullet .site-header__main,
.site-header--flyder.er-rullet .site-header__cat-nav {
background-color: var(--color-background);
}
.site-header--flyder.er-rullet .site-header__cat-nav {
border-bottom-color: var(--color-line);
}
@media (prefers-reduced-motion: reduce) {
.site-header--flyder,
.site-header--flyder .site-header__main,
.site-header--flyder .site-header__cat-nav { transition: none; }
}
/* --- Kampagnebaand (lime) --- */
/* Baandet er limen med en UDTONING i hver ende mod #e2e19c, og et
lag korn ovenpaa (Mikkel, 2026-08-27). Overgangen er med vilje rodet: stoejen
varierer naesten kun lodret, forvridningen flytter hver raekke til siden efter
den, og saa er hele kanten sloeret ud. Det er tre lag paa ÉN flade — ingen
ekstra markup, ingen filer at hente, og teksten ligger i et barn og bliver
derfor liggende ovenpaa det hele. Raekkefoelgen er korn foerst (oeverst),
saa venstre og hoejre vask, og til sidst farven. */
.site-header__utility {
/* Midterfarven er tilbage paa --color-accent, butikkens egen lime #E1FFAE.
Den var kortvarigt #9CCE73 og derefter #CCF09C (30 % af vejen derhen);
Mikkel kasserede begge 2026-08-27. Skal den proeves igen, saa lad
token'et vaere og skriv en ren hex HER: --color-accent bruges ogsaa af
forsidens hero, editorial-feltet, why-feltet og concierge, saa en
aendring af token'et maler halvdelen af forsiden om. */
background-color: var(--color-accent);
background-image:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.26'/%3E%3C/svg%3E"),
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='40' viewBox='0 0 400 40' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='g' gradientUnits='userSpaceOnUse' x1='0' y1='0' x2='400' y2='0'%3E%3Cstop offset='0' stop-color='%23e2e19c' stop-opacity='1'/%3E%3Cstop offset='0.16' stop-color='%23e2e19c' stop-opacity='0.9'/%3E%3Cstop offset='0.48' stop-color='%23e2e19c' stop-opacity='0.32'/%3E%3Cstop offset='1' stop-color='%23e2e19c' stop-opacity='0'/%3E%3C/linearGradient%3E%3Cfilter id='f' x='-30%25' y='-30%25' width='160%25' height='160%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.007 0.16' numOctaves='3' seed='11' result='t'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='t' scale='110' xChannelSelector='R' yChannelSelector='G'/%3E%3CfeGaussianBlur stdDeviation='6'/%3E%3C/filter%3E%3C/defs%3E%3Crect x='-80' y='-25' width='560' height='90' fill='url(%23g)' filter='url(%23f)'/%3E%3C/svg%3E"),
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='40' viewBox='0 0 400 40' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='g' gradientUnits='userSpaceOnUse' x1='400' y1='0' x2='0' y2='0'%3E%3Cstop offset='0' stop-color='%23e2e19c' stop-opacity='1'/%3E%3Cstop offset='0.16' stop-color='%23e2e19c' stop-opacity='0.9'/%3E%3Cstop offset='0.48' stop-color='%23e2e19c' stop-opacity='0.32'/%3E%3Cstop offset='1' stop-color='%23e2e19c' stop-opacity='0'/%3E%3C/linearGradient%3E%3Cfilter id='f' x='-30%25' y='-30%25' width='160%25' height='160%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.007 0.16' numOctaves='3' seed='11' result='t'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='t' scale='110' xChannelSelector='R' yChannelSelector='G'/%3E%3CfeGaussianBlur stdDeviation='6'/%3E%3C/filter%3E%3C/defs%3E%3Crect x='-80' y='-25' width='560' height='90' fill='url(%23g)' filter='url(%23f)'/%3E%3C/svg%3E");
background-repeat: repeat, no-repeat, no-repeat;
background-position: 0 0, left center, right center;
background-size: 200px 200px, 14% 100%, 14% 100%;
color: var(--color-ink);
height: var(--sticky-utility-height);
display: flex;
align-items: center;
}
.site-header__utility-inner {
width: 100%;
max-width: var(--page-max);
margin: 0 auto;
padding-inline: var(--page-gutter);
display: flex;
justify-content: center;
align-items: center;
}
.site-header__promo {
font-family: var(--font-display--family);
font-weight: var(--weight-heavy);
font-size: 11px;
letter-spacing: var(--tracking-label);
text-transform: uppercase;
color: inherit;
background-image: none;
text-align: center;
}
a.site-header__promo:hover { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 549px) {
.site-header__promo { font-size: 10px; }
}
/* --- Hovedbjaelke --- */
/* Tre spor med grid: 1fr auto 1fr. Ordmaerket staar i den geometriske midte
uanset hvor bredt soegefeltet og ikonrækken bliver. Med flex + margin-auto
ville midten vandre saa snart kurven fik et badge. */
.site-header__main {
--header-control-height: 40px;
height: var(--sticky-main-height);
display: flex;
align-items: center;
background-color: var(--color-background);
}
.site-header__main-inner {
width: 100%;
max-width: var(--page-max);
margin: 0 auto;
padding-inline: var(--page-gutter);
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: 16px;
}
.site-header__mobile-btn {
display: none;
width: 40px;
height: 40px;
align-items: center;
justify-content: center;
background: transparent;
border: 0;
color: var(--color-ink);
cursor: pointer;
grid-column: 1;
justify-self: start;
}
@media (max-width: 989px) {
.site-header__mobile-btn { display: inline-flex; }
}
/* --- Ordmaerke --- */
.site-header__brand {
grid-column: 2;
justify-self: center;
display: inline-flex;
align-items: center;
color: var(--color-ink);
background-image: none;
text-decoration: none;
}
.site-header__brand-wordmark {
font-family: var(--font-display--family);
font-weight: var(--weight-logo);
font-size: clamp(20px, 2.2vw, 30px);
line-height: 1;
letter-spacing: var(--tracking-display);
text-transform: uppercase;
white-space: nowrap;
}
/* Prikken er et element og ikke tegnet ".". Et punktum sidder paa grundlinjen;
Nickis prik staar midt i versalhoejden. vertical-align loefter underkanten
saa centrum lander paa 0.365em, altsaa halv versalhoejde — tallet er derfor
0.365 minus den halve prik og skal regnes om hver gang stoerrelsen aendres.
Var 0.17em; Mikkel bad 2026-08-31 om en stoerre prik. */
.site-header__brand-dot {
display: inline-block;
width: 0.26em;
height: 0.26em;
margin-inline: 0.1em;
border-radius: var(--corner-radius-full);
background: currentColor;
vertical-align: 0.235em;
}
/* --- Soegning --- */
/* Kun en underlinje. Ingen ramme, ingen fyld, intet forstoerrelsesglas. */
.site-header__search {
position: relative;
grid-column: 1;
justify-self: start;
width: 100%;
max-width: 360px;
min-width: 0;
}
@media (max-width: 989px) { .site-header__search { display: none; } }
.site-header__search-form {
display: flex;
align-items: center;
height: var(--header-control-height);
border-bottom: 1px solid var(--color-ink);
transition: border-color var(--transition-base);
}
.site-header__search-form:focus-within { border-color: var(--color-ink); }
.site-header__search input {
flex: 1;
min-width: 0;
background: transparent;
border: 0;
outline: 0;
padding: 0;
font-family: var(--font-display--family);
font-weight: var(--font-display--weight);
font-size: 12px;
letter-spacing: var(--tracking-label);
text-transform: uppercase;
color: var(--color-ink);
}
.site-header__search input::placeholder { color: var(--color-ink); opacity: 1; }
/* Aktiv soegning ekkoes tilbage: vist daempet, ryddes ved fokus. */
.site-header__search input.is-prefilled { color: var(--color-ink-mute); }
.site-header__search-clear {
background: transparent;
border: 0;
color: var(--color-ink-mute);
cursor: pointer;
padding: 6px;
}
.site-header__search-clear:hover { color: var(--color-ink); }
.site-header__search-dropdown {
position: absolute;
inset-inline: 0;
top: calc(100% + 8px);
display: none;
background: var(--color-paper);
border: 1px solid var(--color-line);
border-radius: var(--corner-radius-default);
padding: 12px;
box-shadow: 0 24px 60px -20px rgba(15,11,9,0.18);
max-height: 480px;
overflow-y: auto;
z-index: 60;
}
/* Attributten og IKKE klassen: `data-open` saettes af theme.js paa det
`[data-header-search]`-element motoren koerer paa, og det er nu to
forskellige elementer — desktop-feltet (.site-header__search) og skuffens
(.site-header__mobile-soeg). Bandt reglen sig til desktop-klassen, stod
skuffens forslag i DOM'en med `display: none` og kom aldrig frem. */
[data-header-search][data-open="true"] .site-header__search-dropdown { display: block; animation: fadeIn 0.18s ease-out both; }
.site-header__search-dropdown-inner p { margin: 0; }
.site-header__search-empty {
padding: 12px 16px;
color: var(--color-ink-mute);
font-size: 14px;
}
/* Predictive search suggestions */
.site-header__search-results { list-style: none; margin: 0; padding: 0; }
.site-header__search-result {
display: flex;
align-items: center;
gap: 12px;
padding: 8px 10px;
border-radius: var(--corner-radius-default);
color: var(--color-ink);
background-image: none;
}
.site-header__search-result:hover,
.site-header__search-result.is-active { background-color: var(--color-bg-soft); }
.site-header__search-result-thumb {
width: 48px;
height: 48px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
border-radius: var(--corner-radius-default);
border: 1px solid var(--color-line-soft);
background: var(--color-paper);
}
.site-header__search-result-thumb img { width: 100%; height: 100%; object-fit: contain; padding: 4px; box-sizing: border-box; }
.site-header__search-result-text { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 1px; }
.site-header__search-result-vendor {
font-size: 10px;
font-weight: 500;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--color-ink-mute);
}
.site-header__search-result-title {
font-size: 13px;
color: var(--color-ink);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.site-header__search-result-price { font-size: 13px; font-weight: 600; color: var(--color-ink); flex-shrink: 0; }
.site-header__search-all {
display: block;
margin-top: 6px;
padding: 10px;
text-align: center;
font-size: 12px;
font-weight: 500;
color: var(--color-ink);
background-color: var(--color-bg-soft);
border-radius: var(--corner-radius-default);
background-image: none;
}
.site-header__search-all:hover { background-color: var(--color-line-soft); }
/* Shortcuts: "tør hud" or a brand name is answered with the filtered page, not with
six products the shopper then has to narrow down by hand. */
.site-header__search-shortcuts { display: flex; flex-direction: column; gap: 4px; padding-bottom: 8px; margin-bottom: 6px; border-bottom: 1px solid var(--color-line-soft); }
.site-header__search-shortcut {
display: flex; align-items: center; gap: 6px; padding: 8px 10px;
border-radius: var(--corner-radius-default); font-size: 13px; font-weight: 500;
color: var(--color-ink); background-color: var(--color-bg-soft); background-image: none;
}
.site-header__search-shortcut::after { content: "→"; margin-left: auto; color: var(--color-ink-mute); }
.site-header__search-shortcut:hover { background-color: var(--color-line-soft); }
.site-header__search-shortcut span { color: var(--color-ink-mute); font-weight: 400; }
/* --- Ikonraekken (valuta, konto, kurv) --- */
.site-header__icons {
grid-column: 3;
justify-self: end;
display: flex;
align-items: center;
gap: 22px;
}
.site-header__action,
.site-header__cart {
display: inline-flex;
align-items: center;
gap: 7px;
height: var(--header-control-height);
color: var(--color-ink-mute);
background-image: none;
transition: color var(--transition-base), background-color var(--transition-base);
position: relative;
}
.site-header__action--static { cursor: default; }
a.site-header__action:hover { color: var(--color-ink); }
/* Logget ind: fyldt person-hoved + fuld ink, og labelen er e-mail-prefixet
(sat af theme.js' syncHeaderState) — man skal kunne SE at man er inde. */
.site-header__action.is-ind { color: var(--color-ink); }
.site-header__action.is-ind svg circle { fill: currentColor; }
[data-likes-badge][hidden] { display: none; }
.site-header__action-label {
font-family: var(--font-display--family);
font-weight: var(--weight-heavy);
font-size: 12px;
letter-spacing: var(--tracking-label);
text-transform: uppercase;
}
/* Soegeknappen er mobilens eneste; paa desktop staar feltet fremme i headeren. */
/* `background: none` er ikke pynt: et