/* ============================================================
   Ullbanken — garn och handarbete i Alingsås
   Palett sand och svartgrön. Asap Condensed + Rubik.
   Accenten #23402f är mörk och klarar 11:1 mot ytorna, så den
   används både som text och som yta. Den dämpade texten är
   #55564c, mätt till 6,6:1 mot sanden och 7,2:1 mot ytan.
   ============================================================ */

:root {
  --sand: #f4f1e9;
  --sand-m: #eae5d6;
  --yta: #fdfbf6;
  --gron: #23402f;
  --gron-2: #2c4d39;
  --text: #1a1a17;
  --dis: #55564c;
  --pa-gron: #f4f1e9;
  --dis-gron: #c9c9ba;
  --linje: #ddd7c6;
  --linje-gron: #3d5b48;
  --slut-yta: #efece1;
  --sp: clamp(56px, 7vw, 104px);
  --display: "Asap Condensed", "Arial Narrow", Arial, sans-serif;
  --brod: Rubik, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--sand);
  color: var(--text);
  font: 400 16px/1.62 var(--brod);
  overflow-wrap: break-word;
}

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

h1, h2, h3 { font-family: var(--display); font-weight: 600; letter-spacing: -.005em; }

.container { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 20px; }

.dold { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.skip { position: absolute; left: -9999px; }
.skip:focus {
  left: 12px; top: 12px; z-index: 200; background: var(--gron); color: var(--yta);
  padding: 12px 18px; text-decoration: none;
}

:focus-visible { outline: 2px solid var(--gron); outline-offset: 2px; }
.rulle :focus-visible, .butiken :focus-visible, .fot :focus-visible { outline-color: var(--pa-gron); }

.etikett {
  font-family: var(--brod); font-size: .75rem; font-weight: 500; letter-spacing: .16em;
  text-transform: uppercase; color: var(--dis); margin: 0 0 12px;
}
.etikett--ljus { color: var(--dis-gron); }

.avsnitt-rubrik {
  font-size: clamp(2.1rem, 4.6vw, 3.4rem); line-height: 1.16; margin: 0 0 14px; color: var(--gron);
}
.avsnitt-txt { font-size: 1rem; color: var(--dis); max-width: 62ch; margin: 0; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 46px; padding: 0 20px; border: 1px solid transparent; border-radius: 2px;
  font: 500 .9rem var(--brod); text-decoration: none; cursor: pointer;
  transition: background .18s ease, color .18s ease;
}
.btn--gron { background: var(--gron); color: var(--yta); }
.btn--gron:hover { background: var(--gron-2); }
.btn--linje { background: transparent; color: var(--gron); border-color: var(--gron); }
.btn--linje:hover { background: var(--sand-m); }

/* ---------------- Reveals ---------------- */

.js .in, .js .pk, .js .rs, .js .mk, .js .vk {
  opacity: 0; transform: translateY(18px);
  transition: opacity .55s ease, transform .55s ease;
}
.js .in.syns, .js .pk.syns, .js .rs.syns, .js .mk.syns, .js .vk.syns { opacity: 1; transform: none; }
.js .rs { transition-delay: calc(var(--i, 0) * 42ms); }
.js .rutnat .pk:nth-child(3n+2) { transition-delay: .07s; }
.js .rutnat .pk:nth-child(3n+3) { transition-delay: .14s; }
.js .monster-rutnat .mk:nth-child(2) { transition-delay: .07s; }
.js .monster-rutnat .mk:nth-child(3) { transition-delay: .14s; }
.js .monster-rutnat .mk:nth-child(4) { transition-delay: .21s; }
.js .villkor-rutnat .vk:nth-child(2) { transition-delay: .07s; }
.js .villkor-rutnat .vk:nth-child(3) { transition-delay: .14s; }
.js .villkor-rutnat .vk:nth-child(4) { transition-delay: .21s; }

/* ---------------- Band och header ---------------- */

.band { background: var(--gron); color: var(--pa-gron); font-size: .78rem; }
.band-inre {
  max-width: 1240px; margin: 0 auto; padding: 9px 20px;
  display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; justify-content: center;
}
.band-prick { width: 3px; height: 3px; border-radius: 50%; background: var(--dis-gron); }

.topp {
  position: sticky; top: 0; z-index: 60;
  background: rgba(244, 241, 233, .95); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--linje);
}
.topp-inre { max-width: 1240px; margin: 0 auto; padding: 6px 20px; display: flex; align-items: center; gap: 14px; }

