/* ==========================================================================
   Sulan · skor i Mariestad
   Palett persika och mossgrön. Accenten #3c5230 klarar 7,8:1 mot basen och
   används därför även som liten text. Ljusa toner på grönt är #faf3ec (7,8)
   och #cfc6b6 (5,1). Ingen text ligger på en färg som inte är mätt.
   ========================================================================== */

:root {
  --bas: #faf3ec;
  --yta: #fffaf4;
  --sand: #f0e4d6;
  --blek: #e4ecdd;

  --accent: #3c5230;
  --accent-mork: #2f3f26;
  --kol: #221f1b;

  --text: #1c1916;
  --dim: #5c5348;
  --ljus: #faf3ec;
  --ljusdim: #cfc6b6;

  --linje: #e3d6c6;
  --linje-stark: #cdb99e;

  --serif: 'Instrument Serif', Georgia, 'Times New Roman', serif;
  --sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  --pad: clamp(20px, 4vw, 44px);
  --rund: 18px;
  --topp-h: 70px;
}

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

[hidden] { display: none !important; }

html {
  background: var(--bas);
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

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

img, svg { max-width: 100%; }
svg { display: block; }

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: -0.01em;
  /* Å når 0,985 em över baslinjen i Instrument Serif och nedhänget 0,21.
     Radavståndet får därför aldrig gå under 1,20. Mätt med measureText
     efter document.fonts.load, inte gissat. */
  line-height: 1.24;
  overflow-wrap: break-word;
  margin: 0;
}

p { margin: 0; overflow-wrap: break-word; }
ul, ol { margin: 0; padding: 0; list-style: none; }
dl, dd, dt { margin: 0; }

a { color: inherit; }

button {
  font: inherit;
  color: inherit;
  cursor: pointer;
  border: 0;
  background: none;
}

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

.container {
  max-width: 1240px;
  margin-inline: auto;
  padding-inline: var(--pad);
}

.dold {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip { position: absolute; left: -9999px; top: 0; }

.skip:focus {
  left: 14px;
  top: 14px;
  z-index: 120;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 18px;
  background: var(--yta);
  color: var(--text);
  border-radius: 999px;
  text-decoration: none;
}

/* ---------- Knappar ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: 0 26px;
  border-radius: 999px;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.01em;
  text-decoration: none;
  transition: background-color .2s ease, color .2s ease, transform .2s ease;
}

.btn--gron { background: var(--accent); color: var(--ljus); }
.btn--gron:hover { background: var(--accent-mork); }
.btn--ljus { background: var(--ljus); color: var(--accent-mork); }
.btn--ljus:hover { background: #fff; }

/* ---------- Header ---------- */

.topp {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--accent);
  color: var(--ljus);
}

.topp-inner {
  max-width: 1240px;
  margin-inline: auto;
  padding-inline: var(--pad);
  min-height: var(--topp-h);
  display: flex;
  align-items: center;
  gap: 20px;
}

.logga {
  display: inline-flex;
  align-items: center;
  min-height: 46px;
  font-family: var(--serif);
  font-size: 30px;
  line-height: 1.24;
  letter-spacing: 0.01em;
  color: var(--ljus);
  text-decoration: none;
  margin-right: auto;
}

.huvudnav ul { display: flex; gap: 4px; }

.huvudnav a {
  display: inline-flex;
  align-items: center;
  min-height: 46px;
  padding: 0 14px;
  border-radius: 999px;
  font-size: 15px;
  color: var(--ljus);
  text-decoration: none;
}

.huvudnav a:hover { background: rgba(250, 243, 236, .14); }

.topp-hoger { display: flex; align-items: center; gap: 10px; }

.korg-knapp {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 46px;
  padding: 0 20px;
  border-radius: 999px;
  background: var(--ljus);
  color: var(--accent-mork);
  font-size: 15px;
  font-weight: 500;
}

.korg-knapp:hover { background: #fff; }
.korg-antal { font-variant-numeric: tabular-nums; }

.meny-knapp {
  display: none;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 6px;
  background: rgba(250, 243, 236, .14);
}

.meny-knapp span {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--ljus);
  transition: transform .22s ease;
}

