/* ==========================================================================================
   Certifikatdesigner i förhandsvisningen + designväljaren i konfiguratorn.
   Måtten är PDF:ens: --mm är en millimeter på arket och --pt en typografisk punkt, så att
   varje text står där den står i trycket (stjarna/certificate.py). Baslinjer anges från arkets
   överkant i mm (--b), storlek i pt (--s) och radavstånd i mm (--l).
   ========================================================================================== */

@font-face { font-family: "Cormorant Garamond"; font-weight: 400; font-style: normal; font-display: swap; src: url("/static/fonts/cormorant-garamond-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-weight: 400; font-style: italic; font-display: swap; src: url("/static/fonts/cormorant-garamond-latin-400-italic.woff2") format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-weight: 300; font-style: italic; font-display: swap; src: url("/static/fonts/cormorant-garamond-latin-300-italic.woff2") format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-weight: 500; font-style: italic; font-display: swap; src: url("/static/fonts/cormorant-garamond-latin-500-italic.woff2") format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-weight: 600 700; font-style: normal; font-display: swap; src: url("/static/fonts/cormorant-garamond-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Instrument Serif"; font-weight: 400; font-style: normal; font-display: swap; src: url("/static/fonts/instrument-serif-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Instrument Serif"; font-weight: 400; font-style: italic; font-display: swap; src: url("/static/fonts/instrument-serif-latin-400-italic.woff2") format("woff2"); }
@font-face { font-family: "Bodoni Moda Cert"; font-weight: 400; font-style: italic; font-display: swap; src: url("/static/fonts/bodoni-moda-latin-400-italic.woff2") format("woff2"); }
@font-face { font-family: "Bodoni Moda Cert"; font-weight: 500; font-style: normal; font-display: swap; src: url("/static/fonts/bodoni-moda-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter Cert"; font-weight: 300; font-display: swap; src: url("/static/fonts/inter-latin-300-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter Cert"; font-weight: 400; font-display: swap; src: url("/static/fonts/inter-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter Cert"; font-weight: 600; font-display: swap; src: url("/static/fonts/inter-latin-600-normal.woff2") format("woff2"); }

/* ---------- Gemensamt för alla certifikat ---------- */
.cert > * { --mm: calc(100cqw / 297); --pt: calc(var(--mm) * .3528); }
.cert.liggande { aspect-ratio: 420 / 297; }
.cert.liggande > * { --mm: calc(100cqw / 420); }
.forhand .cert.liggande, .order .bord .cert.liggande { width: 100%; }
.cert { transition: background .5s var(--ui, ease); }
/* cert.js: arket döljs tills designens CSS och sättarens text har kommit första gången (inget ostylat mellanläge).
   Platsen är redan reserverad av aspect-ratio, så inget hoppar när det visas. */
.cert.cert-vantar { visibility: hidden; }

.cert-dekor { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; overflow: visible; }
.cert-dekor .linje, .cert-kartdekor .linje { fill: none; stroke: var(--c-ram, var(--guld)); }
.cert-dekor .fyll { fill: var(--c-ram, var(--guld)); }
.cert-dekor .bak { fill: var(--c-bak, var(--djup)); }
.cert-kartbox { position: relative; }
.cert-kartbox .cert-karta { display: block; width: 100%; height: 100%; margin: 0; }
.cert-kartdekor { position: absolute; pointer-events: none; overflow: visible; z-index: 1; width: auto; height: auto; max-width: none; max-height: none; }
.cert-kartdekor .vaderstreck { font: 600 calc(9 * .3528px) "Cormorant Garamond", serif; font-size: 3.2px; fill: var(--c-ink); }
.cert-bild { position: absolute; z-index: 2; aspect-ratio: 1; border-radius: 50%; transform: translate(-50%, -50%);
  background: #07090f; box-shadow: 0 0 0 var(--bild-glapp, 0) var(--c-bak, transparent), 0 0 0 calc(var(--bild-glapp, 0px) + .12 * var(--mm, 1px)) var(--c-ram, transparent); }
.cert-bild img { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; opacity: 0; transition: opacity .6s; }
.cert-bild.laddad img { opacity: 1; }
.cert-bild::after { content: ""; position: absolute; inset: 0; border-radius: 50%; box-shadow: inset 0 0 0 var(--bild-kant, 0) var(--c-ram, transparent); pointer-events: none; }
.cert-bild-text { display: none; }
.cert-bild[hidden] { display: none; }
.cert-qr { display: none; }
.cert-qr svg { display: block; width: 100%; height: 100%; }
.cert-qr .qr-ljus { fill: var(--c-qr-ljus, #e9edf5); }
.cert-qr .qr-mork { fill: var(--c-qr-mork, #0b1530); }

/* ---------- Måttsystemet: våra fem designer placerar allt som i PDF:en ---------- */
.cert:is(.d-midnatt, .d-papper, .d-linje, .d-skymning, .d-stilla) .cert-ram {
  inset: 0; border: 0; outline: 0; padding: 0; display: block; text-align: center; color: var(--c-text); }
.cert:is(.d-midnatt, .d-papper, .d-linje, .d-skymning, .d-stilla) .cert-ram > :is(p, dl) {
  position: absolute; left: calc(var(--x, 30) * var(--mm)); right: calc(var(--r, 30) * var(--mm)); margin: 0 !important;
  max-width: none; white-space: normal;
  font-size: calc(var(--s, 12) * var(--pt)); line-height: calc(var(--l, calc(var(--s, 12) * .3528)) * var(--mm));
  top: calc((var(--b, 0) - var(--l, calc(var(--s, 12) * .3528)) / 2 - .3 * var(--s, 12) * .3528) * var(--mm)); }
/* Variablerna sätts per design med låg specificitet; reglerna ovan läser dem */
.cert-ram > * { --x: 30; --r: 30; --s: 12; }
.cert:is(.d-midnatt, .d-papper, .d-linje, .d-skymning, .d-stilla) .cert-namn {
  white-space: nowrap; overflow: hidden; font-variation-settings: normal; }
.cert:is(.d-midnatt, .d-papper, .d-linje, .d-skymning, .d-stilla) .cert-qr {
  display: block; position: absolute; width: calc(var(--qr) * var(--mm)); aspect-ratio: 1;
  right: calc(var(--qr-r) * var(--mm)); bottom: calc(var(--qr-b) * var(--mm)); }
.cert:is(.d-midnatt, .d-papper, .d-linje, .d-skymning, .d-stilla) .cert-fot { text-align: left; color: var(--c-dis); }
.cert-ram > .cert-fot { --s: 7; }
.cert:is(.d-midnatt, .d-papper, .d-linje, .d-skymning, .d-stilla) .cert-kartbox {
  position: absolute; left: calc(var(--kx) * var(--mm)); top: calc(var(--ky) * var(--mm));
  width: calc(var(--kw) * var(--mm)); height: calc(var(--kh, var(--kw)) * var(--mm)); margin: 0; }
/* Faktan: kolumnvis som i PDF:en (fyra rader per kolumn) */
.cert:is(.d-midnatt, .d-papper, .d-linje, .d-skymning, .d-stilla) .cert-fakta {
  display: grid; width: auto; text-align: left; gap: 0 calc(var(--gap) * var(--mm));
  grid-template-columns: repeat(2, calc(var(--colw) * var(--mm))); grid-template-rows: repeat(4, auto); grid-auto-flow: column;
  grid-auto-rows: auto; line-height: 1;
  top: calc((var(--b) - .8 * var(--ls) * .3528) * var(--mm)); }
.cert:is(.d-midnatt, .d-papper, .d-linje, .d-skymning, .d-stilla) .cert-fakta > div { min-height: calc(var(--step) * var(--mm)); padding-bottom: calc(1.2 * var(--mm)); box-sizing: border-box; }
.cert:is(.d-midnatt, .d-papper, .d-linje, .d-skymning, .d-stilla) .cert-fakta dd { overflow: hidden; text-overflow: clip; }
.cert:is(.d-midnatt, .d-papper, .d-linje, .d-skymning, .d-stilla) .cert-fakta dt {
  font-size: calc(var(--ls) * var(--pt)); line-height: 1; color: var(--c-dis); }
.cert:is(.d-midnatt, .d-papper, .d-linje, .d-skymning, .d-stilla) .cert-fakta dd {
  font-size: calc(var(--vs) * var(--pt)); line-height: 1.22; color: var(--c-text);
  margin: calc((var(--off) - .8 * var(--vs) * .3528 - .2 * var(--ls) * .3528 - .11 * var(--vs) * .3528) * var(--mm)) 0 0; }

/* ---------- Midnatt ---------- */
.cert.d-midnatt { --c-text: #f3eee2; --c-dis: #a3a9bd; --c-ram: #c9a86a; --c-bak: #0b1022;
  background: radial-gradient(106% 75% at 50% 22%, #141c3c, #0b1022 60%, #080c1a); }
.d-midnatt .cert-ram { --qr: 20; --qr-r: 24; --qr-b: 24; }
.d-midnatt .cert-ram::before, .d-midnatt .cert-ram::after { content: ""; position: absolute; pointer-events: none; border: solid var(--c-ram); }
.d-midnatt .cert-ram::before { inset: calc(14 * var(--mm)); border-width: calc(1.2 * var(--pt)); }
.d-midnatt .cert-ram::after { inset: calc(17 * var(--mm)); border-width: calc(.4 * var(--pt)); }
.d-midnatt .cert-brand { --b: 40; --s: 13; font-family: var(--cert-serif); font-style: italic; color: var(--c-ram); }
.d-midnatt .cert-titel { --b: 60; --s: 38; font-family: var(--cert-serif); font-weight: 400; }
.d-midnatt .cert-titel::after { content: ""; position: absolute; left: 50%; top: calc(100% + 2.9 * var(--mm)); width: calc(60 * var(--mm)); height: calc(3.6 * var(--mm));
  transform: translateX(-50%); background:
  linear-gradient(var(--c-ram), var(--c-ram)) left center / calc(26 * var(--mm)) calc(.5 * var(--pt)) no-repeat,
  linear-gradient(var(--c-ram), var(--c-ram)) right center / calc(26 * var(--mm)) calc(.5 * var(--pt)) no-repeat,
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-1 -1 2 2'%3E%3Cpath d='M0-1L.22-.22 1 0 .22.22 0 1-.22.22-1 0-.22-.22Z' fill='%23c9a86a'/%3E%3C/svg%3E") center / auto 100% no-repeat; opacity: .85; }
.d-midnatt .cert-fore { --b: 79; --s: 17; --l: 8; --x: 45; --r: 45; font-family: var(--cert-serif); font-style: italic; color: var(--c-dis); }
.d-midnatt .cert-namn { --b: 100; --s: 60; font-family: var(--cert-serif); font-weight: 600; }
.d-midnatt .cert-efter { --b: 113; --s: 16; font-family: var(--cert-serif); }
.d-midnatt .cert-kartbox { --kx: 73.5; --ky: 123; --kw: 150; }
.d-midnatt .cert-karta { background: #0b1022; outline: calc(.5 * var(--pt)) solid var(--c-ram); }
.d-midnatt .cert-fakta { --b: 285; --x: 73.5; --r: 73.5; --colw: 69; --gap: 12; --step: 12; --ls: 8; --vs: 12.5; --off: 5.35;
  font-family: var(--cert-sans); }
.d-midnatt .cert-fakta dd { font-family: var(--cert-serif); }
.d-midnatt .cert-halsning { --b: 338; --s: 16; --l: 7; --x: 40; --r: 40; font-family: var(--cert-serif); font-style: italic; color: var(--c-ram); }
.d-midnatt .cert-fot { --b: 384; --x: 24; --r: 108; font-family: var(--cert-sans); }
.d-midnatt .cert-karta .lupp .bak { fill: #0b1022; }
.d-midnatt .cert-karta .lupp .kant { fill: none; stroke: #c9a86a; stroke-width: .0042; }
.d-midnatt .cert-karta .lupp .kant2 { fill: none; stroke: #c9a86a; stroke-width: .0017; }
.d-midnatt .cert-karta .lupp .ledare { stroke: rgba(201, 168, 106, .55); stroke-width: .0019; }
.d-midnatt .cert-karta .lupp-text { font: 400 .033px var(--cert-sans); fill: #a3a9bd; }
.d-midnatt .cert-karta .lupp { animation: tona-in .8s var(--ui, ease) .5s both; }

/* Målet utan sken (ljusa designer): en fylld prick i ringens färg */
.cert-karta .karna { display: none; }
.cert-karta .natet { display: none; }
.cert-karta .natet path { fill: none; }
.d-papper .cert-karta .natet { display: inline; }

/* ---------- Papper & bläck ---------- */
.cert.d-papper { --cert-serif: "Cormorant Garamond", Georgia, serif; --cert-sans: "Cormorant Garamond", Georgia, serif; --c-text: #1d2333; --c-ink: #1d2333; --c-dis: #6d6a63; --c-ram: #1d2333; --c-bak: #f3ede1; --c-rost: #9c4a2f;
  --c-qr-ljus: #f3ede1; --c-qr-mork: #1d2333; color: #1d2333; background: #f3ede1; }
.cert.d-papper::before { background: radial-gradient(140% 100% at 50% 50%, transparent 65%, rgba(80, 60, 30, .10)); }
.cert.d-papper::after { mix-blend-mode: multiply; opacity: .10; }
.d-papper .cert-ram { --qr: 19; --qr-r: 26; --qr-b: 26; font-family: "Cormorant Garamond", Georgia, serif; }
.d-papper .cert-brand { --b: 38; --s: 10; font: 600 calc(10 * var(--pt)) "Cormorant Garamond", serif; letter-spacing: calc(3.2 * var(--pt)); text-transform: uppercase; color: var(--c-ink); }
.d-papper .cert-titel { --b: 59; --s: 44; font-style: italic; font-weight: 400; }
.d-papper .cert-titel::after { content: ""; position: absolute; left: 50%; top: calc(100% + 1.5 * var(--mm)); width: calc(44 * var(--mm)); height: calc(3.8 * var(--mm));
  transform: translateX(-50%); background:
  linear-gradient(var(--c-ink), var(--c-ink)) left center / calc(18 * var(--mm)) calc(.5 * var(--pt)) no-repeat,
  linear-gradient(var(--c-ink), var(--c-ink)) right center / calc(18 * var(--mm)) calc(.5 * var(--pt)) no-repeat,
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-1 -1 2 2'%3E%3Cpath d='M0-1L.28-.28 1 0 .28.28 0 1-.28.28-1 0-.28-.28Z' fill='%239c4a2f'/%3E%3C/svg%3E") center / auto 100% no-repeat; }
.d-papper .cert-fore { --b: 77; --s: 19; --l: 8; --x: 45; --r: 45; font-style: italic; color: var(--c-dis); }
.d-papper .cert-namn { --b: 98; --s: 66; font-weight: 700; background: none; -webkit-text-fill-color: currentColor; color: var(--c-ink); }
.d-papper .cert-efter { --b: 110; --s: 18; font-style: italic; color: var(--c-rost); }
.d-papper .cert-kartbox { --kx: 72.5; --ky: 126; --kw: 152; border-radius: 50%; }
.d-papper .cert-karta { border-radius: 50%; background: transparent; outline: calc(.8 * var(--pt)) solid var(--c-ink); }
.d-papper .cert-bild { --bild-glapp: calc(2.2 * var(--mm)); --bild-kant: calc(.8 * var(--pt)); }
.d-papper .cert-bild-text { display: block; position: absolute; left: -50%; right: -50%; top: calc(100% + 1.6 * var(--mm));
  font: italic 400 calc(9.5 * var(--pt)) "Cormorant Garamond", serif; color: var(--c-dis); text-align: center; }
.d-papper .cert-karta .natet path { fill: none; stroke: rgba(29, 35, 51, .16); stroke-width: .0034; }
.d-papper .cert-karta .grans path { stroke: rgba(29, 35, 51, .35); stroke-width: .003; }
.d-papper .cert-karta .linjer path { stroke: rgba(29, 35, 51, .75); stroke-width: .0047; }
.d-papper .cert-karta .stjarnor circle { fill: #1d2333; stroke: #f3ede1; stroke-width: .0035; paint-order: stroke;
  opacity: clamp(.35, calc((7.2 - var(--m, 5)) / 3.5), 1); }
.d-papper .cert-karta .stjarnor .glod, .d-papper .cert-karta .mal :is(.sken, .stralar, .puls) { display: none; }
.d-papper .cert-karta .mal .karna { display: block; fill: #9c4a2f; }
.d-papper .cert-karta .mal :is(.ring, .ring2) { stroke: #9c4a2f; }
.d-papper .cert-fakta { --b: 296; --x: 73.5; --r: 73.5; --colw: 69; --gap: 12; --step: 13; --ls: 7.5; --vs: 13.5; --off: 5.65; }
.d-papper .cert-fakta dt { font-weight: 600; letter-spacing: calc(1.1 * var(--pt)); text-transform: uppercase; }
.d-papper .cert-halsning { --b: 349; --s: 17; --l: 7; --x: 45; --r: 45; font-style: italic; color: var(--c-rost); }
.d-papper .cert-fot { --b: 383; --s: 8; --l: 4; --x: 26; --r: 121; }

/* ---------- Linje (liggande) ---------- */
.cert.d-linje { --cert-serif: "Instrument Serif", Georgia, serif; --cert-sans: "Inter Cert", system-ui, sans-serif; --c-text: #1f2229; --c-ink: #1f2229; --c-dis: #7a7e87; --c-ram: #1f2229; --c-bak: #f6f4ef;
  --c-qr-ljus: #f6f4ef; --c-qr-mork: #1f2229; background: #f6f4ef; color: #1f2229; }
.cert.d-linje::before { background: radial-gradient(140% 100% at 50% 50%, transparent 65%, rgba(0, 0, 0, .06)); }
.cert.d-linje::after { mix-blend-mode: multiply; opacity: .08; }
.d-linje .cert-ram { --qr: 17; --qr-r: 131; --qr-b: 24; font-family: "Inter Cert", var(--cert-sans); }
.d-linje .cert-ram > :is(p, dl) { text-align: left; --x: 272; --r: 26; }
.d-linje .cert-brand { --b: 36; --s: 7.5; font: 600 calc(7.5 * var(--pt)) "Inter Cert", sans-serif; letter-spacing: calc(2.4 * var(--pt)); text-transform: uppercase; color: var(--c-ink); }
.d-linje .cert-titel { --b: 36; --s: 7.5; text-align: right !important; font: 400 calc(7.5 * var(--pt)) "Inter Cert", sans-serif; letter-spacing: calc(2.4 * var(--pt)); text-transform: uppercase; color: var(--c-dis);
  border-bottom: calc(.3 * var(--pt)) solid var(--c-ink); padding-bottom: calc(1.5 * var(--mm)); line-height: 1 !important; }
.d-linje .cert-fore { --b: 60; --s: 11.5; --l: 5.4; font-family: "Inter Cert", sans-serif; font-style: normal; font-weight: 300; color: var(--c-dis); }
.d-linje .cert-fakta dd { font-family: "Inter Cert", sans-serif; }
.d-linje .cert-namn { --b: 81; --s: 62; font: 400 calc(62 * var(--pt)) / 1 "Instrument Serif", serif; background: none; -webkit-text-fill-color: currentColor; color: var(--c-ink); }
.d-linje .cert-efter { --b: 92; --s: 17; font: italic 400 calc(17 * var(--pt)) / 1 "Instrument Serif", serif; border-bottom: calc(.3 * var(--pt)) solid rgba(31, 34, 41, .25); padding-bottom: calc(6.5 * var(--mm)); }
.d-linje .cert-kartbox { --kx: 30; --ky: 42.5; --kw: 212; border-radius: 50%; }
.d-linje .cert-karta { border-radius: 50%; background: #121933; outline: 0; }
.d-linje .cert-bild { --bild-glapp: calc(3 * var(--mm)); --c-bak: #f6f4ef; }
.d-linje .cert-bild::before { content: ""; position: absolute; inset: calc(-3 * var(--mm)); border-radius: 50%; border: calc(.3 * var(--pt)) solid var(--c-ink); }
.d-linje .cert-karta .linjer path { stroke: rgba(243, 238, 226, .5); stroke-width: .0045; }
.d-linje .cert-karta .grans path { stroke: rgba(243, 238, 226, .14); }
.d-linje .cert-karta .mal :is(.ring, .ring2, .puls) { stroke: #f3eee2; }
.d-linje .cert-fakta { --b: 110; --colw: 59; --gap: 4; --step: 13; --ls: 7; --vs: 9.5; --off: 5; }
.d-linje .cert-fakta dt { letter-spacing: calc(.8 * var(--pt)); text-transform: uppercase; }
.d-linje .cert-halsning { --b: 233; --s: 15; --l: 6.5; font: italic 400 calc(15 * var(--pt)) "Instrument Serif", serif; line-height: calc(6.5 * var(--mm)); color: var(--c-ink); }
.d-linje .cert-ram > .cert-fot { --b: 269; --l: 3.5; --x: 292; --r: 26; }
.d-linje .cert-qr { left: calc(272 * var(--mm)); right: auto !important; }

/* ---------- Skymning ---------- */
.cert.d-skymning { --cert-serif: "Cormorant Garamond", Georgia, serif; --cert-sans: "Inter Cert", system-ui, sans-serif; --c-text: #f5e6df; --c-dis: #bba3b5; --c-ram: #e2b29c; --c-bak: #0e1029; --c-rose: #e2b29c;
  --c-qr-ljus: #f5e6df; --c-qr-mork: #1a1433;
  background: linear-gradient(180deg, #5a2a4a 0%, #3d1e40 16%, #22183a 50%, #0e1029 100%); }
.d-skymning .cert-ram { --qr: 18; --qr-r: 27; --qr-b: 26; font-family: "Cormorant Garamond", Georgia, serif; }
.d-skymning .cert-brand { --b: 52; --s: 15; font-style: italic; color: var(--c-rose); }
.d-skymning .cert-brand::before { content: ""; position: absolute; left: 50%; top: calc(-6.5 * var(--mm)); width: calc(4.4 * var(--mm)); aspect-ratio: 1; transform: translateX(-50%);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-1 -1 2 2'%3E%3Cpath d='M0-1L.22-.22 1 0 .22.22 0 1-.22.22-1 0-.22-.22Z' fill='%23e2b29c'/%3E%3C/svg%3E") center / contain no-repeat; }
.d-skymning .cert-titel { --b: 64; --s: 8.5; font: 400 calc(8.5 * var(--pt)) / 1 "Inter Cert", sans-serif; letter-spacing: calc(4 * var(--pt)); text-transform: uppercase; color: var(--c-dis); }
.d-skymning .cert-fore { --b: 84; --s: 20; --l: 8; --x: 50; --r: 50; font-style: italic; color: var(--c-dis); }
.d-skymning .cert-namn { --b: 106; --s: 62; --x: 32; --r: 32; font: italic 400 calc(62 * var(--pt)) / 1 "Bodoni Moda Cert", serif; background: none; -webkit-text-fill-color: currentColor; color: var(--c-rose); }
.d-skymning .cert-efter { --b: 128; --s: 17; color: var(--c-text); }
.d-skymning .cert-efter::before { content: ""; position: absolute; left: 50%; top: calc(-9.6 * var(--mm)); width: calc(11.2 * var(--mm)); height: calc(6.8 * var(--mm)); transform: translateX(-50%);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-5.6 -3.4 11.2 6.8'%3E%3Cg fill='none' stroke='%23e2b29c' stroke-width='.21'%3E%3Ccircle cx='-2.2' r='3.2'/%3E%3Ccircle cx='2.2' r='3.2'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat; }
.d-skymning .cert-kartbox { --kx: 76.5; --ky: 138; --kw: 144; --kh: 138; border-radius: calc(72 * var(--mm)) calc(72 * var(--mm)) 0 0; background: rgba(9, 11, 31, .55); }
.d-skymning .cert-kartbox::after { content: ""; position: absolute; inset: 0; border-radius: inherit; border: calc(.6 * var(--pt)) solid var(--c-rose); pointer-events: none; }
.d-skymning .cert-karta { border-radius: inherit; background: transparent; outline: 0; }
.d-skymning .cert-bild { left: 50%; top: 100%; width: calc(34 / 144 * 100%); --bild-glapp: calc(2 * var(--mm)); --bild-kant: calc(.8 * var(--pt)); }
.d-skymning .cert-karta .linjer path { stroke: rgba(245, 230, 223, .42); }
.d-skymning .cert-karta .grans path { stroke: rgba(245, 230, 223, .14); }
.d-skymning .cert-karta .mal :is(.ring, .ring2, .puls) { stroke: #e2b29c; }
.d-skymning .cert-fakta { --b: 305; --x: 74.5; --r: 74.5; --colw: 62; --gap: 24; --step: 12.5; --ls: 7; --vs: 13; --off: 5.5; }
.d-skymning .cert-fakta dt { font: 400 calc(7 * var(--pt)) / 1 "Inter Cert", sans-serif; letter-spacing: calc(.9 * var(--pt)); text-transform: uppercase; }
.d-skymning .cert-halsning { --b: 357; --s: 17; --l: 7; --x: 45; --r: 45; font-style: italic; color: var(--c-rose); }
.d-skymning .cert-fot { --b: 384; --l: 3.5; --x: 27; --r: 120; font-family: "Inter Cert", sans-serif; }

/* ---------- Stilla ---------- */
.cert.d-stilla { --cert-serif: "Cormorant Garamond", Georgia, serif; --cert-sans: "Inter Cert", system-ui, sans-serif; --c-text: #eceef1; --c-dis: #97a1ad; --c-ram: #c9ced5; --c-bak: #1b222c; --c-qr-ljus: #e3e6ea; --c-qr-mork: #1b222c;
  background: radial-gradient(98% 70% at 50% 34%, #28313d, #1b222c 55%, #151a22); }
.d-stilla .cert-ram { --qr: 18; --qr-r: 27; --qr-b: 26; font-family: "Cormorant Garamond", Georgia, serif; }
.d-stilla .cert-brand { --b: 38; --s: 13; font-style: italic; color: var(--c-ram); }
.d-stilla .cert-titel { display: none; }
.d-stilla .cert-ram > .cert-bild { left: 50%; top: calc(114 * var(--mm)); width: calc(128 * var(--mm)); transform: translate(-50%, -50%);
  --bild-kant: calc(.6 * var(--pt)); }
.d-stilla .cert-ram > .cert-bild::before { content: ""; position: absolute; inset: calc(-4 * var(--mm)); border-radius: 50%; border: calc(.3 * var(--pt)) solid rgba(201, 206, 213, .35); }
.d-stilla .cert-fore { --b: 197; --s: 21; --l: 8; --x: 50; --r: 50; font-style: italic; font-weight: 300; color: var(--c-dis); }
.d-stilla .cert-namn { --b: 217; --s: 58; --x: 32; --r: 32; font-weight: 400; background: none; -webkit-text-fill-color: currentColor; color: var(--c-text); }
.d-stilla .cert-efter { --b: 229; --s: 16; font-style: italic; color: var(--c-ram); }
.d-stilla .cert-efter::after { content: ""; position: absolute; left: 50%; top: calc(100% + 4 * var(--mm)); width: calc(28 * var(--mm)); height: calc(.4 * var(--pt)); transform: translateX(-50%); background: rgba(201, 206, 213, .5); }
.d-stilla .cert-kartbox { --kx: 40; --ky: 247; --kw: 74; border-radius: 50%; }
.d-stilla .cert-kartbox::after { content: "Stjärnan i teleskop"; display: none; }
.d-stilla .cert-karta { border-radius: 50%; background: transparent; outline: calc(.4 * var(--pt)) solid rgba(201, 206, 213, .6); }
.d-stilla .cert-karta .linjer path { stroke: rgba(201, 206, 213, .45); stroke-width: .009; }
.d-stilla .cert-karta .grans path { stroke: rgba(201, 206, 213, .14); }
.d-stilla .cert-karta .mal :is(.ring, .ring2, .puls) { stroke: #c9ced5; }
.d-stilla .cert-fakta { --b: 249; --x: 130; --r: 40; --ls: 7; --vs: 12; --step: 9.2;
  display: block !important; }
.d-stilla .cert-fakta > div { display: grid; grid-template-columns: calc(46 * var(--mm)) minmax(0, 1fr); align-items: baseline; min-height: calc(9.2 * var(--mm)); }
.d-stilla .cert-fakta dt { font: 400 calc(7 * var(--pt)) / 1 "Inter Cert", sans-serif; letter-spacing: calc(.8 * var(--pt)); text-transform: uppercase; }
.d-stilla .cert-fakta dd { margin: 0 !important; line-height: 1.15; }
.d-stilla .cert-halsning { --b: 337; --s: 17; --l: 7; --x: 45; --r: 45; font-style: italic; color: var(--c-ram); }
.d-stilla .cert-fot { --b: 384; --l: 3.5; --x: 27; --r: 120; font-family: "Inter Cert", sans-serif; }

/* ==========================================================================================
   Designväljaren i konfiguratorn: valbrickor som i Apple Store, blå ram när den är vald
   ========================================================================================== */
.designval { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 10px; margin-top: 0; padding: 4px; margin: -4px; }
.designval label { position: relative; min-width: 0; display: flex; flex-direction: column; gap: 10px; cursor: pointer; border-radius: var(--r-falt, 10px);
  padding: 10px 10px 12px; border: 1px solid var(--k-kant, #d2d2d7); background: var(--k-yta, #fff);
  transition: border-color var(--r-kort, .24s) var(--e-ui, ease), box-shadow var(--r-kort, .24s) var(--e-ui, ease); }
.designval label:hover { border-color: var(--k-kant-stark, #86868b); }
/* Det valda arket ligger på en svagt varm yta, som papper i ljuset; bytet tonar */
.designval .dv-bild { transition: background-color var(--r-lang, .8s) var(--e-ui, ease); }
.designval label:has(input:checked) .dv-bild { background-color: color-mix(in srgb, var(--guld, #e3b04b) 12%, var(--k-gra, #f5f5f7)); }
.designval label.liggande { grid-column: span 2; }
.designval input { position: absolute; opacity: 0; pointer-events: none; }
.designval .dv-bild { display: grid; place-items: center; aspect-ratio: 297 / 420; border-radius: var(--r-liten, 6px); overflow: hidden; background: var(--k-gra, #f5f5f7); padding: 8%; }
.designval label.liggande .dv-bild { aspect-ratio: auto; height: 100%; min-height: 0; padding: 8% 6%; }
.designval .dv-bild img { width: 100%; height: 100%; object-fit: contain; display: block;
  box-shadow: 0 8px 14px -8px rgba(0, 0, 0, .45); transition: transform .45s var(--k-ut, ease); }
.designval label:hover .dv-bild img { transform: translateY(-2px); }
/* Saknas miniatyren visas en lugn yta med namnet i stället för en trasig bild */
.designval label.utan-bild .dv-bild img { display: none; }
.designval label.utan-bild .dv-bild::before { content: attr(data-namn); font: 600 13px var(--k-sans, system-ui); color: var(--k-dis, #6e6e73); }
.designval .dv-namn { font: 600 14px/1.25 var(--k-sans, system-ui); letter-spacing: -.01em; color: var(--k-text, #1d1d1f); display: flex; align-items: baseline; gap: 2px 8px; flex-wrap: wrap; }
.designval .dv-passar { font: 400 12px/1.2 var(--k-sans, system-ui); letter-spacing: 0; color: var(--k-dis, #6e6e73); }
.designval .dv-text { display: none; }
.designval label:has(input:checked) { border-color: var(--k-bla, #0071e3); box-shadow: inset 0 0 0 1px var(--k-bla, #0071e3); background: var(--k-yta, #fff); }
.designval label:has(input:focus-visible) { border-color: var(--k-bla, #0071e3); box-shadow: inset 0 0 0 1px var(--k-bla, #0071e3); outline: 2px solid var(--k-bla, #0071e3); outline-offset: 2px; }
.designval input:checked + .dv-bild, .designval input:focus-visible + .dv-bild { outline: 0; }
.fraga > .designval-not, .steg > .designval-not { font-size: 14px; line-height: 1.45; color: var(--k-dis, #6e6e73); margin: 14px 0 0; min-height: 3em; }
.designval-not b { color: var(--k-text, #1d1d1f); font-weight: 600; }
@media (max-width: 560px) {
  .designval { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .designval label { padding: 10px 10px 12px; gap: 8px; }
  .designval .dv-namn { font-size: 14px; line-height: 1.4; }
  .designval .dv-passar { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .designval label, .designval .dv-bild img, .cert { transition: none; }
}