/* Utmark Friluft — gallery-lookbook i gragron och vinrod.
   Palett matt mot #f1f3f0 och #fbfcfa: accent 7,3 och 7,9. Dov text 6,8 och 7,4. */

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

:root {
  --bas: #f1f3f0;
  --yta: #fbfcfa;
  --platta: #e6eae3;
  --text: #171a17;
  --dov: #4e564d;
  --accent: #8e2c3f;
  --accent-mjuk: #f3e4e7;
  --mork: #1c231d;
  --pa-mork: #e6eae3;
  --dov-mork: #b3bdb0;
  --linje: #d6dcd2;
  --linje-stark: #b8c1b4;

  --form: #39433a;
  --form-2: #78846f;
  --form-3: #c3cbbf;

  --display: "Fjalla One", "Arial Narrow", Impact, sans-serif;
  --brod: "Cabin", "Segoe UI", system-ui, sans-serif;

  --gap: clamp(3.5rem, 8vw, 7.5rem);
  --radie: 3px;
}

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

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

body.last { overflow: hidden; }

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

a { color: inherit; }

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 400;
  letter-spacing: -0.005em;
  margin: 0;
  overflow-wrap: break-word;
}

/* Matt i webblasaren efter document.fonts.load('400 200px "Fjalla One"'):
   ringen over A och over a nar bada 1,03 em over baslinjen, och g, j och y
   gar 0,215 em under den. Tva rader kan alltsa inte ligga tatare an 1,245
   utan att ringen slar upp i raden ovanfor. Radavstandet nedan ar den
   grinden, inte en smaksak. Ror den inte utan att mata om. */
h1, h2, h3 { line-height: 1.25; text-wrap: balance; }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

.container { width: min(100% - 2.5rem, 1240px); margin-inline: auto; }

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

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--accent); color: #fff; padding: 14px 20px;
  font-weight: 600; text-decoration: none;
}
.skip:focus { left: 0; }

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

.etikett {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--dov);
  margin: 0 0 1rem;
}

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