/* ---------- Hero ---------- */

.hero {
  background: var(--accent);
  color: var(--ljus);
  min-height: clamp(500px, 78vh, 820px);
  display: flex;
  align-items: center;
  padding: clamp(60px, 10vh, 120px) var(--pad);
  text-align: center;
  position: relative;
}

.hero::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: repeating-linear-gradient(to right, rgba(250, 243, 236, .5) 0 10px, transparent 10px 20px);
}

.hero-inner { max-width: 900px; margin-inline: auto; }

.hero-ort {
  font-size: 13px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ljusdim);
  margin-bottom: 26px;
}

.hero-mening {
  font-size: clamp(2.5rem, 7.4vw, 5.4rem);
  line-height: 1.24;
  letter-spacing: -0.015em;
  margin-bottom: 38px;
}

.hero-btn { margin-bottom: 20px; }

.hero-under {
  font-size: 15px;
  color: var(--ljusdim);
}

/* ---------- Sektionsgemensamt ---------- */

section { padding-block: clamp(56px, 8vw, 108px); }

.sekt-topp { max-width: 720px; margin-bottom: clamp(30px, 4vw, 52px); }

.etikett {
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
  margin-bottom: 14px;
}

.etikett--ljus { color: var(--ljusdim); }

.rubrik {
  font-size: clamp(1.95rem, 4.2vw, 3.15rem);
  line-height: 1.24;
}

.rubrik--ljus { color: var(--ljus); }

.ingress {
  margin-top: 20px;
  font-size: clamp(16px, 1.6vw, 18px);
  color: var(--dim);
  max-width: 62ch;
}

/* ---------- Passformsguiden, signaturen ---------- */

.passform { background: var(--bas); }

.guide {
  display: grid;
  gap: clamp(22px, 3vw, 40px);
  background: var(--yta);
  border: 1px solid var(--linje);
  border-radius: var(--rund);
  padding: clamp(20px, 3vw, 40px);
}

@media (min-width: 1000px) {
  .guide { grid-template-columns: 0.92fr 1.08fr; }
}

.guide-styr { display: grid; gap: 26px; align-content: start; }

.styr-block { border-top: 1px solid var(--linje); padding-top: 18px; }
.styr-block:first-child { border-top: 0; padding-top: 0; }

.styr-rubrik {
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 8px;
}

.styr-hjalp {
  font-size: 14px;
  line-height: 1.55;
  color: var(--dim);
  margin-bottom: 16px;
  max-width: 46ch;
}

.langd {
  display: flex;
  align-items: center;
  gap: 14px;
}

.steg {
  width: 54px;
  height: 54px;
  flex: 0 0 54px;
  border-radius: 50%;
  background: var(--blek);
  color: var(--accent-mork);
  font-size: 24px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color .18s ease;
}

.steg:hover { background: #d5e2ca; }

.langd-tal {
  font-family: var(--serif);
  font-size: clamp(2.4rem, 6vw, 3.2rem);
  line-height: 1.24;
  font-variant-numeric: tabular-nums;
  flex: 1;
  text-align: center;
}

.langd-mm { font-size: 0.42em; color: var(--dim); font-family: var(--sans); }

.langd-linjal {
  margin-top: 14px;
  height: 6px;
  border-radius: 3px;
  background: var(--sand);
  overflow: hidden;
}

.langd-fyll {
  display: block;
  height: 100%;
  width: 48%;
  background: var(--accent);
  transition: width .22s ease;
}

.val { display: grid; gap: 8px; }

.valj {
  display: grid;
  gap: 2px;
  min-height: 60px;
  padding: 11px 18px;
  border: 1px solid var(--linje-stark);
  border-radius: 12px;
  background: var(--yta);
  text-align: left;
  font-size: 16px;
  font-weight: 500;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}

.valj span {
  font-size: 13.5px;
  font-weight: 400;
  color: var(--dim);
  line-height: 1.4;
}

.valj:hover { border-color: var(--accent); }

.valj[aria-pressed="true"] {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--ljus);
}

