/* butik — bold colour band, chip menu, tile grid. System fonts only, no external requests. */
:root {
  --primary: #b5325b;
  --primary-dark: #852543;
  --primary-soft: #f6eaed;
  --on-primary: #ffffff;
  --accent: #b5325b;
  --bg: #ffffff;
  --tile: #f6f6f4;
  --text: #1a1a1a;
  --muted: #555b61;
  --line: #e3e3df;
  --foot-bg: #1a1a1a;
  --foot-text: #d9d9d4;
  --radius: 14px;
  --gutter: 16px;
  /* The shop column, and with it the varegitter — the one block on this page that places more
     than one thing side by side. Exactly 64rem (1024px) up to 1280, then it opens with the
     screen: 1263px at 1920, 1566px at 2560. The three product cards across therefore grow from
     ~330px wide to ~500px instead of staying a fixed strip. */
  --max: clamp(64rem, 28rem + 40vw, 84rem);
}
@media (prefers-color-scheme: dark) {
  :root {
    --primary-soft: #3a1d26;
    --accent: #d35f83;
    --bg: #131313;
    --tile: #1f1f1f;
    --text: #f0f0ec;
    --muted: #b0b3b8;
    --line: #333;
    --foot-bg: #0c0c0c;
    --foot-text: #b8b8b2;
  }
}
*, *::before, *::after { box-sizing: border-box; }
/* Fluid root. Every rem below — the type ladder, the tile padding, the 42rem prose measure,
   the basket's 44rem column — rides this single value, so the shop grows on a big monitor
   instead of rendering identically at 1280, 1920 and 2560.
     * up to a 1280px-wide viewport it is exactly 1rem, i.e. the visitor's own browser default
       (usually 16px). A phone at 360, a tablet at 768 and a laptop at 1280 therefore render
       exactly what they rendered before this rule existed — to the pixel; the basket still
       fits a 360px phone, and the published 1280 screenshot on /eksempler/ is unchanged.
     * above it the root climbs linearly: 17.66px at 1920 and 19.35px at 2560, where body text
       lands at 20.56px against 17.00px today.
   rem inside a font-size on the root element means the INITIAL root size, not a circular
   reference, so a visitor who has set a 20px browser default keeps all of that increase.
   Scaling the root rather than every rule keeps this family's proportions: the 2.16 h1/body
   ratio test/family-identity.test.cjs pins is unchanged at every width, and the prose blocks
   capped in rem keep their ~75-character measure rather than being stretched with the window. */
html {
  -webkit-text-size-adjust: 100%;
  font-size: clamp(1rem, 0.787rem + 0.264vw, 1.24rem);
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.5;
  overflow-x: hidden;
}
img, svg { max-width: 100%; height: auto; }
a { color: var(--accent); }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.skip { position: absolute; left: -999px; top: 0; background: var(--primary); color: var(--on-primary); padding: .5rem 1rem; z-index: 10; }
.skip:focus { left: var(--gutter); }

/* header: brand pill + chip menu */
.top { border-bottom: 1px solid var(--line); }
.bar { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; padding-top: .75rem; padding-bottom: .75rem; }
.brand { display: inline-flex; align-items: center; gap: .55rem; color: var(--text); text-decoration: none; font-weight: 800; font-size: 1.2rem; margin-right: auto; }
.mark { display: inline-flex; align-items: center; justify-content: center; min-width: 2.3rem; height: 2.3rem; padding: 0 .5rem; border-radius: 999px; background: var(--primary); color: var(--on-primary); font-size: .9rem; font-weight: 800; }
.chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.chips a { text-decoration: none; color: var(--text); background: var(--tile); border: 1px solid var(--line); border-radius: 999px; padding: .35rem .85rem; font-size: .95rem; font-weight: 600; }
.chips a[aria-current="page"] { background: var(--primary); color: var(--on-primary); border-color: var(--primary); }

/* type */
h1, h2, h3 { line-height: 1.15; margin: 0 0 .6rem; overflow-wrap: anywhere; }
h1 { font-size: 2.3rem; font-weight: 900; letter-spacing: -.02em; }
h2 { font-size: 1.5rem; font-weight: 800; }
h3 { font-size: 1.05rem; font-weight: 700; }
p { margin: 0 0 1rem; }
.lead { font-size: 1.2rem; font-weight: 500; }
.hours { font-size: 1rem; opacity: .9; }

/* full-bleed colour band */
.hero { background: var(--primary); color: var(--on-primary); padding: 3rem 0 2.5rem; }
.hero .lead { color: inherit; }
.actions { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.5rem; }
.btn { display: inline-block; background: var(--text); color: var(--bg); padding: .8rem 1.4rem; border-radius: 999px; font-weight: 700; text-decoration: none; }
.hero .btn { background: var(--on-primary); color: var(--primary); }
.hero .btn-light { background: transparent; color: inherit; border: 2px solid currentColor; }
.products .btn, .prose .btn { background: var(--primary); color: var(--on-primary); }
.btn:hover { filter: brightness(1.05); }
.link { font-weight: 700; }
.cta { margin-top: 1.5rem; }
section { padding: 2rem 0; }
.page-head { padding-bottom: .25rem; }
.page-head .lead { color: var(--muted); }

