/* Pappersbruket, papper och skrivdon
   Palett: bas #f2f7f3, yta #e0ece3, accent #1f5138, text #1b241e.
   Accenten mäter 8,45:1 mot basen och 7,54:1 mot ytan, alltså går den att
   sätta som liten text rakt av. Den ljusa texten på accentytor är basen,
   8,45:1. --text-svag är den enda dämpade tonen och ligger på 7,8:1.
   Motion: snärtig invert på hover, inga fades och inga scroll-reveals. */

:root {
  --bas: #f2f7f3;
  --yta: #e0ece3;
  --accent: #1f5138;
  --accent-djup: #123520;
  --text: #1b241e;
  --text-svag: #405146;
  --linje: 2px solid var(--accent);
  --hair: 1px solid rgba(31, 81, 56, .3);
  --snitt: "Zilla Slab", Georgia, "Times New Roman", serif;
  --brod: "Assistant", "Segoe UI", system-ui, sans-serif;
  --snabb: 90ms linear;
}

* { box-sizing: border-box; }

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.6;
  overflow-x: hidden;
}

body.korg-oppen, body.modal-oppen { overflow: hidden; }

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

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

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

.skip {
  position: absolute; left: 12px; top: -60px; z-index: 90;
  background: var(--accent); color: var(--bas);
  padding: 12px 18px; font-weight: 700; text-decoration: none;
}
.skip:focus { top: 12px; }

a { color: inherit; }

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

.hero, .prov, .butik, .tillval, .present, .omd, #kundservice, #produktsida { scroll-margin-top: 86px; }

.container {
  width: 100%;
  max-width: 1260px;
  margin: 0 auto;
  padding-inline: clamp(18px, 5vw, 52px);
}

/* ---------------- Typografi ---------------- */

h1, h2, h3 { font-family: var(--snitt); font-weight: 600; margin: 0; }

/* Mätt i Zilla Slab efter att snittet laddats: ÅÄÖ når 0,875 em över
   baslinjen och gjpy 0,240 em under. Två rader krockar alltså under
   line-height 1,115. Rubrikerna ligger på 1,16. Hero-ordmärket går på 0,95,
   vilket räcker där: det har inga versala diakriter, och gemenernas b och k
   behöver 0,905 över p-staplarna. */
.rubrik {
  font-size: clamp(1.85rem, 3.6vw, 3rem);
  line-height: 1.16;
  letter-spacing: -.015em;
  margin: 6px 0 0;
  overflow-wrap: break-word;
  text-wrap: balance;
}

.etikett {
  font-family: var(--brod);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0;
}

p { margin: 0 0 1em; overflow-wrap: break-word; }
p:last-child { margin-bottom: 0; }

.lank-linje {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 2px solid rgba(31, 81, 56, .35);
  font-weight: 600;
}
.lank-linje:hover { border-bottom-color: var(--accent); }

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

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  padding: 11px 22px;
  border: var(--linje);
  background: var(--bas);
  color: var(--accent);
  font-family: var(--brod);
  font-size: .96rem;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--snabb), color var(--snabb);
}
.btn:hover { background: var(--accent); color: var(--bas); }

.btn--fyll { background: var(--accent); color: var(--bas); }
.btn--fyll:hover { background: var(--bas); color: var(--accent); }

.btn--linje { background: transparent; }

.btn--liten { min-height: 46px; padding: 9px 18px; font-size: .9rem; }

.btn-ikon { width: 20px; height: 20px; flex: none; }

/* ---------------- Annonsrad + header ---------------- */

.annons {
  background: var(--accent);
  color: var(--bas);
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .04em;
}
.annons-inner {
  max-width: 1260px;
  margin: 0 auto;
  padding: 9px clamp(18px, 5vw, 52px);
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  align-items: center;
  justify-content: center;
}
.annons-prick { width: 5px; height: 5px; background: var(--bas); flex: none; }

.site-head {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--bas);
  border-bottom: var(--linje);
}
.head-inner {
  max-width: 1260px;
  margin: 0 auto;
  padding: 12px clamp(18px, 5vw, 52px);
  display: flex;
  align-items: center;
  gap: 18px;
}

.logga {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 46px;
  text-decoration: none;
  margin-right: auto;
}
.logga-ord {
  font-family: var(--snitt);
  font-size: 1.32rem;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.02em;
}
.logga-ort {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--accent);
}