.valj[aria-pressed="true"] span { color: var(--ljusdim); }

.guide-svar { display: grid; gap: 20px; align-content: start; }

.ritning {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 14px;
}

.rit-ruta {
  margin: 0;
  background: var(--bas);
  border: 1px solid var(--linje);
  border-radius: 14px;
  padding: 16px 14px 12px;
  display: flex;
  flex-direction: column;
}

.rit-yta {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 178px;
}

.rit-yta svg { height: 178px; width: auto; max-width: 100%; }

.rit-ruta figcaption {
  margin-top: 12px;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--dim);
}

.svar {
  background: var(--blek);
  border-radius: 14px;
  padding: 22px;
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr 1fr;
}

.svar-tal { display: grid; gap: 2px; align-content: start; }

.svar-etikett {
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dim);
}

.svar-stor {
  font-family: var(--serif);
  font-size: clamp(2.6rem, 6vw, 3.6rem);
  line-height: 1.24;
  color: var(--accent-mork);
  font-variant-numeric: tabular-nums;
}

.svar-matt {
  grid-column: 1 / -1;
  display: grid;
  gap: 6px;
  border-top: 1px solid rgba(60, 82, 48, .22);
  padding-top: 14px;
}

.svar-matt > div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 14px;
}

.svar-matt dt { color: var(--dim); }
.svar-matt dd { font-weight: 500; font-variant-numeric: tabular-nums; }

.svar-rad {
  grid-column: 1 / -1;
  font-size: 15.5px;
  line-height: 1.55;
  border-top: 1px solid rgba(60, 82, 48, .22);
  padding-top: 14px;
}

#pf-visa { justify-self: start; }

.svar-not {
  font-size: 13px;
  line-height: 1.5;
  color: var(--dim);
  max-width: 60ch;
}

/* ---------- Sortiment ---------- */

.sortiment { background: var(--sand); }

.filter {
  display: grid;
  gap: 18px;
  margin-bottom: 20px;
}

@media (min-width: 760px) {
  .filter { grid-template-columns: 1.6fr 1fr; gap: 26px; }
}

.filter-namn {
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--dim);
  margin-bottom: 10px;
}

.filter-rad { display: flex; flex-wrap: wrap; gap: 8px; }

.fbtn, .bbtn {
  min-height: 46px;
  padding: 0 18px;
  border: 1px solid var(--linje-stark);
  border-radius: 999px;
  background: var(--yta);
  font-size: 15px;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}

.fbtn:hover, .bbtn:hover { border-color: var(--accent); }

.fbtn[aria-pressed="true"], .bbtn[aria-pressed="true"] {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--ljus);
}

.traffar {
  font-size: 14px;
  color: var(--dim);
  margin-bottom: 22px;
  padding-bottom: 18px;
  border-bottom: 1px dashed var(--linje-stark);
}

.rutnat {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}

.rutnat-tom {
  padding: 40px 0;
  font-size: 17px;
  color: var(--dim);
}

.par-notis {
  margin-top: 30px;
  padding: 18px 22px;
  border: 1px dashed var(--linje-stark);
  border-radius: 12px;
  font-size: 15px;
  color: var(--text);
  background: var(--yta);
}

/* ---------- Produktkort ---------- */

.pk {
  background: var(--yta);
  border: 1px solid var(--linje);
  border-radius: var(--rund);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.pk-bild {
  position: relative;
  background: var(--bas);
  padding: 18px 18px 16px;
  border-bottom: 1px solid var(--linje);
}

.pk-svg {
  width: 100%;
  max-width: 150px;
  height: auto;
  margin-inline: auto;
}

.pk-bredd {
  position: absolute;
  top: 14px;
  left: 14px;
  padding: 4px 11px;
  border-radius: 999px;
  background: var(--yta);
  border: 1px solid var(--linje-stark);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--dim);
}

.pk-kop { margin-top: 14px; }

.pk-btn {
  width: 100%;
  min-height: 46px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--ljus);
  font-size: 15px;
  font-weight: 500;
  transition: background-color .18s ease;
}