.ordmarke {
  font-family: var(--display); font-weight: 700; font-size: 1.65rem; line-height: 1;
  color: var(--gron); text-decoration: none; letter-spacing: -.01em;
  display: inline-flex; align-items: center; min-height: 48px; margin-right: auto;
}

.huvudmeny ul { list-style: none; display: flex; gap: 24px; margin: 0; padding: 0; }
.huvudmeny a {
  color: var(--text); text-decoration: none; font-size: .92rem;
  display: flex; align-items: center; min-height: 46px;
}
.huvudmeny a:hover { color: var(--gron); text-decoration: underline; text-underline-offset: 4px; }

.topp-hoger { display: flex; align-items: center; gap: 8px; }
.korg-knapp {
  min-height: 44px; padding: 0 14px; border: 1px solid var(--gron); background: transparent;
  color: var(--gron); font: 500 .88rem var(--brod); cursor: pointer; border-radius: 2px;
}
.korg-knapp:hover { background: var(--gron); color: var(--yta); }
.korg-tal { color: var(--dis); margin-left: 2px; }
.korg-knapp:hover .korg-tal { color: var(--dis-gron); }

.meny-knapp {
  width: 44px; height: 44px; border: 1px solid var(--gron); background: transparent;
  display: none; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  cursor: pointer; border-radius: 2px;
}
.meny-knapp span { width: 18px; height: 1.6px; background: var(--gron); display: block; transition: transform .22s ease; }
body.meny-pa .meny-knapp span:first-child { transform: translateY(3.3px) rotate(45deg); }
body.meny-pa .meny-knapp span:last-child { transform: translateY(-3.3px) rotate(-45deg); }

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

.hero { position: relative; overflow: hidden; padding: clamp(52px, 9vw, 104px) 0 clamp(96px, 11vw, 140px); }
.hero-trad { position: absolute; left: 0; right: 0; bottom: 4%; width: 100%; height: 62%; }
.hero-inre { position: relative; }

.hero-ort {
  font-size: .78rem; letter-spacing: .18em; text-transform: uppercase; color: var(--dis);
  margin: 0 0 clamp(10px, 1.6vw, 20px);
}
.hero-ord {
  font-size: clamp(4rem, 17.5vw, 15rem); line-height: .92; letter-spacing: -.025em;
  color: var(--gron); margin: 0; font-weight: 600;
}
.hero-under {
  margin: clamp(14px, 2vw, 24px) 0 0; padding-top: clamp(14px, 2vw, 22px);
  border-top: 1px solid var(--linje);
  font-size: clamp(1rem, 1.5vw, 1.2rem); color: var(--dis); max-width: 46ch;
}

.hero-pil {
  position: absolute; left: 50%; margin-left: -26px; bottom: clamp(26px, 4vw, 46px);
  width: 52px; height: 52px; border: 1.5px solid var(--gron); border-radius: 50%;
  display: flex; align-items: center; justify-content: center; color: var(--gron);
  background: var(--sand);
}
.hero-pil svg { width: 20px; height: 20px; animation: bob 2.6s ease-in-out infinite; }
.hero-pil:hover { background: var(--gron); color: var(--sand); }
@keyframes bob { 0%, 100% { transform: translateY(-2px); } 50% { transform: translateY(3px); } }

/* ---------------- SIGNATUR: garnrullen ---------------- */

.rulle {
  background: var(--gron); color: var(--pa-gron);
  padding: clamp(52px, 7vw, 96px) 0 clamp(32px, 4vw, 56px);
  --r1: 92px; --r2: 48px; --r3: 42px; --r4: 66px; --r5: 66px; --r6: 66px; --r7: 46px;
}
.rulle-rubrik { font-size: clamp(2.6rem, 6.5vw, 4.8rem); line-height: 1.16; margin: 0 0 16px; }
.rulle-txt { color: var(--dis-gron); max-width: 66ch; margin: 0; font-size: 1rem; }

.sortrad { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: clamp(20px, 3vw, 30px); }
.sortrad-txt {
  font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: var(--dis-gron);
  margin-right: 6px;
}
.sortknapp {
  min-height: 44px; padding: 0 16px; border: 1px solid var(--linje-gron); background: transparent;
  color: var(--pa-gron); font: 400 .88rem var(--brod); cursor: pointer; border-radius: 2px;
}
.sortknapp:hover { border-color: var(--pa-gron); }
.sortknapp[aria-pressed="true"] { background: var(--pa-gron); color: var(--gron); border-color: var(--pa-gron); font-weight: 500; }