.site-nav ul { display: flex; gap: 4px; list-style: none; margin: 0; padding: 0; }
.site-nav a {
  display: flex;
  align-items: center;
  min-height: 46px;
  padding: 6px 13px;
  font-size: .95rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--text);
  border: 2px solid transparent;
  transition: background var(--snabb), color var(--snabb);
}
.site-nav a:hover { background: var(--accent); color: var(--bas); }

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

.korg-knapp {
  min-height: 46px;
  padding: 10px 18px;
  border: var(--linje);
  background: var(--accent);
  color: var(--bas);
  font-family: var(--brod);
  font-size: .93rem;
  font-weight: 700;
  cursor: pointer;
  transition: background var(--snabb), color var(--snabb);
}
.korg-knapp:hover { background: var(--bas); color: var(--accent); }

.meny-knapp {
  display: none;
  width: 48px;
  height: 46px;
  padding: 0 11px;
  border: var(--linje);
  background: var(--bas);
  cursor: pointer;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
}
.meny-knapp span { display: block; height: 2px; background: var(--accent); }

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

.hero { border-bottom: var(--linje); }
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
  gap: 0;
  align-items: stretch;
}

.hero-affisch {
  padding: clamp(28px, 5vw, 62px) clamp(20px, 4vw, 56px) clamp(28px, 5vw, 54px) 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.hero-topp {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent);
  border-bottom: var(--linje);
  padding-bottom: 12px;
  margin-bottom: clamp(16px, 3vw, 30px);
}

.hero-mark {
  font-size: clamp(3.1rem, 11.5vw, 8.4rem);
  font-weight: 700;
  line-height: .95;
  letter-spacing: -.045em;
  margin: 0;
}
.hero-rad { display: block; }
.hero-rad--in {
  padding-left: .34em;
  color: var(--accent);
}

.hero-brod {
  max-width: 46ch;
  font-size: clamp(1rem, 1.5vw, 1.14rem);
  margin: clamp(18px, 3vw, 30px) 0 0;
}

.hero-knappar { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }

.hero-fot {
  margin: 26px 0 0;
  padding-top: 14px;
  border-top: var(--hair);
  font-size: .84rem;
  font-weight: 600;
  color: var(--text-svag);
}