.pk-btn:hover { background: var(--accent-mork); }

.pk-stlrad { display: none; }
.pk--valj .pk-stlrad { display: block; }
.pk--valj .pk-btn { display: none; }

.pk-stlnamn {
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--dim);
  margin-bottom: 8px;
}

.pk-stlar {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(44px, 1fr));
  gap: 6px;
}

.pk-stl {
  min-height: 44px;
  border: 1px solid var(--linje-stark);
  border-radius: 9px;
  background: var(--yta);
  font-size: 14.5px;
  font-variant-numeric: tabular-nums;
  transition: background-color .16s ease, color .16s ease;
}

.pk-stl:hover:not([disabled]) { background: var(--accent); color: var(--ljus); border-color: var(--accent); }

.pk-stl[disabled] {
  color: #6b6155;
  background: var(--bas);
  cursor: not-allowed;
  text-decoration: line-through;
}

.pk-info {
  display: block;
  padding: 18px;
  text-decoration: none;
  flex: 1;
}

.pk-namn {
  font-size: 27px;
  line-height: 1.24;
  margin-bottom: 4px;
}

.pk-typ {
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--dim);
  margin-bottom: 14px;
}

.pk-rad {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  border-top: 1px solid var(--linje);
  padding-top: 12px;
}

.pk-pris { font-size: 17px; font-weight: 500; }

.pk-vidd {
  font-size: 12.5px;
  letter-spacing: 0.06em;
  color: var(--dim);
  text-transform: uppercase;
}

.pk-info:hover .pk-namn { color: var(--accent); }

/* ---------- Lästerna ---------- */

.laster { background: var(--bas); }

.laster-rad {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

.last-kort {
  background: var(--yta);
  border: 1px solid var(--linje);
  border-radius: var(--rund);
  padding: 24px;
}

.last-bild {
  display: flex;
  justify-content: center;
  padding-bottom: 18px;
  margin-bottom: 18px;
  border-bottom: 1px dashed var(--linje-stark);
}

.last-bild svg { height: 190px; width: auto; }

.last-nr {
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
  margin-bottom: 6px;
}

.last-namn { font-size: 30px; margin-bottom: 12px; }

.last-txt { font-size: 15px; line-height: 1.6; color: var(--dim); }

.last-antal {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--linje);
  font-size: 14px;
  font-weight: 500;
}

.laster-not {
  margin-top: 28px;
  font-size: 15.5px;
  color: var(--dim);
  max-width: 62ch;
}

/* ---------- Skovård ---------- */

.skovard { background: var(--yta); }

.vard {
  display: grid;
  gap: 2px;
  background: var(--linje);
  border: 1px solid var(--linje);
  border-radius: var(--rund);
  overflow: hidden;
}

@media (min-width: 780px) { .vard { grid-template-columns: 1fr 1fr; } }

.vard li {
  background: var(--yta);
  padding: clamp(22px, 3vw, 34px);
}

.vard-nr {
  font-family: var(--serif);
  font-size: 34px;
  line-height: 1.24;
  color: var(--accent);
  margin-bottom: 10px;
}

.vard h3 { font-size: 25px; margin-bottom: 10px; }

.vard p { font-size: 15.5px; line-height: 1.6; color: var(--dim); }

/* ---------- Frakt ---------- */

.frakt { background: var(--accent); color: var(--ljus); }

.frakt .ingress { color: var(--ljusdim); }

.frakt-rad {
  display: grid;
  gap: 2px;
  background: rgba(250, 243, 236, .22);
  border: 1px solid rgba(250, 243, 236, .22);
  border-radius: var(--rund);
  overflow: hidden;
}