.rulle-yta { margin-top: clamp(26px, 4vw, 42px); }
.rulle-spar {
  display: flex; overflow-x: auto; overflow-y: hidden; padding-bottom: 12px;
  scrollbar-width: thin; scrollbar-color: var(--linje-gron) transparent;
}
.rulle-spar::-webkit-scrollbar { height: 6px; }
.rulle-spar::-webkit-scrollbar-thumb { background: var(--linje-gron); }

.rulle-rad { display: flex; flex: 0 0 auto; padding-left: 24px; }
.rulle-etiketter, .rs {
  display: grid; flex: 0 0 auto;
  grid-template-rows: var(--r1) var(--r2) var(--r3) var(--r4) var(--r5) var(--r6) var(--r7);
}
.rulle-etiketter {
  position: sticky; left: 0; z-index: 2; width: 166px; padding-left: 20px;
  background: var(--gron);
}
.rulle-etiketter::after {
  content: ""; position: absolute; top: 0; bottom: 0; right: -20px; width: 20px;
  background: linear-gradient(90deg, rgba(35, 64, 47, .9), rgba(35, 64, 47, 0));
}
.re {
  display: flex; align-items: center; padding-right: 14px;
  font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; line-height: 1.4;
  color: var(--dis-gron); border-top: 1px solid var(--linje-gron);
}
.re--bild { border-top: 0; }

.rs { width: 176px; padding-right: 16px; }
.rs > span { border-top: 1px solid var(--linje-gron); display: flex; align-items: center; }
.rs-bild { border-top: 0 !important; justify-content: flex-start; }
.rs-bild svg { width: 92px; height: auto; }
.rs-namn { font-family: var(--display); font-size: 1.45rem; }
.rs-namn a {
  color: var(--pa-gron); text-decoration: none; display: inline-flex; align-items: center;
  min-height: 44px; line-height: 1.16;
}
.rs-namn a:hover { text-decoration: underline; text-underline-offset: 4px; }
.rs-mat { font-size: .74rem; color: var(--dis-gron); line-height: 1.35; }
.rs-tal { align-items: baseline !important; gap: 5px; padding-top: 18px; }
.rs-tal b { font-family: var(--display); font-weight: 600; font-size: 2.3rem; line-height: 1; }
.rs-tal i { font-style: normal; font-size: .74rem; color: var(--dis-gron); }
.rs-pris { font-family: var(--display); font-size: 1.1rem; }

.rulle-styr { display: flex; align-items: center; gap: 14px; margin-top: 22px; }
.rullknapp {
  width: 44px; height: 44px; flex: 0 0 auto; border: 1px solid var(--linje-gron);
  background: transparent; color: var(--pa-gron); cursor: pointer; border-radius: 2px;
  display: inline-flex; align-items: center; justify-content: center;
}
.rullknapp:hover { border-color: var(--pa-gron); }
.rullknapp svg { width: 20px; height: 20px; }
.matare { flex: 1; height: 2px; background: var(--linje-gron); }
.matare-fyll { display: block; height: 100%; width: 10%; background: var(--pa-gron); transition: width .2s ease; }

/* ---------------- Sortimentet ---------------- */

.sortiment { padding: var(--sp) 0; }

.filter { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: clamp(26px, 3.5vw, 40px) 0 12px; }
.filter-txt { font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: var(--dis); margin-right: 6px; }
.fbtn {
  min-height: 44px; padding: 0 16px; border: 1px solid var(--linje); background: var(--yta);
  color: var(--text); font: 400 .9rem var(--brod); cursor: pointer; border-radius: 2px;
}
.fbtn:hover { border-color: var(--gron); }
.fbtn[aria-pressed="true"] { background: var(--gron); color: var(--yta); border-color: var(--gron); font-weight: 500; }
.fbtn-tal { color: var(--dis); margin-left: 5px; font-size: .82rem; }
.fbtn[aria-pressed="true"] .fbtn-tal { color: var(--dis-gron); }
.filter-legend { font-size: .85rem; color: var(--dis); margin: 0 0 4px; max-width: 70ch; }
.filter-svar { font-size: .85rem; color: var(--dis); margin: 0 0 22px; }

.rutnat { display: grid; grid-template-columns: repeat(auto-fill, minmax(266px, 1fr)); gap: clamp(14px, 1.8vw, 24px); }