.hero-prov {
  border-left: var(--linje);
  background: var(--yta);
  padding: clamp(22px, 3vw, 38px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 16px;
}
.hero-stapel svg { display: block; width: 100%; height: auto; }
.hero-stapel-txt {
  margin: 0;
  font-size: .84rem;
  font-weight: 600;
  color: var(--text-svag);
  border-top: var(--hair);
  padding-top: 12px;
}

/* ---------------- Provbänken (signaturen) ---------------- */

.prov {
  background: var(--yta);
  border-bottom: var(--linje);
  padding: clamp(44px, 6vw, 84px) 0;
}
.prov-huvud {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(20px, 4vw, 56px);
  align-items: end;
  padding-bottom: 22px;
  border-bottom: var(--linje);
}
.prov-ingress { margin: 0; font-size: 1.02rem; }

.prov-styr {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 20px;
  padding: 18px 0 24px;
}
.prov-notis {
  margin: 0;
  flex: 1 1 320px;
  font-size: .89rem;
  font-weight: 600;
  color: var(--text-svag);
}

/* Tre i bredd så de sex proven blir två hela rader. auto-fill gav 4 + 2 och
   en tom halv rad, vilket läser som att något fattas. */
.prov-nyckel {
  margin: 0 0 20px;
  max-width: 74ch;
  font-size: .88rem;
  color: var(--text-svag);
  border-left: 4px solid var(--accent);
  padding-left: 14px;
}

.prov-lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.pr { display: flex; margin: -1px; }
.pr-knapp {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
  border: var(--linje);
  background: var(--bas);
  font-family: var(--brod);
  text-align: left;
  cursor: pointer;
  color: var(--text);
}
.pr-ark { display: block; border-bottom: var(--linje); }
.ark { display: block; width: 100%; height: auto; background: #dfe9e2; }
.ark-ark { fill-opacity: 1; transition: fill-opacity var(--snabb); }
.ark-yta { transition: opacity var(--snabb); }
.prov--ljus .ark { background: #f6efd2; }
.prov--ljus .ark-ark { fill-opacity: var(--genomlys, .8); }
.prov--ljus .ark-yta { opacity: .45; }
.prov--ljus .ark-horn { fill-opacity: .06; }

.pr-txt {
  display: block;
  padding: 14px 16px 13px;
  border-bottom: var(--hair);
  transition: background var(--snabb), color var(--snabb);
}
.pr-namn {
  display: block;
  font-family: var(--snitt);
  font-size: 1.14rem;
  font-weight: 600;
  line-height: 1.24;
}
.pr-yta { display: block; font-size: .83rem; font-weight: 600; color: var(--text-svag); }

.pr-knapp:hover .pr-txt, .pr--valt .pr-txt { background: var(--accent); color: var(--bas); }
.pr-knapp:hover .pr-yta, .pr--valt .pr-yta { color: var(--bas); }
.pr--valt .pr-knapp { border-color: var(--accent-djup); box-shadow: inset 0 0 0 2px var(--accent-djup); }

.pr-matt {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  padding: 12px 16px 10px;
}
.pr-tal { font-size: .82rem; font-weight: 600; color: var(--text-svag); }
.pr-tal b {
  font-family: var(--snitt);
  font-size: 1.24rem;
  font-weight: 600;
  color: var(--accent);
  margin-right: 3px;
}
.pr-kant { display: block; padding: 0 16px 14px; }
.pr-kant-txt { display: block; margin-top: 6px; font-size: .74rem; font-weight: 600; color: var(--text-svag); }
.kant { display: block; width: 100%; height: auto; }

.prov-detalj { margin-top: clamp(24px, 4vw, 44px); }
.pd {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  border: var(--linje);
  background: var(--bas);
}
.pd-vanster { padding: clamp(20px, 3vw, 34px); border-right: var(--linje); }
.pd-hoger { padding: clamp(20px, 3vw, 34px); }
.pd-namn { font-size: clamp(1.4rem, 2.4vw, 1.9rem); line-height: 1.16; margin: 6px 0 14px; }
.pd-txt { font-size: 1rem; }
.pd-penna {
  margin: 16px 0 0;
  padding-top: 14px;
  border-top: var(--hair);
  font-size: .92rem;
  color: var(--text-svag);
}
.pd-penna b { color: var(--accent); }

/* Samma ark i dagsljus och genomlyst, bredvid varandra. Det är hela poängen
   med provbänken sammanfattat i en bild, och det fyller ytan under texten. */
.pd-par {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 22px;
  padding-top: 18px;
  border-top: var(--hair);
}
.pd-par-cell { margin: 0; }
.pd-par-ram { border: var(--linje); }
.pd-par-cell figcaption {
  margin-top: 8px;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent);
}
.ark--genomlyst { background: #f6efd2; }
.ark--genomlyst .ark-ark { fill-opacity: var(--genomlys, .8); }
.ark--genomlyst .ark-yta { opacity: .45; }
.ark--genomlyst .ark-horn { fill-opacity: .06; }

.pd-jamfor {
  margin: 0 0 18px;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent);
}
.pd-rad { margin-bottom: 20px; }
.pd-rubrik { margin: 0 0 8px; font-size: .88rem; font-weight: 600; color: var(--text-svag); }
.pd-rubrik b {
  font-family: var(--snitt);
  font-size: 1.28rem;
  font-weight: 600;
  color: var(--text);
  margin: 0 2px 0 4px;
}
.pd-spar {
  position: relative;
  height: 14px;
  margin: 0 9px;
  border: var(--linje);
  background: var(--yta);
}
.pd-fyll { position: absolute; inset: 0 auto 0 0; background: var(--accent); }
.pd-tick {
  position: absolute;
  top: -5px;
  bottom: -5px;
  width: 2px;
  background: var(--accent-djup);
  opacity: .45;
}
.pd-punkt {
  position: absolute;
  top: 50%;
  width: 15px;
  height: 15px;
  margin-left: -7px;
  transform: translateY(-50%) rotate(45deg);
  background: var(--accent-djup);
}

.pd-sitter {
  margin: 24px 0 10px;
  padding-top: 16px;
  border-top: var(--hair);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent);
}
.pd-lista { list-style: none; margin: 0; padding: 0; }
.pd-lista li { border-top: var(--hair); }
.pd-lista li:last-child { border-bottom: var(--hair); }
.pd-vara {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: center;
  min-height: 46px;
  padding: 9px 4px;
  text-decoration: none;
  font-weight: 600;
  transition: background var(--snabb), color var(--snabb), padding var(--snabb);
}
.pd-vara span { color: var(--accent); font-weight: 700; white-space: nowrap; }
.pd-vara:hover { background: var(--accent); color: var(--bas); padding-inline: 10px; }
.pd-vara:hover span { color: var(--bas); }

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

.butik { padding: clamp(44px, 6vw, 84px) 0; border-bottom: var(--linje); }
.butik-huvud, .tillval-huvud, .present-huvud {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(20px, 4vw, 56px);
  align-items: end;
  padding-bottom: 22px;
  border-bottom: var(--linje);
}
.butik-ingress, .tillval-ingress, .present-ingress { margin: 0; font-size: 1.02rem; }

.filter {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  padding: 20px 0 24px;
}
.fbtn {
  min-height: 44px;
  padding: 8px 16px;
  border: var(--linje);
  background: var(--bas);
  color: var(--accent);
  font-family: var(--brod);
  font-size: .88rem;
  font-weight: 700;
  cursor: pointer;
  transition: background var(--snabb), color var(--snabb);
}
.fbtn:hover { background: var(--accent); color: var(--bas); }
.fbtn[aria-pressed="true"] { background: var(--accent); color: var(--bas); }
.filter-antal {
  margin: 0 0 0 auto;
  font-size: .85rem;
  font-weight: 700;
  color: var(--text-svag);
}

.rutnat {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(262px, 1fr));
}
.pk {
  display: flex;
  flex-direction: column;
  margin: -1px;
  border: var(--linje);
  background: var(--bas);
}
.pk[hidden] { display: none; }
.pk-bild { display: block; border-bottom: var(--linje); }
.konst { display: block; width: 100%; height: auto; }
.pk-txt { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px 18px; flex: 1; }
.pk-info {
  display: flex;
  align-items: center;
  min-height: 44px;
  text-decoration: none;
  transition: color var(--snabb);
}
.pk-namn { font-size: 1.1rem; line-height: 1.22; }
.pk-info:hover .pk-namn { color: var(--accent); text-decoration: underline; text-underline-offset: 4px; }
.pk-kort { margin: 0; font-size: .89rem; color: var(--text-svag); }
.pk-papper {
  margin: 0;
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent);
}
.pk-rad {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: auto;
  padding-top: 12px;
}
.pk-pris { margin: 0; font-family: var(--snitt); font-size: 1.32rem; font-weight: 600; }
.pk-btn {
  min-height: 44px;
  padding: 8px 16px;
  border: var(--linje);
  background: var(--accent);
  color: var(--bas);
  font-family: var(--brod);
  font-size: .88rem;
  font-weight: 700;
  cursor: pointer;
  transition: background var(--snabb), color var(--snabb);
}
.pk-btn:hover { background: var(--bas); color: var(--accent); }
.pk-btn[disabled] { background: var(--yta); color: var(--text-svag); border-color: var(--text-svag); cursor: not-allowed; }
.pk-var { margin: 0; padding-top: 10px; border-top: var(--hair); font-size: .8rem; color: var(--text-svag); }
.pk-var a { color: var(--accent); font-weight: 700; }