@media (min-width: 700px) { .frakt-rad { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1060px) { .frakt-rad { grid-template-columns: repeat(4, 1fr); } }

.frakt-kol {
  background: var(--accent);
  padding: clamp(22px, 2.6vw, 32px);
}

.frakt-kol h3 {
  font-size: 24px;
  margin-bottom: 12px;
  color: var(--ljus);
}

.frakt-kol p {
  font-size: 15px;
  line-height: 1.6;
  color: var(--ljusdim);
}

/* ---------- Footer ---------- */

.fot {
  background: var(--kol);
  color: var(--ljus);
  padding-block: clamp(48px, 6vw, 76px) 32px;
}

.fot-rad {
  display: grid;
  gap: 30px;
  padding-bottom: 34px;
  border-bottom: 1px solid rgba(250, 243, 236, .18);
}

@media (min-width: 700px) { .fot-rad { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .fot-rad { grid-template-columns: 1.6fr 1fr 1fr 1fr; } }

.fot-logga {
  font-family: var(--serif);
  font-size: 34px;
  line-height: 1.24;
  margin-bottom: 12px;
}

.fot-txt {
  font-size: 15px;
  line-height: 1.6;
  color: var(--ljusdim);
  max-width: 40ch;
}

.fot-kol h2 {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ljusdim);
  margin-bottom: 14px;
  line-height: 1.5;
}

.fot-lista { display: grid; gap: 2px; }

.fot-lista li { font-size: 15.5px; color: var(--ljus); }

.fot-lista a {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  text-decoration: none;
  border-bottom: 1px solid rgba(250, 243, 236, .3);
}

.fot-lista a:hover { border-bottom-color: var(--ljus); }

.fot-botten {
  padding-top: 26px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  justify-content: space-between;
}

.fot-liten, .fot-demo { font-size: 13px; color: var(--ljusdim); }

/* ---------- Korgen ---------- */

.korg-sloja {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: rgba(34, 31, 27, .5);
  opacity: 0;
  transition: opacity .3s ease;
}

.korg-sloja.pa { opacity: 1; }

.korg {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 90;
  width: min(430px, 100%);
  background: var(--yta);
  display: flex;
  flex-direction: column;
  transform: translateX(102%);
  transition: transform .32s cubic-bezier(.22, .61, .36, 1);
  box-shadow: -18px 0 50px rgba(34, 31, 27, .18);
}

.korg.pa { transform: translateX(0); }

.korg-topp {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--linje);
}

.korg-rubrik { font-size: 17px; font-weight: 600; }

.stang {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--bas);
}

.stang svg { width: 22px; height: 22px; }
.stang:hover { background: var(--sand); }

.korg-kropp { flex: 1; overflow-y: auto; padding: 18px 20px; }

.korg-tom { display: grid; gap: 10px; padding: 30px 0; justify-items: start; }
.korg-tom-rubrik { font-family: var(--serif); font-size: 28px; line-height: 1.24; }
.korg-tom-txt { font-size: 15px; color: var(--dim); margin-bottom: 10px; }

.korg-lista { display: grid; gap: 16px; }

.korg-rad {
  display: grid;
  grid-template-columns: 66px 1fr;
  gap: 14px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--linje);
}

.korg-mini {
  background: var(--bas);
  border-radius: 10px;
  padding: 6px;
  display: flex;
  align-items: center;
}

.korg-svg { width: 100%; height: auto; }

.korg-namn { font-size: 16px; font-weight: 500; }

.korg-meta { font-size: 13px; color: var(--dim); margin-bottom: 4px; }

.korg-styck { font-size: 15px; font-weight: 500; margin-bottom: 10px; }

.korg-styr { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.korg-antal-box {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--linje-stark);
  border-radius: 999px;
  overflow: hidden;
}

.korg-steg {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}

.korg-steg:hover { background: var(--bas); }

.korg-siffra {
  min-width: 26px;
  text-align: center;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}

.korg-bort {
  min-height: 44px;
  padding: 0 12px;
  font-size: 14px;
  color: var(--dim);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.korg-bort:hover { color: var(--text); }

.korg-fot {
  border-top: 1px solid var(--linje);
  padding: 18px 20px 22px;
  display: grid;
  gap: 10px;
  background: var(--bas);
}

.korg-par {
  font-size: 13.5px;
  color: var(--accent);
  font-weight: 500;
}

.korg-summor { display: grid; gap: 4px; }

.korg-summor > div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 15px;
}