.pk { background: var(--yta); border: 1px solid var(--linje); display: flex; flex-direction: column; }
.pk-bild {
  position: relative; display: flex; align-items: center; justify-content: center;
  background: var(--sand-m); aspect-ratio: 4 / 3; border-bottom: 1px solid var(--linje);
  overflow: hidden;
}
.pk-ill { display: block; width: 78%; }
.pk-ill svg { display: block; width: 100%; height: auto; }
.pk-grov {
  position: absolute; top: 0; left: 0; background: var(--yta); color: var(--gron);
  font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; padding: 6px 10px;
  border-right: 1px solid var(--linje); border-bottom: 1px solid var(--linje);
}
.pk-txt { padding: 14px 18px 20px; display: flex; flex-direction: column; gap: 9px; flex: 1; }
.pk-namn { margin: 0; font-size: 1.6rem; line-height: 1.16; }
.pk-namn a { color: var(--text); text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; }
.pk-namn a:hover { color: var(--gron); text-decoration: underline; text-underline-offset: 4px; }
.pk-mat { margin: -6px 0 0; font-size: .82rem; color: var(--dis); }
.pk-data {
  list-style: none; margin: 2px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 3px 14px;
  font-size: .8rem; color: var(--dis);
}
.pk-data b { font-family: var(--display); font-weight: 600; font-size: .95rem; color: var(--gron); }

.pk-farger { display: flex; flex-wrap: wrap; gap: 2px; }
.pkw {
  width: 34px; height: 44px; padding: 0; border: 0; background: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center; position: relative;
}
.prick { width: 24px; height: 24px; border-radius: 50%; box-shadow: 0 0 0 1px rgba(26, 26, 23, .22); display: block; }
.pkw[aria-pressed="true"] .prick { box-shadow: 0 0 0 1.5px var(--yta), 0 0 0 3.5px var(--gron); }
.pkw--slut { cursor: not-allowed; }
.pkw--slut .prick { opacity: .5; }
.pkw--slut::after {
  content: ""; position: absolute; left: 5px; right: 5px; top: 21px; height: 2px;
  background: var(--text); transform: rotate(-38deg);
}

.pk-parti { margin: 0; font-size: .78rem; color: var(--dis); }
.pk-kop { margin-top: auto; padding-top: 8px; display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.pk-pris { margin: 0; font-family: var(--display); font-size: 1.5rem; line-height: 1.1; color: var(--gron); }
.pk-pris span { display: block; font-family: var(--brod); font-size: .74rem; color: var(--dis); }
.pk-btn { flex: 0 0 auto; }

.mangd-not {
  margin: clamp(28px, 4vw, 44px) 0 0; padding-top: 16px; border-top: 1px solid var(--linje);
  font-size: .9rem; color: var(--dis); max-width: 74ch;
}

/* ---------------- Åtgångsräknaren ---------------- */

.rakna { background: var(--sand-m); padding: var(--sp) 0; }
.rakna-inre { display: grid; gap: clamp(28px, 4vw, 52px); align-items: start; }
.rakna-txt .avsnitt-txt { color: var(--dis); }
.rakna-not {
  margin: 20px 0 0; padding-left: 16px; border-left: 2px solid var(--gron);
  font-size: .92rem; color: var(--dis); max-width: 54ch;
}
.rakna-punkter { list-style: none; margin: 28px 0 0; padding: 0; border-top: 1px solid var(--linje); max-width: 54ch; }
.rakna-punkter li { display: grid; gap: 2px; padding: 14px 0; border-bottom: 1px solid var(--linje); }
.rp-rubrik { font-family: var(--display); font-weight: 600; font-size: 1.15rem; line-height: 1.16; color: var(--gron); }
.rp-txt { font-size: .88rem; color: var(--dis); }

.rakna-kort {
  background: var(--yta); border: 1px solid var(--linje); padding: clamp(20px, 3vw, 32px);
  display: grid; gap: 14px;
}
.falt label {
  display: block; font-size: .74rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--dis); margin-bottom: 6px;
}
.falt select {
  width: 100%; min-height: 48px; padding: 0 42px 0 14px; border: 1px solid var(--linje);
  border-radius: 2px; color: var(--text); font: 400 .95rem var(--brod);
  background-color: var(--sand); appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%2323402f' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 18px 18px;
}
.falt select:hover { border-color: var(--gron); }

.svar { border-top: 1px solid var(--linje); padding-top: 14px; margin-top: 4px; }
.svar-rubrik { font-family: var(--display); font-size: 1.2rem; line-height: 1.16; color: var(--gron); margin: 0 0 12px; }
.svar-rad { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; padding: 8px 0; border-bottom: 1px dotted var(--linje); font-size: .92rem; }
.svar-rad span { color: var(--dis); }
.svar-rad b { font-family: var(--display); font-weight: 600; font-size: 1.35rem; color: var(--text); }
.svar-rad--pris { border-bottom: 0; }
.svar-rad--pris b { color: var(--gron); font-size: 1.7rem; }
.svar-not { margin: 10px 0 0; font-size: .8rem; color: var(--dis); }
.rakna-btn { width: 100%; margin-top: 4px; }