/* ---------------- Tillval ---------------- */

.tillval { padding: clamp(44px, 6vw, 84px) 0; border-bottom: var(--linje); background: var(--yta); }
.tillval-lista {
  list-style: none;
  margin: clamp(24px, 4vw, 40px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.tv {
  display: flex;
  flex-direction: column;
  margin: -1px;
  border: var(--linje);
  background: var(--bas);
}
.tv-bild { border-bottom: var(--linje); }
.tv-bild svg { display: block; width: 100%; height: auto; }
.tv-txt { padding: 16px 18px 8px; flex: 1; }
.tv-txt h3 { font-size: 1.16rem; line-height: 1.2; margin-bottom: 8px; }
.tv-txt p { margin: 0; font-size: .92rem; color: var(--text-svag); }
.tv-pris {
  margin: 0;
  padding: 12px 18px 16px;
  font-family: var(--snitt);
  font-size: 1.36rem;
  font-weight: 600;
  color: var(--accent);
}

/* ---------------- Presentförslag ---------------- */

.present { padding: clamp(44px, 6vw, 84px) 0; border-bottom: var(--linje); }
.paket-rutnat {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  margin-top: clamp(24px, 4vw, 40px);
}
.pak {
  display: flex;
  flex-direction: column;
  margin: -1px;
  padding: clamp(20px, 3vw, 30px);
  border: var(--linje);
  background: var(--bas);
}
.pak-namn { font-size: clamp(1.24rem, 2vw, 1.55rem); line-height: 1.18; }
.pak-txt { margin: 12px 0 18px; font-size: .95rem; color: var(--text-svag); }
.pak-lista { list-style: none; margin: 0 0 auto; padding: 0; }
.pak-lista li {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 10px 0;
  border-top: var(--hair);
  font-size: .95rem;
}
.pak-lista li:last-child { border-bottom: var(--hair); }
.pak-lista a { color: var(--accent); font-weight: 600; text-decoration: none; border-bottom: 1px solid rgba(31, 81, 56, .35); }
.pak-lista a:hover { border-bottom-color: var(--accent); }
.pak-lista span { font-weight: 600; white-space: nowrap; }
.pak-summa {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 14px;
  margin: 18px 0 16px;
  font-size: .88rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-svag);
}
.pak-summa b {
  font-family: var(--snitt);
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text);
}
.pak-btn { width: 100%; }