.knapp {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 24px;
  font-family: var(--brod); font-size: 0.98rem; font-weight: 600;
  letter-spacing: 0.02em;
  border: 1px solid var(--text); border-radius: var(--radie);
  background: transparent; color: var(--text);
  text-decoration: none; cursor: pointer;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.knapp:hover { background: var(--text); color: var(--yta); }

.knapp-fyll { background: var(--accent); border-color: var(--accent); color: #fff; }
.knapp-fyll:hover { background: var(--mork); border-color: var(--mork); color: #fff; }

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

.topp {
  position: sticky; top: 0; z-index: 60;
  background: var(--yta);
  border-bottom: 1px solid var(--linje);
}

.topp-inner {
  display: flex; align-items: center; gap: 1.5rem;
  min-height: 72px; padding: 10px 0;
}

.logga {
  display: flex; flex-direction: column; justify-content: center;
  min-height: 44px; text-decoration: none; margin-right: auto;
}
.logga-namn {
  font-family: var(--display); font-size: 1.5rem; line-height: 1;
  letter-spacing: 0.02em;
}
.logga-ort {
  font-size: 0.66rem; font-weight: 600; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--dov); margin-top: 3px;
}

.meny ul { display: flex; gap: 1.6rem; list-style: none; margin: 0; padding: 0; }
.meny a {
  display: inline-flex; align-items: center; min-height: 44px;
  font-size: 0.94rem; font-weight: 500; text-decoration: none;
  color: var(--text); border-bottom: 1px solid transparent;
}
.meny a:hover { border-bottom-color: var(--accent); }

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

.korg-knapp {
  min-height: 44px; padding: 0 16px;
  font-family: var(--brod); font-size: 0.92rem; font-weight: 600;
  background: transparent; color: var(--text);
  border: 1px solid var(--linje-stark); border-radius: var(--radie);
  cursor: pointer;
}
.korg-knapp:hover { border-color: var(--text); }
.korg-antal { color: var(--accent); }

.hamburgare {
  display: none;
  width: 46px; height: 46px; padding: 0;
  background: transparent; border: 1px solid var(--linje-stark);
  border-radius: var(--radie); cursor: pointer;
}
.hamburgare span {
  display: block; width: 20px; height: 1.6px; margin: 4px auto;
  background: var(--text); transition: transform .2s ease;
}
body.meny-pa .hamburgare span:first-child { transform: translateY(3px) rotate(45deg); }
body.meny-pa .hamburgare span:last-child { transform: translateY(-3px) rotate(-45deg); }

@media (max-width: 899px) {
  .hamburgare { display: block; }
  .meny {
    position: fixed; left: 0; right: 0; top: 72px; bottom: 0;
    background: var(--yta);
    padding: 1.2rem 1.25rem 3rem;
    transform: translateY(-8px);
    opacity: 0; visibility: hidden;
    transition: opacity .2s ease, transform .2s ease, visibility .2s;
    overflow-y: auto; z-index: 70;
  }
  body.meny-pa .meny { opacity: 1; visibility: visible; transform: none; }
  .meny ul { flex-direction: column; gap: 0; }
  .meny li { border-bottom: 1px solid var(--linje); }
  .meny a {
    min-height: 58px; width: 100%;
    font-family: var(--display); font-size: 1.45rem;
  }
  .meny a:hover { border-bottom-color: transparent; }
}

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

.hero { padding-top: clamp(2.5rem, 6vw, 5rem); }

.hero-etikett { margin-bottom: 1.4rem; }

.hero-rubrik {
  font-size: clamp(2.7rem, 8.4vw, 7.1rem);
  letter-spacing: -0.015em;
  margin: 0 0 clamp(2rem, 4vw, 3.2rem);
  max-width: 18ch;
}

.hero-bild {
  width: 100%;
  height: clamp(240px, 44vw, 580px);
  overflow: hidden;
  background: var(--platta);
}
.hero-bild img { width: 100%; height: 100%; object-fit: cover; }

.hero-under {
  display: grid; gap: clamp(2rem, 4vw, 4rem);
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  padding-top: clamp(2rem, 4vw, 3.4rem);
  padding-bottom: var(--gap);
  align-items: start;
}
.hero-txt p { font-size: clamp(1.05rem, 1.6vw, 1.28rem); max-width: 46ch; }
.hero-knappar { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 1.8rem; }

.hero-fakta { margin: 0; display: grid; gap: 0; border-top: 1px solid var(--linje); }
.hero-fakta > div {
  display: flex; justify-content: space-between; gap: 1.5rem;
  padding: 14px 0; border-bottom: 1px solid var(--linje);
}
.hero-fakta dt {
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--dov);
}
.hero-fakta dd { margin: 0; font-size: 0.95rem; font-weight: 500; text-align: right; }

@media (max-width: 820px) {
  .hero-under { grid-template-columns: 1fr; }
}

/* ---------- Sektionshuvud ---------- */

.sekt-topp { max-width: 60ch; margin-bottom: clamp(2rem, 4vw, 3rem); }
.sekt-rubrik { font-size: clamp(2rem, 4.6vw, 3.5rem); margin-bottom: 0.7rem; }
.sekt-ingress { color: var(--dov); font-size: 1.05rem; max-width: 52ch; margin: 0; text-wrap: pretty; }

/* ---------- Packlistorna: signaturen ---------- */

.packlistor { background: var(--yta); padding: var(--gap) 0; border-top: 1px solid var(--linje); }

.pl-flikar { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 1.6rem; }

.pl-flik {
  min-height: 46px; padding: 0 18px;
  font-family: var(--brod); font-size: 0.95rem; font-weight: 600;
  background: transparent; color: var(--dov);
  border: 1px solid var(--linje-stark); border-radius: 999px;
  cursor: pointer; transition: color .16s ease, border-color .16s ease, background-color .16s ease;
}
.pl-flik:hover { color: var(--text); border-color: var(--text); }
.pl-flik[aria-pressed="true"] {
  background: var(--accent); border-color: var(--accent); color: #fff;
}

.pl-kort { position: relative; padding: clamp(1.4rem, 3vw, 2.6rem); }

.pl-ram { position: absolute; inset: 0; pointer-events: none; }
.pl-ram i { position: absolute; background: var(--linje-stark); }
.pl-ram i:nth-child(1) { top: 0; left: 0; right: 0; height: 1px; transform: scaleX(0); transform-origin: left; }
.pl-ram i:nth-child(2) { top: 0; bottom: 0; right: 0; width: 1px; transform: scaleY(0); transform-origin: top; }
.pl-ram i:nth-child(3) { bottom: 0; left: 0; right: 0; height: 1px; transform: scaleX(0); transform-origin: right; }
.pl-ram i:nth-child(4) { top: 0; bottom: 0; left: 0; width: 1px; transform: scaleY(0); transform-origin: bottom; }
.pl-kort.ritad .pl-ram i { transform: none; transition: transform .5s cubic-bezier(.2,.7,.3,1); }
.pl-kort.ritad .pl-ram i:nth-child(2) { transition-delay: .5s; }
.pl-kort.ritad .pl-ram i:nth-child(3) { transition-delay: 1s; }
.pl-kort.ritad .pl-ram i:nth-child(4) { transition-delay: 1.5s; }

.pl-titel { font-size: clamp(1.5rem, 3vw, 2.2rem); margin-bottom: 0.4rem; }
.pl-beskr { color: var(--dov); max-width: 50ch; margin-bottom: 1.8rem; text-wrap: pretty; }

.pl-lista { list-style: none; margin: 0 0 1.4rem; padding: 0; }

.pl-rad { position: relative; }
.pl-rad::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: var(--linje);
  transform: scaleX(0); transform-origin: left;
}
.pl-kort.ritad .pl-rad::after {
  transform: scaleX(1);
  transition: transform .55s cubic-bezier(.2,.7,.3,1);
  transition-delay: calc(var(--i) * 60ms);
}