/* ---------------- Mönster ---------------- */

.monster { padding: var(--sp) 0; }
.monster-rutnat { display: grid; grid-template-columns: repeat(auto-fit, minmax(248px, 1fr)); gap: clamp(14px, 1.8vw, 22px); margin-top: clamp(26px, 3.5vw, 40px); }
.mk { background: var(--yta); border: 1px solid var(--linje); padding: 22px; display: flex; flex-direction: column; gap: 10px; }
.mk-typ { margin: 0; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--dis); }
.mk-namn { margin: 0; font-size: 2.1rem; line-height: 1.16; color: var(--gron); }
.mk-txt { margin: 0; font-size: .9rem; color: var(--dis); }
.mk-data { margin: 6px 0 0; display: grid; gap: 6px; font-size: .85rem; }
.mk-data div { display: flex; justify-content: space-between; gap: 12px; border-bottom: 1px dotted var(--linje); padding-bottom: 5px; }
.mk-data dt { color: var(--dis); }
.mk-data dd { margin: 0; text-align: right; color: var(--text); }
.mk-btn { margin-top: auto; width: 100%; }

/* ---------------- Butiken ---------------- */

.butiken { background: var(--gron); color: var(--pa-gron); padding: var(--sp) 0; }
.butiken-inre { display: grid; gap: clamp(30px, 4vw, 52px); align-items: start; }
.butiken .avsnitt-rubrik { color: var(--pa-gron); }
.butiken-txt p { color: var(--dis-gron); max-width: 58ch; }
.butiken-fakta { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--linje-gron); }
.butiken-fakta li { display: grid; gap: 4px; padding: 16px 0; border-bottom: 1px solid var(--linje-gron); }
.bf-rubrik { font-family: var(--display); font-size: 1.3rem; line-height: 1.16; color: var(--pa-gron); }
.bf-txt { font-size: .88rem; color: var(--dis-gron); line-height: 1.6; }

/* ---------------- Frakt och retur ---------------- */

.villkor { background: var(--yta); padding: var(--sp) 0; border-top: 1px solid var(--linje); }
.villkor-rutnat { display: grid; grid-template-columns: repeat(auto-fit, minmax(228px, 1fr)); gap: clamp(18px, 2.4vw, 30px); margin-top: clamp(24px, 3vw, 36px); }
.vk { border-top: 2px solid var(--gron); padding-top: 16px; }
.vk h3 { margin: 0 0 8px; font-size: 1.5rem; line-height: 1.16; color: var(--gron); }
.vk p { margin: 0; font-size: .92rem; color: var(--dis); }

.fragor { margin-top: clamp(38px, 5vw, 64px); max-width: 82ch; }
.fragor-rubrik { margin: 0 0 6px; font-size: 1.5rem; line-height: 1.16; color: var(--gron); }
.fraga { border-bottom: 1px solid var(--linje); }
.fraga summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 14px;
  min-height: 56px; padding: 8px 0; font-size: 1rem; color: var(--text);
}
.fraga summary::-webkit-details-marker { display: none; }
.fraga summary::after {
  content: ""; margin-left: auto; flex: 0 0 auto; width: 11px; height: 11px;
  border-right: 1.6px solid var(--gron); border-bottom: 1.6px solid var(--gron);
  transform: rotate(45deg) translate(-3px, -3px); transition: transform .2s ease;
}
.fraga[open] summary::after { transform: rotate(-135deg) translate(-3px, -3px); }
.fraga summary:hover { color: var(--gron); }
.fraga p { margin: 0 0 18px; font-size: .92rem; color: var(--dis); max-width: 68ch; }

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