/* ---------------- Omdömen ---------------- */

.omd { padding: clamp(44px, 6vw, 84px) 0; border-bottom: var(--linje); background: var(--yta); }
.omd-lista {
  list-style: none;
  margin: clamp(24px, 4vw, 40px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 22px;
}
.omd-kort {
  padding: clamp(22px, 3vw, 32px);
  border: var(--linje);
  border-left-width: 10px;
  background: #f9f7f1;
}
.omd-kort--brev { background: #f4f1e6; }
.omd-kort--skiss { background: #f5f0e4; }
.omd-txt {
  margin: 0 0 18px;
  font-family: var(--snitt);
  font-size: 1.06rem;
  line-height: 1.5;
}
.omd-namn {
  margin: 0;
  padding-top: 14px;
  border-top: var(--hair);
  font-weight: 700;
  font-size: .96rem;
}
.omd-namn span {
  display: block;
  font-weight: 600;
  font-size: .82rem;
  color: var(--text-svag);
}

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

#produktsida { padding: clamp(28px, 4vw, 52px) 0 clamp(44px, 6vw, 78px); }

.ps-smula {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: .85rem;
  font-weight: 600;
  color: var(--text-svag);
  border-bottom: var(--hair);
  padding-bottom: 6px;
  margin-bottom: clamp(20px, 3vw, 34px);
}
.ps-smula a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-right: 4px;
  color: var(--accent);
  font-weight: 700;
  text-decoration: none;
  border-bottom: 2px solid transparent;
}
.ps-smula a:hover { border-bottom-color: var(--accent); }

.ps {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
  border: var(--linje);
  background: var(--bas);
}
.ps-bilder { border-right: var(--linje); display: flex; flex-direction: column; }
.ps-platta { border-bottom: var(--linje); }
.ps-konst, .ark--stor { display: block; width: 100%; height: auto; }
/* Flikraden läggs i botten på bildpanelen. Utan margin-top blir det ett tomt
   fält under den när infokolumnen är högre än illustrationen. */
.ps-mini { display: flex; flex-wrap: wrap; gap: 0; margin-top: auto; border-top: var(--hair); }
.ps-mini-btn {
  flex: 1 1 33%;
  min-height: 48px;
  padding: 10px 8px;
  border: 0;
  border-right: var(--hair);
  background: var(--bas);
  color: var(--accent);
  font-family: var(--brod);
  font-size: .85rem;
  font-weight: 700;
  cursor: pointer;
  transition: background var(--snabb), color var(--snabb);
}
.ps-mini-btn:last-child { border-right: 0; }
.ps-mini-btn:hover { background: var(--accent); color: var(--bas); }
.ps-mini-btn[aria-pressed="true"] { background: var(--accent); color: var(--bas); }

.ps-info { padding: clamp(22px, 3vw, 38px); }
.ps-namn { font-size: clamp(1.6rem, 3vw, 2.35rem); line-height: 1.14; }
.ps-kort { margin: 8px 0 0; font-size: .95rem; color: var(--text-svag); }
.ps-pris {
  margin: 16px 0 0;
  font-family: var(--snitt);
  font-size: clamp(1.7rem, 3vw, 2.2rem);
  font-weight: 600;
  color: var(--accent);
}
.ps-moms { margin: 4px 0 0; font-size: .84rem; color: var(--text-svag); }
.ps-text { margin: 20px 0 0; }

.ps-falt { margin-top: 24px; }
.ps-etikett {
  margin: 0 0 10px;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent);
}
.ps-etikett--kravs { color: var(--accent-djup); }
.ps-etikett--kravs::after { content: ", välj först"; letter-spacing: .06em; }
.ps-var { display: flex; flex-wrap: wrap; gap: 8px; }
.ps-var-btn {
  min-height: 56px;
  padding: 8px 15px;
  border: var(--linje);
  background: var(--bas);
  color: var(--text);
  font-family: var(--brod);
  font-size: .95rem;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
  transition: background var(--snabb), color var(--snabb);
}
.ps-var-btn span { display: block; font-size: .76rem; font-weight: 600; color: var(--text-svag); }
.ps-var-btn:hover, .ps-var-btn[aria-pressed="true"] { background: var(--accent); color: var(--bas); }
.ps-var-btn:hover span, .ps-var-btn[aria-pressed="true"] span { color: var(--bas); }
.ps-var-btn[disabled] {
  background: var(--yta);
  color: var(--text-svag);
  border-color: var(--text-svag);
  text-decoration: line-through;
  cursor: not-allowed;
}
.ps-var-btn[disabled] span { text-decoration: none; }
.ps-slut { margin: 10px 0 0; font-size: .85rem; color: var(--text-svag); }

.ps-kop { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.ps-antal { display: flex; align-items: center; border: var(--linje); }
.ps-steg {
  width: 48px;
  height: 48px;
  border: 0;
  background: var(--bas);
  color: var(--accent);
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: background var(--snabb), color var(--snabb);
}
.ps-steg:hover { background: var(--accent); color: var(--bas); }
.ps-antal-tal { min-width: 42px; text-align: center; font-weight: 700; }
.ps-btn { flex: 1 1 190px; }

.ps-spec { margin: 30px 0 0; padding-top: 8px; border-top: var(--linje); }
.ps-spec-rad {
  display: flex;
  gap: 16px;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: var(--hair);
  font-size: .92rem;
}
.ps-spec dt { font-weight: 700; color: var(--accent); flex: 0 0 34%; }
.ps-spec dd { margin: 0; text-align: right; color: var(--text-svag); }

.ps-villkor { margin-top: 26px; padding: 18px; background: var(--yta); }
.ps-villkor p { font-size: .9rem; margin-bottom: 12px; }
.ps-villkor p:last-child { margin-bottom: 0; }
.ps-villkor b { color: var(--accent); }

.ps-prov { margin-top: clamp(28px, 4vw, 48px); border: var(--linje); background: var(--yta); padding: clamp(20px, 3vw, 34px); }
.ps-prov-grid {
  display: grid;
  grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr);
  gap: clamp(20px, 3vw, 40px);
  align-items: start;
  margin-top: 14px;
}
.ps-prov-ark { border: var(--linje); background: var(--bas); padding: 14px; }
.ps-prov-ark .ark { border-bottom: var(--hair); }
.ps-prov-ark .kant { margin-top: 12px; }
.ps-prov-namn { font-size: clamp(1.3rem, 2.2vw, 1.7rem); line-height: 1.16; margin-bottom: 12px; }
.ps-prov-txt p { font-size: .97rem; }
.ps-prov-matt {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(122px, 1fr));
  gap: 2px;
  margin: 18px 0 16px;
  background: var(--accent);
  border: var(--linje);
}
.ps-prov-matt > div { background: var(--bas); padding: 11px 13px; }
.ps-prov-matt dt {
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent);
}
.ps-prov-matt dd { margin: 2px 0 0; font-family: var(--snitt); font-size: 1.2rem; font-weight: 600; }
.ps-prov-lank { margin: 0; }