.pl-inre {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 148px 196px;
  align-items: center;
  gap: 0 16px;
}

.pl-etikett {
  position: relative;
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  align-items: start;
  gap: 0 16px;
  min-height: 64px; padding: 14px 0;
  cursor: pointer;
}
.pl-etikett input { position: absolute; left: 0; top: 20px; opacity: 0; width: 26px; height: 26px; margin: 0; }

.pl-val { display: block; }
.pl-stl {
  width: 100%; min-height: 44px; padding: 0 10px;
  font-family: var(--brod); font-size: 0.88rem; color: var(--text);
  background: var(--yta); border: 1px solid var(--linje-stark); border-radius: var(--radie);
  cursor: pointer;
}
.pl-stl:hover { border-color: var(--text); }

.pl-tal { display: flex; align-items: baseline; justify-content: flex-end; gap: 20px; }

.pl-box {
  width: 24px; height: 24px; margin-top: 2px;
  border: 1.5px solid var(--linje-stark); border-radius: 2px;
  background: var(--yta);
  position: relative;
  transition: border-color .16s ease, background-color .16s ease;
}
.pl-box::after {
  content: ""; position: absolute;
  left: 7px; top: 3px; width: 7px; height: 13px;
  border: solid #fff; border-width: 0 2px 2px 0;
  transform: rotate(45deg) scale(0.4); opacity: 0;
  transition: transform .18s ease, opacity .18s ease;
}
.pl-etikett input:checked ~ .pl-box { background: var(--accent); border-color: var(--accent); }
.pl-etikett input:checked ~ .pl-box::after { transform: rotate(45deg) scale(1); opacity: 1; }
.pl-etikett input:focus-visible ~ .pl-box { outline: 2px solid var(--accent); outline-offset: 3px; }
.pl-etikett:hover .pl-box { border-color: var(--text); }

.pl-namn { font-weight: 600; font-size: 1.02rem; }
.pl-not { display: block; font-weight: 400; font-size: 0.88rem; color: var(--dov); line-height: 1.45; text-wrap: pretty; }
.pl-vikt, .pl-pris { font-size: 0.94rem; font-variant-numeric: tabular-nums; }
.pl-vikt { color: var(--dov); }
.pl-pris { font-weight: 600; }

.pl-rad--av .pl-namn { color: var(--dov); font-weight: 500; }
.pl-rad--av .pl-pris { color: var(--dov); text-decoration: line-through; }

.pl-eget { font-size: 0.92rem; color: var(--dov); margin-bottom: 1.6rem; }

.pl-summa {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 1rem 1.5rem;
  border-top: 2px solid var(--text); padding-top: 1.3rem;
}
.pl-summa-txt { margin: 0; font-size: 1.02rem; font-variant-numeric: tabular-nums; }
.pl-summa-txt strong { font-weight: 700; }
.pl-summa-etik {
  display: block; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--dov); margin-bottom: 4px;
}

.pl-notis { font-size: 0.88rem; color: var(--dov); margin: 1.4rem 0 0; max-width: 60ch; }