.fot { background: var(--gron); color: var(--pa-gron); padding: clamp(46px, 6vw, 78px) 0 26px; }
.fot-inre { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: clamp(24px, 3vw, 40px); }
.fot-ord { font-family: var(--display); font-weight: 600; font-size: 2rem; line-height: 1.16; margin: 0 0 8px; }
.fot-liten { margin: 0; font-size: .8rem; color: var(--dis-gron); max-width: 36ch; }
.fot-rubrik { font-family: var(--brod); font-weight: 500; font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--dis-gron); margin: 0 0 8px; }
.fot-lista { list-style: none; margin: 0; padding: 0; }
.fot-lista a { color: var(--pa-gron); text-decoration: none; font-size: .92rem; display: flex; align-items: center; min-height: 44px; }
.fot-lista a:hover { text-decoration: underline; text-underline-offset: 4px; }
.fot-txt { margin: 0; font-size: .92rem; color: var(--dis-gron); line-height: 2; }
.lank { color: var(--pa-gron); }
.fot-botten {
  margin-top: clamp(32px, 4vw, 52px); padding-top: 20px; border-top: 1px solid var(--linje-gron);
  display: flex; flex-wrap: wrap; gap: 8px 26px; justify-content: space-between; align-items: baseline;
}
.fot-demo { margin: 0; font-size: .78rem; color: var(--dis-gron); }

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

body.laspanel, body.lasruta { overflow: hidden; }

.slojan { position: fixed; inset: 0; background: rgba(26, 26, 23, .45); opacity: 0; transition: opacity .3s ease; z-index: 80; }
.slojan.pa { opacity: 1; }

.korg {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(430px, 100%);
  background: var(--yta); z-index: 90; display: flex; flex-direction: column;
  transform: translateX(101%); transition: transform .32s ease;
  box-shadow: -18px 0 44px rgba(26, 26, 23, .16);
}
.korg.pa { transform: none; }
.korg-topp { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 20px; border-bottom: 1px solid var(--linje); }
.korg-rubrik { margin: 0; font-family: var(--display); font-weight: 600; font-size: 1.5rem; line-height: 1.16; }
.stang { width: 44px; height: 44px; border: 1px solid var(--linje); background: none; color: var(--text); cursor: pointer; border-radius: 2px; display: inline-flex; align-items: center; justify-content: center; }
.stang:hover { border-color: var(--gron); }
.stang svg { width: 20px; height: 20px; }

.korg-kropp { flex: 1; overflow-y: auto; padding: 8px 20px 20px; }
.korg-lista { list-style: none; margin: 0; padding: 0; }
.korg-rad-vara { display: grid; grid-template-columns: 66px 1fr auto; gap: 12px; padding: 16px 0; border-bottom: 1px solid var(--linje); }
.kv-ill { background: var(--sand-m); display: flex; align-items: center; justify-content: center; height: 66px; overflow: hidden; }
.kv-ill svg { width: 88%; height: auto; }
.kv-txt { display: block; min-width: 0; }
.kv-namn { display: block; font-family: var(--display); font-weight: 600; font-size: 1.2rem; line-height: 1.2; }
.kv-farg, .kv-styck { display: block; font-size: .76rem; color: var(--dis); }
.kv-rabatt { display: inline-block; font-size: .72rem; color: var(--gron); background: var(--sand-m); padding: 2px 7px; margin: 4px 0 2px; }
.kv-hoger { text-align: right; }
.kv-antal { display: inline-flex; align-items: center; border: 1px solid var(--linje); }
.kv-antal button { width: 36px; height: 44px; border: 0; background: none; color: var(--text); font-size: 1.1rem; cursor: pointer; }
.kv-antal button:hover { background: var(--sand-m); }
.kv-antal b { min-width: 26px; text-align: center; font-family: var(--display); font-weight: 600; font-size: 1.05rem; }
.kv-pris { display: block; font-family: var(--display); font-weight: 600; font-size: 1.15rem; margin-top: 8px; }
.kv-bort { border: 0; background: none; color: var(--dis); font: 400 .78rem var(--brod); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; min-height: 44px; padding: 0; }
.kv-bort:hover { color: var(--gron); }

.korg-tom { text-align: center; padding: 46px 6px; }
.korg-tom-rubrik { margin: 0 0 8px; font-family: var(--display); font-weight: 600; font-size: 1.6rem; line-height: 1.16; }
.korg-tom-txt { margin: 0 0 22px; font-size: .9rem; color: var(--dis); }

.korg-fot { border-top: 1px solid var(--linje); background: var(--sand); padding: 16px 20px 20px; }
.korg-fri { margin: 0 0 14px; }
.korg-fri-txt { margin: 0 0 7px; font-size: .85rem; color: var(--dis); }
.korg-fri-stapel { height: 3px; background: var(--linje); }
.korg-fri-fyll { display: block; height: 100%; width: 0; background: var(--gron); transition: width .3s ease; }