.ps-mer { margin-top: clamp(34px, 5vw, 60px); }
.ps-mer-rubrik {
  font-size: clamp(1.35rem, 2.4vw, 1.85rem);
  line-height: 1.16;
  padding-bottom: 16px;
  margin-bottom: 22px;
  border-bottom: var(--linje);
}

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

.site-fot { background: var(--bas); padding: clamp(44px, 6vw, 76px) 0 34px; }
.fot-kundservice {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 2px;
  background: var(--accent);
  border: var(--linje);
}
.fot-kol { background: var(--bas); padding: clamp(18px, 2.4vw, 26px); }
.fot-kol h2 {
  font-size: 1.06rem;
  line-height: 1.2;
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: var(--hair);
}
.fot-kol p { margin: 0; font-size: .91rem; color: var(--text-svag); }

.nyhet {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(18px, 3vw, 40px);
  align-items: center;
  margin-top: 34px;
  padding: clamp(20px, 3vw, 30px);
  background: var(--accent);
  color: var(--bas);
}
.nyhet-txt h2 { font-size: 1.3rem; line-height: 1.2; margin-bottom: 6px; }
.nyhet-txt p { margin: 0; font-size: .92rem; }
.nyhet-falt { display: flex; flex-wrap: wrap; gap: 10px; }
.nyhet-input {
  flex: 1 1 200px;
  min-height: 48px;
  padding: 12px 14px;
  border: 2px solid var(--bas);
  background: var(--bas);
  color: var(--text);
  font-family: var(--brod);
  font-size: .95rem;
}
.nyhet .btn--fyll { background: var(--bas); color: var(--accent); border-color: var(--bas); }
.nyhet .btn--fyll:hover { background: var(--accent); color: var(--bas); }
.nyhet-notis { grid-column: 1 / -1; margin: 0; font-size: .88rem; font-weight: 600; }
.nyhet-notis:empty { display: none; }