/* tiles: two across even on a phone */
.tiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.tiles li { background: var(--tile); border-radius: var(--radius); padding: 1.1rem 1rem; min-height: 6.5rem; display: flex; flex-direction: column; justify-content: flex-end; border-top: 5px solid var(--primary); }
.tiles h2, .tiles h3 { margin: 0; font-size: 1.05rem; overflow-wrap: anywhere; }
.tiles p { margin: .3rem 0 0; color: var(--muted); font-size: .92rem; }
@media (min-width: 40rem) { .tiles { grid-template-columns: 1fr 1fr 1fr; gap: 1rem; } }
@media (min-width: 60rem) { .tiles { grid-template-columns: 1fr 1fr 1fr 1fr; } }

/* varekatalog: one card per vare, the price a Dane pays (inkl. moms) first, the moms split
   under it. One column on a phone so a long product name never pushes the page sideways. */
.varer { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: .85rem; }
.vare { background: var(--tile); border-radius: var(--radius); padding: 1rem; border-top: 5px solid var(--primary); min-width: 0; }
.vare h2 { margin: 0; font-size: 1.05rem; overflow-wrap: anywhere; }
.vare h2 a { color: inherit; }
/* Front page: the shop leads with the goods, not with the names of the shelves. Same card
   as the catalogue, trimmed to the three facts that decide a visit — what it is, what it
   costs inkl. moms, and whether it is on the shelf right now. */
.vare h3 { margin: 0; font-size: 1.05rem; font-weight: 800; overflow-wrap: anywhere; }
.vare h3 a { color: inherit; }
.varer-forside .vare { display: flex; flex-direction: column; }
.varer-forside .pris { font-size: 1.25rem; }
.varer-forside .lager { margin-top: auto; padding-top: .5rem; color: var(--muted); }
.vare img, .vare-detalje img { display: block; width: 100%; height: auto; border-radius: .5rem; margin-bottom: .6rem; }
.pris { margin: .35rem 0 0; font-weight: 700; font-size: 1.1rem; overflow-wrap: anywhere; }
.pris-stor { font-size: 1.5rem; }
.moms { margin: .1rem 0 0; color: var(--muted); font-size: .88rem; overflow-wrap: anywhere; }
.lager { margin: .25rem 0 0; font-size: .9rem; }
.vare-tekst { margin: .45rem 0 0; color: var(--muted); font-size: .92rem; overflow-wrap: anywhere; }
.vare-detalje { max-width: 34rem; }
.products .vare-detalje .btn-light { background: transparent; color: var(--accent); border: 2px solid currentColor; }
.crumb { margin: 0 0 .4rem; font-size: .92rem; }
.sku { margin: 0; color: var(--muted); font-size: .9rem; }
.varegrupper { margin-top: 2rem; }
.varegrupper h2 { font-size: 1.15rem; }
@media (min-width: 30rem) { .varer { grid-template-columns: 1fr 1fr; } }
@media (min-width: 52rem) { .varer { grid-template-columns: 1fr 1fr 1fr; } }

/* kurv: the basket. Every control here is written into the page by assets/shop.js, so the
   static page has to look finished while it is still empty — and nothing may push the
   layout sideways on a 360 px phone: no fixed widths, long product names wrap. */