.korg-rad { display: flex; justify-content: space-between; gap: 12px; margin: 0 0 8px; font-size: .9rem; color: var(--dis); }
.korg-summa { display: flex; justify-content: space-between; gap: 12px; margin: 12px 0 4px; font-family: var(--display); font-weight: 600; font-size: 1.5rem; }
.korg-moms { margin: 0 0 14px; font-size: .78rem; color: var(--dis); }
#till-kassan { width: 100%; }

/* ---------------- Modalen (egen låsklass) ---------------- */

.modal { position: fixed; inset: 0; z-index: 120; display: flex; align-items: center; justify-content: center; padding: 20px; }
.modal[hidden] { display: none; }
.modal-slojan { position: absolute; inset: 0; background: rgba(26, 26, 23, .52); }
.modal-ruta { position: relative; background: var(--yta); border: 1px solid var(--linje); max-width: 500px; width: 100%; padding: clamp(24px, 4vw, 38px); }
.modal-etikett { margin: 0 0 12px; font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--dis); }
.modal-rubrik { margin: 0 0 12px; font-size: clamp(1.5rem, 3vw, 2rem); line-height: 1.16; color: var(--gron); }
.modal-txt { margin: 0 0 22px; font-size: .95rem; color: var(--dis); }

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

#produktsida { padding: clamp(18px, 2.5vw, 30px) 0 clamp(52px, 7vw, 88px); }

.ps-smula ol { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 8px; margin: 0 0 clamp(16px, 2.5vw, 28px); padding: 0; font-size: .85rem; }
.ps-smula li { display: flex; align-items: center; gap: 8px; color: var(--dis); }
.ps-smula li + li::before { content: "/"; color: var(--dis); }
.ps-smula a { color: var(--dis); display: inline-flex; align-items: center; min-height: 44px; }
.ps-smula a:hover { color: var(--gron); }

.ps { display: grid; gap: clamp(26px, 4vw, 52px); align-items: start; }
.ps-platta {
  background: var(--sand-m); border: 1px solid var(--linje); aspect-ratio: 4 / 3;
  display: flex; align-items: center; justify-content: center; padding: clamp(14px, 3vw, 34px);
}
.ps-platta svg { width: 100%; height: 100%; }
.ps-mini { display: flex; gap: 10px; margin-top: 10px; }
.ps-mini-btn {
  flex: 1; min-height: 44px; border: 1px solid var(--linje); background: var(--yta);
  padding: 8px 8px 6px; display: flex; flex-direction: column; align-items: center; gap: 2px; cursor: pointer;
}
.ps-mini-btn:hover { border-color: var(--gron); }
.ps-mini-btn[aria-pressed="true"] { border-color: var(--gron); box-shadow: inset 0 0 0 1px var(--gron); }
.ps-mini-ill { display: block; width: 100%; }
.ps-mini-ill svg { display: block; width: 100%; height: auto; }
.ps-mini-txt { font-size: .74rem; color: var(--dis); }

.ps-grov { margin: 0 0 10px; font-size: .76rem; letter-spacing: .12em; text-transform: uppercase; color: var(--dis); }
.ps-namn { margin: 0 0 8px; font-size: clamp(2.6rem, 6vw, 4rem); line-height: 1.16; color: var(--gron); }
.ps-pris { margin: 0; font-family: var(--display); font-weight: 600; font-size: 2rem; line-height: 1.2; }
.ps-pris span { font-family: var(--brod); font-weight: 400; font-size: .85rem; color: var(--dis); }
.ps-moms { margin: 4px 0 20px; font-size: .8rem; color: var(--dis); }
.ps-text { margin: 0 0 28px; font-size: 1rem; max-width: 56ch; }

.ps-falt { margin-bottom: 26px; }
.ps-etikett { margin: 0 0 10px; font-size: .76rem; letter-spacing: .12em; text-transform: uppercase; color: var(--dis); }
.ps-farger { display: flex; flex-wrap: wrap; gap: 8px; }
.psw {
  display: inline-flex; align-items: center; gap: 9px; min-height: 46px; padding: 0 14px 0 9px;
  border: 1px solid var(--linje); background: var(--yta); cursor: pointer; border-radius: 2px;
}
.psw .prick { width: 22px; height: 22px; }
.psw-namn { font-size: .85rem; color: var(--text); }
.psw:hover { border-color: var(--gron); }
.psw[aria-pressed="true"] { border-color: var(--gron); box-shadow: inset 0 0 0 1px var(--gron); }
.psw--slut { background: var(--slut-yta); border-style: dashed; cursor: not-allowed; }
.psw--slut .prick { opacity: .45; }
.psw--slut .psw-namn { color: var(--dis); text-decoration: line-through; }
.ps-parti { margin: 12px 0 0; font-size: .85rem; color: var(--dis); }