.fot-botten {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 22px;
  margin-top: 30px;
  padding-top: 20px;
  border-top: var(--linje);
}
.fot-logga {
  margin: 0;
  font-family: var(--snitt);
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: -.02em;
}
.fot-rad { margin: 0; font-size: .85rem; color: var(--text-svag); }
.fot-demo { margin: 0 0 0 auto; font-size: .78rem; color: var(--text-svag); }

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

.korg-slojan {
  position: fixed;
  inset: 0;
  z-index: 70;
  background: rgba(18, 53, 32, .45);
}
.korg-slojan[hidden] { display: none; }

.korg {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 80;
  width: min(430px, 100%);
  display: flex;
  flex-direction: column;
  background: var(--bas);
  border-left: var(--linje);
  transform: translateX(101%);
  transition: transform 140ms ease-out;
}
.korg--oppen { transform: none; }

.korg-topp {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: var(--linje);
  background: var(--accent);
  color: var(--bas);
}
.korg-rubrik { margin: 0; font-family: var(--snitt); font-size: 1.24rem; font-weight: 600; }
.stang {
  width: 44px;
  height: 44px;
  flex: none;
  padding: 9px;
  border: 2px solid var(--bas);
  background: var(--accent);
  color: var(--bas);
  cursor: pointer;
  transition: background var(--snabb), color var(--snabb);
}
.stang svg { display: block; width: 100%; height: 100%; }
.stang:hover { background: var(--bas); color: var(--accent); }

