/* ==========================================================================
   Osanix – Glowavia | style.css
   Färgsystem, typografi och layout för hela webbplatsen.
   ========================================================================== */

:root {
  --skog: #163a26;
  --skog-djup: #0d2417;
  --mossa: #2f6b3e;
  --blad: #6fa06a;
  --gradde: #fbf7ef;
  --gradde-varm: #f3ecdd;
  --sol: #e0a11c;
  --plommon: #6d2c48;
  --kol: #1b211c;
  --dimma: #6d7a6e;
  --linje: #e2dbca;

  --rund-s: 6px;
  --rund-m: 14px;
  --rund-l: 26px;

  --skugga-mjuk: 0 2px 6px rgba(22, 58, 38, .06), 0 12px 34px rgba(22, 58, 38, .08);
  --skugga-lyft: 0 6px 14px rgba(22, 58, 38, .1), 0 26px 60px rgba(22, 58, 38, .14);

  --serif: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Palatino, Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --spalt: 1180px;
  --luft: clamp(3.4rem, 7vw, 6.6rem);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--gradde);
  color: var(--kol);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; height: auto; }

a { color: var(--mossa); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 600;
  line-height: 1.13;
  letter-spacing: -.01em;
  color: var(--skog-djup);
  margin: 0 0 .6em;
}

h1 { font-size: clamp(2.3rem, 5.4vw, 3.9rem); }
h2 { font-size: clamp(1.75rem, 3.6vw, 2.7rem); }
h3 { font-size: 1.24rem; }

p { margin: 0 0 1.1em; }

:focus-visible {
  outline: 3px solid var(--sol);
  outline-offset: 3px;
  border-radius: 3px;
}

.inre { width: 100%; max-width: var(--spalt); margin: 0 auto; padding: 0 22px; }
.smal { max-width: 780px; }