button.btn { border: 0; font: inherit; cursor: pointer; }
.kurv-link { display: inline-flex; align-items: center; gap: .35rem; }
/* [hidden] must win over the display below, or an empty basket shows an empty badge */
.kurv-tal[hidden] { display: none; }
.kurv-tal { display: inline-flex; align-items: center; justify-content: center; min-width: 1.35rem; height: 1.35rem; padding: 0 .3rem; border-radius: 999px; background: var(--primary); color: var(--on-primary); font-size: .78rem; font-weight: 800; }
.chips a[aria-current="page"] .kurv-tal { background: var(--on-primary); color: var(--primary); }
.kurv-plads { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; margin: .7rem 0 0; }
.kurv-status { font-size: .9rem; color: var(--muted); }
.kurv-side { padding: 1.25rem 0 2.5rem; }
.kurv-side .wrap { max-width: 44rem; }
.kurv-liste { list-style: none; margin: 0 0 1.25rem; padding: 0; }
.kurv-linje { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .9rem; padding: .85rem 0; border-bottom: 1px solid var(--line); min-width: 0; }
.kurv-navn { flex: 1 1 10rem; min-width: 0; font-weight: 700; overflow-wrap: anywhere; }
.kurv-navn a { color: inherit; }
.kurv-stk { display: inline-flex; align-items: baseline; gap: .4rem; }
.kurv-stk-label { font-size: .85rem; color: var(--muted); }
.kurv-stk-felt { width: 4rem; max-width: 100%; padding: .35rem .4rem; font: inherit; border: 1px solid var(--line); border-radius: .4rem; background: var(--bg); color: var(--text); }
.kurv-stykpris { font-size: .85rem; color: var(--muted); }
.kurv-linjepris { margin-left: auto; font-weight: 700; white-space: nowrap; }
.kurv-fjern { display: inline-flex; align-items: center; justify-content: center; min-height: 2.25rem; padding: .35rem .8rem; border: 1px solid var(--line); border-radius: .5rem; background: var(--bg); font: inherit; font-size: .88rem; line-height: 1.2; color: var(--muted); cursor: pointer; }
.kurv-fjern:hover { border-color: var(--text); color: var(--text); }
.kurv-fjern:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.kurv-tom { color: var(--muted); }
.kurv-noscript { background: var(--tile); border-radius: var(--radius); padding: .85rem 1rem; }
.kurv-sum { width: 100%; max-width: 26rem; border-collapse: collapse; margin: 0 0 .75rem; }
.kurv-sum th { text-align: left; font-weight: 400; padding: .35rem 0; }
.kurv-sum td { text-align: right; padding: .35rem 0; white-space: nowrap; }
.kurv-momslinje th, .kurv-momslinje td { color: var(--muted); font-size: .92rem; }
.kurv-ialt th, .kurv-ialt td { font-weight: 800; font-size: 1.2rem; border-top: 2px solid var(--line); padding-top: .55rem; }
.kurv-fragt, .kurv-note { color: var(--muted); font-size: .92rem; max-width: 34rem; }
.kurv-til-betaling { margin: 1.25rem 0 .5rem; }
.kurv-til-betaling .btn[disabled] { background: var(--tile); color: var(--muted); border: 1px solid var(--line); cursor: not-allowed; }
.kurv-skjult { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* about box — the .wrap keeps its own centred max-width so the text starts on the same
   left edge as every other section; the 42rem measure is applied to the children instead.
   (Capping .wrap itself at 42rem dropped the block to x=0 at 1280 while the sections above
   and below it started at x=144.) */
.about-box > * { max-width: 42rem; }
.about-box p { font-size: 1.1rem; }
.about { background: var(--primary-soft); }

/* visit */
.visit-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; max-width: 32rem; }
.visit-list li { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .75rem; padding: .7rem 0; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }
/* The label column is a fixed 9rem because the longest label we ever print, "ÅBNINGSTIDER",
   is ~113 px wide at .8rem uppercase with .08em tracking — it did not fit the old 7rem
   (112 px) column and the li's overflow-wrap:anywhere broke it mid-word at 1280. The label
   itself opts out of that wrapping; only the value beside it may break. */
.label { flex: 0 0 9rem; font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-weight: 700; white-space: nowrap; overflow-wrap: normal; }

/* footer: dark block */
.foot { background: var(--foot-bg); color: var(--foot-text); padding: 2rem 0 2.5rem; margin-top: 1rem; font-size: .95rem; }
.foot-grid { display: grid; gap: 1rem; }
.foot p { margin: 0 0 .25rem; }
.foot-name { font-weight: 800; color: #ffffff; font-size: 1.05rem; }
.madeby { font-size: .82rem; opacity: .8; align-self: end; }
.foot-links { margin-top: .6rem; }
.foot-links a { color: var(--foot-text); font-weight: 700; }
@media (min-width: 40rem) { .foot-grid { grid-template-columns: 1fr auto; align-items: end; } }

/* Virksomhedsoplysninger — who the seller is. Required for this family: a stranger who puts
   a card number into a webshop has to be able to see whose shop it is. Sized in rem so it
   rides the fluid root font-size at the top of this file and grows with the shop column
   from 1280 to 2560. The rows are flex, exactly like .visit-list, so the key drops above
   its value on a phone without a media query. */
.vo-list { max-width: 46rem; border-top: 1px solid var(--line); }
.vo-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .75rem; margin: 0; padding: .8rem 0; border-bottom: 1px solid var(--line); }
.vo-key { flex: 0 0 9rem; font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-weight: 700; white-space: nowrap; overflow-wrap: normal; }
.vo-val { flex: 1 1 12rem; overflow-wrap: anywhere; }
/* The "not filled in yet" marker, in this family's tile idiom: the tile background, a dashed
   brand frame and the same radius, so it reads as deliberate rather than broken. */
.udfyldes { display: inline-block; padding: .05rem .6rem; background: var(--tile); border: 2px dashed var(--primary); border-radius: var(--radius); font-weight: 700; color: var(--muted); }
.vo-note { margin: 1.25rem 0 0; max-width: 42rem; color: var(--muted); }
.vo-note a { color: var(--accent); font-weight: 700; }