/* Design för produktsidorna (utkast 2026-10-19, Harald). Bara DM Serif Display och IBM Plex Sans (SIL OFL 1.1, licenstext i fonts/).
   Inga stockbilder: bilderna är sidor ur våra egna PDF:er och kodritade illustrationer (bildpolicyn). */
@font-face{font-family:"DM Serif Display";src:url(fonts/DMSerifDisplay-Regular.ttf) format("truetype");font-display:swap}
@font-face{font-family:"IBM Plex Sans";src:url(fonts/IBMPlexSans-Regular.ttf) format("truetype");font-weight:400;font-display:swap}
@font-face{font-family:"IBM Plex Sans";src:url(fonts/IBMPlexSans-SemiBold.ttf) format("truetype");font-weight:600 700;font-display:swap}
:root{--teal:#1f5550;--teal-m:#2c6d67;--terra:#b4482b;--terra-d:#933a22;--ink:#1f1d1a;--muted:#5d5852;--yta:#fffdf9;--kram:#f4ece0;--linje:#e3d8c8}
body{font-family:"IBM Plex Sans",system-ui,sans-serif;color:var(--ink);background:var(--yta);font-size:1.05rem}
header{background:var(--teal);border:0;padding:.9rem 1.5rem}header .logo{color:#fff;font-family:"DM Serif Display",serif;font-weight:400;font-size:1.5rem}
header nav a{color:#e9f1ef;font-weight:600}header nav a:hover{color:#fff}
main{max-width:1080px;padding:0 1.25rem 2rem}article{max-width:none}
h1,h2,h3{font-family:"DM Serif Display",serif;font-weight:400;letter-spacing:.005em}
h1{font-size:clamp(2.2rem,5vw,3.4rem);line-height:1.08;color:var(--teal);margin:.2em 0 .3em}
h2{font-size:clamp(1.6rem,3vw,2.2rem);color:var(--teal);margin-top:2.2rem}
a{color:var(--terra)}
.lyft{display:grid;grid-template-columns:1.05fr 1fr;gap:2rem;align-items:center;padding:2.2rem 0 1.5rem;position:relative}
.lyft .ingress{font-size:1.2rem;color:var(--muted);max-width:34rem}
.lyft .pris{font-size:1.15rem;margin:.6rem 0}.lyft .pris b:first-child{font-family:"DM Serif Display",serif;font-weight:400;font-size:2.2rem;color:var(--terra)}
.knappar{display:flex;flex-wrap:wrap;gap:.7rem;margin:1.1rem 0}
.btn{background:var(--terra);font-weight:600;font-size:1.08rem;padding:.85rem 1.5rem;border-radius:999px;box-shadow:0 2px 0 var(--terra-d)}
.btn:hover{background:var(--terra-d)}.btn.alt{background:transparent;color:var(--teal);box-shadow:inset 0 0 0 2px var(--teal)}
.btn.inaktiv{opacity:.45}
.uppslag{position:relative;height:420px}
.uppslag img{position:absolute;width:56%;border-radius:4px;box-shadow:0 18px 40px rgba(31,29,26,.22),0 2px 6px rgba(31,29,26,.12);background:#fff}
.uppslag img:nth-child(1){left:0;top:30px;transform:rotate(-4deg);z-index:1}
.uppslag img:nth-child(2){left:22%;top:0;z-index:3}
.uppslag img:nth-child(3){right:0;top:46px;transform:rotate(4deg);z-index:2}
.dekor{position:absolute;pointer-events:none;z-index:4}
.lyft .dekor{width:150px;right:-10px;bottom:-30px}
.fa{list-style:none;padding:0;margin:1rem 0}.fa li{padding:.25rem 0 .25rem 1.7rem;position:relative}
.fa li::before{content:"";position:absolute;left:.2rem;top:.75rem;width:.75rem;height:.4rem;border-left:2.5px solid var(--teal-m);border-bottom:2.5px solid var(--teal-m);transform:rotate(-45deg)}
.steg{background:var(--teal);color:#f4efe6;border-radius:18px;padding:1.6rem 1.8rem 1.8rem;margin:2.5rem 0;position:relative;overflow:hidden}
.steg h2{color:#fff;margin-top:0}.steg ol{list-style:none;counter-reset:s;display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;padding:0;margin:0}
.steg li{counter-increment:s}.steg li::before{content:counter(s);display:block;font-family:"DM Serif Display",serif;font-size:2.6rem;line-height:1;color:#f0b49f;margin-bottom:.3rem}
.steg b{display:block;color:#fff;font-size:1.1rem;margin-bottom:.2rem}
.steg .dekor{width:120px;right:14px;top:-18px;opacity:.95}
.grid{gap:1.2rem}.card{border:1px solid var(--linje);border-radius:16px;padding:1.3rem 1.3rem 1.1rem;background:#fff;transition:transform .15s,box-shadow .15s}
.card:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(31,29,26,.10)}
.card h3{font-size:1.6rem;color:var(--teal);margin-bottom:.3rem}.card .kr{font-family:"DM Serif Display",serif;color:var(--terra);font-size:1.4rem}
.card.mitt{border:2px solid var(--teal-m)}
table{border-collapse:collapse;width:100%;background:#fff;border-radius:12px;overflow:hidden;font-size:.97rem}
th,td{padding:.6rem .7rem;border-bottom:1px solid var(--linje);text-align:left}th{background:var(--kram);color:var(--teal);font-weight:600}
td:not(:first-child),th:not(:first-child){text-align:center}
.lansering{background:var(--kram);border-left:5px solid var(--terra);padding:.9rem 1.1rem;border-radius:10px}
#allergener{color:var(--muted)}
footer{background:var(--teal);color:#d9e6e3;margin-top:3rem}footer a{color:#fff}
@media(max-width:760px){.lyft{grid-template-columns:1fr;padding-top:1.2rem}.uppslag{height:300px;order:-1}.steg ol{grid-template-columns:1fr}.lyft .dekor{width:100px;bottom:-14px}.steg .dekor{width:80px}}