.avdelning { padding: var(--luft) 0; }
.avdelning--ljus { background: #fff; }
.avdelning--varm { background: var(--gradde-varm); }
.avdelning--mork { background: var(--skog); color: #eaf0e6; }
.avdelning--mork h2, .avdelning--mork h3 { color: #fff; }

.ogonbryn {
  font-family: var(--sans);
  font-size: .74rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--mossa);
  margin: 0 0 .9rem;
  display: block;
}
.avdelning--mork .ogonbryn { color: var(--sol); }

.ledtext { color: var(--dimma); max-width: 62ch; }
.avdelning--mork .ledtext { color: #c5d3c4; }

/* ---------- Knappar ---------- */
.knapp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  border: 0;
  cursor: pointer;
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 650;
  letter-spacing: .01em;
  padding: 1.02rem 2rem;
  border-radius: 999px;
  text-decoration: none;
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.knapp:hover { text-decoration: none; transform: translateY(-2px); }
.knapp--primar { background: var(--sol); color: #22180a; box-shadow: 0 8px 20px rgba(224, 161, 28, .32); }
.knapp--primar:hover { background: #f0ae23; box-shadow: 0 12px 28px rgba(224, 161, 28, .38); }
.knapp--skog { background: var(--skog); color: #fff; }
.knapp--skog:hover { background: var(--mossa); }
.knapp--linje { background: transparent; border: 1.5px solid rgba(255,255,255,.55); color: #fff; }
.knapp--linje:hover { background: rgba(255,255,255,.12); }
.knapp--bred { width: 100%; }

/* ---------- Toppband + huvud ---------- */
.toppband {
  background: var(--skog-djup);
  color: #d9e4d6;
  font-size: .82rem;
  letter-spacing: .02em;
}
.toppband__rad { display: flex; flex-wrap: wrap; gap: .4rem 1.6rem; justify-content: space-between; padding: .55rem 22px; max-width: var(--spalt); margin: 0 auto; }
.toppband a { color: #fff; font-weight: 600; }

.huvud {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(251, 247, 239, .93);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--linje);
}
.huvud__rad { display: flex; align-items: center; gap: 1.2rem; padding: .8rem 22px; max-width: var(--spalt); margin: 0 auto; }

.logga { display: flex; align-items: baseline; gap: .5rem; margin-right: auto; text-decoration: none; }
.logga:hover { text-decoration: none; }
.logga__namn { font-family: var(--serif); font-size: 1.6rem; font-weight: 600; color: var(--skog-djup); letter-spacing: -.02em; }
.logga__prick { width: 9px; height: 9px; border-radius: 50%; background: var(--sol); display: inline-block; transform: translateY(-9px); }
.logga__ord { font-size: .68rem; letter-spacing: .2em; text-transform: uppercase; color: var(--dimma); font-weight: 700; }

.meny { display: flex; align-items: center; gap: 1.6rem; }
.meny a { color: var(--kol); font-weight: 600; font-size: .96rem; }
.meny a:hover { color: var(--mossa); text-decoration: none; }

.huvud__knapp { display: inline-flex; }

.menyknapp {
  display: none;
  width: 44px; height: 44px;
  border: 1px solid var(--linje);
  border-radius: var(--rund-s);
  background: #fff;
  cursor: pointer;
  position: relative;
}
.menyknapp span, .menyknapp span::before, .menyknapp span::after {
  position: absolute; left: 50%; width: 20px; height: 2px; background: var(--skog); border-radius: 2px; content: ""; transform: translateX(-50%);
}
.menyknapp span { top: 50%; margin-top: -1px; }
.menyknapp span::before { top: -6px; }
.menyknapp span::after { top: 6px; }

/* ---------- Hero ---------- */
.hero { position: relative; background: var(--skog-djup); color: #fff; overflow: hidden; }
.hero__bild { position: absolute; inset: 0; }
.hero__bild img { width: 100%; height: 100%; object-fit: cover; opacity: .48; }
.hero__slojja { position: absolute; inset: 0; background: linear-gradient(105deg, rgba(13,36,23,.92) 6%, rgba(13,36,23,.72) 46%, rgba(13,36,23,.28) 100%); }
.hero__innehall { position: relative; max-width: var(--spalt); margin: 0 auto; padding: clamp(4.2rem, 11vw, 8.4rem) 22px clamp(3.4rem, 8vw, 6rem); }
.hero__text { max-width: 640px; }
.hero h1 { color: #fff; margin-bottom: .5em; }
.hero__lopp { font-size: clamp(1.02rem, 2.1vw, 1.22rem); color: #d9e6d6; max-width: 52ch; }
.hero__kur { display: flex; flex-wrap: wrap; gap: .9rem; margin: 2rem 0 1.6rem; }
.hero__punkter { display: flex; flex-wrap: wrap; gap: .55rem 1.5rem; list-style: none; padding: 0; margin: 0; font-size: .92rem; color: #cfe0cc; }
.hero__punkter li { display: flex; align-items: center; gap: .5rem; }
.hero__punkter li::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--sol); }

/* ---------- Faktaremsa ---------- */
.fakta { background: #fff; border-bottom: 1px solid var(--linje); }
.fakta__rutnat { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 1.2rem 2rem; padding: 1.9rem 22px; max-width: var(--spalt); margin: 0 auto; }
.fakta__post strong { display: block; font-family: var(--serif); font-size: 1.5rem; color: var(--skog-djup); }
.fakta__post span { font-size: .88rem; color: var(--dimma); }

/* ---------- Kort ---------- */
.kortrad { display: grid; grid-template-columns: repeat(auto-fit, minmax(238px, 1fr)); gap: 1.4rem; margin-top: 2.6rem; }
.kort {
  background: #fff;
  border: 1px solid var(--linje);
  border-radius: var(--rund-m);
  padding: 1.7rem 1.5rem;
  box-shadow: var(--skugga-mjuk);
  transition: transform .2s ease, box-shadow .2s ease;
}
.kort:hover { transform: translateY(-4px); box-shadow: var(--skugga-lyft); }
.kort h3 { margin-bottom: .45em; }
.kort p { margin: 0; color: var(--dimma); font-size: .96rem; }
.kort__mark {
  width: 46px; height: 46px; border-radius: 13px;
  background: var(--gradde-varm);
  display: grid; place-items: center;
  font-family: var(--serif); font-size: 1.3rem; color: var(--mossa);
  margin-bottom: 1rem;
}

/* ---------- Produkt ---------- */
.produkt { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(2rem, 5vw, 4.4rem); align-items: center; }
.produkt__scen {
  position: relative;
  background: radial-gradient(circle at 32% 28%, #fff 0%, var(--gradde-varm) 70%);
  border-radius: var(--rund-l);
  padding: 2.4rem;
  border: 1px solid var(--linje);
}
.produkt__scen img { border-radius: var(--rund-m); margin: 0 auto; }
.produkt__marke {
  position: absolute; top: 1.3rem; left: 1.3rem;
  background: var(--plommon); color: #fff;
  font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  padding: .42rem .85rem; border-radius: 999px;
}
.pris { display: flex; align-items: flex-end; gap: .8rem; margin: 1.4rem 0 .4rem; }
.pris__tal { font-family: var(--serif); font-size: clamp(2.3rem, 5vw, 3.1rem); color: var(--skog-djup); line-height: 1; }
.pris__enhet { font-size: .92rem; color: var(--dimma); padding-bottom: .35rem; }
.produkt__lista { list-style: none; padding: 0; margin: 1.4rem 0 1.9rem; display: grid; gap: .7rem; }
.produkt__lista li { display: flex; gap: .7rem; align-items: flex-start; font-size: .98rem; }
.produkt__lista li::before {
  content: "✓"; color: var(--mossa); font-weight: 700; line-height: 1.5;
}
.produkt__kur { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; }
.produkt__not { font-size: .84rem; color: var(--dimma); margin-top: 1.2rem; }

/* ---------- Steg ---------- */
.steg { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.6rem; margin-top: 2.8rem; counter-reset: s; }
.steg__post { position: relative; padding-top: 2.9rem; }
.steg__post::before {
  counter-increment: s;
  content: "0" counter(s);
  position: absolute; top: 0; left: 0;
  font-family: var(--serif); font-size: 1.9rem; color: var(--sol);
}
.steg__post::after { content: ""; position: absolute; top: 1.4rem; left: 3rem; right: 0; height: 1px; background: var(--linje); }
.steg__post h3 { font-size: 1.1rem; }
.steg__post p { color: var(--dimma); font-size: .95rem; margin: 0; }
.avdelning--mork .steg__post p { color: #c5d3c4; }
.avdelning--mork .steg__post::after { background: rgba(255,255,255,.18); }

/* ---------- Berättelse ---------- */
.berattelse { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.berattelse--omvand .berattelse__bild { order: 2; }
.berattelse__bild { border-radius: var(--rund-l); overflow: hidden; box-shadow: var(--skugga-mjuk); }
.berattelse__bild img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.berattelse__citat {
  border-left: 3px solid var(--sol);
  padding-left: 1.1rem;
  font-family: var(--serif);
  font-size: 1.12rem;
  color: var(--skog-djup);
  margin: 1.6rem 0 0;
}

/* ---------- Bildgalleri ---------- */
.galleri { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 1rem; margin-top: 2.4rem; }
.galleri figure { margin: 0; border-radius: var(--rund-m); overflow: hidden; background: #fff; border: 1px solid var(--linje); }
.galleri img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; transition: transform .5s ease; }
.galleri figure:hover img { transform: scale(1.05); }
.galleri figcaption { padding: .8rem 1rem 1rem; font-size: .9rem; color: var(--dimma); }
.galleri figcaption strong { display: block; color: var(--skog-djup); font-family: var(--serif); font-size: 1.05rem; }

/* ---------- Omdömen ---------- */
.omdomen { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.4rem; margin-top: 2.6rem; }
.omdome { background: #fff; border: 1px solid var(--linje); border-radius: var(--rund-m); padding: 1.7rem 1.5rem; display: flex; flex-direction: column; }
.omdome__stjarnor { color: var(--sol); letter-spacing: .18em; font-size: .95rem; margin-bottom: .8rem; }
.omdome p { font-size: .99rem; margin-bottom: 1.3rem; }
.omdome__namn { margin-top: auto; display: flex; align-items: center; gap: .8rem; }
.omdome__ring {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--skog); color: #fff;
  display: grid; place-items: center;
  font-weight: 700; font-size: .92rem;
}
.omdome__namn span { font-size: .86rem; color: var(--dimma); }
.omdome__namn strong { display: block; font-size: .96rem; color: var(--kol); }

/* ---------- Vanor-teaser ---------- */
.teaser { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(1.8rem, 4vw, 3.4rem); align-items: center; background: #fff; border: 1px solid var(--linje); border-radius: var(--rund-l); overflow: hidden; box-shadow: var(--skugga-mjuk); }
.teaser__bild img { width: 100%; height: 100%; min-height: 320px; object-fit: cover; }
.teaser__text { padding: clamp(1.8rem, 4vw, 3rem) clamp(1.4rem, 3vw, 2.6rem) clamp(1.8rem, 4vw, 3rem) 0; }
.teaser__lista { list-style: none; padding: 0; margin: 0 0 1.6rem; display: grid; gap: .5rem; font-size: .97rem; color: var(--dimma); }
.teaser__lista li::before { content: "—"; color: var(--blad); margin-right: .6rem; }

/* ---------- Formulär ---------- */
.bestall { display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.formkort {
  background: #fff;
  border-radius: var(--rund-l);
  padding: clamp(1.6rem, 3.4vw, 2.6rem);
  box-shadow: var(--skugga-lyft);
  border: 1px solid var(--linje);
}
.formkort h3 { font-size: 1.45rem; margin-bottom: .3em; }
.formkort__ledtext { font-size: .94rem; color: var(--dimma); margin-bottom: 1.6rem; }
.falt { margin-bottom: 1.15rem; }
.falt label { display: block; font-size: .87rem; font-weight: 650; margin-bottom: .4rem; color: var(--skog-djup); }
.falt input, .falt textarea, .falt select {
  width: 100%;
  font: inherit;
  font-size: 1rem;
  padding: .88rem 1rem;
  border: 1.5px solid var(--linje);
  border-radius: var(--rund-s);
  background: #fdfcf9;
  color: var(--kol);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.falt input:focus, .falt textarea:focus, .falt select:focus {
  border-color: var(--mossa);
  box-shadow: 0 0 0 3px rgba(47, 107, 62, .14);
  outline: none;
}
.falt textarea { min-height: 96px; resize: vertical; }
.falt--fel input, .falt--fel textarea { border-color: #b3372e; background: #fdf5f4; }
.falt__fel { display: none; color: #b3372e; font-size: .82rem; margin-top: .35rem; }
.falt--fel .falt__fel { display: block; }
.falt__tips { font-size: .8rem; color: var(--dimma); margin-top: .35rem; }

.samtycke { display: flex; gap: .7rem; align-items: flex-start; font-size: .84rem; color: var(--dimma); margin-bottom: 1.4rem; }
.samtycke input { width: 20px; height: 20px; margin-top: .15rem; flex: 0 0 auto; accent-color: var(--mossa); }
.samtycke--fel { color: #b3372e; }

.formkort__fot { font-size: .8rem; color: var(--dimma); margin: 1.1rem 0 0; text-align: center; }

.bestall__punkter { list-style: none; padding: 0; margin: 2rem 0 0; display: grid; gap: 1.1rem; }
.bestall__punkter li { display: grid; grid-template-columns: 34px 1fr; gap: .9rem; align-items: start; }
.bestall__punkter strong { display: block; }
.bestall__punkter span { color: #c5d3c4; font-size: .93rem; }
.bestall__ikon { width: 34px; height: 34px; border-radius: 10px; background: rgba(255,255,255,.1); display: grid; place-items: center; color: var(--sol); font-family: var(--serif); }

/* ---------- Kontaktremsa ---------- */
.kontakt { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.6rem; }
.kontakt__post h3 { font-size: 1.02rem; margin-bottom: .3em; }
.kontakt__post p { margin: 0; color: var(--dimma); font-size: .95rem; }

/* ---------- Fot ---------- */
.fot { background: var(--skog-djup); color: #b9c9b7; padding: clamp(3rem, 6vw, 4.4rem) 0 1.8rem; font-size: .92rem; }
.fot__rutnat { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 2rem; }
.fot h4 { color: #fff; font-family: var(--sans); font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; margin-bottom: 1rem; }
.fot ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .55rem; }
.fot a { color: #d6e3d4; }
.fot a:hover { color: #fff; }
.fot__logga { font-family: var(--serif); font-size: 1.5rem; color: #fff; margin-bottom: .6rem; }
.fot__streck { border: 0; border-top: 1px solid rgba(255,255,255,.14); margin: 2.4rem 0 1.4rem; }
.fot__botten { display: flex; flex-wrap: wrap; gap: .6rem 1.6rem; justify-content: space-between; font-size: .84rem; color: #93a691; }
.fot__mikro { font-size: .8rem; color: #8fa38d; margin-top: 1.2rem; max-width: 70ch; }

/* ---------- Textsidor ---------- */
.sidhuvud { background: var(--skog); color: #fff; padding: clamp(2.8rem, 6vw, 4.6rem) 0 clamp(2.2rem, 5vw, 3.4rem); }
.sidhuvud h1 { color: #fff; margin-bottom: .3em; }
.sidhuvud p { color: #c9d9c7; margin: 0; }
.brodsmula { font-size: .82rem; color: #a8bda6; margin-bottom: 1.4rem; }
.brodsmula a { color: #dcead9; }

.text { max-width: 800px; }
.text h2 { font-size: 1.55rem; margin-top: 2.4rem; }
.text h3 { font-size: 1.14rem; margin-top: 1.8rem; }
.text ul, .text ol { padding-left: 1.3rem; margin: 0 0 1.2rem; }
.text li { margin-bottom: .5rem; }
.text__ruta {
  background: #fff;
  border: 1px solid var(--linje);
  border-left: 4px solid var(--sol);
  border-radius: var(--rund-s);
  padding: 1.3rem 1.5rem;
  margin: 1.8rem 0;
}
.text__ruta p:last-child { margin-bottom: 0; }
.text__datum { font-size: .86rem; color: var(--dimma); }

.tabell { width: 100%; border-collapse: collapse; margin: 1.4rem 0 2rem; font-size: .92rem; background: #fff; }
.tabell th, .tabell td { text-align: left; padding: .8rem .9rem; border: 1px solid var(--linje); vertical-align: top; }
.tabell th { background: var(--gradde-varm); font-size: .82rem; letter-spacing: .04em; text-transform: uppercase; }

/* ---------- Tack-sida ---------- */
.tack { text-align: center; max-width: 640px; margin: 0 auto; }
.tack__ring {
  width: 84px; height: 84px; border-radius: 50%;
  background: var(--mossa); color: #fff;
  display: grid; place-items: center;
  font-size: 2.4rem; margin: 0 auto 1.6rem;
}
.tack__ruta { background: #fff; border: 1px solid var(--linje); border-radius: var(--rund-m); padding: 1.6rem; margin: 2rem 0; text-align: left; }

/* ---------- Kakbanner ---------- */
.kakor {
  position: fixed;
  left: 50%; bottom: 18px;
  transform: translate(-50%, 130%);
  width: min(940px, calc(100% - 24px));
  background: #fff;
  border: 1px solid var(--linje);
  border-radius: var(--rund-m);
  box-shadow: 0 20px 60px rgba(13, 36, 23, .26);
  padding: 1.4rem 1.5rem;
  z-index: 90;
  transition: transform .38s cubic-bezier(.22,.7,.3,1);
}
.kakor.ar-synlig { transform: translate(-50%, 0); }
.kakor h3 { font-size: 1.12rem; margin-bottom: .4em; }
.kakor p { font-size: .9rem; color: var(--dimma); margin-bottom: 1.1rem; }
.kakor__kur { display: flex; flex-wrap: wrap; gap: .7rem; }
.kakor .knapp { padding: .8rem 1.4rem; font-size: .94rem; }
.knapp--dov { background: var(--gradde-varm); color: var(--skog-djup); }
.knapp--dov:hover { background: #e9e0cd; }
.knapp--text { background: transparent; color: var(--mossa); text-decoration: underline; padding-left: .4rem; padding-right: .4rem; }

.kakor__val { display: none; margin: 1.2rem 0 .4rem; border-top: 1px solid var(--linje); padding-top: 1.1rem; }
.kakor__val.ar-oppen { display: block; }
.kakval { display: grid; grid-template-columns: 26px 1fr; gap: .8rem; padding: .7rem 0; border-bottom: 1px dashed var(--linje); }
.kakval:last-child { border-bottom: 0; }
.kakval input { width: 20px; height: 20px; margin-top: .3rem; accent-color: var(--mossa); }
.kakval strong { display: block; font-size: .95rem; }
.kakval span { font-size: .85rem; color: var(--dimma); }

.kakinstallning { display: inline-flex; align-items: center; gap: .4rem; background: none; border: 0; color: inherit; font: inherit; cursor: pointer; text-decoration: underline; padding: 0; }

/* ---------- Till toppen ---------- */
.upp {
  position: fixed; right: 18px; bottom: 18px;
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--skog); color: #fff;
  border: 0; cursor: pointer; font-size: 1.1rem;
  opacity: 0; pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
  z-index: 70;
}
.upp.ar-synlig { opacity: 1; pointer-events: auto; }
.upp:hover { transform: translateY(-3px); }

/* ---------- Mjuk inzoomning ---------- */
.glid { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.glid.ar-inne { opacity: 1; transform: none; }

/* ---------- Responsivt ---------- */
@media (max-width: 960px) {
  .produkt, .berattelse, .teaser, .bestall { grid-template-columns: 1fr; }
  .berattelse--omvand .berattelse__bild { order: 0; }
  .teaser__text { padding: 0 1.6rem 2rem; }
  .fot__rutnat { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 760px) {
  .menyknapp { display: block; }
  .meny {
    position: absolute;
    top: 100%; left: 0; right: 0;
    background: #fff;
    border-bottom: 1px solid var(--linje);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: .4rem 22px 1rem;
    display: none;
    box-shadow: var(--skugga-mjuk);
  }
  .meny.ar-oppen { display: flex; }
  .meny a { padding: .85rem 0; border-bottom: 1px solid var(--linje); }
  .huvud__knapp { display: none; }
  .huvud__rad { position: relative; }
  .hero__punkter { gap: .4rem 1rem; }
  .fot__rutnat { grid-template-columns: 1fr; }
  .kakor { padding: 1.2rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
  .glid { opacity: 1; transform: none; }
}

@media print {
  .huvud, .toppband, .kakor, .upp, .hero__bild { display: none; }
}