:root {
  --rod: #E00818;
  --rod-mork: #b80612;
  --rod-ljus: #fde8ea;
  --gron: #008838;
  --gron-mork: #006a2b;
  --gron-ljus: #e6f4ea;
  --svart: #1b1b1b;
  --gra-text: #555;
  --gra-linje: #e4e4e2;
  --gra-bak: #f6f6f4;
  --vit: #fff;
  --bredd: 1200px;
  --radie: 12px;
  --skugga: 0 1px 2px rgba(0,0,0,.05), 0 8px 24px rgba(0,0,0,.06);
  --skugga-lyft: 0 12px 32px rgba(0,0,0,.12);
  --fart: .22s;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color: var(--svart); background: var(--vit); line-height: 1.55; font-size: 16px; }
a { color: var(--gron-mork); }
a:hover { color: var(--rod); }
img { max-width: 100%; height: auto; display: block; }
picture { display: block; }
h1, h2, h3, h4 { line-height: 1.15; margin: 0 0 .5em; font-weight: 700; letter-spacing: -.01em; }
h1 { font-size: 2rem; }
h2 { font-size: 1.5rem; margin-top: 1.4em; }
h3 { font-size: 1.1rem; margin-top: 1.3em; }
p { margin: 0 0 1em; }
table { border-collapse: collapse; width: 100%; margin: 0 0 1.2em; font-size: .95rem; }
th, td { text-align: left; padding: .5em .6em; border-bottom: 1px solid var(--gra-linje); vertical-align: top; }
th { background: var(--gra-bak); font-weight: 600; }
.wrap { max-width: var(--bredd); margin: 0 auto; padding: 0 20px; }
.tabell-scroll { overflow-x: auto; }
.liten { font-size: .85rem; color: var(--gra-text); }
.hoppa { position: absolute; left: -999px; top: 0; background: var(--svart); color: #fff; padding: .5em 1em; z-index: 100; }
.hoppa:focus { left: 8px; top: 8px; }
button { font-family: inherit; }

/* ---------- Topp ---------- */
.toppband { background: var(--gra-bak); color: var(--svart); font-size: .8rem; border-bottom: 1px solid var(--gra-linje); }
.toppband .wrap { display: flex; justify-content: space-between; align-items: center; gap: 1.6em; padding-top: .45em; padding-bottom: .45em; }
.usp { list-style: none; margin: 0; padding: 0; display: flex; gap: 1.8em; flex-wrap: wrap; }
.usp li { display: inline-flex; align-items: center; gap: .4em; white-space: nowrap; font-weight: 600; letter-spacing: .01em; }
.usp svg, .topp-kontakt svg { width: 15px; height: 15px; color: var(--gron); flex: none; }
.topp-kontakt { display: inline-flex; align-items: center; gap: .6em; white-space: nowrap; }
.topp-kontakt a { color: var(--svart); text-decoration: none; font-weight: 700; display: inline-flex; align-items: center; gap: .35em; }
.topp-kontakt a:hover { color: var(--rod); }
.topp-kontakt span { color: var(--gra-text); }
header.huvud { background: #fff; position: sticky; top: 0; z-index: 30; box-shadow: 0 1px 0 var(--gra-linje); }
header.huvud .wrap { display: flex; align-items: center; gap: 2em; min-height: 88px; }
.logga { flex: none; display: block; }
.logga img { height: 54px; width: auto; }
.meny-toggle { display: none; }
form.sok { position: relative; flex: 1; display: flex; align-items: center; border: 2px solid #d5d5d3; border-radius: 999px; padding: 0 .3em 0 1.2em; background: #fff; height: 50px; max-width: 640px; transition: border-color var(--fart), box-shadow var(--fart); }
form.sok:focus-within { border-color: var(--svart); box-shadow: 0 0 0 4px rgba(0,0,0,.06); }
form.sok input { border: 0; outline: 0; font-size: 1rem; width: 100%; background: transparent; font-family: inherit; min-width: 0; }
form.sok input::-webkit-search-cancel-button { -webkit-appearance: none; }
form.sok button { border: 0; background: var(--rod); color: #fff; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; flex: none; transition: background var(--fart); }
form.sok button:hover { background: var(--rod-mork); }
form.sok-stor { max-width: 640px; height: 54px; margin: 0 0 1.5em; }
.sok-forslag { position: absolute; left: -2px; right: -2px; top: calc(100% + 6px); background: #fff; border: 1px solid var(--gra-linje); border-radius: 14px; box-shadow: var(--skugga-lyft); z-index: 40; overflow: hidden; }
.sok-forslag[hidden] { display: none; }
.sok-forslag a { display: grid; grid-template-columns: 52px 1fr auto; gap: .9em; align-items: center; padding: .55em .9em; text-decoration: none; color: var(--svart); border-bottom: 1px solid var(--gra-bak); }
.sok-forslag a:hover, .sok-forslag a.markerad { background: var(--gra-bak); color: var(--svart); }
.sok-forslag img { width: 52px; height: 52px; object-fit: contain; border-radius: 6px; border: 1px solid var(--gra-bak); }
.sok-forslag .f-namn { font-weight: 600; font-size: .93rem; line-height: 1.25; }
.sok-forslag .f-kat { display: block; color: var(--gra-text); font-size: .8rem; font-weight: 400; }
.sok-forslag .f-pris { font-weight: 700; white-space: nowrap; font-size: .9rem; }
.sok-forslag .f-alla { grid-template-columns: 1fr; text-align: center; font-weight: 600; color: var(--rod); padding: .7em; }
.sok-forslag .f-kategori { grid-template-columns: 1fr; font-weight: 600; }
.sok-forslag .f-kategori small { color: var(--gra-text); font-weight: 400; margin-left: .4em; }
nav.ikoner { display: flex; gap: .4em; margin-left: auto; flex: none; }
.ikon-lank { display: inline-flex; flex-direction: column; align-items: center; gap: .2em; text-decoration: none; color: var(--svart); font-size: .74rem; font-weight: 600; padding: .4em .7em; border-radius: 10px; position: relative; transition: background var(--fart), color var(--fart); }
.ikon-lank svg { width: 26px; height: 26px; }
.ikon-lank:hover { background: var(--gra-bak); color: var(--rod); }
.korg-antal { position: absolute; top: .1em; right: .4em; background: var(--rod); color: #fff; font-size: .7rem; min-width: 1.6em; height: 1.6em; border-radius: 999px; display: inline-grid; place-items: center; padding: 0 .3em; font-weight: 700; }
.korg-antal[hidden] { display: none; }

/* ---------- Kategorirad och mega-meny ---------- */
nav.katrad { background: #fff; border-bottom: 1px solid var(--gra-linje); position: relative; z-index: 25; }
.katrad-wrap { display: flex; align-items: center; gap: 1.5em; }
.kat-lista, .kat-extra { list-style: none; margin: 0; padding: 0; display: flex; }
.kat-lista { gap: .1em; flex-wrap: nowrap; }
.kat-extra { margin-left: auto; gap: .2em; }
.bara-mobil { display: none; }
.kat-extra a { text-decoration: none; color: var(--gra-text); font-size: .9rem; padding: .95em .6em; display: block; white-space: nowrap; font-weight: 500; }
.kat-extra a:hover { color: var(--rod); }
.kat { position: static; }
.kat-lank { text-decoration: none; color: var(--svart); font-weight: 600; font-size: .97rem; padding: .95em .85em; display: inline-block; white-space: nowrap; border-bottom: 3px solid transparent; transition: color var(--fart), border-color var(--fart); }
.kat:hover > .kat-lank, .kat.oppen > .kat-lank, .kat.aktiv > .kat-lank { color: var(--rod); border-bottom-color: var(--rod); }
.kat-pil { display: none; }
.meny-topp, .meny-kontakt { display: none; }
.mega { display: none; position: absolute; left: 0; right: 0; top: 100%; background: #fff; border-top: 1px solid var(--gra-linje); box-shadow: 0 20px 40px rgba(0,0,0,.12); z-index: 26; }
.kat:hover > .mega, .kat.oppen > .mega { display: block; }
.mega { padding: 0; }
.kat:hover > .mega, .kat.oppen > .mega { display: grid; grid-template-columns: 300px 1fr 300px; gap: 2em; max-width: var(--bredd); margin: 0 auto; left: 0; right: 0; padding: 1.6em 20px 1.8em; border-radius: 0 0 var(--radie) var(--radie); }
.mega-kol { border-right: 1px solid var(--gra-linje); padding-right: 1.5em; }
.mega-not { color: var(--gra-text); font-size: .85rem; margin: 1em .6em 0; line-height: 1.45; }
.mega-produkter { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1em; align-content: start; }
.mega-produkt { display: block; text-decoration: none; color: var(--svart); border: 1px solid var(--gra-linje); border-radius: 10px; padding: .6em; background: #fff; transition: box-shadow var(--fart), transform var(--fart); }
.mega-produkt img { aspect-ratio: 1/1; object-fit: contain; width: 100%; }
.mega-produkt .mp-namn { display: block; font-size: .82rem; font-weight: 600; line-height: 1.3; margin: .5em 0 .2em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mega-produkt .mp-pris { display: block; font-size: .8rem; color: var(--rod); font-weight: 600; }
.mega-produkt:hover { box-shadow: var(--skugga-lyft); transform: translateY(-2px); color: var(--svart); }
.mega-lista { list-style: none; margin: 0; padding: 0; }
.mega-lista li { break-inside: avoid; }
.mega-lista a { display: flex; justify-content: space-between; align-items: baseline; gap: .8em; text-decoration: none; color: var(--svart); padding: .55em .6em; border-radius: 8px; font-size: .97rem; }
.mega-lista a:hover { background: var(--gra-bak); color: var(--rod); }
.mega-lista a span { color: var(--gra-text); font-size: .8rem; }
.mega-lista li:first-child a { margin-bottom: .3em; border-bottom: 1px solid var(--gra-linje); border-radius: 8px 8px 0 0; }
.mega-bild { display: block; text-decoration: none; color: var(--svart); border: 1px solid var(--gra-linje); border-radius: var(--radie); overflow: hidden; background: #fff; transition: box-shadow var(--fart), transform var(--fart); }
.mega-bild img { aspect-ratio: 4/3; object-fit: contain; width: 100%; padding: 6%; }
.mega-bild span { display: flex; justify-content: space-between; align-items: baseline; gap: .6em; padding: .7em 1em .9em; border-top: 1px solid var(--gra-bak); }
.mega-bild em { font-style: normal; color: var(--rod); font-weight: 600; font-size: .85rem; white-space: nowrap; }
.mega-bild:hover { box-shadow: var(--skugga-lyft); transform: translateY(-2px); color: var(--svart); }
.meny-skugga { display: none; }

/* ---------- Knappar ---------- */
.knapp { display: inline-flex; align-items: center; justify-content: center; gap: .5em; text-decoration: none; background: var(--rod); color: #fff; padding: .7em 1.4em; border-radius: 8px; font-weight: 600; border: 0; font-size: 1rem; cursor: pointer; transition: background var(--fart), transform var(--fart), box-shadow var(--fart); line-height: 1.2; }
.knapp:hover { background: var(--rod-mork); color: #fff; transform: translateY(-1px); box-shadow: 0 6px 16px rgba(224,8,24,.25); }
.knapp:active { transform: translateY(0); box-shadow: none; }
.knapp.gron { background: var(--gron); }
.knapp.gron:hover { background: var(--gron-mork); box-shadow: 0 6px 16px rgba(0,136,56,.25); }
.knapp.sekundar { background: #fff; color: var(--svart); border: 1px solid #c8c8c8; }
.knapp.sekundar:hover { background: var(--gra-bak); color: var(--svart); box-shadow: 0 6px 16px rgba(0,0,0,.08); }
.knapp.stor { padding: .9em 1.7em; font-size: 1.05rem; }
.knapp:disabled { opacity: .7; cursor: wait; }
.kop-knapp { width: 100%; margin-top: .9em; }
.kop-knapp.klar { background: var(--gron); }
.kop-knapp.laddar { opacity: .75; }
button.lank { background: none; border: 0; color: var(--rod); cursor: pointer; padding: 0; font-size: .85rem; text-decoration: underline; }

/* ---------- Sidfot ---------- */
footer.fot { margin-top: 4em; font-size: .93rem; }
.fot-topp { background: var(--gra-bak); border-top: 1px solid var(--gra-linje); padding: 3em 0 2.6em; }
.fot-kolumner { display: grid; grid-template-columns: 1fr 1fr 1fr 1.5fr; gap: 2.5em; }
footer.fot h4 { margin: 0 0 .8em; font-size: 1rem; }
footer.fot ul { list-style: none; padding: 0; margin: 0; }
footer.fot .fot-topp li { margin-bottom: .45em; }
.fot-topp a { color: var(--svart); text-decoration: none; }
.fot-topp a:hover { color: var(--rod); text-decoration: underline; }
.fot-oppet { color: var(--gra-text); display: inline-flex; align-items: center; gap: .35em; }
.fot-nyhet p { color: var(--gra-text); margin: 0 0 .8em; }
.nyhet-form { display: flex; gap: .5em; }
.nyhet-form input { flex: 1; min-width: 0; padding: .7em .9em; border: 1px solid #bbb; border-radius: 8px; font-size: 1rem; font-family: inherit; background: #fff; }
.nyhet-form input:focus { outline: 0; border-color: var(--svart); box-shadow: 0 0 0 3px rgba(0,0,0,.06); }
.nyhet-form .knapp { white-space: nowrap; padding: .7em 1.1em; }
.fot-nyhet .liten { margin: .6em 0 1.4em; }
.fot-tel { display: inline-flex; align-items: center; gap: .4em; font-weight: 700; font-size: 1.2rem; color: var(--svart) !important; }
.fot-tel svg { width: 20px; height: 20px; color: var(--gron); }
.fot-marken { background: #fff; border-top: 1px solid var(--gra-linje); padding: 1.4em 0; }
.fot-rad { display: flex; align-items: center; gap: 1.2em; flex-wrap: wrap; padding: .5em 0; }
.fot-rad > span { font-weight: 600; color: var(--gra-text); font-size: .85rem; min-width: 110px; text-transform: uppercase; letter-spacing: .05em; }
.marken { list-style: none; margin: 0; padding: 0; display: flex; gap: .5em; flex-wrap: wrap; align-items: center; }
.marke { height: 34px; padding: 0 .6em; border: 1px solid var(--gra-linje); border-radius: 6px; background: #fff; display: inline-flex; align-items: center; justify-content: center; }
.marke img { height: 18px; width: auto; max-width: 84px; display: block; }
.marke-mastercard img { height: 24px; }
.marke-klarna img, .marke-faktura img { height: 30px; }
.marke-faktura { padding: 0; border: 0; }
.marke-faktura img { height: 34px; max-width: none; }
.marke-swish img, .marke-visa img { height: 16px; }
.marke-applepay img { height: 20px; }
.marke-dbschenker img { height: 14px; }
.marke-postnord img { height: 15px; }
.marke-dsv img { height: 17px; }
.fraktmarken .marke { height: 40px; padding: 0 1em; }
.fraktmarken .marke img { height: 20px; max-width: 120px; }
.fraktmarken .marke-dbschenker img { height: 18px; }
.fraktmarken .marke-postnord img { height: 18px; }
.marken.liten-rad .marke { height: 28px; padding: 0 .45em; }
.marken.liten-rad .marke img { height: 14px; max-width: 64px; }
.marken.liten-rad .marke-mastercard img { height: 20px; }
.marken.liten-rad .marke-klarna img { height: 24px; }
.marken.liten-rad .marke-applepay img { height: 16px; }
.marken.liten-rad .marke-faktura img { height: 28px; }
.fot-botten { background: var(--svart); color: #d6d6d6; padding: 2.2em 0 1.8em; }
.fot-botten a { color: #fff; text-decoration: none; }
.fot-botten a:hover { color: #ffb3b8; }
.fot-bolag { display: flex; gap: 2em; align-items: center; flex-wrap: wrap; margin-bottom: 1.4em; }
.fot-logga img { height: 44px; width: auto; }
.fot-bolag address { font-style: normal; line-height: 1.55; color: #bbb; }
.fot-trygg { display: flex; gap: .5em 1.6em; flex-wrap: wrap; padding: 1em 0; border-top: 1px solid #333; border-bottom: 1px solid #333; font-size: .86rem; color: #ddd; }
.fot-trygg li { display: inline-flex; align-items: center; gap: .4em; }
.fot-trygg svg { width: 15px; height: 15px; color: #6fd08f; }
.fot-botten .liten { margin: 1em 0 0; color: #999; font-size: .8rem; }
.visuellt-dold { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Kakor ---------- */
.kakor { position: fixed; left: 0; right: 0; bottom: 0; background: #fff; border-top: 1px solid var(--gra-linje); box-shadow: 0 -8px 30px rgba(0,0,0,.12); z-index: 80; padding: 1em 0; font-size: .92rem; }
.kakor[hidden] { display: none; }
.kakor-inre { display: flex; gap: 2em; align-items: center; justify-content: space-between; }
.kakor p { margin: .25em 0 0; color: var(--gra-text); max-width: 720px; }
.kakor-knappar { display: flex; gap: .6em; flex: none; }
.kakor .knapp { padding: .65em 1.1em; font-size: .92rem; }
body.kakor-syns { padding-bottom: 120px; }

/* ---------- Start ---------- */
.hero { background: linear-gradient(135deg, #fff 0%, var(--gra-bak) 100%); padding: 3.5em 0 3em; overflow: hidden; }
.hero .wrap { display: grid; grid-template-columns: 1.1fr .9fr; gap: 3em; align-items: center; }
.hero h1 { font-size: 3.2rem; margin-bottom: .35em; letter-spacing: -.025em; line-height: 1.05; }
.hero p.ingress { font-size: 1.2rem; color: var(--gra-text); max-width: 540px; margin-bottom: 1.4em; }
.hero-knappar { display: flex; gap: .8em; flex-wrap: wrap; margin-bottom: 1.4em; }
.hero-piller { display: flex; gap: .5em; flex-wrap: wrap; margin: 0; }
.hero-piller span { font-size: .8rem; font-weight: 600; background: #fff; border: 1px solid var(--gra-linje); border-radius: 999px; padding: .35em .85em; color: var(--svart); }
.hero-piller span:first-child { background: var(--gron-ljus); border-color: #b7dcc3; color: var(--gron-mork); }
.stor-rubrik { font-size: 2rem; max-width: 720px; margin: 0 0 1em; letter-spacing: -.02em; }
.bildband { padding: 2.2em 0 .6em; overflow: hidden; border-top: 1px solid var(--gra-linje); border-bottom: 1px solid var(--gra-linje); background: #fff; }
.band-rad { overflow: hidden; margin-bottom: .9em; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.band-spar { display: flex; gap: .9em; width: max-content; animation: band-vanster 60s linear infinite; }
.band-hoger .band-spar { animation-name: band-hoger; }
.band-rad:hover .band-spar { animation-play-state: paused; }
.band-bild { flex: none; width: 170px; height: 170px; border: 1px solid var(--gra-linje); border-radius: 10px; overflow: hidden; background: #fff; transition: transform var(--fart), box-shadow var(--fart); }
.band-bild img { width: 100%; height: 100%; object-fit: contain; }
.band-bild:hover { transform: translateY(-4px); box-shadow: var(--skugga-lyft); }
@keyframes band-vanster { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes band-hoger { from { transform: translateX(-50%); } to { transform: translateX(0); } }
.kategori-rad { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.1em; }
.kategori-bild { position: relative; display: block; border-radius: var(--radie); overflow: hidden; border: 1px solid var(--gra-linje); background: #fff; text-decoration: none; color: var(--svart); transition: transform var(--fart), box-shadow var(--fart); }
.kategori-bild img { aspect-ratio: 1/1; object-fit: contain; width: 100%; padding: 6%; transition: transform .5s; }
.kategori-bild span { display: flex; justify-content: space-between; align-items: baseline; gap: .5em; padding: .7em 1em .9em; border-top: 1px solid var(--gra-bak); }
.kategori-bild strong { font-size: 1.05rem; }
.kategori-bild em { font-style: normal; color: var(--gra-text); font-size: .82rem; white-space: nowrap; }
.kategori-bild:hover { transform: translateY(-4px); box-shadow: var(--skugga-lyft); color: var(--svart); }
.kategori-bild:hover img { transform: scale(1.04); }
.tre-steg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.5em; }
.tre-steg strong { display: block; font-size: 1.5rem; letter-spacing: -.02em; margin-bottom: .3em; color: var(--rod); }
.tre-steg p { margin: 0; color: #333; font-size: 1.02rem; }
.steg-not { margin: 1.6em 0 0; color: var(--gra-text); }
.fortroende-band { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1.5em; padding: 1.6em 0; border-top: 1px solid var(--gra-linje); border-bottom: 1px solid var(--gra-linje); }
.fortroende-band strong { display: block; font-size: 1rem; margin-bottom: .2em; }
.fortroende-band span { font-size: .85rem; color: var(--gra-text); }
.hero-bild { position: relative; }
.hero-bild img { border-radius: var(--radie); background: #fff; box-shadow: var(--skugga); }
.hero-kort { position: absolute; left: -1em; bottom: 1.5em; background: #fff; border-radius: 10px; padding: .8em 1.1em; box-shadow: var(--skugga-lyft); max-width: 260px; border-left: 4px solid var(--rod); text-decoration: none; color: var(--svart); transition: transform var(--fart); }
.hero-kort:hover { transform: translateY(-3px); color: var(--svart); }
.hero-kort strong { display: block; font-size: 1.35rem; color: var(--rod); }
.hero-kort span { font-size: .82rem; color: var(--gra-text); }
.sektion { padding: 3em 0 1em; }
.sektion-gra { background: var(--gra-bak); padding: 3em 0; margin: 2em 0 0; }
.sektion-huvud { margin-bottom: 1.2em; }
.sektion-huvud h2 { margin-top: 0; font-size: 1.8rem; }
.sektion-huvud p { color: var(--gra-text); margin: 0; }
.kategori-rutor { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 1.3em; margin: 1.2em 0 1em; }
.kategori-ruta { border: 1px solid var(--gra-linje); border-radius: var(--radie); overflow: hidden; text-decoration: none; color: var(--svart); background: #fff; display: flex; flex-direction: column; transition: transform var(--fart), box-shadow var(--fart), border-color var(--fart); }
.kategori-ruta img { aspect-ratio: 1/1; object-fit: cover; width: 100%; transition: transform .5s; }
.kategori-ruta div { padding: 1em 1.1em 1.2em; }
.kategori-ruta strong { font-size: 1.1rem; display: block; margin-bottom: .3em; }
.kategori-ruta span { color: var(--gra-text); font-size: .9rem; display: block; }
.kategori-ruta em { display: inline-block; font-style: normal; color: var(--rod); font-weight: 600; font-size: .85rem; margin-top: .6em; }
.kategori-ruta:hover { transform: translateY(-4px); box-shadow: var(--skugga-lyft); border-color: transparent; color: var(--svart); }
.kategori-ruta:hover img { transform: scale(1.04); }
.tva-kolumner { display: grid; grid-template-columns: 1fr 1fr; gap: 3em; }
.tva-kolumner h2 { margin-top: 0; }
ol.steg { padding-left: 0; list-style: none; counter-reset: steg; margin: 0 0 1em; }
ol.steg li { position: relative; padding-left: 3em; margin-bottom: 1em; counter-increment: steg; }
ol.steg li::before { content: counter(steg); position: absolute; left: 0; top: -.1em; width: 2.1em; height: 2.1em; border-radius: 50%; background: var(--rod); color: #fff; font-weight: 700; display: grid; place-items: center; }
.faq-start { max-width: 800px; }
.faq details, .faq-post { border-bottom: 1px solid var(--gra-linje); padding: .7em 0; }
.faq summary, .faq-post summary { font-weight: 600; cursor: pointer; padding: .3em 0; list-style: none; position: relative; padding-right: 2em; }
.faq summary::-webkit-details-marker, .faq-post summary::-webkit-details-marker { display: none; }
.faq summary::after, .faq-post summary::after { content: "+"; position: absolute; right: 0; top: 0; font-size: 1.4rem; color: var(--rod); line-height: 1; transition: transform var(--fart); }
.faq details[open] summary::after, .faq-post[open] summary::after { transform: rotate(45deg); }
.faq details p, .faq-post p { margin-top: .6em; color: #333; }
.faq-mer { margin-top: 1em; }
.kontakt-band { display: grid; grid-template-columns: 1.4fr 1fr; gap: 2em; align-items: center; background: var(--svart); color: #fff; border-radius: var(--radie); padding: 2.2em 2.4em; }
.kontakt-band h2 { margin-top: 0; color: #fff; }
.kontakt-band p { color: #ccc; margin: 0; }
.kontakt-knappar { display: flex; flex-direction: column; gap: .7em; align-items: stretch; }
.kontakt-knappar .liten { color: #aaa; text-align: center; }
.kontakt-band .knapp.sekundar { background: transparent; color: #fff; border-color: #666; }

/* ---------- Reels ---------- */
.reels { padding: 2.5em 0 1em; }
.reels h2 { margin-top: 0; }
.reel-rad { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(200px, 240px); gap: 1em; overflow-x: auto; padding-bottom: .6em; scroll-snap-type: x mandatory; }
.reel { margin: 0; aspect-ratio: 9/16; border-radius: var(--radie); overflow: hidden; background: #000; scroll-snap-align: start; box-shadow: var(--skugga); }
.reel video { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------- Produktlistor ---------- */
.produkt-rutor { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 1.3em; margin: 1.2em 0; }
.produkt-ruta { border: 1px solid var(--gra-linje); border-radius: var(--radie); overflow: hidden; background: #fff; display: flex; flex-direction: column; transition: transform var(--fart), box-shadow var(--fart), border-color var(--fart); }
.produkt-ruta:hover { transform: translateY(-4px); box-shadow: var(--skugga-lyft); border-color: transparent; }
.produkt-ruta a { text-decoration: none; color: var(--svart); display: flex; flex-direction: column; height: 100%; }
.ruta-bild { overflow: hidden; background: #fff; }
.produkt-ruta img { aspect-ratio: 1/1; object-fit: contain; width: 100%; background: #fff; transition: transform .5s; }
.produkt-ruta:hover img { transform: scale(1.04); }
.produkt-ruta .text { padding: .9em 1em 1.1em; display: flex; flex-direction: column; flex: 1; border-top: 1px solid var(--gra-bak); }
.produkt-ruta .namn { font-weight: 600; margin-bottom: .3em; line-height: 1.3; }
.produkt-ruta .kort { color: var(--gra-text); font-size: .86rem; flex: 1; }
.pris { margin-top: .7em; }
.pris .ex { font-size: 1.15rem; font-weight: 700; }
.pris .inkl { color: var(--gra-text); font-size: .85rem; display: block; }
.pris .offert { color: var(--gron-mork); font-weight: 600; }
.etikett { display: inline-block; font-size: .72rem; font-weight: 600; padding: .2em .6em; border-radius: 4px; background: var(--gra-bak); color: var(--gra-text); margin-bottom: .5em; align-self: flex-start; }
.etikett.gron { background: var(--gron-ljus); color: var(--gron-mork); }
.etikett.rod { background: var(--rod-ljus); color: var(--rod-mork); }

/* ---------- Kategori ---------- */
.brodsmulor { font-size: .85rem; color: var(--gra-text); margin: 1em 0; }
.brodsmulor a { color: var(--gra-text); text-decoration: none; }
.brodsmulor a:hover { color: var(--rod); }
.sidhuvud { margin: 1em 0 1.2em; }
.sidhuvud h1 { font-size: 2.2rem; }
.sidhuvud p { color: var(--gra-text); max-width: 800px; margin: 0; }
.rabatt-trappa { display: flex; gap: .5em; margin: .8em 0; flex-wrap: wrap; align-items: center; }
.rabatt-trappa span { background: #fff; border: 1px solid var(--gra-linje); border-radius: 6px; padding: .35em .7em; font-size: .85rem; }
.rabatt-trappa span b { color: var(--gron-mork); }
.rabatt-trappa > span:first-child { background: var(--gron); color: #fff; border-color: var(--gron); font-weight: 600; }
.rabatt-trappa .trappa-not { border: 0; background: none; color: var(--gra-text); padding: 0 .2em; }
.sida-kategori .kontakt-band { margin: 2.5em 0 0; }

/* ---------- Produktsida ---------- */
.produkt { display: grid; grid-template-columns: 1fr 1fr; gap: 3em; margin: .5em 0 2em; align-items: start; }
.galleri { position: sticky; top: 90px; }
.stor-ram { display: block; width: 100%; border: 1px solid var(--gra-linje); border-radius: var(--radie); overflow: hidden; background: #fff; padding: 0; cursor: zoom-in; position: relative; }
.stor-ram img { width: 100%; aspect-ratio: 1/1; object-fit: contain; transition: transform .35s ease; }
.stor-ram:hover img { transform: scale(1.6); }
.stor-ram img.byt { animation: tona .35s ease; }
@keyframes tona { from { opacity: .3; } to { opacity: 1; } }
.zoom-tips { position: absolute; left: .8em; bottom: .8em; background: rgba(255,255,255,.9); border-radius: 50%; width: 36px; height: 36px; display: grid; place-items: center; color: var(--svart); box-shadow: var(--skugga); pointer-events: none; }
.tummar { display: flex; gap: .5em; margin-top: .7em; flex-wrap: wrap; }
.tumme { width: 76px; height: 76px; padding: 0; border: 2px solid var(--gra-linje); border-radius: 8px; overflow: hidden; background: #fff; cursor: pointer; transition: border-color var(--fart), transform var(--fart); }
.tumme img { width: 100%; height: 100%; object-fit: cover; }
.tumme:hover { transform: translateY(-2px); }
.tumme.vald { border-color: var(--rod); }
.kategori-lank a { font-size: .85rem; color: var(--gron-mork); text-decoration: none; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }
.produkt-info h1 { font-size: 1.6rem; margin: .15em 0 .2em; line-height: 1.25; letter-spacing: -.01em; }
.artnr { color: #888; font-size: .8rem; margin: 0 0 1em; }
.artnr span { margin-left: .8em; }
.kopbox { border: 1px solid var(--gra-linje); border-radius: var(--radie); padding: 1.5em 1.6em 1.4em; background: #fff; margin: 0; box-shadow: var(--skugga); }
.pris-stor { display: flex; align-items: baseline; gap: .45em; flex-wrap: wrap; }
.pris-stor strong { font-size: 2.4rem; font-weight: 800; letter-spacing: -.03em; line-height: 1; color: var(--svart); }
.pris-stor .fran { font-size: 1rem; color: var(--gra-text); }
.pris-stor .moms { font-size: .9rem; color: var(--gra-text); }
.pris-inkl { color: var(--gra-text); font-size: .9rem; margin: .35em 0 0; }
.kopbox label { display: block; font-weight: 600; margin: 1.1em 0 .35em; font-size: .85rem; }
.kopbox select { padding: .65em .8em; border: 1px solid #c8c8c8; border-radius: 8px; font-size: 1rem; max-width: 100%; width: 100%; background: #fff; font-family: inherit; }
.lager { display: flex; align-items: center; gap: .5em; font-size: .9rem; margin: 1em 0 0; padding: .7em 0; border-top: 1px solid var(--gra-linje); border-bottom: 1px solid var(--gra-linje); }
.lager i { width: .65em; height: .65em; border-radius: 50%; background: var(--gron); flex: none; box-shadow: 0 0 0 3px var(--gron-ljus); }
.lager.lager-vantar i { background: #d99a00; box-shadow: 0 0 0 3px #fff3d6; }
.antal-rad-kop { display: flex; gap: 1.2em; align-items: flex-end; flex-wrap: wrap; margin-top: .2em; }
.antal-rad-kop label { margin-top: .9em; }
.kop-summa { margin-left: auto; text-align: right; }
.kop-summa .liten { display: block; font-size: .78rem; }
.kop-summa strong { font-size: 1.3rem; display: block; letter-spacing: -.01em; line-height: 1.2; }
.kop-summa .sparar { display: block; font-size: .8rem; color: var(--gron-mork); font-weight: 600; min-height: 1.2em; margin: 0; }
.kop-not { font-size: .8rem; color: var(--gra-text); margin: .5em 0 0; }
.antal-valj { display: inline-flex; border: 1px solid #c8c8c8; border-radius: 8px; overflow: hidden; background: #fff; }
.antal-valj button { width: 42px; border: 0; background: #fff; font-size: 1.25rem; cursor: pointer; color: var(--svart); transition: background var(--fart); }
.antal-valj button:hover { background: var(--gra-bak); }
.antal-valj input { width: 56px; text-align: center; border: 0; border-left: 1px solid #e4e4e2; border-right: 1px solid #e4e4e2; font-size: 1.05rem; font-weight: 600; padding: .6em .3em; font-family: inherit; -moz-appearance: textfield; }
.antal-valj input::-webkit-outer-spin-button, .antal-valj input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.antal-valj.liten-valj button { width: 32px; font-size: 1rem; }
.antal-valj.liten-valj input { width: 52px; padding: .4em .2em; font-size: .95rem; font-weight: 400; }
.kopbox ul.trygg { list-style: none; padding: 0; margin: 1em 0 0; font-size: .85rem; color: var(--gra-text); display: grid; gap: .35em; }
.kopbox ul.trygg li { display: flex; align-items: center; gap: .55em; }
.kopbox ul.trygg svg { width: 16px; height: 16px; color: var(--gron); flex: none; }
.prisstege { margin: 1em 0 0; border: 1px solid var(--gra-linje); border-radius: 8px; overflow: hidden; }
.prisstege table { margin: 0; font-size: .88rem; }
.prisstege th { font-weight: 600; font-size: .74rem; padding: .45em .8em; color: var(--gra-text); background: var(--gra-bak); text-transform: uppercase; letter-spacing: .04em; }
.prisstege td:first-child { white-space: nowrap; }
.prisstege td { padding: .55em .8em; cursor: pointer; transition: background .2s; border-bottom: 1px solid var(--gra-linje); }
.prisstege tr:last-child td { border-bottom: 0; }
.prisstege th:last-child, .prisstege td:last-child { text-align: right; }
.prisstege tr.vald td { background: var(--gron-ljus); font-weight: 600; }
.prisstege tr.vald td:first-child { box-shadow: inset 3px 0 0 var(--gron); }
.prisstege td b { color: var(--gron-mork); white-space: nowrap; }
.prisstege td .ingen { color: #999; font-weight: 400; }
.prisstege tr:hover td { background: var(--gra-bak); }
.prisstege tr.vald:hover td { background: #d9eedf; }
.kopbox .kop-knapp { width: 100%; margin-top: 1.1em; font-size: 1.1rem; padding: 1em 1.4em; }
@keyframes puls { 0% { transform: scale(1); opacity: .5; } 60% { transform: scale(1.04); opacity: 1; } 100% { transform: scale(1); } }
.puls { animation: puls .35s ease-out; display: inline-block; }
/* Flikar under bild och köpblock */
.flikar { margin-top: 2.5em; }
.flik-rad { display: flex; gap: .2em; border-bottom: 2px solid var(--gra-linje); overflow-x: auto; scrollbar-width: none; }
.flik-rad::-webkit-scrollbar { display: none; }
.flik { background: none; border: 0; font: inherit; font-weight: 600; font-size: .95rem; color: var(--gra-text); padding: .8em 1.1em; cursor: pointer; white-space: nowrap; border-bottom: 3px solid transparent; margin-bottom: -2px; transition: color var(--fart), border-color var(--fart); }
.flik:hover { color: var(--svart); }
.flik.vald { color: var(--svart); border-bottom-color: var(--rod); }
.flik-panel { padding: 1.5em 0 .5em; max-width: 760px; }
.flik-panel .flik-rubrik { display: none; }
.js .flik-panel:not(.vald) { display: none; }
.flik-panel .ingress { font-size: 1.1rem; color: var(--svart); }
.produkt-under { border-top: 1px solid var(--gra-linje); padding-top: 1.5em; }
.tekniskt th { width: 38%; }
.varning { background: #fff8e6; border: 1px solid #f0d68a; border-radius: 8px; padding: .9em 1.1em; margin: 1em 0; }
.info { background: var(--gron-ljus); border: 1px solid #b7dcc3; border-radius: 8px; padding: .9em 1.1em; margin: 1em 0; }
.fel { background: var(--rod-ljus); border: 1px solid #f0aab0; border-radius: 8px; padding: .9em 1.1em; margin: 1em 0; }
.klistrad { display: none; }
.lightbox { position: fixed; inset: 0; background: rgba(0,0,0,.88); z-index: 60; display: grid; place-items: center; padding: 1em; cursor: zoom-out; }
.lightbox[hidden] { display: none; }
.lightbox img { max-width: min(96vw, 1200px); max-height: 92vh; width: auto; height: auto; border-radius: 8px; background: #fff; animation: tona .25s ease; }
.lightbox-stang { position: absolute; top: 1em; right: 1em; background: #fff; border: 0; border-radius: 50%; width: 44px; height: 44px; display: grid; place-items: center; cursor: pointer; }
body.lightbox-oppen { overflow: hidden; }

/* ---------- Formulär ---------- */
form.formular { max-width: 680px; }
form.formular label { display: block; font-weight: 600; margin: 1em 0 .3em; font-size: .92rem; }
form.formular input, form.formular textarea, form.formular select { width: 100%; padding: .65em .8em; border: 1px solid #bbb; border-radius: 8px; font-size: 1rem; font-family: inherit; background: #fff; transition: border-color var(--fart), box-shadow var(--fart); }
form.formular input:focus, form.formular textarea:focus, form.formular select:focus { outline: 0; border-color: var(--gron); box-shadow: 0 0 0 3px var(--gron-ljus); }
form.formular textarea { min-height: 110px; }
form.formular .tva { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1em; }
form.formular .falt-foretag, form.formular .falt-adress, form.formular .falt-fakturaadress, form.formular .falt-epost { grid-column: 1 / -1; }
form.formular .liten { font-size: .85rem; color: var(--gra-text); }
form.formular .kryss { display: flex; gap: .6em; align-items: flex-start; font-weight: 500; }
form.formular .kryss input { width: auto; margin-top: .25em; }
.kassa { display: grid; grid-template-columns: 1.2fr .8fr; gap: 3em; align-items: start; }
.summering { border: 1px solid var(--gra-linje); border-radius: var(--radie); padding: 1.4em; background: var(--gra-bak); position: sticky; top: 90px; }
.summa-tabell td:last-child { text-align: right; white-space: nowrap; }
.summa-tabell tr.total td { font-weight: 700; font-size: 1.15rem; border-top: 2px solid var(--svart); border-bottom: 0; padding-top: .8em; }
.summa-tabell tr.rabattrad td { color: var(--gron-mork); font-weight: 600; }
.betalval { display: grid; gap: .6em; margin: .4em 0 1em; }
.betal { display: flex; gap: .8em; align-items: flex-start; border: 1px solid #bbb; border-radius: 10px; padding: .9em 1em; cursor: pointer; background: #fff; font-weight: 400; transition: border-color var(--fart), box-shadow var(--fart); }
.betal.vald { border-color: var(--gron); box-shadow: 0 0 0 2px #b7dcc3; }
.betal input { width: auto; margin-top: .3em; }
.betal strong { display: block; }
.betal small { display: block; color: var(--gra-text); font-size: .85rem; }
.betal .betalikoner { margin-top: .5em; }

/* ---------- Varukorg ---------- */
.korg-rader { display: grid; gap: .8em; margin-bottom: 1em; }
.korg-rad { display: grid; grid-template-columns: 80px 1fr auto auto; gap: 1em; align-items: center; border: 1px solid var(--gra-linje); border-radius: 10px; padding: .8em; background: #fff; }
.korg-bild img { width: 80px; height: 80px; object-fit: contain; border-radius: 6px; border: 1px solid var(--gra-bak); }
.korg-namn a { font-weight: 600; text-decoration: none; color: var(--svart); }
.korg-namn .liten, .korg-rabatt { display: block; }
.korg-rabatt { color: var(--gron-mork); font-size: .85rem; font-weight: 600; }
.korg-summa { text-align: right; min-width: 110px; }
.korg-summa strong { display: block; font-size: 1.05rem; }
.korg-summa .liten { display: block; }
.summering .korg-rad { grid-template-columns: 56px 1fr auto; padding: .5em; font-size: .9rem; }
.summering .korg-bild img { width: 56px; height: 56px; }
.summering .korg-antal-kol { grid-column: 2; font-size: .85rem; color: var(--gra-text); }
.summering .korg-summa { grid-column: 3; grid-row: 1 / 3; }
.tom-korg { text-align: center; padding: 3em 1em; color: var(--gra-text); }
.tom-korg svg { width: 48px; height: 48px; color: #bbb; margin: 0 auto 1em; }

/* ---------- Toast ---------- */
.toast { position: fixed; left: 50%; bottom: 1.5em; transform: translate(-50%, 20px); background: var(--svart); color: #fff; padding: .9em 1.1em; border-radius: 12px; box-shadow: var(--skugga-lyft); display: flex; gap: .9em; align-items: center; z-index: 70; opacity: 0; transition: opacity .3s, transform .3s; max-width: min(92vw, 520px); font-size: .95rem; }
.toast[hidden] { display: none; }
.toast.syns { opacity: 1; transform: translate(-50%, 0); }
.toast .knapp { padding: .5em .9em; font-size: .9rem; white-space: nowrap; }
.toast-bock { width: 32px; height: 32px; border-radius: 50%; background: var(--gron); display: grid; place-items: center; font-weight: 700; flex: none; animation: studs .5s ease; }
@keyframes studs { 0% { transform: scale(.4); } 60% { transform: scale(1.2); } 100% { transform: scale(1); } }

/* ---------- Innehållssidor ---------- */
.innehall { max-width: 820px; }
.innehall table td, .innehall table th { font-size: .93rem; }
.offert-huvud { margin: 1em 0 1.5em; }
.offert-huvud h1, .offert-huvud h2 { margin: 0 0 .3em; }
.offert-huvud p { color: var(--gra-text); font-size: 1.05rem; margin: 0; }
.offert-block { border-top: 1px solid var(--gra-linje); padding-top: 2em; margin-top: 2em; scroll-margin-top: 90px; }
.offert-tvadelad { display: grid; grid-template-columns: 1.15fr .85fr; gap: 3em; align-items: start; margin-bottom: 2em; }
.offert-tvadelad form.formular { max-width: none; margin: 0; }
.offert-tvadelad form.formular label:first-of-type { margin-top: 0; }
.offert-tvadelad .tva:first-child label { margin-top: 0; }
.offert-bilder { display: grid; grid-template-columns: 1fr 1fr; gap: 1em; }
.offert-bilder > a, .offert-bilder > picture, .offert-bilder > img { display: block; border: 1px solid var(--gra-linje); border-radius: var(--radie); overflow: hidden; background: #fff; }
.offert-bilder img { aspect-ratio: 1/1; object-fit: contain; width: 100%; transition: transform .5s; }
.offert-bilder a:hover img { transform: scale(1.04); }
.kontakt-rad { grid-column: 1 / -1; background: var(--gra-bak); border-radius: var(--radie); padding: 1.2em 1.4em; display: grid; gap: .3em; }
.kontakt-rad a { font-weight: 700; text-decoration: none; font-size: 1.15rem; color: var(--svart); }
.kontakt-rad a:first-of-type { font-size: 1.6rem; letter-spacing: -.01em; }
.kontakt-rad a:hover { color: var(--rod); }
.kontakt-rad span { color: var(--gra-text); font-size: .88rem; line-height: 1.5; margin-top: .4em; }
.kontakt-rad .pris { margin: 0 0 .5em; }
.honung { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* ---------- Animationer ---------- */
.js .anim { opacity: 0; transform: translateY(18px); transition: opacity .55s ease, transform .55s ease; transition-delay: calc(var(--f, 0) * 60ms); }
.js .anim.syns { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .js .anim { opacity: 1; transform: none; }
}

/* ---------- Mobil ---------- */
@media (max-width: 1000px) {
  .fot-kolumner { grid-template-columns: 1fr 1fr; }
  .kat-lank { padding: .95em .6em; font-size: .92rem; }
  .kat-extra a { padding: .95em .5em; }
  .fortroende-band { grid-template-columns: repeat(3, 1fr); }
  .kategori-rad { grid-template-columns: repeat(3, 1fr); }
  header.huvud .wrap { gap: 1.2em; }
  .logga img { height: 46px; }
}
@media (max-width: 900px) {
  h1 { font-size: 1.7rem; }
  .hero { padding: 2em 0; }
  .hero .wrap { grid-template-columns: 1fr; gap: 1.5em; }
  .hero h1 { font-size: 2.2rem; }
  .stor-rubrik { font-size: 1.6rem; }
  .tre-steg { grid-template-columns: 1fr; gap: 1.4em; }
  .tre-steg strong { font-size: 1.25rem; }
  .fortroende-band { grid-template-columns: 1fr 1fr; gap: 1em; }
  .band-bild { width: 130px; height: 130px; }
  .band-spar { animation-duration: 40s; }
  .offert-tvadelad { grid-template-columns: 1fr; gap: 1.5em; }
  .offert-bilder { order: -1; }
  .kontakt-rad { padding: 1em; }
  .sida-start main { padding-bottom: 0; }
  .klistrad-start { display: flex; }
  .hero-kort { left: .6em; bottom: .6em; max-width: 220px; }
  .produkt { grid-template-columns: 1fr; gap: 1.5em; }
  .galleri { position: static; }
  .stor-ram { cursor: pointer; }
  .stor-ram:hover img { transform: none; }
  .kassa { grid-template-columns: 1fr; }
  .summering { position: static; }
  .tva-kolumner { grid-template-columns: 1fr; gap: 1.5em; }
  .kontakt-band { grid-template-columns: 1fr; padding: 1.6em; }
  .toppband .wrap { justify-content: center; gap: 1em; }
  .usp { gap: 1.2em; }
  .usp li:nth-child(3), .usp li:nth-child(4) { display: none; }
  .topp-kontakt { display: none; }
  header.huvud .wrap { gap: .6em; min-height: 64px; flex-wrap: wrap; padding-bottom: .6em; }
  .meny-toggle { display: inline-flex; flex-direction: column; align-items: center; gap: .1em; order: -1; background: none; border: 0; padding: .3em .5em; cursor: pointer; color: var(--svart); font-size: .7rem; font-weight: 600; font-family: inherit; }
  .meny-toggle svg { width: 26px; height: 26px; }
  .logga img { height: 36px; }
  nav.ikoner { margin-left: auto; gap: 0; }
  .ikon-lank { padding: .3em .5em; font-size: .68rem; }
  .ikon-lank svg { width: 24px; height: 24px; }
  form.sok { order: 5; flex-basis: 100%; max-width: none; height: 44px; margin: 0; }
  form.sok input { font-size: .95rem; }
  form.sok button { width: 36px; height: 36px; }
  .sok-forslag a { grid-template-columns: 44px 1fr; gap: .3em .8em; }
  .sok-forslag img { width: 44px; height: 44px; grid-row: 1 / 3; }
  .sok-forslag .f-namn { font-size: .88rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .sok-forslag .f-kat { display: none; }
  .sok-forslag .f-pris { grid-column: 2; font-size: .85rem; color: var(--rod); }
  .sok-forslag .f-alla, .sok-forslag .f-kategori { grid-template-columns: 1fr; }
  nav.katrad { position: fixed; top: 0; left: 0; bottom: 0; width: min(88vw, 360px); background: #fff; transform: translateX(-105%); transition: transform .3s ease; z-index: 50; overflow-y: auto; box-shadow: var(--skugga-lyft); border: 0; display: flex; flex-direction: column; }
  nav.katrad.oppen { transform: none; }
  .meny-topp { display: flex; justify-content: space-between; align-items: center; padding: .9em 1em .9em 1.2em; border-bottom: 1px solid var(--gra-linje); }
  .meny-logga img { height: 32px; width: auto; }
  .meny-stang { display: grid; place-items: center; background: none; border: 0; cursor: pointer; padding: .4em; color: var(--svart); }
  .katrad-wrap { display: block; padding: 0; }
  .kat-lista, .kat-extra { display: block; }
  .kat { display: block; border-bottom: 1px solid var(--gra-bak); position: relative; }
  .kat-lank { display: block; padding: .9em 3.2em .9em 1.2em; font-size: 1.05rem; border: 0; }
  .kat:hover > .kat-lank { border: 0; }
  .kat-pil { display: grid; place-items: center; position: absolute; right: .6em; top: .5em; width: 40px; height: 40px; border: 0; background: var(--gra-bak); border-radius: 50%; cursor: pointer; color: var(--svart); transition: transform .25s; }
  .kat.oppen .kat-pil { transform: rotate(180deg); }
  .mega, .kat:hover > .mega { display: none; }
  .kat.oppen > .mega { display: block; position: static; box-shadow: none; border: 0; padding: 0 0 .6em; margin: 0; max-width: none; grid-template-columns: none; background: var(--gra-bak); }
  .mega-lista { columns: 1; }
  .mega-lista a { padding: .6em 1.6em; border-radius: 0; font-size: .97rem; }
  .mega-lista li:first-child a { border-bottom: 1px solid var(--gra-linje); margin: 0; border-radius: 0; }
  .mega-bild, .mega-produkter, .mega-not { display: none; }
  .mega-kol { border: 0; padding: 0; }
  .kat-extra { margin: .6em 0 0; padding: .4em 0; border-top: 6px solid var(--gra-bak); }
  .kat-extra a { padding: .75em 1.2em; font-size: 1rem; color: var(--svart); }
  .bara-mobil { display: block; }
  .meny-kontakt { display: flex; flex-direction: column; gap: .3em; padding: 1em 1.2em 1.6em; margin-top: auto; background: var(--gra-bak); font-size: .92rem; color: var(--gra-text); }
  .meny-kontakt a { color: var(--svart); text-decoration: none; font-weight: 600; display: inline-flex; align-items: center; gap: .4em; }
  .meny-kontakt a:first-child { font-size: 1.2rem; }
  .meny-kontakt svg { color: var(--gron); width: 18px; height: 18px; }
  .meny-skugga { position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 40; opacity: 0; pointer-events: none; transition: opacity .3s; display: block; }
  body.meny-oppen .meny-skugga { opacity: 1; pointer-events: auto; }
  body.meny-oppen { overflow: hidden; }
  .kakor-inre { flex-direction: column; align-items: stretch; gap: .8em; }
  .kakor-knappar .knapp { flex: 1; }
  body.kakor-syns { padding-bottom: 190px; }
  .fot-bolag { flex-direction: column; align-items: flex-start; gap: 1em; }
  form.formular .tva { grid-template-columns: 1fr; }
  .korg-rad { grid-template-columns: 64px 1fr; }
  .korg-bild img { width: 64px; height: 64px; }
  .korg-antal-kol { grid-column: 2; }
  .korg-summa { grid-column: 2; text-align: left; }
  .korg-summa strong, .korg-summa .liten { display: inline; margin-right: .5em; }
  .offert-sida { grid-template-columns: 1fr; }
  .sida-produkt main { padding-bottom: 84px; }
  .produkt-info h1 { font-size: 1.35rem; }
  .klistrad { display: flex; position: fixed; left: 0; right: 0; bottom: 0; background: #fff; border-top: 1px solid var(--gra-linje); padding: .7em 1em calc(.7em + env(safe-area-inset-bottom)); gap: 1em; align-items: center; justify-content: space-between; z-index: 35; box-shadow: 0 -6px 20px rgba(0,0,0,.08); transition: transform .3s; }
  .klistrad.dold { transform: translateY(110%); }
  .klistrad .liten { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 45vw; }
  .klistrad strong { font-size: 1.1rem; }
  .klistrad .knapp { white-space: nowrap; }
}
@media (max-width: 600px) {
  .produkt-rutor, .kategori-rutor { grid-template-columns: 1fr 1fr; gap: .8em; }
  .produkt-ruta .text { padding: .7em .8em .9em; }
  .produkt-ruta .kort { display: none; }
  .kategori-rad { grid-template-columns: 1fr 1fr; gap: .7em; }
  .kategori-bild span { padding: .5em .7em .7em; flex-direction: column; gap: .1em; }
  .kategori-bild strong { font-size: .95rem; }
  .fortroende-band { grid-template-columns: 1fr; }
  .fot-betal { gap: .8em; }
  .kopbox { padding: 1.2em 1.1em 1.1em; }
  .pris-stor strong { font-size: 2.1rem; }
  .antal-rad-kop { gap: .8em; }
  .flik { padding: .7em .8em; font-size: .9rem; }
  .prisstege th, .prisstege td { padding-left: .6em; padding-right: .6em; }
  .prisstege .th-moms { display: none; }
  .usp li:nth-child(2) { display: none; }
  .fot-kolumner { grid-template-columns: 1fr; gap: 1.8em; }
  .fot-rad > span { min-width: 0; flex-basis: 100%; }
  .hero-knappar .knapp { width: 100%; }
}

/* ---------- Brödsmulor, filter, kort, trust, kundservice, felsida ---------- */
.brodsmulor { font-size: .85rem; color: var(--gra-text); margin: 1em 0; }
.brodsmulor ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .3em; }
.brodsmulor li + li::before { content: "/"; margin-right: .3em; color: #bbb; }
.brodsmulor a { color: var(--gra-text); text-decoration: none; }
.brodsmulor a:hover { color: var(--rod); text-decoration: underline; }
.brodsmulor [aria-current] { color: var(--svart); font-weight: 500; }
form.filter { display: flex; justify-content: space-between; align-items: center; gap: 1em; flex-wrap: wrap; margin: 1.2em 0 .4em; padding: .8em 0; border-top: 1px solid var(--gra-linje); border-bottom: 1px solid var(--gra-linje); }
.filter-grupper { display: flex; gap: .4em; flex-wrap: wrap; }
.filter-grupper a { text-decoration: none; color: var(--svart); border: 1px solid #c8c8c8; border-radius: 999px; padding: .4em .9em; font-size: .88rem; font-weight: 500; transition: background var(--fart), border-color var(--fart), color var(--fart); }
.filter-grupper a span { color: var(--gra-text); font-size: .8rem; margin-left: .2em; }
.filter-grupper a:hover { border-color: var(--svart); color: var(--svart); }
.filter-grupper a.vald { background: var(--svart); border-color: var(--svart); color: #fff; }
.filter-grupper a.vald span { color: #ccc; }
.filter-val { display: flex; gap: 1em; align-items: center; margin-left: auto; flex-wrap: wrap; }
.filter-val label { font-size: .85rem; color: var(--gra-text); display: inline-flex; align-items: center; gap: .5em; }
.filter-val select { padding: .45em .7em; border: 1px solid #c8c8c8; border-radius: 8px; font-size: .9rem; font-family: inherit; background: #fff; color: var(--svart); }
.antal-rad { margin: .4em 0 0; }
.produkt-ruta .lev { display: inline-flex; align-items: center; gap: .4em; font-size: .78rem; color: var(--gra-text); margin-top: .5em; }
.produkt-ruta .lev i { width: .6em; height: .6em; border-radius: 50%; background: var(--gron); flex: none; }
.produkt-ruta .lev i.lev-rod { background: #d99a00; }
.kop-marken { margin-top: .8em; justify-content: center; }
.kop-marken .marke { height: 26px; padding: 0 .4em; }
.kop-marken .marke img { height: 13px; max-width: 56px; }
.kop-marken .marke-mastercard img { height: 18px; }
.kop-marken .marke-klarna img { height: 22px; }
.kop-marken .marke-applepay img { height: 15px; }
.kop-marken .marke-faktura img { height: 26px; }
.trust-block { display: grid; grid-template-columns: repeat(3, 1fr); gap: .8em; margin: 1.2em 0 .8em; }
.trust-block > div { display: flex; gap: .6em; align-items: flex-start; font-size: .82rem; color: var(--gra-text); line-height: 1.35; }
.trust-block svg { width: 24px; height: 24px; color: var(--gron); flex: none; margin-top: .1em; }
.trust-block strong { display: block; color: var(--svart); font-size: .88rem; }
.relaterade .sektion-huvud p { color: var(--gra-text); margin: 0; }
.sida-kundservice .ingress, .sida-foretag .ingress, .felsida .ingress { font-size: 1.15rem; color: var(--gra-text); max-width: 720px; }
.ks-kontakt { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1em; margin: 1.5em 0 2.5em; }
.ks-ruta { display: block; text-decoration: none; color: var(--svart); background: var(--gra-bak); border-radius: var(--radie); padding: 1.3em 1.4em; border-left: 4px solid var(--rod); transition: transform var(--fart), box-shadow var(--fart); }
.ks-ruta strong { display: block; font-size: 1.3rem; letter-spacing: -.01em; margin-bottom: .2em; }
.ks-ruta span { color: var(--gra-text); font-size: .9rem; }
.ks-ruta:hover { transform: translateY(-3px); box-shadow: var(--skugga-lyft); color: var(--svart); }
.ks-rader { margin: 0 0 2em; }
.ks-rad { display: grid; grid-template-columns: 1.6fr 1fr; gap: 2em; padding: 1.6em 0; border-top: 1px solid var(--gra-linje); align-items: start; }
.ks-rad h2 { margin: 0 0 .4em; font-size: 1.35rem; }
.ks-rad p { margin: 0; color: #333; max-width: 640px; }
.ks-rad > div:last-child { display: flex; flex-direction: column; gap: .5em; padding-top: .3em; }
.ks-rad > div:last-child a { font-weight: 600; text-decoration: none; color: var(--svart); display: inline-flex; align-items: center; gap: .4em; }
.ks-rad > div:last-child a::before { content: ""; width: .5em; height: .5em; border-right: 2px solid var(--rod); border-top: 2px solid var(--rod); transform: rotate(45deg); flex: none; }
.ks-rad > div:last-child a:hover { color: var(--rod); }
.sida-foretag .offert-tvadelad { margin-top: 1em; }
.sida-foretag .kontakt-rad { grid-column: auto; align-self: start; }
.felsida { padding: 2em 20px 3em; }
.fel-kod { font-size: 5rem; font-weight: 800; color: var(--rod); letter-spacing: -.04em; margin: 0; line-height: 1; }
.felsida h1 { margin-top: .2em; }
.felsida .kategori-rad { margin: 1.5em 0; }
.felsida form.sok { margin: 1.4em 0; }
@media (max-width: 900px) {
    .ks-kontakt { grid-template-columns: 1fr; }
  .ks-rad { grid-template-columns: 1fr; gap: .8em; padding: 1.2em 0; }
  form.filter { align-items: stretch; }
  .filter-val { margin-left: 0; }
  .filter-val label { flex: 1; }
  .filter-val select { flex: 1; }
  .fel-kod { font-size: 3.5rem; }
}

/* ---------- Prispar: båda momslägena renderas, body.moms-inkl väljer ---------- */
.pp { display: inline; }
.pp-inkl { display: none; }
body.moms-inkl .pp-ex { display: none; }
body.moms-inkl .pp-inkl { display: inline; }
.pp b { font-weight: 700; white-space: nowrap; }
.pp i { font-style: normal; font-size: .78em; color: var(--gra-text); margin-left: .35em; font-weight: 400; }
.pp em { display: block; font-style: normal; font-size: .8rem; color: var(--gra-text); font-weight: 400; margin-top: .1em; }
.pp-pre { font-weight: 400; color: var(--gra-text); font-size: .85em; margin-right: .25em; }
.pp-ren i, .pp-ren em { display: none; }
.bara-inkl { display: none; }
body.moms-inkl .bara-ex { display: none; }
body.moms-inkl .bara-inkl { display: inline; }
.pris .pp b { font-size: 1.15rem; }
.pris-stor .pp-stor b { font-size: 2.4rem; font-weight: 800; letter-spacing: -.03em; line-height: 1; }
.pris-stor .pp-stor i { font-size: .9rem; }
.pris-stor .pp-stor em { font-size: .9rem; margin-top: .4em; }
.pris-stor .pp-stor .pp-pre { font-size: 1rem; }
.kop-summa strong { display: block; }
.pp-summa b { font-size: 1.3rem; letter-spacing: -.01em; }
.pp-summa i { display: none; }
.pp-summa em { font-size: .78rem; }
.prisstege .pp-ren b { font-weight: inherit; }
.prisstege tr.vald .pp-ren b { font-weight: 600; }
.mega-bild em .pp b, .mega-produkt .mp-pris .pp b { font-weight: 600; }
.mega-bild em .pp .pp-pre { color: var(--rod); }
.klistrad .pp em, .klistrad .pp i { display: none; }
.f-pris .pp i, .f-pris .pp em { display: none; }

/* ---------- Momsväxlaren ---------- */
.moms-val { display: inline-flex; border: 1px solid #d0d0ce; border-radius: 999px; padding: 3px; background: var(--gra-bak); flex: none; }
.moms-val button { border: 0; background: transparent; padding: .42em .85em; border-radius: 999px; font: inherit; font-size: .78rem; font-weight: 600; color: var(--gra-text); cursor: pointer; white-space: nowrap; transition: background var(--fart), color var(--fart); }
.moms-val button:hover { color: var(--svart); }
.moms-val button[aria-pressed="true"] { background: var(--svart); color: #fff; }
.topp-moms { display: none; }

/* ---------- Chatten: Mera 24-hjälpen ---------- */
.chatt-knapp { position: fixed; right: 20px; bottom: 20px; z-index: 75; display: inline-flex; align-items: center; gap: .55em; background: var(--rod); color: #fff; border: 0; border-radius: 999px; padding: .85em 1.3em .85em 1.05em; font: inherit; font-weight: 700; font-size: .98rem; cursor: pointer; box-shadow: 0 10px 30px rgba(224,8,24,.35); transition: transform var(--fart), box-shadow var(--fart), background var(--fart); }
.chatt-knapp svg { width: 22px; height: 22px; }
.chatt-knapp:hover { background: var(--rod-mork); transform: translateY(-2px); box-shadow: 0 14px 34px rgba(224,8,24,.4); }
body.chatt-oppen .chatt-knapp { display: none; }
body.kakor-syns .chatt-knapp { bottom: 130px; }
.chatt { position: fixed; right: 20px; bottom: 20px; width: min(400px, calc(100vw - 40px)); height: min(660px, calc(100vh - 40px)); background: #fff; border-radius: 18px; box-shadow: 0 24px 70px rgba(0,0,0,.28); z-index: 76; display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--gra-linje); animation: chatt-in .25s ease; }
.chatt[hidden] { display: none; }
@keyframes chatt-in { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }
.chatt-huvud { display: flex; align-items: center; gap: .8em; padding: .9em 1em; background: var(--svart); color: #fff; }
.chatt-huvud strong { display: block; font-size: 1rem; }
.chatt-huvud span { display: block; font-size: .76rem; color: #bbb; line-height: 1.3; }
.chatt-avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--rod); display: grid; place-items: center; flex: none; }
.chatt-avatar svg { width: 20px; height: 20px; }
.chatt-stang { margin-left: auto; background: none; border: 0; color: #fff; cursor: pointer; padding: .3em; display: grid; place-items: center; border-radius: 50%; }
.chatt-stang:hover { background: rgba(255,255,255,.12); }
.chatt-logg { flex: 1; overflow-y: auto; padding: 1em; background: var(--gra-bak); display: flex; flex-direction: column; gap: .6em; }
.chatt-rad { display: flex; }
.chatt-du { justify-content: flex-end; }
.chatt-bubbla { max-width: 88%; padding: .7em .9em; border-radius: 14px; font-size: .93rem; line-height: 1.45; background: #fff; border: 1px solid var(--gra-linje); }
.chatt-du .chatt-bubbla { background: var(--svart); color: #fff; border-color: var(--svart); border-bottom-right-radius: 4px; }
.chatt-bot .chatt-bubbla { border-bottom-left-radius: 4px; }
.chatt-bubbla p { margin: 0 0 .6em; }
.chatt-bubbla p:last-child { margin-bottom: 0; }
.chatt-produkter { display: grid; gap: .4em; margin-top: .7em; }
.chatt-produkt { display: grid; grid-template-columns: 56px 1fr; gap: .7em; align-items: center; text-decoration: none; color: var(--svart); border: 1px solid var(--gra-linje); border-radius: 10px; padding: .4em; background: #fff; transition: box-shadow var(--fart); }
.chatt-produkt:hover { box-shadow: var(--skugga-lyft); color: var(--svart); }
.chatt-produkt img { width: 56px; height: 56px; object-fit: contain; border-radius: 6px; }
.cp-namn { display: block; font-size: .85rem; font-weight: 600; line-height: 1.25; }
.cp-pris { display: block; font-size: .82rem; color: var(--rod); margin-top: .15em; }
.cp-pris .pp b { font-weight: 700; }
.cp-pris .pp i, .cp-pris .pp em { display: none; }
.chatt-lankar { display: flex; flex-wrap: wrap; gap: .4em; margin-top: .7em; }
.chatt-lankar a { font-size: .82rem; font-weight: 600; text-decoration: none; color: var(--svart); border: 1px solid #c8c8c8; border-radius: 999px; padding: .3em .8em; background: #fff; }
.chatt-lankar a:hover { border-color: var(--svart); }
.chatt-lead { display: grid; gap: .5em; }
.chatt-lead label { font-size: .8rem; font-weight: 600; display: grid; gap: .2em; }
.chatt-lead input { padding: .55em .7em; border: 1px solid #bbb; border-radius: 8px; font: inherit; font-size: .95rem; }
.chatt-lead .knapp { padding: .6em 1em; font-size: .92rem; }
.chatt-lead .liten { font-size: .74rem; }
.chatt-prickar { display: inline-flex; gap: 4px; padding: .2em 0; }
.chatt-prickar i { width: 7px; height: 7px; border-radius: 50%; background: #999; animation: prick 1s infinite ease-in-out; }
.chatt-prickar i:nth-child(2) { animation-delay: .15s; }
.chatt-prickar i:nth-child(3) { animation-delay: .3s; }
@keyframes prick { 0%, 80%, 100% { transform: translateY(0); opacity: .5; } 40% { transform: translateY(-4px); opacity: 1; } }
.chatt-chips { display: flex; gap: .4em; flex-wrap: wrap; padding: .6em 1em 0; background: #fff; border-top: 1px solid var(--gra-linje); }
.chatt-chips:empty { display: none; }
.chatt-chips button { border: 1px solid #c8c8c8; background: #fff; border-radius: 999px; padding: .38em .8em; font: inherit; font-size: .8rem; font-weight: 600; color: var(--svart); cursor: pointer; transition: background var(--fart), border-color var(--fart); }
.chatt-chips button:hover { background: var(--gra-bak); border-color: var(--svart); }
.chatt-form { display: flex; gap: .5em; padding: .7em 1em .9em; background: #fff; }
.chatt-form input { flex: 1; min-width: 0; padding: .7em .9em; border: 1px solid #bbb; border-radius: 999px; font: inherit; font-size: .95rem; }
.chatt-form input:focus { outline: 0; border-color: var(--svart); box-shadow: 0 0 0 3px rgba(0,0,0,.06); }
.chatt-form button { width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--rod); color: #fff; display: grid; place-items: center; cursor: pointer; flex: none; }
.chatt-form button:hover { background: var(--rod-mork); }

/* ---------- Startsidan: hero med riktigt foto och prislappar ---------- */
.hero-foto { background: #fff; padding: 2.6em 0 2.4em; }
.hero-foto .wrap { grid-template-columns: 1fr 1.05fr; gap: 3em; }
.hero-over { font-size: .82rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--rod); margin: 0 0 .8em; }
.hero-foto h1 { font-size: 3.1rem; }
.hero-fakta { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: .5em 1.2em; font-size: .9rem; font-weight: 600; }
.hero-fakta li { display: flex; align-items: center; gap: .45em; }
.hero-fakta svg { width: 18px; height: 18px; color: var(--gron); flex: none; }
.hero-foto-ram { position: relative; border-radius: var(--radie); overflow: hidden; aspect-ratio: 5/4; background: var(--gra-bak); box-shadow: var(--skugga-lyft); }
.hero-foto-ram picture, .hero-foto-ram img.hero-img { width: 100%; height: 100%; }
.hero-foto-ram img.hero-img { object-fit: cover; object-position: 50% 42%; border-radius: 0; box-shadow: none; width: 100%; height: 100%; }
.hero-punkt { position: absolute; left: var(--x); top: var(--y); text-decoration: none; color: var(--svart); z-index: 2; }
.hero-punkt > i { position: absolute; left: -14px; top: -14px; width: 28px; height: 28px; border-radius: 50%; background: #fff; border: 6px solid var(--rod); box-shadow: 0 0 0 4px rgba(255,255,255,.6), 0 4px 14px rgba(0,0,0,.25); animation: punkt 2.2s infinite; }
@keyframes punkt { 0%, 100% { box-shadow: 0 0 0 4px rgba(255,255,255,.6), 0 4px 14px rgba(0,0,0,.25); } 50% { box-shadow: 0 0 0 10px rgba(224,8,24,.18), 0 4px 14px rgba(0,0,0,.25); } }
.hero-punkt > span { position: absolute; left: 22px; top: -22px; width: 215px; background: #fff; border-radius: 10px; padding: .55em 2.1em .6em .8em; box-shadow: var(--skugga-lyft); display: grid; line-height: 1.3; transition: transform var(--fart); }
.hero-punkt > span > small { font-size: .68rem; color: var(--gra-text); }
.hero-punkt > span > strong { font-size: .9rem; }
.hero-punkt > span .pp { font-size: .85rem; color: var(--rod); }
.hero-punkt > span .pp i { color: var(--gra-text); }
.hero-punkt > span > svg { position: absolute; right: .55em; top: 50%; transform: translateY(-50%); color: var(--rod); }
.hero-punkt:hover > span { transform: translateY(-3px); }
.hero-punkt.vanster > span { left: auto; right: 22px; }
.foto-marke { position: absolute; left: 1em; bottom: 1em; background: rgba(255,255,255,.92); border-radius: 999px; padding: .35em .8em .35em .6em; font-size: .76rem; font-weight: 600; display: inline-flex; align-items: center; gap: .4em; color: var(--svart); }
.foto-marke svg { color: var(--gron); }

/* Kategorier som cirklar */
.sektion-kategorier { padding-top: 2.4em; }
.kat-cirklar { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1em; }
.kat-cirkel { text-decoration: none; color: var(--svart); text-align: center; display: grid; justify-items: center; gap: .3em; }
.kc-bild { width: 100%; max-width: 150px; aspect-ratio: 1/1; border-radius: 50%; background: #fff; border: 1px solid var(--gra-linje); overflow: hidden; display: grid; place-items: center; padding: 12%; transition: transform var(--fart), box-shadow var(--fart), border-color var(--fart); }
.kc-bild img { width: 100%; height: 100%; object-fit: contain; }
.kat-cirkel strong { font-size: .95rem; margin-top: .4em; }
.kat-cirkel em { font-style: normal; font-size: .78rem; color: var(--gra-text); }
.kat-cirkel:hover { color: var(--rod); }
.kat-cirkel:hover .kc-bild { transform: translateY(-4px); box-shadow: var(--skugga-lyft); border-color: transparent; }
.sektion-huvud.rad { display: flex; justify-content: space-between; align-items: flex-end; gap: 1em; flex-wrap: wrap; }
.lank-pil { display: inline-flex; align-items: center; gap: .2em; font-weight: 600; text-decoration: none; color: var(--svart); white-space: nowrap; }
.lank-pil:hover { color: var(--rod); }

/* Riktiga foton i miljö */
.miljo { padding-bottom: 2em; }
.miljo-rad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1em; }
.miljo-bild { position: relative; display: block; border-radius: var(--radie); overflow: hidden; background: var(--gra-bak); aspect-ratio: 4/5; text-decoration: none; color: #fff; box-shadow: var(--skugga); }
.miljo-bild picture, .miljo-bild img { width: 100%; height: 100%; }
.miljo-bild img { object-fit: cover; transition: transform .6s; }
.miljo-bild:hover img { transform: scale(1.04); }
.miljo-bild span { position: absolute; left: 0; right: 0; bottom: 0; padding: 2.4em 1.1em 1em; background: linear-gradient(0deg, rgba(0,0,0,.75), rgba(0,0,0,0)); font-size: .9rem; font-weight: 600; line-height: 1.35; }
.miljo-liten { grid-template-columns: 1fr 1fr; margin: 2.5em 0 1em; max-width: 720px; }
.miljo-liten .miljo-bild { aspect-ratio: 4/3; }

/* ---------- Produktkort med artikelnummer och köpknapp ---------- */
.produkt-ruta .ruta-lank { flex: 1; }
.produkt-ruta .text { border-top: 0; padding-bottom: .4em; }
.artnr-kort { display: block; font-size: .74rem; color: #888; margin: .1em 0 .4em; }
.produkt-ruta .kort { font-size: .84rem; }
.ruta-fot { display: flex; justify-content: space-between; align-items: flex-end; gap: .6em; padding: .4em 1em 1em; }
.ruta-fot .pris { margin: 0; }
.ruta-fot .pris .pp b { font-size: 1.2rem; }
.ruta-fot .pris .pp i { display: block; margin: 0; font-size: .74rem; }
.ruta-fot .pris .pp em { display: none; }
.ruta-fot .pris .pp .pp-pre { display: block; font-size: .74rem; margin: 0; }
.snabbkop { margin: 0; }
.kort-knapp { padding: .55em 1.1em; font-size: .92rem; border-radius: 999px; flex: none; }
.kort-knapp.klar { background: var(--gron); }
.ruta-fot .offert { font-size: .95rem; }

/* ---------- Kategorisida med sidomeny ---------- */
.kat-layout { display: grid; grid-template-columns: 240px 1fr; gap: 2.5em; align-items: start; }
.kat-sida { position: sticky; top: 100px; }
.kat-sida h2 { font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; color: var(--gra-text); margin: .4em 0 .6em; }
.kat-trad, .kat-trad ul { list-style: none; margin: 0; padding: 0; }
.kat-trad > li { border-bottom: 1px solid var(--gra-bak); }
.kat-trad a { display: flex; justify-content: space-between; align-items: baseline; gap: .6em; text-decoration: none; color: var(--svart); padding: .55em .4em; font-size: .95rem; border-radius: 6px; }
.kat-trad a span { color: #999; font-size: .78rem; }
.kat-trad a:hover { background: var(--gra-bak); color: var(--rod); }
.kat-trad > li.aktiv > a { font-weight: 700; }
.kat-trad ul { padding: 0 0 .5em .9em; }
.kat-trad ul a { font-size: .9rem; padding: .4em .5em; }
.kat-trad ul li.aktiv a { color: var(--rod); font-weight: 600; background: var(--rod-ljus); }
.kat-hjalp { margin-top: 1.4em; background: var(--gra-bak); border-radius: var(--radie); padding: 1.1em 1.2em; display: grid; gap: .5em; font-size: .88rem; color: var(--gra-text); }
.kat-hjalp strong { color: var(--svart); font-size: .95rem; }
.kat-hjalp .knapp { font-size: .88rem; padding: .55em 1em; }
.kat-inne { min-width: 0; }
.kat-inne .sidhuvud { margin-top: 0; }
.kat-inne .produkt-rutor { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }

/* ---------- Produktsidan: punkter och trygghetsruta ---------- */
.punkter { list-style: none; margin: 0 0 1.1em; padding: 0; display: grid; gap: .35em; }
.punkter li { display: flex; gap: .5em; align-items: flex-start; font-size: .93rem; line-height: 1.4; }
.punkter svg { width: 18px; height: 18px; color: var(--gron); flex: none; margin-top: .15em; }
.tillganglighet { margin-top: 1.2em; border: 1px solid var(--gra-linje); border-radius: var(--radie); padding: 1.1em 1.3em 1.2em; background: var(--gra-bak); }
.tillganglighet h2 { font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; color: var(--gra-text); margin: 0 0 .7em; }
.tillganglighet ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .55em; }
.tillganglighet li { display: flex; gap: .6em; align-items: flex-start; font-size: .87rem; line-height: 1.4; color: #333; }
.tillganglighet svg { width: 20px; height: 20px; color: var(--gron); flex: none; margin-top: .05em; }
.tillganglighet li i { width: .7em; height: .7em; border-radius: 50%; background: var(--gron); flex: none; margin: .45em .35em 0 .3em; box-shadow: 0 0 0 3px var(--gron-ljus); }
.tillganglighet li i.lev-rod { background: #d99a00; box-shadow: 0 0 0 3px #fff3d6; }

@media (max-width: 1100px) {
  .kat-cirklar { grid-template-columns: repeat(4, 1fr); }
  .hero-foto h1 { font-size: 2.6rem; }
}
@media (max-width: 900px) {
  header.huvud .moms-val { display: none; }
  .topp-moms { display: block; }
  .toppband .wrap { justify-content: space-between; }
  .moms-val button { padding: .32em .65em; font-size: .72rem; }
  .hero-foto { padding: 1.4em 0 1.6em; }
  .hero-foto .wrap { grid-template-columns: 1fr; }
  .hero-foto-ram { aspect-ratio: 4/3; order: -1; }
  .hero-foto h1 { font-size: 2.1rem; }
  .hero-fakta { grid-template-columns: 1fr; font-size: .86rem; }
  .hero-punkt > span { display: none; }
  .kat-layout { grid-template-columns: 1fr; gap: 0; }
  .kat-sida { display: none; }
  .miljo-rad { grid-template-columns: 1fr; }
  .miljo-bild { aspect-ratio: 16/10; }
  .miljo-liten { grid-template-columns: 1fr; }
  .chatt { right: 0; bottom: 0; width: 100vw; height: 100dvh; border-radius: 0; border: 0; }
  .chatt-knapp { right: 14px; bottom: 14px; padding: .8em 1.1em .8em .95em; font-size: .92rem; }
  .sida-produkt .chatt-knapp, .sida-start .chatt-knapp { bottom: 96px; }
  body.kakor-syns .chatt-knapp { bottom: 200px; }
  .sektion-huvud.rad .lank-pil { display: none; }
}
@media (max-width: 600px) {
  .kat-cirklar { grid-template-columns: repeat(3, 1fr); gap: .6em; }
  .kat-cirkel strong { font-size: .82rem; }
  .kat-cirkel em { display: none; }
  .ruta-fot { padding: .3em .8em .9em; flex-wrap: wrap; }
  .ruta-fot .pris .pp b { font-size: 1.05rem; }
  .kort-knapp { padding: .5em .9em; font-size: .85rem; }
  .usp li:nth-child(2) { display: inline-flex; }
  .usp { gap: .8em; }
  .usp li { font-size: .74rem; }
}

/* ---------- Kampanjband och planeringshjälp ---------- */
.kampanj-rad { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2em; }
.kampanj { position: relative; display: block; border-radius: var(--radie); overflow: hidden; min-height: 300px; text-decoration: none; color: #fff; box-shadow: var(--skugga); isolation: isolate; }
.kampanj picture, .kampanj > img { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
.kampanj img { width: 100%; height: 100%; object-fit: cover; object-position: 70% 50%; transition: transform .6s; }
.kampanj img.kampanj-hoger { object-position: 60% 40%; }
.kampanj:hover img { transform: scale(1.04); }
.kampanj::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(100deg, rgba(184,6,18,.96) 0%, rgba(184,6,18,.85) 45%, rgba(184,6,18,.15) 100%); }
.kampanj-gron::before { background: linear-gradient(100deg, rgba(0,106,43,.96) 0%, rgba(0,106,43,.85) 45%, rgba(0,106,43,.15) 100%); }
.kampanj-text { position: relative; z-index: 2; padding: 1.8em 1.8em 1.7em; max-width: 62%; display: grid; gap: .5em; justify-items: start; }
.kampanj-badge { background: #fff; color: var(--rod-mork); font-weight: 800; font-size: 1.05rem; padding: .3em .7em; border-radius: 8px; letter-spacing: -.01em; }
.kampanj-gron .kampanj-badge { color: var(--gron-mork); }
.kampanj-text strong { font-size: 1.7rem; line-height: 1.1; letter-spacing: -.02em; }
.kampanj-text strong .pp b { font-size: inherit; }
.kampanj-text strong .pp i, .kampanj-text strong .pp em { display: none; }
.kampanj-text p { margin: 0; color: rgba(255,255,255,.9); font-size: .95rem; }
.kampanj-text .knapp { background: #fff; color: var(--rod-mork); margin-top: .5em; }
.kampanj-gron .kampanj-text .knapp { color: var(--gron-mork); }
.kampanj:hover .knapp { background: #fff; color: var(--svart); }
.planering { background: var(--gra-bak); padding: 3em 0; margin-top: 2em; }
.planering-inre { display: grid; grid-template-columns: .9fr 1.1fr; gap: 3em; align-items: center; }
.planering-bild { border-radius: var(--radie); overflow: hidden; aspect-ratio: 4/3; box-shadow: var(--skugga-lyft); }
.planering-bild picture, .planering-bild img { width: 100%; height: 100%; }
.planering-bild img { object-fit: cover; }
.planering-text h2 { font-size: 2.2rem; margin: 0 0 .5em; letter-spacing: -.02em; }
.planering-text > p { font-size: 1.05rem; color: #333; max-width: 560px; }
.planering-text .hero-fakta { margin: 1.2em 0 1.4em; grid-template-columns: 1fr; }
@media (max-width: 900px) {
  .kampanj-rad { grid-template-columns: 1fr; }
  .kampanj { min-height: 240px; }
  .kampanj-text { max-width: 80%; padding: 1.4em; }
  .kampanj-text strong { font-size: 1.4rem; }
  .planering-inre { grid-template-columns: 1fr; gap: 1.5em; }
  .planering-bild { aspect-ratio: 16/10; }
  .planering-text h2 { font-size: 1.7rem; }
}

/* ---------- Miljöbilder på kategori- och innehållssidor ---------- */
.kat-banner { position: relative; border-radius: var(--radie); overflow: hidden; aspect-ratio: 3/1; margin: 0 0 1em; background: var(--gra-bak); }
.kat-banner picture, .kat-banner img { width: 100%; height: 100%; }
.kat-banner img { object-fit: cover; object-position: 50% 22%; }
.kat-banner-text { position: absolute; left: 0; right: 0; bottom: 0; padding: 3em 1.6em 1.3em; background: linear-gradient(0deg, rgba(0,0,0,.72), rgba(0,0,0,0)); color: #fff; }
.kat-banner-text h1 { color: #fff; margin: 0 0 .2em; font-size: 2.2rem; }
.kat-banner-text p { margin: 0; color: rgba(255,255,255,.9); max-width: 640px; }
.kat-inne .sidhuvud { margin-bottom: 1em; }
.sida-banner { border-radius: var(--radie); overflow: hidden; aspect-ratio: 3/1; margin: 0 0 1.4em; background: var(--gra-bak); }
.sida-banner picture, .sida-banner img { width: 100%; height: 100%; }
.sida-banner img { object-fit: cover; object-position: 50% 28%; }
.anvand-rad .miljo-bild span strong { display: block; font-size: 1.15rem; margin-bottom: .15em; }
.anvand-rad .miljo-bild span { font-weight: 400; }
@media (max-width: 900px) {
  .kat-banner { aspect-ratio: 16/10; }
  .kat-banner-text { padding: 2em 1em .9em; }
  .kat-banner-text h1 { font-size: 1.5rem; }
  .kat-banner-text p { display: none; }
  .sida-banner { aspect-ratio: 16/9; }
}

/* ---------- Bygghemma/AJ-omgång: toppbar, sidhuvud, kategorirad ---------- */
.toppband { background: #2b2b2b; color: #fff; border: 0; font-size: .82rem; }
.toppband .wrap { padding-top: .5em; padding-bottom: .5em; gap: 1.2em; }
.topp-vanster { flex: none; }
.usp { justify-content: center; flex: 1; }
.usp li { color: #fff; font-weight: 600; }
.usp svg { color: #6fd08f; }
.topp-kontakt { gap: 1.4em; }
.topp-kontakt a { color: #fff; font-weight: 600; }
.topp-kontakt a:hover { color: #ffb3b8; }
.moms-switch { display: inline-flex; align-items: center; gap: .55em; background: none; border: 0; color: #fff; font: inherit; font-size: .82rem; font-weight: 600; cursor: pointer; padding: 0; }
.ms-knopp { width: 44px; height: 24px; border-radius: 999px; background: #666; position: relative; transition: background var(--fart); flex: none; }
.ms-knopp i { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform var(--fart); }
.moms-switch[aria-checked="true"] .ms-knopp { background: var(--gron); }
.moms-switch[aria-checked="true"] .ms-knopp i { transform: translateX(20px); }
.ms-text b { font-weight: 600; }
.topp-moms { display: none; }
header.huvud .wrap { min-height: 108px; gap: 2.5em; }
.logga img { height: 62px; }
form.sok { max-width: 700px; height: 60px; border: 1px solid #bdbdbd; border-radius: 40px; padding: 0 0 0 1.4em; overflow: hidden; }
form.sok:focus-within { border-color: var(--svart); box-shadow: none; }
form.sok input { font-size: 1.1rem; }
form.sok input::placeholder { color: #777; }
form.sok button { width: 76px; height: 100%; border-radius: 0; background: #ececec; color: var(--svart); }
form.sok button:hover { background: #ddd; }
form.sok button svg { width: 24px; height: 24px; }
nav.ikoner { gap: .8em; }
.ikon-lank { font-size: .78rem; font-weight: 500; gap: .3em; }
.ikon-lank svg { width: 32px; height: 32px; stroke-width: 1.6; }
.ikon-lank:hover { background: none; }
.katrad-wrap { gap: 1em; }
.alla-produkter { display: inline-flex; align-items: center; gap: .6em; background: none; border: 0; font: inherit; font-weight: 700; font-size: 1.05rem; color: var(--svart); cursor: pointer; padding: .8em 1em .8em 0; border-right: 1px solid var(--gra-linje); margin-right: .4em; white-space: nowrap; }
.alla-produkter:hover { color: var(--rod); }
.alla-produkter svg { width: 26px; height: 26px; }
.kat-lank { font-size: 1rem; font-weight: 500; padding: 1em .8em; }
.kat-extra a { font-size: 1rem; color: var(--svart); padding: 1em .7em; }
.kontakt-drop { position: relative; }
.kontakt-drop-lank { display: inline-flex !important; align-items: center; gap: .4em; }
.kontakt-drop-lank svg:first-child { width: 18px; height: 18px; }
.kontakt-panel { display: none; position: absolute; left: 0; top: 100%; width: 640px; background: #fff; box-shadow: 0 20px 50px rgba(0,0,0,.18); border: 1px solid var(--gra-linje); border-radius: 0 0 12px 12px; padding: 1.6em 1.8em 1.8em; z-index: 27; grid-template-columns: 1fr 1fr; gap: 2em; }
.kontakt-drop:hover .kontakt-panel, .kontakt-drop:focus-within .kontakt-panel { display: grid; }
.kontakt-panel > div + div { border-left: 1px solid var(--gra-linje); padding-left: 2em; }
.kontakt-panel h4 { margin: 0 0 .6em; font-size: 1.15rem; }
.kontakt-panel p { margin: 0 0 .6em; font-size: 1rem; color: #333; }
.kontakt-panel .kp-rubrik { color: var(--gra-text); margin-top: .8em; }
.kontakt-panel ul { margin: 0 0 1.2em; padding-left: 1.2em; color: #333; }
.kontakt-panel li { margin: .2em 0; }
.kontakt-panel .knapp { border-radius: 999px; padding: .75em 1.6em; font-weight: 700; }
.offert-lank { font-weight: 600; }

/* Alla produkter-knappen öppnar samma meny som på mobil, även på desktop */
@media (min-width: 901px) {
  body.meny-tvingad nav.katrad { position: fixed; top: 0; left: 0; bottom: 0; width: 380px; background: #fff; z-index: 50; overflow-y: auto; box-shadow: var(--skugga-lyft); border: 0; display: flex; flex-direction: column; }
  body.meny-tvingad .meny-topp { display: flex; justify-content: space-between; align-items: center; padding: .9em 1em .9em 1.2em; border-bottom: 1px solid var(--gra-linje); }
  body.meny-tvingad .meny-logga img { height: 32px; width: auto; }
  body.meny-tvingad .meny-stang { display: grid; place-items: center; background: none; border: 0; cursor: pointer; padding: .4em; color: var(--svart); }
  body.meny-tvingad .katrad-wrap { display: block; padding: 0; }
  body.meny-tvingad .alla-produkter { display: none; }
  body.meny-tvingad .kat-lista, body.meny-tvingad .kat-extra { display: block; }
  body.meny-tvingad .kat { display: block; border-bottom: 1px solid var(--gra-bak); position: relative; }
  body.meny-tvingad .kat-lank { display: block; padding: .9em 3.2em .9em 1.2em; font-size: 1.05rem; border: 0; }
  body.meny-tvingad .kat-pil { display: grid; place-items: center; position: absolute; right: .6em; top: .5em; width: 40px; height: 40px; border: 0; background: var(--gra-bak); border-radius: 50%; cursor: pointer; color: var(--svart); transition: transform .25s; }
  body.meny-tvingad .kat.oppen .kat-pil { transform: rotate(180deg); }
  body.meny-tvingad .mega, body.meny-tvingad .kat:hover > .mega { display: none; }
  body.meny-tvingad .kat.oppen > .mega { display: block; position: static; box-shadow: none; border: 0; padding: 0 0 .6em; margin: 0; max-width: none; grid-template-columns: none; background: var(--gra-bak); }
  body.meny-tvingad .mega-lista a { padding: .6em 1.6em; border-radius: 0; }
  body.meny-tvingad .mega-bild, body.meny-tvingad .mega-produkter, body.meny-tvingad .mega-not { display: none; }
  body.meny-tvingad .mega-kol { border: 0; padding: 0; }
  body.meny-tvingad .kat-extra { margin: .6em 0 0; padding: .4em 0; border-top: 6px solid var(--gra-bak); }
  body.meny-tvingad .kat-extra a { padding: .75em 1.2em; font-size: 1rem; }
  body.meny-tvingad .kontakt-panel { display: none !important; }
  body.meny-tvingad .kontakt-drop-lank svg { display: none; }
  body.meny-tvingad .meny-kontakt { display: flex; flex-direction: column; gap: .3em; padding: 1em 1.2em 1.6em; margin-top: auto; background: var(--gra-bak); font-size: .92rem; color: var(--gra-text); }
  body.meny-tvingad .meny-kontakt a { color: var(--svart); text-decoration: none; font-weight: 600; }
  body.meny-tvingad .meny-skugga { position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 40; display: block; }
  body.meny-tvingad { overflow: hidden; }
}

/* ---------- Kampanjhero i Bygghemma-stil ---------- */
.kampanjhero { padding: 1.4em 0 0; }
.kh { position: relative; display: grid; grid-template-columns: 40% 60%; min-height: 470px; border-radius: 14px; overflow: hidden; text-decoration: none; color: #fff; background: var(--rod); isolation: isolate; }
.kh-foto { position: relative; overflow: hidden; }
.kh-foto picture, .kh-foto img { width: 100%; height: 100%; }
.kh-foto img { object-fit: cover; object-position: 40% 50%; }
.kh-badge { position: absolute; left: 0; top: 0; width: 46%; aspect-ratio: 1/1; background: var(--rod); color: #fff; display: grid; align-content: center; justify-items: center; text-align: center; padding: 8%; line-height: 1.05; text-transform: uppercase; box-shadow: 0 10px 30px rgba(0,0,0,.25); }
.kh-badge small { font-size: .95rem; font-weight: 700; letter-spacing: .04em; }
.kh-badge b { font-size: 4.2rem; font-weight: 900; letter-spacing: -.04em; line-height: 1; margin: .05em 0; }
.kh-mosaik { position: absolute; left: 40%; top: 0; right: 0; bottom: 0; display: grid; grid-template-columns: repeat(10, 1fr); grid-template-rows: repeat(4, 1fr); z-index: 0; }
.kh-mosaik i { background: hsl(352, 92%, calc(28% + var(--n) * 2.6%)); }
.kh-text { position: relative; z-index: 1; align-self: center; padding: 2.5em 3em 2.5em 3.5em; text-align: right; }
.kh-text h1 { font-size: 5.4rem; font-weight: 900; text-transform: uppercase; letter-spacing: -.02em; line-height: .95; margin: 0 0 .15em; color: #fff; text-shadow: 0 4px 30px rgba(0,0,0,.25); }
.kh-text p { font-size: 1.6rem; margin: 0 0 .9em; color: #fff; font-weight: 500; }
.kh-text p .pp b { font-weight: 800; }
.kh-knapp { display: inline-flex; align-items: center; gap: .3em; background: #fff; color: var(--rod-mork); font-weight: 900; text-transform: uppercase; font-size: 1.25rem; padding: .7em 1.6em; border-radius: 999px; letter-spacing: .01em; box-shadow: 0 10px 30px rgba(0,0,0,.25); transition: transform var(--fart); }
.kh:hover .kh-knapp { transform: translateY(-3px); }
.kh-loggor { position: absolute; left: 42%; bottom: 1.2em; z-index: 1; }
.kh-marken .marke { background: rgba(255,255,255,.95); border: 0; height: 36px; }
.tagline { padding: 2.4em 0 .6em; text-align: center; }
.tagline h2 { margin: 0; font-size: 2rem; letter-spacing: -.02em; }
.tagline h2 span { font-weight: 400; color: #333; }
.tagline h2 a { font-size: 1rem; font-weight: 600; margin-left: .6em; color: var(--svart); }
.sektion-kategorier { padding: 1.6em 0 1em; }
.kc-bild { max-width: 170px; background: #fff; border: 1px solid var(--gra-linje); padding: 0; }
.kat-cirkel strong { font-size: 1.05rem; }
.foto-par { display: grid; grid-template-columns: 2fr 1fr; gap: 1.2em; }
.foto-par .hero-foto-ram { aspect-ratio: auto; height: 480px; box-shadow: none; text-decoration: none; }
.foto-kort { position: absolute; right: 1.2em; bottom: 1.2em; background: #fff; color: var(--svart); border-radius: 10px; padding: .8em 2.6em .9em 1em; display: grid; line-height: 1.3; box-shadow: var(--skugga-lyft); }
.foto-kort small { color: var(--gra-text); font-size: .78rem; }
.foto-kort strong { font-size: 1.05rem; }
.foto-kort .pp b { color: var(--rod); }
.foto-kort svg { position: absolute; right: .8em; top: 50%; transform: translateY(-50%); color: var(--rod); }
.kampanj-mork::before { background: linear-gradient(100deg, rgba(20,20,20,.96) 0%, rgba(20,20,20,.85) 45%, rgba(20,20,20,.15) 100%); }
.kampanj-mork .kampanj-badge { color: var(--svart); }
.kampanj-mork .kampanj-text .knapp { color: var(--svart); }
.kampanj-bla::before { background: linear-gradient(100deg, rgba(11,58,110,.96) 0%, rgba(11,58,110,.85) 45%, rgba(11,58,110,.15) 100%); }
.kampanj-bla .kampanj-badge { color: #0b3a6e; }
.kampanj-bla .kampanj-text .knapp { color: #0b3a6e; }
.kampanj-bla img { object-position: 50% 50%; }

/* ---------- Röd sidfot i Bygghemma-stil ---------- */
footer.fot { margin-top: 3em; }
.fot-marken { border-top: 1px solid var(--gra-linje); border-bottom: 0; padding: 1.6em 0; }
.fot-butik { background: var(--rod); color: #fff; padding: 2.4em 0 .6em; }
.fot-butik h3 { color: #fff; margin: 0 0 .8em; font-size: 1.6rem; letter-spacing: -.02em; }
.fot-butik-rad { display: grid; grid-template-columns: 1fr 1fr; gap: 1em; }
.fot-butik-rad a { position: relative; display: grid; gap: .15em; background: rgba(0,0,0,.22); color: #fff; text-decoration: none; border-radius: 10px; padding: 1.1em 3em 1.1em 1.4em; transition: background var(--fart); }
.fot-butik-rad a:hover { background: rgba(0,0,0,.34); color: #fff; }
.fot-butik-rad strong { font-size: 1.05rem; }
.fot-butik-rad span { font-size: .9rem; color: rgba(255,255,255,.85); }
.fot-butik-rad svg { position: absolute; right: 1.2em; top: 50%; transform: translateY(-50%); }
.fot-topp { background: var(--rod); border-top: 1px solid rgba(255,255,255,.25); color: #fff; padding: 2.4em 0 2.6em; }
.fot-kolumner { grid-template-columns: 1fr 1fr 1fr 1.4fr; }
footer.fot h4 { color: #fff; font-size: 1.1rem; }
.fot-topp a { color: #fff; }
.fot-topp a:hover { color: #fff; text-decoration: underline; }
.fot-oppet { color: rgba(255,255,255,.85); }
.fot-nyhet p, .fot-nyhet .liten { color: rgba(255,255,255,.85); }
.fot-nyhet .liten a { color: #fff; }
.nyhet-form input { border: 0; }
.nyhet-form .knapp { background: var(--svart); }
.nyhet-form .knapp:hover { background: #000; }
.fot-tel { color: #fff !important; }
.fot-tel svg { color: #fff; }
.fot-topp > .wrap > div + div { border-left: 1px solid rgba(255,255,255,.25); padding-left: 1.8em; }
.fot-botten { background: #1b1b1b; }

/* Chattknappen som AJ: mörk pill med avatar */
.chatt-knapp { background: #2b2b2b; box-shadow: 0 10px 30px rgba(0,0,0,.3); padding: .7em .55em .7em 1.3em; font-weight: 600; }
.chatt-knapp:hover { background: #000; box-shadow: 0 14px 34px rgba(0,0,0,.35); }
.chatt-avatar-liten { width: 40px; height: 40px; border-radius: 50%; background: #fff; display: grid; place-items: center; flex: none; overflow: hidden; }
.chatt-avatar-liten img { width: 30px; height: auto; }

@media (max-width: 1100px) {
  .kh-text h1 { font-size: 4rem; }
  .kh-badge b { font-size: 3.2rem; }
}
@media (max-width: 900px) {
  .toppband .wrap { justify-content: space-between; }
  .usp { display: none; }
  .topp-kontakt { display: inline-flex; }
  .topp-kontakt a:last-child { display: none; }
  header.huvud .wrap { min-height: 64px; }
  form.sok { height: 48px; border-radius: 30px; }
  form.sok button { width: 56px; }
  .ikon-lank svg { width: 26px; height: 26px; }
  .alla-produkter { display: none; }
  .kontakt-panel { display: none !important; }
  .kh { grid-template-columns: 1fr; min-height: 0; }
  .kh-foto { aspect-ratio: 16/10; }
  .kh-badge { width: 34%; }
  .kh-badge b { font-size: 2.4rem; }
  .kh-badge small { font-size: .7rem; }
  .kh-mosaik { left: 0; top: auto; height: 60%; }
  .kh-text { text-align: left; padding: 1.6em 1.4em 4.2em; }
  .kh-text h1 { font-size: 2.8rem; }
  .kh-text p { font-size: 1.1rem; }
  .kh-knapp { font-size: 1rem; }
  .kh-loggor { left: 1.4em; bottom: 1.1em; }
  .tagline h2 { font-size: 1.4rem; }
  .tagline h2 span { display: block; font-size: 1rem; margin-top: .3em; }
  .foto-par { grid-template-columns: 1fr; }
  .foto-par .hero-foto-ram { height: auto; aspect-ratio: 4/3; }
  .fot-butik-rad { grid-template-columns: 1fr; }
  .fot-topp > .wrap > div + div { border: 0; padding-left: 0; }
  .chatt-knapp span { display: none; }
  .chatt-knapp { padding: .5em; }
}

/* Justeringar efter granskning: kategoriraden får plats, kontaktpanelen öppnar inåt, rubriken bryter på mobil */
.katrad-wrap { gap: .4em; }
.kat-lank { font-size: .93rem; padding: 1em .55em; }
.kat-extra { gap: 0; }
.kat-extra a { font-size: .9rem; padding: 1em .5em; }
.alla-produkter { font-size: .98rem; padding-right: .8em; }
.kontakt-panel { left: auto; right: 0; }
.kh, .kh-text, .kh-foto { min-width: 0; }
.kh-text h1 { overflow-wrap: anywhere; }
@media (max-width: 1100px) {
  .kat-extra li:nth-child(3) { display: none; }
  .kat-lank { font-size: .88rem; padding: 1em .45em; }
}
@media (max-width: 900px) {
  .kh-text h1 { font-size: clamp(1.8rem, 10vw, 2.6rem); }
}
@media (max-width: 1300px) {
  .kat-extra li:nth-child(2) { display: none; }
  .kat-lank { font-size: .9rem; padding: 1em .45em; }
}
.kh-text h1 { font-size: clamp(2.6rem, 6vw, 5rem); overflow-wrap: normal; }
.kh-text { padding: 2.5em 2.5em 2.5em 2.5em; }
.kc-bild picture { width: 100%; height: 100%; }
@media (max-width: 900px) {
  .kh-text h1 { font-size: clamp(1.8rem, 10vw, 2.6rem); overflow-wrap: anywhere; }
}
/* Mobilregler som måste ligga sist eftersom basreglerna ovan annars vinner */
@media (max-width: 1000px) { .fot-kolumner { grid-template-columns: 1fr 1fr; } }
@media (max-width: 900px) {
  .logga img { height: 36px; }
  .kat-lank { display: block; padding: .9em 3.2em .9em 1.2em; font-size: 1.05rem; border: 0; }
  .kat-extra a { padding: .75em 1.2em; font-size: 1rem; }
  .kat-extra li:nth-child(2), .kat-extra li:nth-child(3) { display: block; }
  .katrad-wrap { display: block; }
}
@media (max-width: 600px) { .fot-kolumner { grid-template-columns: 1fr; } }
.kat-cirklar { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.kat-cirkel { min-width: 0; }
@media (max-width: 1100px) { .kat-cirklar { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 900px) {
  .ikon-lank { padding: .3em .35em; font-size: .64rem; }
  .ikon-lank svg { width: 24px; height: 24px; }
  nav.ikoner .ikon-lank:nth-child(2) { display: none; }
  .kh-text { padding: 1.4em 1.2em 1em; }
  .kh-text h1 { font-size: clamp(1.7rem, 8.4vw, 2.4rem); overflow-wrap: normal; }
  .kh-text p { font-size: 1rem; }
  .kh-loggor { position: static; padding: 0 1.2em 1.2em; z-index: 1; }
  .kh-marken .marke-faktura { display: none; }
  .kh-marken .marke { height: 30px; }
}
@media (max-width: 600px) {
  .kat-cirklar { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .kat-cirkel strong { font-size: .8rem; overflow-wrap: anywhere; }
}
@media (max-width: 900px) {
  header.huvud .wrap { gap: .5em; }
  .kat-cirkel strong { overflow-wrap: normal; font-size: .74rem; }
}

/* ---------- Sidfot v2 och kategoricirklar ---------- */
.kc-bild { background: #fff; border: 1px solid var(--gra-linje); padding: 0; }
.kc-bild img { object-fit: contain; padding: 14%; transform: none; }
.kat-cirkel:hover .kc-bild { border-color: var(--rod); box-shadow: 0 8px 22px rgba(0,0,0,.1); }
footer.fot { margin-top: 3.5em; font-size: .92rem; }
.fot-marken { padding: 1.4em 0; border-top: 1px solid var(--gra-linje); }
.fot-rod { background: var(--rod); color: #fff; }
.fot-ovre { display: grid; grid-template-columns: 1.6fr 1fr; gap: 2.5em; padding-top: 2.4em; padding-bottom: 2.2em; border-bottom: 1px solid rgba(255,255,255,.28); }
.fot-butik { padding: 0; background: none; }
.fot-butik h3, .fot-nyhet h3 { color: #fff; margin: 0 0 .7em; font-size: 1.35rem; letter-spacing: -.02em; }
.fot-butik-rad a { background: rgba(0,0,0,.24); }
.fot-butik-rad a:hover { background: rgba(0,0,0,.36); }
.fot-nyhet p { color: rgba(255,255,255,.88); margin: 0 0 .7em; }
.nyhet-form input { border: 0; height: 46px; }
.nyhet-form .knapp { background: var(--svart); height: 46px; padding: 0 1.2em; }
.fot-nyhet .liten { margin: .6em 0 0; color: rgba(255,255,255,.8); }
.fot-nyhet .liten a { color: #fff; text-decoration: underline; }
.fot-kolumner { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; padding-top: 2.2em; padding-bottom: 2.2em; }
.fot-topp { display: none; }
.fot-kol { padding: 0 1.4em; border-left: 1px solid rgba(255,255,255,.28); min-width: 0; }
.fot-kol:first-child { padding-left: 0; border-left: 0; }
.fot-kol h4 { color: #fff; font-size: 1.02rem; margin: 0 0 .8em; }
.fot-kol ul { list-style: none; margin: 0; padding: 0; }
.fot-kol li { margin: 0 0 .5em; }
.fot-kol a { color: #fff; text-decoration: none; }
.fot-kol a:hover { text-decoration: underline; color: #fff; }
.fot-kontakt { display: grid; gap: .35em; align-content: start; }
.fot-kontakt .fot-tel { color: #fff !important; font-size: 1.3rem; }
.fot-kontakt .fot-tel svg { color: #fff; }
.fot-kontakt .fot-oppet { color: rgba(255,255,255,.85); }
.fot-kontakt .fot-mejl { font-weight: 600; }
.fot-kontakt address { font-style: normal; color: rgba(255,255,255,.85); line-height: 1.5; margin-top: .5em; }
.fot-trygg-rad { padding-bottom: 1.4em; }
.fot-trygg { border-top: 1px solid rgba(255,255,255,.28); border-bottom: 0; color: #fff; justify-content: center; padding: 1.2em 0 0; }
.fot-trygg svg { color: #fff; }
.fot-botten { background: #1b1b1b; padding: 1.4em 0 1.6em; }
.fot-botten .wrap { display: flex; align-items: center; gap: 2em; }
.fot-logga img { height: 32px; }
.fot-botten .liten { margin: 0; color: #aaa; }
@media (max-width: 1000px) { .fot-kolumner { grid-template-columns: 1fr 1fr 1fr; row-gap: 1.6em; } .fot-kol:nth-child(4) { border-left: 0; padding-left: 0; } }
@media (max-width: 900px) { .fot-ovre { grid-template-columns: 1fr; gap: 1.6em; } .fot-botten .wrap { flex-direction: column; align-items: flex-start; gap: .8em; } }
@media (max-width: 600px) { .fot-kolumner { grid-template-columns: 1fr 1fr; } .fot-kol { padding: 0; border: 0; } .fot-kontakt { grid-column: 1 / -1; } }

/* ---------- E-handelsläge: produktrader, steg, trygghetskort, kundcase ---------- */
.produktrad { padding: 2.4em 0 1em; }
.rad-rutor { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.1em; }
.guidekort { position: relative; display: block; border-radius: var(--radie); overflow: hidden; text-decoration: none; color: #fff; background: var(--svart); min-height: 100%; }
.guidekort picture, .guidekort img { width: 100%; height: 100%; position: absolute; inset: 0; }
.guidekort img { object-fit: cover; transition: transform .6s; }
.guidekort:hover img { transform: scale(1.05); }
.guidekort span { position: relative; z-index: 1; display: block; padding: 3.5em 1.2em 1.3em; background: linear-gradient(0deg, rgba(0,0,0,.85) 40%, rgba(0,0,0,0)); margin-top: auto; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; }
.guidekort strong { font-size: 1.15rem; line-height: 1.25; }
.guidekort em { font-style: normal; font-size: .9rem; font-weight: 600; margin-top: .4em; display: inline-flex; align-items: center; gap: .2em; }
.guidekort:hover { color: #fff; }
.steg-kort { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2em; }
.steg-kort > div { background: #fff; border-radius: var(--radie); padding: 1.6em 1.6em 1.4em; box-shadow: var(--skugga); position: relative; }
.sk-nr { display: inline-grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: var(--rod); color: #fff; font-size: 1.5rem; font-weight: 800; margin-bottom: .7em; }
.steg-kort strong { display: block; font-size: 1.4rem; letter-spacing: -.02em; margin-bottom: .3em; }
.steg-kort p { margin: 0; color: #333; }
.sk-marken { margin-top: 1em; }
.trygg-kort { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.1em; }
.trygg-kort > div { border: 1px solid var(--gra-linje); border-radius: var(--radie); padding: 1.4em 1.4em 1.5em; background: #fff; }
.trygg-kort svg { width: 34px; height: 34px; color: var(--rod); margin-bottom: .6em; }
.trygg-kort strong { display: block; font-size: 1.1rem; margin-bottom: .3em; }
.trygg-kort span { color: var(--gra-text); font-size: .92rem; line-height: 1.45; }
.case { display: grid; grid-template-columns: 1fr 1fr; background: #fff; border: 1px solid var(--gra-linje); border-radius: var(--radie); overflow: hidden; align-items: stretch; }
.case-bild { position: relative; min-height: 340px; }
.case-bild picture, .case-bild img { position: absolute; inset: 0; width: 100%; height: 100%; }
.case-bild img { object-fit: cover; }
.case-text { padding: 2.6em 2.8em; align-self: center; }
.case-text h2 { font-size: 2rem; margin: 0 0 .5em; letter-spacing: -.02em; }
.case-text > p { color: #333; font-size: 1.05rem; max-width: 520px; }
.case-knappar { display: flex; gap: .8em; flex-wrap: wrap; margin: 1.2em 0 .6em; }
.tre-steg, .fortroende-band, .bildband { display: none; }
@media (max-width: 1000px) {
  .rad-rutor { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .trygg-kort { grid-template-columns: 1fr 1fr; }
  .steg-kort { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .case { grid-template-columns: 1fr; }
  .case-bild { min-height: 220px; }
  .case-text { padding: 1.6em 1.4em 1.8em; }
  .case-text h2 { font-size: 1.5rem; }
  .guidekort { min-height: 220px; }
}
@media (max-width: 600px) {
  .rad-rutor { grid-template-columns: 1fr 1fr; gap: .8em; }
  .trygg-kort { grid-template-columns: 1fr; }
}

.rad-rutor .guidekort:only-of-type { grid-column: span 1; }
.produktrad .rad-rutor > .produkt-ruta:nth-child(n+4) { display: none; }
@media (max-width: 1000px) { .produktrad .rad-rutor > .produkt-ruta:nth-child(n+3) { display: none; } }

/* ---------- Inspirationsrad, som AJ:s inspirationskort ---------- */
.insp-rad { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.1em; }
.insp-kort { display: block; text-decoration: none; color: var(--svart); background: #fff; border: 1px solid var(--gra-linje); border-radius: var(--radie); overflow: hidden; transition: transform var(--fart), box-shadow var(--fart); }
.ik-bild { display: block; aspect-ratio: 16/10; overflow: hidden; }
.ik-bild picture, .ik-bild img { width: 100%; height: 100%; }
.ik-bild img { object-fit: cover; transition: transform .6s; }
.insp-kort:hover { transform: translateY(-4px); box-shadow: var(--skugga-lyft); color: var(--svart); }
.insp-kort:hover .ik-bild img { transform: scale(1.05); }
.insp-kort strong { display: block; font-size: 1.15rem; line-height: 1.25; padding: .9em 1.1em .1em; letter-spacing: -.01em; }
.ik-text { display: block; color: var(--gra-text); font-size: .9rem; padding: .2em 1.1em .6em; }
.insp-kort em { display: inline-flex; align-items: center; gap: .2em; font-style: normal; font-weight: 700; font-size: .9rem; padding: 0 1.1em 1.2em; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 1000px) { .insp-rad { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .insp-rad { grid-template-columns: 1fr; } }
/* Reels-raden ska scrolla i sin egen box, inte bredda sidan på mobil */
.reels .wrap { overflow: hidden; }
.reel-rad { scrollbar-width: none; }
.reel-rad::-webkit-scrollbar { display: none; }

/* ---------- Videohighlights ---------- */
.reels { padding: 2.6em 0 1.4em; }
.reel-rad { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-flow: row; grid-auto-columns: auto; gap: 1.1em; overflow: visible; padding: 0; scroll-snap-type: none; }
.reel-kort { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--gra-linje); border-radius: var(--radie); overflow: hidden; text-decoration: none; color: var(--svart); transition: transform var(--fart), box-shadow var(--fart); }
.reel-kort:hover { transform: translateY(-4px); box-shadow: var(--skugga-lyft); color: var(--svart); }
.reel-kort .reel { position: relative; aspect-ratio: 4/5; border-radius: 0; box-shadow: none; background: #111; }
.reel-spela { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 54px; height: 54px; border-radius: 50%; background: rgba(255,255,255,.9); color: var(--rod); display: grid; place-items: center; opacity: 0; transition: opacity var(--fart); }
.reel-kort:hover .reel-spela { opacity: 1; }
.reel-text { padding: .9em 1.1em 1.2em; display: flex; flex-direction: column; flex: 1; }
.reel-text strong { font-size: 1.1rem; letter-spacing: -.01em; }
.reel-text span { color: var(--gra-text); font-size: .88rem; line-height: 1.4; margin: .25em 0 .7em; flex: 1; }
.reel-text em { font-style: normal; font-weight: 700; font-size: .88rem; display: inline-flex; align-items: center; gap: .2em; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 1000px) { .reel-rad { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .reel-rad { grid-template-columns: 1fr 1fr; gap: .8em; } .reel-text strong { font-size: .95rem; } .reel-text span { display: none; } }


/* ---------- Modern Expo: koncept, referenser, partner ---------- */
.me-band { background: var(--svart); color: #fff; padding: 3.2em 0; margin: 2.5em 0 0; }
.me-band-inre { display: grid; grid-template-columns: 1.3fr 1fr; gap: 3em; align-items: center; }
.me-band h2 { margin-top: 0; font-size: 2rem; letter-spacing: -.02em; color: #fff; }
.me-band p { color: #d5d5d3; max-width: 60ch; }
.me-band .hero-over { color: #ff5a66; }
.me-band .knapp.sekundar { background: transparent; color: #fff; border-color: #fff; }
.me-band .knapp.sekundar:hover { background: #fff; color: var(--svart); }
.me-band-fakta { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2em; }
.me-band-fakta div { border-left: 3px solid var(--rod); padding-left: .9em; }
.me-band-fakta strong { display: block; font-size: 2rem; letter-spacing: -.02em; line-height: 1.1; }
.me-band-fakta span { color: #b9b9b6; font-size: .9rem; }
.me-hero { padding: 1.2em 0 2.4em; }
.me-hero-inre { display: grid; grid-template-columns: 1fr 1.05fr; gap: 3em; align-items: center; }
.me-hero h1 { font-size: 2.9rem; letter-spacing: -.025em; line-height: 1.05; margin-bottom: .4em; }
.me-hero .ingress { font-size: 1.15rem; color: var(--gra-text); margin-bottom: 1.2em; }
.me-hero .hero-fakta { margin-bottom: 1.4em; }
.me-hero-bild { border-radius: var(--radie); overflow: hidden; box-shadow: var(--skugga-lyft); aspect-ratio: 16/9; background: var(--gra-bak); }
.me-hero-bild picture, .me-hero-bild img { width: 100%; height: 100%; object-fit: cover; }
.me-hero-mork { background: linear-gradient(180deg, var(--gra-bak), #fff); padding-top: 2.2em; }
.me-siffror { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1em; margin-bottom: .8em; }
.me-siffror div { background: var(--gra-bak); border-radius: var(--radie); padding: 1.2em 1.1em; }
.me-siffror strong { display: block; font-size: 1.8rem; letter-spacing: -.02em; color: var(--rod); line-height: 1.1; }
.me-siffror span { font-size: .85rem; color: var(--gra-text); }
.steg-fem { grid-template-columns: repeat(5, 1fr); }
.ref-rad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2em; }
.ref-kort { position: relative; display: block; border-radius: var(--radie); overflow: hidden; aspect-ratio: 16/10; background: var(--gra-bak); text-decoration: none; color: #fff; box-shadow: var(--skugga); }
.ref-kort picture, .ref-kort img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
.ref-kort:hover img { transform: scale(1.04); }
.ref-text { position: absolute; left: 0; right: 0; bottom: 0; padding: 2.2em 1.1em .9em; background: linear-gradient(transparent, rgba(0,0,0,.72)); display: grid; }
.ref-text strong { font-size: 1.15rem; }
.ref-text span { font-size: .85rem; opacity: .9; }
.ref-filter { margin-bottom: 1.4em; }
.ref-lista { display: grid; gap: 1.6em; }
.ref-post { display: grid; grid-template-columns: 1.1fr 1fr; gap: 1.8em; align-items: center; background: #fff; border: 1px solid var(--gra-linje); border-radius: var(--radie); overflow: hidden; }
.ref-post:nth-child(even) .ref-post-bild { order: 2; }
.ref-post-bild { aspect-ratio: 16/10; background: var(--gra-bak); }
.ref-post-bild picture, .ref-post-bild img { width: 100%; height: 100%; object-fit: cover; }
.ref-post-text { padding: 1.4em 1.8em 1.4em 0; }
.ref-post:nth-child(even) .ref-post-text { padding: 1.4em 0 1.4em 1.8em; }
.ref-post h2 { margin-top: 0; font-size: 1.5rem; }
.ref-meta { color: var(--gra-text); font-size: .9rem; margin-bottom: .6em; }
.ref-taggar { display: flex; gap: .4em; flex-wrap: wrap; margin: .6em 0 .8em; }
.ref-taggar a { font-size: .8rem; font-weight: 600; background: var(--gra-bak); border: 1px solid var(--gra-linje); border-radius: 999px; padding: .25em .8em; text-decoration: none; color: var(--svart); }
.ref-taggar a:hover { border-color: var(--svart); }
.paket-rad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4em; }
.paket { background: #fff; border-radius: var(--radie); overflow: hidden; box-shadow: var(--skugga); display: flex; flex-direction: column; }
.paket-bild { position: relative; aspect-ratio: 16/10; background: var(--gra-bak); }
.paket-bild picture, .paket-bild img { width: 100%; height: 100%; object-fit: cover; }
.paket-yta { position: absolute; left: 1em; top: 1em; background: var(--svart); color: #fff; font-weight: 700; font-size: .85rem; padding: .35em .8em; border-radius: 999px; }
.paket-text { padding: 1.3em 1.4em 1.5em; display: flex; flex-direction: column; flex: 1; }
.paket-text h3 { margin-top: 0; font-size: 1.35rem; }
.paket-tabell { font-size: .86rem; margin: .4em 0 .6em; }
.paket-tabell td, .paket-tabell th { padding: .35em .3em; }
.paket-tabell td:first-child { white-space: nowrap; color: var(--gra-text); width: 3.2em; }
.paket-tabell a { color: var(--svart); text-decoration: none; }
.paket-tabell a:hover { color: var(--rod); }
.paket-tabell .hoger { text-align: right; white-space: nowrap; }
.paket-tabell tfoot th { background: var(--gra-bak); font-size: .95rem; }
.paket-knappar { display: flex; gap: .6em; flex-wrap: wrap; margin: auto 0 0; }
.kedja-rad, .tumregler { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2em; }
.kedja-rad div, .tumregler div { background: var(--gra-bak); border-radius: var(--radie); padding: 1.3em 1.3em 1em; }
.kedja-rad h3, .tumregler strong { margin-top: 0; font-size: 1.1rem; display: block; margin-bottom: .4em; }
.kedja-rad p, .tumregler p { font-size: .92rem; color: var(--gra-text); margin: 0; }
.dok-lista { list-style: none; margin: 0 0 1.6em; padding: 0; display: grid; gap: .5em; }
.dok-lista a { display: grid; grid-template-columns: 1fr; gap: .15em; padding: .8em 1em; border: 1px solid var(--gra-linje); border-radius: 10px; text-decoration: none; color: var(--svart); }
.dok-lista a:hover { border-color: var(--svart); }
.dok-lista span { font-size: .82rem; color: var(--gra-text); }
.prisnot { max-width: 40ch; }
@media (max-width: 1000px) {
  .me-siffror { grid-template-columns: repeat(3, 1fr); }
  .steg-fem { grid-template-columns: repeat(3, 1fr); }
  .paket-rad { grid-template-columns: 1fr 1fr; }
  .kedja-rad, .tumregler { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
  .me-band-inre, .me-hero-inre { grid-template-columns: 1fr; gap: 1.6em; }
  .me-hero h1 { font-size: 2.1rem; }
  .me-band h2 { font-size: 1.6rem; }
  .ref-rad { grid-template-columns: 1fr 1fr; }
  .ref-post { grid-template-columns: 1fr; }
  .ref-post:nth-child(even) .ref-post-bild { order: 0; }
  .ref-post-text, .ref-post:nth-child(even) .ref-post-text { padding: 1.2em 1.3em 1.4em; }
}
@media (max-width: 600px) {
  .me-siffror, .steg-fem, .paket-rad, .kedja-rad, .tumregler, .ref-rad { grid-template-columns: 1fr; }
  .me-band-fakta { grid-template-columns: 1fr 1fr; }
}

.koncept-rad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2em; }
.koncept-kort { display: block; border-radius: var(--radie); overflow: hidden; background: #fff; box-shadow: var(--skugga); text-decoration: none; color: var(--svart); transition: transform var(--fart), box-shadow var(--fart); }
.koncept-kort:hover { transform: translateY(-3px); box-shadow: var(--skugga-lyft); color: var(--svart); }
.koncept-kort picture, .koncept-kort > img { aspect-ratio: 16/10; width: 100%; }
.koncept-kort img { width: 100%; height: 100%; object-fit: cover; }
.koncept-text { display: grid; gap: .2em; padding: 1em 1.2em 1.2em; }
.koncept-text small { color: var(--rod); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; font-size: .72rem; }
.koncept-text strong { font-size: 1.15rem; }
.koncept-text span { color: var(--gra-text); font-size: .9rem; }
@media (max-width: 900px) { .koncept-rad { grid-template-columns: 1fr; } }