.stege { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.steg { border: 1px solid var(--linje); background: var(--yta); padding: 12px 8px; display: grid; gap: 3px; justify-items: center; text-align: center; transition: background .2s ease; }
.steg-tal { font-size: .74rem; color: var(--dis); }
.steg-pris { font-family: var(--display); font-weight: 600; font-size: 1.2rem; color: var(--text); }
.steg-rab { font-size: .72rem; color: var(--gron); }
.steg--pa { background: var(--gron); border-color: var(--gron); }
.steg--pa .steg-tal, .steg--pa .steg-rab { color: var(--dis-gron); }
.steg--pa .steg-pris { color: var(--pa-gron); }

.ps-kop { display: flex; flex-wrap: wrap; gap: 12px; margin: 24px 0 10px; }
.ps-antal { display: inline-flex; align-items: center; border: 1px solid var(--linje); background: var(--yta); }
.ps-steg { width: 46px; height: 48px; border: 0; background: none; color: var(--text); font-size: 1.25rem; cursor: pointer; }
.ps-steg:hover { background: var(--sand-m); }
.ps-antal-tal { min-width: 44px; text-align: center; font-family: var(--display); font-weight: 600; font-size: 1.25rem; }
.ps-btn { flex: 1 1 190px; min-height: 48px; }
.ps-radpris { margin: 0 0 28px; font-size: .9rem; color: var(--dis); }

.ps-spec { margin: 0 0 26px; border-top: 1px solid var(--linje); }
.ps-spec-rad { display: flex; justify-content: space-between; gap: 18px; padding: 11px 0; border-bottom: 1px solid var(--linje); font-size: .9rem; }
.ps-spec dt { color: var(--dis); flex: 0 0 auto; }
.ps-spec dd { margin: 0; text-align: right; color: var(--text); }

.ps-mat-hjalp, .ps-byt { margin: 0 0 16px; font-size: .88rem; color: var(--dis); padding-left: 16px; border-left: 2px solid var(--gron); }
.ps-byt { margin-bottom: 26px; }
.ps-mat-hjalp b, .ps-byt b { color: var(--gron); }
.ps-byt a { color: var(--gron); }

.ps-villkor { background: var(--sand-m); padding: 20px; display: grid; gap: 10px; }
.ps-villkor p { margin: 0; font-size: .88rem; color: var(--dis); }
.ps-villkor b { color: var(--gron); }

.ps-mer { margin-top: clamp(46px, 6vw, 82px); border-top: 1px solid var(--linje); padding-top: clamp(28px, 3.5vw, 42px); }
.ps-mer-rubrik { margin: 0 0 24px; font-size: clamp(1.8rem, 3.4vw, 2.6rem); line-height: 1.16; color: var(--gron); }

/* ---------------- Brytpunkter ---------------- */

@media (max-width: 899px) {
  .meny-knapp { display: inline-flex; }
  .huvudmeny {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    background: var(--yta); border-bottom: 1px solid var(--linje); padding: 4px 20px 12px;
  }
  body.meny-pa .huvudmeny { display: block; }
  .huvudmeny ul { flex-direction: column; gap: 0; }
  .huvudmeny li + li { border-top: 1px solid var(--linje); }
  .huvudmeny a { min-height: 54px; font-size: 1rem; }
  .band-inre { justify-content: flex-start; font-size: .74rem; }
}

@media (max-width: 559px) {
  .band-inre > span:nth-child(4), .band-inre > span:nth-child(5) { display: none; }
  .pk-kop { flex-direction: column; align-items: stretch; }
  .pk-btn { width: 100%; }
  .stege { grid-template-columns: 1fr; }
  .steg { grid-template-columns: auto auto 1fr; justify-items: start; text-align: left; align-items: baseline; gap: 10px; }
  .korg-rad-vara { grid-template-columns: 58px 1fr; }
  .kv-ill { height: 58px; }
  .kv-hoger { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 12px; text-align: left; }
  .kv-pris { margin-top: 0; }
}

@media (min-width: 900px) {
  .rakna-inre { grid-template-columns: 1.02fr .98fr; }
  .butiken-inre { grid-template-columns: 1.15fr .85fr; }
  .ps { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .ps-bilder { position: sticky; top: 108px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
  .js .in, .js .pk, .js .rs, .js .mk, .js .vk { opacity: 1 !important; transform: none !important; }
}