.korg-summor dt { color: var(--dim); }
.korg-summor dd { font-variant-numeric: tabular-nums; }
.korg-rabatt dt, .korg-rabatt dd { color: var(--accent); font-weight: 500; }

.korg-summa {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--linje-stark);
  font-size: 19px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.korg-moms { font-size: 12.5px; color: var(--dim); }

.korg-fot .btn { width: 100%; }

body.korg-last, body.ruta-last { overflow: hidden; }

/* ---------- Demo-modal, egen låsklass ---------- */

.ruta {
  position: fixed;
  inset: 0;
  z-index: 110;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.ruta[hidden] { display: none; }

.ruta-sloja { position: absolute; inset: 0; background: rgba(34, 31, 27, .58); }

.ruta-kort {
  position: relative;
  background: var(--yta);
  border-radius: var(--rund);
  padding: clamp(26px, 4vw, 42px);
  max-width: 560px;
  width: 100%;
  display: grid;
  gap: 16px;
  justify-items: start;
}

.ruta-etikett {
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
}

.ruta-rubrik { font-size: clamp(1.5rem, 3.4vw, 2.1rem); line-height: 1.24; }

.ruta-txt { font-size: 15.5px; color: var(--dim); }

/* ---------- Produktsidan ---------- */

#produktsida { padding-block: clamp(26px, 4vw, 46px) clamp(56px, 8vw, 100px); }

.ps-smula { margin-bottom: 26px; }

.ps-smula ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  color: var(--dim);
}

.ps-smula li + li::before { content: '/'; margin-right: 8px; color: var(--linje-stark); }

.ps-smula a { color: var(--dim); text-decoration: none; border-bottom: 1px solid var(--linje-stark); }
.ps-smula a:hover { color: var(--text); }

.ps { display: grid; gap: clamp(26px, 4vw, 52px); }

@media (min-width: 940px) {
  .ps { grid-template-columns: 1.02fr 1fr; align-items: start; }
  /* Bilden foljer med nedat, annars star vanster kolumn tom under halva sidan. */
  .ps-bilder { position: sticky; top: calc(var(--topp-h) + 20px); }
}

.ps-bilder { display: grid; gap: 14px; }

.ps-stor {
  background: var(--sand);
  border: 1px solid var(--linje);
  border-radius: var(--rund);
  padding: clamp(24px, 4vw, 44px);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 320px;
}

.ps-svg { width: 100%; max-width: 300px; height: auto; }

.ps-minirad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }

.ps-mini {
  display: grid;
  gap: 6px;
  justify-items: center;
  padding: 12px 8px 10px;
  border: 1px solid var(--linje-stark);
  border-radius: 12px;
  background: var(--yta);
  font-size: 12.5px;
  color: var(--dim);
  min-height: 108px;
  transition: border-color .18s ease, background-color .18s ease;
}

.ps-mini-svg { height: 62px; width: auto; }

.ps-mini[aria-pressed="true"] {
  border-color: var(--accent);
  background: var(--blek);
  color: var(--text);
}

.ps-info { display: grid; gap: 16px; align-content: start; }

.ps-typ {
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
}

.ps-namn { font-size: clamp(2.4rem, 5.4vw, 3.6rem); line-height: 1.24; }

.ps-pris { font-size: 25px; font-weight: 500; }

.ps-moms { font-size: 13.5px; color: var(--dim); margin-top: -12px; }

.ps-text { font-size: 16.5px; line-height: 1.62; color: var(--dim); max-width: 58ch; }

.ps-falt { border-top: 1px solid var(--linje); padding-top: 18px; }

.ps-etikett {
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--dim);
  margin-bottom: 10px;
}

.ps-etikett--kravs { color: #93321f; font-weight: 600; }

.ps-vbredder { display: flex; flex-wrap: wrap; gap: 8px; }

.ps-vbtn {
  display: grid;
  gap: 1px;
  min-height: 58px;
  padding: 8px 20px;
  border: 1px solid var(--linje-stark);
  border-radius: 12px;
  background: var(--yta);
  font-size: 16px;
  font-weight: 500;
  text-align: left;
}

.ps-vbtn span { font-size: 12.5px; font-weight: 400; color: var(--dim); }

.ps-vbtn[aria-pressed="true"] {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--ljus);
}