@media (max-width: 780px) {
  .pl-inre {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "namn namn" "val tal";
    row-gap: 10px;
    padding-bottom: 14px;
  }
  .pl-etikett { grid-area: namn; padding: 12px 0 0; }
  .pl-val { grid-area: val; min-width: 150px; }
  .pl-tal { grid-area: tal; align-self: center; }
  .pl-summa .knapp { width: 100%; }
}
@media (max-width: 420px) {
  .pl-tal { gap: 14px; }
  .pl-val { min-width: 132px; }
}

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

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

.filter { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: clamp(1.6rem, 3vw, 2.4rem); }
.fbtn {
  min-height: 44px; padding: 0 15px;
  font-family: var(--brod); font-size: 0.88rem; font-weight: 600;
  background: transparent; color: var(--dov);
  border: 1px solid var(--linje-stark); border-radius: var(--radie);
  cursor: pointer;
}
.fbtn:hover { color: var(--text); border-color: var(--text); }
.fbtn[aria-pressed="true"] { background: var(--text); border-color: var(--text); color: var(--bas); }

.rutnat {
  display: grid; gap: clamp(1.6rem, 3vw, 2.8rem) clamp(1.2rem, 2vw, 2rem);
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.rutnat-tom { color: var(--dov); }

.pk { display: flex; flex-direction: column; }
.pk--bred { grid-column: span 2; }

.pk-lank { text-decoration: none; color: inherit; display: block; }

.pk-platta {
  display: flex; align-items: center; justify-content: center;
  background: var(--platta);
  aspect-ratio: 4 / 5;
  overflow: hidden;
  transition: background-color .2s ease;
}
.pk--bred .pk-platta { aspect-ratio: 16 / 10; }
.pk-platta svg { width: 100%; height: 100%; }
.pk--bred .pk-platta svg { width: auto; height: 100%; }
.pk-lank:hover .pk-platta { background: #dde2d9; }

.pk-txt { display: block; padding-top: 14px; }
.pk-namn { display: block; font-family: var(--display); font-size: 1.28rem; line-height: 1.2; }
.pk-meta { display: block; font-size: 0.83rem; color: var(--dov); margin-top: 3px; }
.pk-pris { display: block; font-size: 1rem; font-weight: 600; margin-top: 7px; }

.pk-kop { margin-top: 12px; }
.pk-btn {
  min-height: 46px; width: 100%; padding: 0 16px;
  font-family: var(--brod); font-size: 0.92rem; font-weight: 600;
  background: transparent; color: var(--text);
  border: 1px solid var(--linje-stark); border-radius: var(--radie);
  cursor: pointer;
  transition: background-color .16s ease, border-color .16s ease, color .16s ease;
}
.pk-btn:hover { background: var(--text); border-color: var(--text); color: var(--yta); }

.pk-storlekar { display: none; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.pk--valj .pk-storlekar { display: flex; }
.pk--valj .pk-btn { background: var(--text); border-color: var(--text); color: var(--yta); }
.pk-stl {
  min-height: 44px; min-width: 46px; padding: 0 11px;
  font-family: var(--brod); font-size: 0.86rem; font-weight: 600;
  background: var(--yta); color: var(--text);
  border: 1px solid var(--linje-stark); border-radius: var(--radie);
  cursor: pointer;
}
.pk-stl:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.pk-stl:disabled { color: var(--dov); opacity: .5; cursor: not-allowed; text-decoration: line-through; }

@media (max-width: 900px) {
  .rutnat { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .rutnat { grid-template-columns: minmax(0, 1fr); }
  .pk--bred { grid-column: span 1; }
  .pk--bred .pk-platta { aspect-ratio: 4 / 5; }
  .pk--bred .pk-platta svg { width: 100%; height: 100%; }
}

/* ---------- Om urvalet ---------- */

.urval { background: var(--yta); border-top: 1px solid var(--linje); padding: var(--gap) 0; }
.urval-grid {
  display: grid; gap: clamp(2rem, 5vw, 4.5rem);
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  align-items: stretch;
}
/* Texten strackt sig till bildens underkant, sa signaturen landar i linje med
   bildtexten i stallet for att lamna ett hal i spalten. */
.urval-txt { display: flex; flex-direction: column; }
.urval-txt .sekt-rubrik { margin-bottom: 1.4rem; }
.urval-txt p { max-width: 54ch; }
.urval-sign {
  font-size: 0.85rem; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--dov); margin-top: auto; padding-top: 1.8rem;
}
.urval-bild { margin: 0; }
.urval-bild img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.urval-bild figcaption { font-size: 0.85rem; color: var(--dov); margin-top: 10px; }

@media (max-width: 860px) {
  .urval-grid { grid-template-columns: 1fr; }
  .urval-sign { margin-top: 1.8rem; padding-top: 0; }
}

/* ---------- Storleksguide ---------- */

.storlek { padding: var(--gap) 0; }
.tabeller { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tabell-kort { background: var(--yta); border: 1px solid var(--linje); padding: clamp(1.2rem, 2.4vw, 1.8rem); }
.tabell-kort h3 { font-size: 1.28rem; margin-bottom: 6px; }
.tabell-hjalp { font-size: 0.88rem; color: var(--dov); margin-bottom: 1.1rem; }
.tabell-svep { overflow-x: auto; }
.tabell-kort table { width: 100%; border-collapse: collapse; font-size: 0.94rem; }
.tabell-kort th, .tabell-kort td { text-align: left; padding: 10px 8px 10px 0; border-bottom: 1px solid var(--linje); }
.tabell-kort thead th {
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--dov);
}
.tabell-kort tbody th { font-weight: 600; }
.tabell-kort td { font-variant-numeric: tabular-nums; color: var(--dov); }
.tabell-kort tbody tr:last-child th, .tabell-kort tbody tr:last-child td { border-bottom: 0; }

@media (max-width: 900px) { .tabeller { grid-template-columns: 1fr; } }

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

.frakt { padding: var(--gap) 0; border-top: 1px solid var(--linje); }
.villkor { display: grid; gap: clamp(1.4rem, 3vw, 2.4rem); grid-template-columns: repeat(4, minmax(0, 1fr)); }
.villkor-kort { border-top: 2px solid var(--text); padding-top: 1.1rem; }
.villkor-kort h3 { font-size: 1.2rem; margin-bottom: 0.5rem; }
.villkor-kort p { font-size: 0.95rem; color: var(--dov); margin: 0; }

@media (max-width: 980px) { .villkor { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .villkor { grid-template-columns: 1fr; } }

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

.fot { background: var(--mork); color: var(--pa-mork); padding: clamp(3rem, 6vw, 5rem) 0 2rem; }
.fot-grid {
  display: grid; gap: 2rem clamp(1.5rem, 3vw, 3rem);
  grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
}
.fot-logga { font-family: var(--display); font-size: 1.8rem; line-height: 1.1; margin-bottom: 0.6rem; }
.fot-kol h2 {
  font-family: var(--brod); font-size: 0.75rem; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--dov-mork);
  margin-bottom: 0.8rem;
}
.fot-txt { font-size: 0.95rem; color: var(--dov-mork); margin: 0; }
.fot-kol--namn .fot-txt { max-width: 34ch; }
.fot-lista { list-style: none; margin: 0; padding: 0; }
.fot-lista li { border-bottom: 1px solid rgba(230, 234, 227, 0.14); }
.fot-lank {
  display: inline-flex; align-items: center; min-height: 44px;
  color: var(--pa-mork); text-decoration: none; font-size: 0.95rem;
  border-bottom: 1px solid transparent;
}
.fot-txt .fot-lank { min-height: 32px; }
.fot-lank:hover { border-bottom-color: var(--pa-mork); }

.fot-botten {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.6rem 2rem;
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding-top: 1.4rem;
  border-top: 1px solid rgba(230, 234, 227, 0.16);
}
.fot-fin, .fot-demo { font-size: 0.8rem; color: var(--dov-mork); margin: 0; }

@media (max-width: 860px) { .fot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .fot-grid { grid-template-columns: 1fr; } }

/* ---------- Varukorgen ---------- */

.korg-sloja {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(23, 26, 23, 0.42);
  opacity: 0; transition: opacity .28s ease;
}
.korg-sloja.pa { opacity: 1; }

.korg {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 100;
  width: min(420px, 100%);
  background: var(--yta);
  display: flex; flex-direction: column;
  transform: translateX(101%);
  transition: transform .3s cubic-bezier(.3,.7,.3,1);
  box-shadow: -18px 0 44px rgba(23, 26, 23, 0.12);
}
.korg.pa { transform: none; }

.korg-topp {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 18px 20px; border-bottom: 1px solid var(--linje);
}
.korg-rubrik { font-family: var(--display); font-size: 1.35rem; margin: 0; }

.stang {
  width: 44px; height: 44px; padding: 9px;
  background: transparent; border: 1px solid var(--linje-stark);
  border-radius: var(--radie); color: var(--text); cursor: pointer;
}
.stang:hover { border-color: var(--text); }
.stang svg { width: 100%; height: 100%; }

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

.korg-tom { text-align: left; padding: 1.5rem 0; }
.korg-tom-rubrik { font-family: var(--display); font-size: 1.4rem; margin-bottom: 0.4rem; }
.korg-tom-txt { color: var(--dov); font-size: 0.95rem; margin-bottom: 1.4rem; }

.korg-lista { list-style: none; margin: 0; padding: 0; }
.korg-rad {
  display: grid; grid-template-columns: 74px minmax(0, 1fr); gap: 14px;
  padding: 16px 0; border-bottom: 1px solid var(--linje);
}
.korg-rad:first-child { padding-top: 0; }
.korg-mini { background: var(--platta); aspect-ratio: 4 / 5; overflow: hidden; }
.korg-mini svg { width: 100%; height: 100%; }
.korg-namn { font-weight: 600; font-size: 0.98rem; margin: 0 0 2px; }
.korg-meta { font-size: 0.82rem; color: var(--dov); margin: 0 0 6px; }
.korg-styck { font-size: 0.94rem; font-weight: 600; margin: 0 0 8px; font-variant-numeric: tabular-nums; }
.korg-styr { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.korg-antal-box { display: flex; align-items: center; border: 1px solid var(--linje-stark); border-radius: var(--radie); }
.korg-steg {
  width: 44px; height: 44px; padding: 0;
  background: transparent; border: 0; color: var(--text);
  font-size: 1.1rem; cursor: pointer;
}
.korg-siffra { min-width: 26px; text-align: center; font-size: 0.95rem; font-variant-numeric: tabular-nums; }
.korg-bort {
  min-height: 44px; padding: 0 8px;
  background: transparent; border: 0; color: var(--dov);
  font-family: var(--brod); font-size: 0.85rem; text-decoration: underline;
  cursor: pointer;
}
.korg-bort:hover { color: var(--accent); }

.korg-fot { border-top: 1px solid var(--linje); padding: 18px 20px 22px; background: var(--bas); }
.korg-vikt, .korg-frakt { font-size: 0.88rem; color: var(--dov); margin: 0 0 6px; }
.korg-summa {
  display: flex; justify-content: space-between; gap: 1rem;
  font-family: var(--display); font-size: 1.3rem; margin: 10px 0 4px;
}
.korg-moms { font-size: 0.8rem; color: var(--dov); margin: 0 0 14px; }
.korg-kassa { width: 100%; }

/* ---------- Demo-modal (egen scroll-lasklass via body.last) ---------- */

.demoruta { position: fixed; inset: 0; z-index: 120; display: flex; align-items: center; justify-content: center; padding: 1.25rem; }
.demoruta[hidden] { display: none; }
.demoruta-sloja { position: absolute; inset: 0; background: rgba(23, 26, 23, 0.55); }
.demoruta-ruta {
  position: relative; z-index: 1;
  width: min(520px, 100%);
  background: var(--yta);
  border-top: 4px solid var(--accent);
  padding: clamp(1.6rem, 4vw, 2.6rem);
}
.demoruta-rubrik { font-size: clamp(1.3rem, 3vw, 1.75rem); margin-bottom: 0.9rem; }
.demoruta-txt { color: var(--dov); font-size: 0.98rem; margin-bottom: 1.6rem; }

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

#produktsida { padding: clamp(1.6rem, 3vw, 2.6rem) 0 var(--gap); }

.ps-smula { display: flex; align-items: center; gap: 8px; font-size: 0.85rem; color: var(--dov); margin-bottom: clamp(1.4rem, 3vw, 2.2rem); }
.ps-smula a { display: inline-flex; align-items: center; min-height: 44px; color: var(--dov); }
.ps-smula a:hover { color: var(--accent); }

.ps { display: grid; gap: clamp(2rem, 4vw, 4rem); grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: start; }

.ps-platta { background: var(--platta); aspect-ratio: 4 / 5; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.ps-platta svg { width: 100%; height: 100%; }

.ps-kat { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--dov); margin-bottom: 0.8rem; }
.ps-namn { font-size: clamp(2rem, 4.2vw, 3.1rem); margin-bottom: 0.6rem; }
.ps-pris { font-size: 1.55rem; font-weight: 700; margin: 0 0 3px; font-variant-numeric: tabular-nums; }
.ps-moms { font-size: 0.85rem; color: var(--dov); margin-bottom: 1.4rem; }
.ps-text { max-width: 50ch; margin-bottom: 1.6rem; }

/* Signaturen foljer med hit: vilka packlistor varan star pa. */
.ps-listor { border-top: 1px solid var(--linje); border-bottom: 1px solid var(--linje); padding: 14px 0; margin-bottom: 1.6rem; }
.ps-listor-etik { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--dov); margin-bottom: 10px; }
.ps-listor-rad { display: flex; flex-wrap: wrap; gap: 8px; }
.ps-chip {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 15px;
  background: var(--accent-mjuk); color: var(--accent);
  border-radius: 999px; font-size: 0.86rem; font-weight: 600; text-decoration: none;
}
.ps-chip:hover { background: var(--accent); color: #fff; }
.ps-listor-ingen { font-size: 0.9rem; color: var(--dov); margin: 0; }

.ps-falt { margin-bottom: 1.5rem; }
.ps-etikett { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--dov); margin-bottom: 10px; }
.ps-etikett--kravs { color: var(--accent); }
.ps-stl { display: flex; flex-wrap: wrap; gap: 8px; }
.ps-stl-btn {
  min-height: 46px; min-width: 52px; padding: 0 14px;
  font-family: var(--brod); font-size: 0.92rem; font-weight: 600;
  background: var(--yta); color: var(--text);
  border: 1px solid var(--linje-stark); border-radius: var(--radie);
  cursor: pointer;
}
.ps-stl-btn:hover:not(:disabled) { border-color: var(--text); }
.ps-stl-btn[aria-pressed="true"] { background: var(--text); border-color: var(--text); color: var(--yta); }
.ps-stl-btn:disabled { color: var(--dov); opacity: .5; cursor: not-allowed; text-decoration: line-through; }
.ps-slut { font-size: 0.86rem; color: var(--dov); margin: 10px 0 0; }

.ps-kop { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-bottom: 1.8rem; }
.ps-antal { display: flex; align-items: center; border: 1px solid var(--linje-stark); border-radius: var(--radie); }
.ps-steg { width: 46px; height: 48px; padding: 0; background: transparent; border: 0; color: var(--text); font-size: 1.15rem; cursor: pointer; }
.ps-antal-tal { min-width: 28px; text-align: center; font-variant-numeric: tabular-nums; }
.ps-btn { flex: 1; min-width: 190px; }

.ps-spec { margin: 0 0 1.6rem; border-top: 1px solid var(--linje); }
.ps-spec-rad { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 1rem; padding: 11px 0; border-bottom: 1px solid var(--linje); }
.ps-spec dt { font-size: 0.83rem; font-weight: 600; letter-spacing: 0.05em; color: var(--dov); }
.ps-spec dd { margin: 0; font-size: 0.94rem; }

.ps-villkor { background: var(--yta); border: 1px solid var(--linje); padding: 1.2rem 1.3rem; }
.ps-villkor p { font-size: 0.92rem; color: var(--dov); margin-bottom: 0.7rem; }
.ps-villkor p:last-child { margin-bottom: 0; }
.ps-villkor strong { color: var(--text); }

.ps-mer { margin-top: var(--gap); }
.ps-mer-rubrik { font-size: clamp(1.6rem, 3.4vw, 2.4rem); margin-bottom: 1.6rem; }
/* Narliggande varor ar tre lika stora rutor. Den breda plattan hor hemma i
   sortimentets rytm, inte har, dar den bara lamnar ett hal i sista raden. */
.ps-rutnat { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ps-rutnat .pk--bred { grid-column: span 1; }
.ps-rutnat .pk--bred .pk-platta { aspect-ratio: 4 / 5; }
.ps-rutnat .pk--bred .pk-platta svg { width: 100%; height: 100%; }

@media (max-width: 900px) {
  .ps { grid-template-columns: 1fr; }
  .ps-rutnat { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) { .ps-rutnat { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Avslojning ---------- */

.js .avslojas { opacity: 0; transform: translateY(16px); }
.js .avslojas.syns {
  opacity: 1; transform: none;
  transition: opacity .6s ease, transform .6s cubic-bezier(.2,.7,.3,1);
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
  .js .avslojas { opacity: 1; transform: none; }
  .pl-ram i, .pl-kort.ritad .pl-ram i { transform: none !important; }
  .pl-rad::after { transform: scaleX(1) !important; }
}