.korg-kropp { flex: 1; overflow-y: auto; padding: 16px; }
.korg-tom { margin: 0; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.korg-tom[hidden] { display: none; }
.korg-tom-rubrik { font-family: var(--snitt); font-size: 1.24rem; font-weight: 600; }
.korg-tom-txt { font-size: .92rem; color: var(--text-svag); }

.korg-lista { list-style: none; margin: 0; padding: 0; }
.kr-rad {
  display: grid;
  grid-template-columns: 68px minmax(0, 1fr) auto;
  gap: 12px;
  padding: 14px 0;
  border-bottom: var(--hair);
}
.kr-rad:first-child { padding-top: 0; }
.kr-bild { border: var(--hair); align-self: start; }
.kr-konst { display: block; width: 100%; height: auto; }
.kr-namn { margin: 0; font-family: var(--snitt); font-size: 1rem; font-weight: 600; line-height: 1.2; }
.kr-var { margin: 2px 0 8px; font-size: .8rem; color: var(--text-svag); }
.kr-styr { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.kr-steg {
  width: 44px;
  height: 44px;
  border: var(--linje);
  background: var(--bas);
  color: var(--accent);
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: background var(--snabb), color var(--snabb);
}
.kr-steg:hover { background: var(--accent); color: var(--bas); }
.kr-antal { min-width: 26px; text-align: center; font-weight: 700; }
.kr-bort {
  min-height: 44px;
  padding: 6px 10px;
  border: 0;
  background: none;
  color: var(--text-svag);
  font-family: var(--brod);
  font-size: .82rem;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  transition: color var(--snabb);
}
.kr-bort:hover { color: var(--accent-djup); }
.kr-pris { margin: 0; font-family: var(--snitt); font-size: 1.02rem; font-weight: 600; white-space: nowrap; }

.korg-fot { padding: 16px; border-top: var(--linje); background: var(--yta); }
.korg-fot[hidden] { display: none; }
.korg-frakt { margin: 0 0 10px; font-size: .85rem; font-weight: 600; color: var(--text-svag); }
.korg-summa {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin: 0;
  font-family: var(--snitt);
  font-size: 1.4rem;
  font-weight: 600;
}
.korg-moms { margin: 4px 0 14px; font-size: .8rem; color: var(--text-svag); }
.korg-fot .btn { width: 100%; }

/* ---------------- Modal ---------------- */

.modal { position: fixed; inset: 0; z-index: 95; display: flex; align-items: center; justify-content: center; padding: 20px; }
.modal[hidden] { display: none; }
.modal-slojan { position: absolute; inset: 0; background: rgba(18, 53, 32, .55); }
.modal-ruta {
  position: relative;
  width: min(520px, 100%);
  padding: clamp(24px, 4vw, 38px);
  background: var(--bas);
  border: var(--linje);
  border-top-width: 10px;
}
.modal-label {
  margin: 0 0 12px;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent);
}
.modal-rubrik { font-size: clamp(1.25rem, 2.4vw, 1.6rem); line-height: 1.24; margin-bottom: 14px; }
.modal-txt { font-size: .96rem; color: var(--text-svag); }
.modal .btn { margin-top: 20px; }

/* ---------------- Bredder ---------------- */

@media (max-width: 1080px) {
  .ps-prov-grid { grid-template-columns: 1fr; }
}

@media (max-width: 980px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-affisch { padding-right: 0; padding-bottom: clamp(24px, 4vw, 38px); }
  .hero-prov { border-left: 0; border-top: var(--linje); margin-inline: calc(clamp(18px, 5vw, 52px) * -1); }
  .prov-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pd { grid-template-columns: 1fr; }
  .pd-vanster { border-right: 0; border-bottom: var(--linje); }
  .ps { grid-template-columns: 1fr; }
  .ps-bilder { border-right: 0; border-bottom: var(--linje); }
}

@media (max-width: 900px) {
  .meny-knapp { display: flex; }
  .site-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--bas);
    border-bottom: var(--linje);
    padding: 8px clamp(18px, 5vw, 52px) 16px;
  }
  body.meny-oppen .site-nav { display: block; }
  .site-nav ul { flex-direction: column; gap: 0; }
  .site-nav a {
    min-height: 54px;
    padding: 12px 4px;
    font-size: 1.05rem;
    border-bottom: var(--hair);
    border-left: 0;
    border-right: 0;
    border-top: 0;
  }
  .site-nav li:last-child a { border-bottom: 0; }
}

@media (max-width: 760px) {
  body { font-size: 16px; }
  .prov-huvud, .butik-huvud, .tillval-huvud, .present-huvud { grid-template-columns: 1fr; gap: 14px; align-items: start; }
  .nyhet { grid-template-columns: 1fr; }
  .filter-antal { margin-left: 0; width: 100%; }
  .ps-spec-rad { flex-direction: column; gap: 2px; }
  .ps-spec dd { text-align: left; }
  .omd-lista { gap: 16px; }
  .prov-lista { grid-template-columns: 1fr; }
}

@media (max-width: 520px) {
  .hero-mark { letter-spacing: -.035em; }
  .hero-rad--in { padding-left: .18em; }
  .rutnat { grid-template-columns: 1fr; }
  .kr-rad { grid-template-columns: 56px minmax(0, 1fr); }
  .kr-pris { grid-column: 2; text-align: right; }
  .korg { width: 100%; }
  .fot-demo { margin-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 1ms !important; animation-duration: 1ms !important; }
  .korg { transition: none; }
  .pd-vara:hover { padding-inline: 4px; }
}