.ps-vbtn[aria-pressed="true"] span { color: var(--ljusdim); }

.ps-sstlar {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(52px, 1fr));
  gap: 8px;
}

.ps-sbtn {
  min-height: 50px;
  border: 1px solid var(--linje-stark);
  border-radius: 10px;
  background: var(--yta);
  font-size: 15.5px;
  font-variant-numeric: tabular-nums;
  transition: background-color .16s ease, color .16s ease;
}

.ps-sbtn:hover:not([disabled]) { border-color: var(--accent); }

.ps-sbtn[aria-pressed="true"] {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--ljus);
}

.ps-sbtn[disabled] {
  color: #6b6155;
  background: var(--bas);
  cursor: not-allowed;
  text-decoration: line-through;
}

.ps-lager { margin-top: 12px; font-size: 14px; color: var(--dim); }

.ps-kop { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

.ps-antal {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--linje-stark);
  border-radius: 999px;
}

.ps-steg {
  width: 50px;
  height: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}

.ps-steg:hover { background: var(--bas); }

.ps-antal-tal {
  min-width: 30px;
  text-align: center;
  font-size: 16px;
  font-variant-numeric: tabular-nums;
}

.ps-btn { flex: 1; min-width: 200px; }

.ps-par { font-size: 14px; color: var(--accent); font-weight: 500; }

.ps-spec {
  border-top: 1px solid var(--linje);
  padding-top: 6px;
}

.ps-spec-rad {
  display: grid;
  grid-template-columns: minmax(120px, 0.7fr) 1fr;
  gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid var(--linje);
  font-size: 14.5px;
}

.ps-spec-rad dt { color: var(--dim); }

.ps-villkor {
  display: grid;
  gap: 12px;
  background: var(--blek);
  border-radius: 14px;
  padding: 20px;
  font-size: 14.5px;
  line-height: 1.6;
}

.ps-villkor a { color: var(--accent-mork); }

.ps-mer { margin-top: clamp(50px, 7vw, 88px); }

.ps-mer-rubrik {
  font-size: clamp(1.7rem, 3.4vw, 2.4rem);
  margin-bottom: 24px;
  padding-bottom: 18px;
  border-bottom: 1px dashed var(--linje-stark);
}

/* ---------- Motion ---------- */

.js .in-fade {
  opacity: 0;
  transform: scale(1.02);
  transition: opacity .55s ease, transform .55s cubic-bezier(.22, .61, .36, 1);
}

.js .in-fade.syns { opacity: 1; transform: scale(1); }

/* ---------- Mobil ---------- */

@media (max-width: 899px) {
  .meny-knapp { display: inline-flex; }

  .huvudnav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--accent);
    border-top: 1px solid rgba(250, 243, 236, .2);
    padding: 8px var(--pad) 18px;
  }

  body.meny-pa .huvudnav { display: block; }

  .huvudnav ul { flex-direction: column; gap: 2px; }

  .huvudnav a {
    min-height: 52px;
    width: 100%;
    padding: 0 12px;
    font-size: 17px;
    border-bottom: 1px solid rgba(250, 243, 236, .14);
    border-radius: 0;
  }

  .topp { position: sticky; }
  .topp-inner { position: relative; }

  .korg-knapp { padding: 0 16px; font-size: 14px; }
  .logga { font-size: 26px; }
}

@media (max-width: 700px) {
  .ritning { grid-template-columns: 1fr; }
  .rit-yta svg { height: 168px; }
  .svar { grid-template-columns: 1fr 1fr; padding: 18px; }
  .ps-minirad { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 420px) {
  body { font-size: 16px; }
  .rutnat { grid-template-columns: 1fr; }
  .pk-svg { max-width: 130px; }
  .ps-kop { flex-direction: column; align-items: stretch; }
  .ps-btn { min-width: 0; }
  .ps-antal { justify-content: space-between; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .js .in-fade { opacity: 1; transform: none; }
  .korg { transition: none; }
}