/* Felles grunnstil for alle sidene i butikken: farger, skrift, knapper, kort og meldinger.
   Hver side har i tillegg sitt eget stilark (butikk, produkt, kurv, kasse). */
:root{
  --rod:#E30613; --rod-mork:#b8000f; --rod-lys:#fdecee;
  --svart:#111; --tekst:#1a1a1a; --dempet:#5c5c5c; --linje:#e5e5e5; --linje-mork:#cfcfcf;
  --bunn:#f7f6f4; --hvit:#fff; --feil:#b91c1c; --feil-lys:#fef2f2; --ok:#166534; --ok-lys:#f0fdf4;
  --font:'DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --font-tittel:'DM Serif Display',Georgia,serif;
  --radius:12px; --radius-liten:8px; --skygge:0 1px 6px rgba(0,0,0,.06);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{font-family:var(--font);font-size:17px;line-height:1.5;color:var(--tekst);background:var(--bunn);min-height:100vh}
img{max-width:100%}
a{color:var(--rod)}
h1{font-size:28px;line-height:1.25;color:var(--svart)}
h2{font-size:21px;line-height:1.3;color:var(--svart)}
/* iOS Safari farger knappetekst blå når knappen ikke har egen farge */
button{color:var(--tekst);font-family:inherit;-webkit-appearance:none;appearance:none;-webkit-tap-highlight-color:transparent}
:focus-visible{outline:3px solid var(--rod);outline-offset:2px}
[hidden]{display:none!important}

.tilbake{display:inline-flex;align-items:center;gap:6px;margin-bottom:20px;color:var(--rod);font-size:16px;text-decoration:none}
.tilbake:hover{text-decoration:underline}

/* Hovedknappen: stor, rød og tydelig */
.knapp{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:56px;padding:14px 20px;border:0;border-radius:var(--radius);background:var(--rod);color:var(--hvit);font:inherit;font-size:18px;font-weight:600;text-decoration:none;cursor:pointer}
.knapp:hover{background:var(--rod-mork)}
.knapp:disabled{background:#c9c9c9;color:#fff;cursor:not-allowed}

.kort{background:var(--hvit);border-radius:var(--radius);box-shadow:var(--skygge)}

.melding{border-radius:var(--radius);padding:14px 18px;margin-bottom:20px}
.melding.feil{background:var(--feil-lys);border:1.5px solid #fecaca;color:var(--feil)}
.melding.ok{background:var(--ok-lys);border:1.5px solid #bbf7d0;color:var(--ok)}

.tom{text-align:center;padding:64px 20px;color:var(--dempet)}
.tom a{font-weight:600}
.dempet{color:var(--dempet)}

@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}