/* ==========================================================================
   FROST PROTOCOL — demosajt
   Palett och typografi ärvd från Ren Labs GR (~/peptidlab/sajt-gr/gr.css).
   Hero-mekaniken ärvd från Primorsko (~/primorsko-sajt/css/site.css):
   objektet står FRAMFÖR ordet. Det är hela greppet.

   Positioneringen som styr färgvalen (Grok-sweep 2026-08-30):
   kylan bor i TEMPERATUR, METALL och OBJEKT — aldrig i en isblå yta.
   Blir ytan isblå blir vi en 111SKIN-kopia; blir allt guld blir vi ett
   parfymhus. Därför: varm ivory grund, marin text, guld som metall,
   och det kalla enbart som ljus på objektet och som mätvärde i mono.
   ========================================================================== */

:root{
  /* Ärvda tokens — identiska med Ren Labs GR */
  --guld:#C9A35F; --guld2:#A8822F; --guldljus:#E4CC93; --guldmatt:#B9975330;
  /* ADRIATISKA HAVET, inte marinblått. Daniel pekade 2026-08-30 på en
     cyan LED-glöd (#2AA3C6) och sa: havet vid Kroatiens kust, välbefinnande.
     Den färgen mäter 2,77:1 mot ivory — under golvet 3:1 även för jättetext,
     så den kan inte bära bokstäverna. Lösningen: SAMMA hue (193), nedtryckt
     i ljushet för typografin, och hans exakta cyan sparad till ljus och
     siffror. Havet på djupet bär texten; ytan glittrar. */
  --hav:#12718C; --hav2:#0B5A6E; --havljus:#1A8CA9;
  /* Natten i heron. Renlabs hero ligger på medelljus 47/255. */
  --natt:#070D11; --natt2:#0D1720; --dis:#C4D2DA;
  --sand:#D8C7A6;   /* Primorskos sand — mastheadens färg */
  --marin:var(--hav); --marin2:var(--hav2); --marinljus:var(--havljus);
  --ivory:#FBF8F1; --ivory2:#F3ECDD; --card:#FFFFFF;
  --ink:#1A2334; --ink2:#4A5568; --sub:#7C8798; --line:#EAE3D4; --line2:#DAD1BE;

  /* --kall = Daniels LED-cyan, exakt. Ljus och mätvärden, aldrig text-
     massa: den mäter 2,77:1 mot ivory. Får bära siffror, glöd och hårlinjer.
     --kall2 är den läsbara systern för mätvärden i brödtextstorlek. */
  --kall:#2AA3C6; --kall2:#17809C;

  --sh1:0 1px 3px rgba(26,35,52,.06),0 1px 2px rgba(26,35,52,.04);
  --sh2:0 18px 44px rgba(26,35,52,.12);
  --sh-g:0 20px 46px rgba(168,130,47,.20);

  --didone:'Bodoni Moda',Didot,'Times New Roman',serif;
  --sans:'Archivo',system-ui,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;

  --w:1240px;
  --marginal:clamp(1.4rem,4vw,3.5rem);
}

*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  font-family:var(--sans); background:var(--ivory); color:var(--ink);
  line-height:1.55; -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; }
.wrap{ max-width:var(--w); margin:0 auto; padding:0 var(--marginal); }

.js .upp{ opacity:0; transform:translateY(24px); }
.js .syns{ opacity:1; transform:none;
  transition:opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1); }
@media (prefers-reduced-motion:reduce){ .js .upp{ opacity:1; transform:none; } *{ transition:none!important; } }

.skip{ position:absolute; left:-999px; }
.skip:focus{ left:16px; top:16px; background:var(--marin); color:#fff; padding:10px 16px; z-index:200; border-radius:6px; }

/* --------------------------------------------------------------------------
   Demoremsa + huvud
   -------------------------------------------------------------------------- */
.demo-topp{ background:var(--natt); color:#6E7B85; font-family:var(--mono);
  font-size:10.5px; letter-spacing:.14em; text-transform:uppercase;
  text-align:center; padding:7px 20px; }


/* Huvudet ligger ÖVER heron, inte ovanför den. En ljus remsa i ivory kapade
   mörkret precis där heron behöver vara som djupast. Löst som Primorsko gör:
   huvudet är genomskinligt över heron och tar färg först när man scrollat
   förbi den. Klassen sätts av JS. */
header{
  background:transparent; border-bottom:1px solid transparent;
  position:sticky; top:0; z-index:60;
  transition:background .35s ease, border-color .35s ease, backdrop-filter .35s ease;
}
header .ordbild{ color:var(--dis); }
header nav a{ color:#AEBAC4; }
header nav a:hover{ color:var(--kall); }
header .korg{ background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.28); }
header .korg:hover{ background:var(--kall); border-color:var(--kall); }

header.fast{
  background:rgba(251,248,241,.92); backdrop-filter:saturate(180%) blur(12px);
  border-bottom-color:var(--line);
}
header.fast .ordbild{ color:var(--hav); }
header.fast nav a{ color:var(--ink2); }
header.fast nav a:hover{ color:var(--guld2); }
header.fast .korg{ background:var(--hav); border-color:var(--hav); }
header.fast .korg:hover{ background:var(--havljus); border-color:var(--havljus); }

/* Demoremsan får också vara natt, annars blir den samma kap som huvudet var. */
.head{ display:flex; align-items:center; justify-content:space-between; height:68px;
  max-width:var(--w); margin:0 auto; padding:0 var(--marginal); }
.logo{ display:flex; align-items:baseline; gap:9px; text-decoration:none; }
.ordbild{ font-family:var(--didone); font-weight:700; font-size:22px; color:var(--marin); letter-spacing:.02em; }
.ordbild i{ font-style:normal; color:var(--guld2); }
header nav{ display:flex; align-items:center; gap:26px; }
header nav a{ text-decoration:none; color:var(--ink2); font-size:14px; font-weight:500; transition:color .2s; }
header nav a:hover{ color:var(--guld2); }
.korg{ background:var(--marin); color:#fff!important; padding:8px 16px; border-radius:7px; font-weight:600; font-size:14px; }
.korg:hover{ background:var(--marinljus); }

/* --------------------------------------------------------------------------
   Knappar
   -------------------------------------------------------------------------- */
.knapp{ display:inline-block; background:var(--guld2); color:#fff; text-decoration:none;
  padding:13px 26px; border:0; border-radius:8px; font-family:var(--sans);
  font-weight:600; font-size:15px; cursor:pointer; box-shadow:var(--sh1);
  transition:transform .2s, background .2s, box-shadow .2s; }
.knapp:hover{ background:var(--guld); transform:translateY(-2px); box-shadow:var(--sh-g); }
.knapp:active{ transform:scale(.98); }
.knapp.tom{ background:transparent; color:var(--marin); border:1.5px solid var(--line2); box-shadow:none; }
.knapp.tom:hover{ background:#fff; border-color:var(--guld2); color:var(--guld2); }

/* ==========================================================================
   HERO — MÖRK. Omgjord 2026-08-30 efter Daniels fråga «varför har jag en mkt
   bättre känsla för renlabs och primorsko».

   Mätningen gav svaret. Andel nästan svarta pixlar:
     Renlabs GR hero  76 %
     Primorsko fond    5 %  — MEN deras CSS lägger rgba(9,14,17,.78) över den
     min gamla hero   0,2 %
   Primorsko tar en LJUS fondbild och mörkar ner den hårt så det ljusa ordet
   biter. Jag gjorde tvärtom: la en ivory slöja och LJUSADE UPP bilden så ett
   mellanmörkt ord skulle få plats. Baklänges.

   Och Daniels cyan #2AA3C6 mäter 2,77:1 mot ivory men 6,33:1 mot svart.
   Den färgen är inte en ytfärg, den är LJUS. Den måste ha mörker att lysa i.
   ========================================================================== */
.hero{
  position:relative; isolation:isolate;
  /* Huvudet är genomskinligt och ligger ÖVER heron, så heron dras upp bakom
     det och behöver bara ge plats åt demoremsan. --remsa och --huvud mäts
     från JS; utan det gissar man på 104 px och foten hamnar under vikningen. */
  margin-top:calc(-1 * var(--huvud, 68px));
  height:calc(100svh - var(--remsa, 36px)); min-height:640px; overflow:hidden;
  background:var(--natt);
}
.hero__fond{
  position:absolute; inset:0; z-index:0;
  width:100%; height:100%; object-fit:cover; object-position:50% 52%;
  opacity:1;
}
/* Primorskos grepp, taget rakt av: två gradienter som mörkar uppåt så det
   stora ordet bär, och nedåt så foten fäster. Plus en vinjett så mitten blir
   scenens ljuspöl. */
.hero::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(120% 92% at 50% 46%, rgba(6,12,16,0) 0%, rgba(6,12,16,.5) 62%, rgba(6,12,16,.86) 100%),
    linear-gradient(to bottom, rgba(6,12,16,.72) 0%, rgba(6,12,16,.44) 22%, rgba(6,12,16,.1) 44%, rgba(6,12,16,0) 60%),
    linear-gradient(to top,    rgba(6,12,16,.9) 0%, rgba(6,12,16,.42) 20%, rgba(6,12,16,0) 42%),
    /* Bandet där PROTOCOL står. Uppmätt 2,67:1 mot den solbelysta väggen —
       under golvet 3:1 för stor text. Denna remsa tar ner just det bandet. */
    linear-gradient(to bottom,
      rgba(6,12,16,0) 26%, rgba(6,12,16,.42) 34%,
      rgba(6,12,16,.46) 52%, rgba(6,12,16,0) 62%);
}

/* Märkesordet — två rader, mastheadstort, i Daniels exakta LED-cyan.
   Mot natten mäter den 6,33:1. Glöden är ingen dekoration: den är hela
   skälet till att färgen valdes, och den gör ordet till ljuskälla i stället
   för till en platt fyllning. */
.hero__ord{
  position:absolute; z-index:2;
  left:50%; transform:translateX(-50%);
  top:clamp(1.2rem, 3vh, 3rem);
  width:max-content; margin:0;
  font-family:var(--didone); font-weight:700;
  font-size:16.9vw;
  line-height:.8; letter-spacing:-.045em;
  white-space:nowrap; text-align:center;
  /* Sand, inte cyan. Daniel 2026-08-30: «kanske passar bättre i samma
     guld/beige som primorsko». GPT sa oberoende samma sak. Cyanen är kvar
     där den hör hemma: på mätvärdena. */
  color:var(--sand);
  text-shadow:0 0 120px rgba(216,199,166,.42), 0 0 36px rgba(216,199,166,.2);
  user-select:none;
}
.hero__ord span{ display:block; }
/* FROST är fem tecken mot PROTOCOLs åtta. Uppmätt: 1000 px mot 1462 px vid
   274 px grad. 462 px / 5 luckor = 0,337em ovanpå de 0,055 som fanns = 0,392em.
   Efter fix mäter båda raderna 1605 px, skillnad 0. */
.hero__ord .rad1{ letter-spacing:.392em; margin-right:-.392em;
  /* CSS lägger spärren ÄVEN efter sista bokstaven. Centreringen räknar med
     den luften, så raden hamnar en halv lucka för långt åt höger — uppmätt
     59 px vid 300 px grad. Halva spärren tillbaka nollar det exakt. */
  position:relative; left:-.196em; }
.hero__ord i{ font-style:normal; color:var(--guld2); }

/* Hon — bottenankrad, ovanpå ordet. Större än förut: en människa behöver mer
   plats än ett hus för att bära en hero. Skuggan är kall och lång, som om
   spotlighten stod bakom henne. */
.hero__kvinna{
  position:absolute; z-index:3; display:block;
  left:50%; transform:translateX(-50%);
  bottom:0;
  width:min(25%, 450px);
  filter:drop-shadow(0 26px 70px rgba(0,0,0,.75));
}
.hero__kvinna img{ width:100%; height:auto; display:block; }

/* Foten: mätvärdena först. Egen mörkning OVANPÅ henne, annars drunknar talen
   i badrocken, och den knivskarpa frilagda kanten får något att lösas upp i. */
.hero__fot{
  position:absolute; inset:auto 0 0 0; z-index:4;
  color:var(--dis);
  padding:clamp(4rem,10vh,7rem) var(--marginal) clamp(1.5rem,3.5vh,2.4rem);
  background:linear-gradient(to top,
    rgba(6,12,16,.95) 0%, rgba(6,12,16,.88) 30%,
    rgba(6,12,16,.52) 64%, rgba(6,12,16,0) 100%);
  pointer-events:none;
}
.hero__fot a,.hero__fot button{ pointer-events:auto; }
.hero__fot-inre{
  max-width:var(--w); margin-inline:auto;
  display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between;
  gap:1.6rem 3rem; padding-top:1.4rem;
  border-top:1px solid var(--guld2);
}
.hero__vanster{ display:flex; flex-direction:column; gap:1rem; }
.hero__ingress{ font-size:18px; color:var(--dis); max-width:26em; line-height:1.5; }
/* Heron hade ingen köpaktion alls. Båda granskarna tog upp det. */
.hero__kop{ display:flex; align-items:center; gap:1.1rem; flex-wrap:wrap; }
.hero__pris{ font-family:var(--mono); font-size:15px; color:var(--dis); }
.hero__pris b{ font-size:19px; color:#fff; font-weight:500; }
.hero__pris s{ color:#6E7B85; margin-left:.35rem; }
.tal-rad{ display:flex; flex-wrap:wrap; gap:2.2rem 3.2rem; }
.tal{ display:flex; flex-direction:column; gap:.2rem; }
.tal__v{ font-family:var(--mono); font-weight:500; font-size:clamp(1.4rem,2.2vw,2rem);
  line-height:1; letter-spacing:-.02em; color:var(--kall); }
.tal__e{ font-family:var(--mono); font-size:.7rem; letter-spacing:.15em;
  text-transform:uppercase; color:#7F8B95; }

@media (max-width:900px){
  .hero__ord{ font-size:13.5vw; top:5vh; line-height:.84; }
  .hero__ord .rad1{ letter-spacing:.392em; margin-right:-.392em; left:-.196em; }
  .hero__kvinna{ width:92%; }
  .hero__fot{ padding-top:14rem; }
  .hero__fot-inre{ flex-direction:column; align-items:flex-start; gap:1.1rem; }
  .tal-rad{ display:grid; grid-template-columns:1fr 1fr; gap:1rem 1.4rem; width:100%; }
}

/* ==========================================================================
   Sektioner
   ========================================================================== */
/* Uppmätt: 8rem topp+botten gav 1024 px ren vaddering på en 4048 px sida,
   och protokoll-sektionen blev 41 % luft. Nedskuret till 5,5rem. */
section{ padding:clamp(3.2rem,6vw,5.5rem) 0; }
.sekt-huv{ margin-bottom:1.7rem; max-width:34em; }
.sekt-huv h2{ font-family:var(--didone); font-weight:700;
  font-size:clamp(2rem,4vw,3rem); color:var(--marin); line-height:1.04; }
.sekt-huv p{ color:var(--sub); margin-top:.7rem; font-size:16px; }

/* Räls: numrerad mätlinje ovanför varje sektion. Mono, guldstreck.
   Det är sektionsräknaren som ersätter eyebrow-etiketten — den upprepas
   men bär information (01, 02, 03), den är inte dekor. */
.matt-linje{ display:flex; align-items:center; gap:1rem; margin-bottom:1.05rem;
  font-family:var(--mono); font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; }
.matt-linje .nr{ color:var(--guld2); }
.matt-linje .titel{ color:var(--sub); }
.matt-linje::after{ content:""; flex:1; height:1px; background:var(--line2); }

/* 01 Protokollet — bild + numrerad sekvens.
   Var två vita textrutor sida vid sida; Grok kallade dem tomma och GPT
   kallade dem tunna. Bilden bär nu vikten och stegen får en tidsangivelse
   som faktiskt säger något. */
.protokoll{ display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:3rem; align-items:center; }
.protokoll__bild{ border-radius:14px; overflow:hidden; box-shadow:var(--sh2); }
.protokoll__bild img{ width:100%; height:100%; object-fit:cover; display:block; aspect-ratio:4/5; }
.protokoll__text h2{ font-family:var(--didone); font-weight:700;
  font-size:clamp(2rem,3.6vw,2.9rem); color:var(--hav); line-height:1.04; margin-bottom:1.6rem; }

.steg-lista{ list-style:none; display:flex; flex-direction:column; gap:1.6rem; }
.steg-lista li{ position:relative; padding-left:1.6rem; }
/* Räls i guld längs sekvensen — samma gest som mätlinjen ovanför sektionen. */
.steg-lista li::before{ content:""; position:absolute; left:0; top:.55rem; bottom:-1.6rem; width:1px; background:var(--line2); }
.steg-lista li:last-child::before{ bottom:auto; height:0; }
.steg-lista li::after{ content:""; position:absolute; left:-3px; top:.45rem; width:7px; height:7px;
  border-radius:50%; background:var(--guld); }
.steg-tid{ font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--kall2); }
.steg-lista h3{ font-family:var(--didone); font-weight:600; font-size:1.45rem; color:var(--hav); margin:.25rem 0 .4rem; }
.steg-lista p{ font-size:15.5px; color:var(--ink2); line-height:1.65; max-width:36em; }
@media (max-width:900px){ .protokoll{ grid-template-columns:1fr; gap:2rem; } }

/* Produktkort */
.pk-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:1.4rem; }
.pk{ background:var(--card); border:1px solid var(--line); border-radius:14px; overflow:hidden;
  display:flex; flex-direction:column; box-shadow:var(--sh1);
  transition:transform .24s cubic-bezier(.16,1,.3,1), box-shadow .24s, border-color .24s; }
.pk:hover{ transform:translateY(-5px); box-shadow:var(--sh2); border-color:var(--guldljus); }
.pk-bild{ position:relative; display:block; aspect-ratio:1/1;
  background:linear-gradient(160deg,#FBF4E6,#F2E7CF); overflow:hidden; }
.pk-bild img{ width:100%; height:100%; object-fit:cover;
  transition:transform .5s cubic-bezier(.16,1,.3,1); }
.pk:hover .pk-bild img{ transform:scale(1.04); }
.pk-kropp{ padding:1.3rem 1.4rem 1.5rem; display:flex; flex-direction:column; gap:.3rem; flex:1; }
.pk-kropp h3{ font-family:var(--didone); font-weight:600; font-size:1.55rem; line-height:1.08; color:var(--hav); }
/* Vad man faktiskt får för pengarna. GPT: kunden förstår inte vad 110 kr köper. */
.pk-format{ font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--sub); }
.pk-rad{ font-size:14px; color:var(--ink2); }
.pk-punkter{ list-style:none; margin:.7rem 0 0; display:flex; flex-direction:column; gap:.3rem; }
.pk-punkter li{ font-family:var(--mono); font-size:11.5px; color:var(--sub); letter-spacing:.02em;
  padding-left:1rem; position:relative; }
.pk-punkter li::before{ content:"—"; position:absolute; left:0; color:var(--guld2); }
.pk-fot{ display:flex; justify-content:space-between; align-items:center; margin-top:auto; padding-top:1.2rem; }
.pk-pris{ font-weight:700; font-size:1.4rem; color:var(--hav); line-height:1; }
.pk-pris s{ font-size:.85rem; font-weight:400; color:var(--sub); margin-left:.3rem; }
.pk-buy{ background:transparent; color:var(--hav); border:1.5px solid var(--line2);
  padding:11px 19px; font-weight:600; font-size:14px; cursor:pointer; border-radius:8px;
  font-family:var(--sans); transition:background .2s, border-color .2s, color .2s, transform .1s; }
.pk-buy:hover{ border-color:var(--hav); background:#fff; }
/* En enda primärfärg att köpa med. Grok: teal «Lägg i korgen» och guld
   «Slutför» var två primärknappar som slogs om samma jobb. Guld = köp. */
.pk-buy--stark{ background:var(--guld2); border-color:var(--guld2); color:#fff; }
.pk-buy--stark:hover{ background:var(--guld); border-color:var(--guld); }
/* Asken är det vi vill sälja. Kortet får en guldkant, inte ett «populärast»-band. */
.pk--vald{ border-color:var(--guld); box-shadow:var(--sh-g); }
.pk-buy:active{ transform:scale(.97); }

/* Ritualsektionen — helbreddsuppslag, mörk marin, guldlinje.
   Rytmbrott mot de ljusa kortsektionerna. */
.ritual{
  /* Var en stor platt tealyta. En enda mättad färg över hela bredden är
     samma fattigdomstell som den bleka heron var: ingen svärta, inget
     material, inget ljus. Nu är den natt med en ljuspöl bakom asken, så
     den rimmar med heron och med Groks produktbilder. */
  background:
    radial-gradient(760px 420px at 72% 50%, rgba(42,163,198,.14) 0%, transparent 70%),
    linear-gradient(160deg, var(--natt2) 0%, var(--natt) 100%);
  color:var(--dis);
}
.ritual h2{ color:#fff; }
.ritual p{ color:#9FAEB8; }
.ritual .wrap{ display:grid; grid-template-columns:1fr 1fr; gap:3rem; align-items:center; }
.ritual h2{ font-family:var(--didone); font-weight:700; font-size:clamp(2rem,4vw,3rem);
  line-height:1.04; margin-bottom:1.1rem; }
.ritual p{ font-size:16.5px; line-height:1.7; }
.ritual .matt-linje .titel{ color:#8C99AC; }
.ritual .matt-linje::after{ background:rgba(255,255,255,.16); }
.ritual figure{ border-radius:14px; overflow:hidden; box-shadow:0 30px 60px rgba(0,0,0,.45); }
.kit-innehall{ list-style:none; margin:1.4rem 0 1.8rem; display:flex; flex-direction:column; gap:.5rem; }
.kit-innehall li{ font-family:var(--mono); font-size:13px; color:var(--dis);
  padding-left:1.5rem; position:relative; letter-spacing:.02em; }
.kit-innehall li::before{ content:""; position:absolute; left:0; top:.55em;
  width:8px; height:1px; background:var(--guld); }
.kit-kop{ display:flex; align-items:center; gap:1.2rem; flex-wrap:wrap; }
.kit-pris{ font-family:var(--mono); font-size:15px; color:var(--dis); }
.kit-pris b{ font-size:1.55rem; color:#fff; font-weight:500; }
.kit-pris s{ color:#6E7B85; margin-left:.35rem; }
@media (max-width:800px){ .ritual .wrap{ grid-template-columns:1fr; } }

/* --------------------------------------------------------------------------
   Kassa — DEMO. Renderar aldrig ett kortfält.
   -------------------------------------------------------------------------- */
.kassa{ background:var(--ivory2); }
.kassa-kort{ max-width:620px; margin:0 auto; background:var(--card);
  border:1px solid var(--line); border-radius:14px; padding:2.4rem 2.6rem 2.6rem; box-shadow:var(--sh1); }
.kassa-kort h2{ font-family:var(--didone); font-weight:700; font-size:1.9rem; color:var(--hav); margin-bottom:1.2rem; }
.kassa-spar{ margin:1.4rem 0 0; padding:.85rem 1rem; border-radius:9px;
  background:var(--guldmatt); border:1px solid var(--line2);
  font-family:var(--mono); font-size:12px; color:var(--guld2); line-height:1.6; }
.kassa-rad{ display:flex; justify-content:space-between; padding:.65rem 0;
  border-bottom:1px solid var(--line); font-size:14.5px; }
.kassa-rad:last-of-type{ border-bottom:0; }
.kassa-rad.summa{ font-weight:700; font-size:1.05rem; color:var(--marin); padding-top:1rem; }
.kassa-tom{ color:var(--sub); font-size:14px; padding:1.4rem 0; }
/* Låst tills något ligger i korgen. En klickbar «Slutför beställning» på en
   tom korg är ett testformulär, inte en butik. Båda granskarna tog upp den. */
.kassa-kort .knapp{ width:100%; margin-top:1.3rem; text-align:center; }
.kassa-kort .knapp:disabled{ background:var(--line2); color:#fff; cursor:not-allowed;
  box-shadow:none; transform:none; }
.kassa-rad.summa{ border-top:1px solid var(--line2); }

footer{ background:var(--natt); color:#7F8B95; padding:2.2rem 0; font-size:13px; }
footer .wrap{ display:flex; flex-wrap:wrap; gap:1rem 2rem; justify-content:space-between; align-items:flex-end; }
footer span{ text-align:right; line-height:1.7; }
footer b{ color:#E8E2D4; font-family:var(--didone); font-size:16px; }