/* ════════════════════════════════════════════════════════════
   PRODUKTSIDA — samma språk som startsidan, en nivå tystare.
   Sidans jobb är att svara på en enda fråga: hur ser plagget ut
   när det rör sig? Därför är filmen det första och största.
   ════════════════════════════════════════════════════════════ */

.plaggsida main{padding-top:clamp(96px,12vh,132px)}

.tillbaka{
  display:inline-block;margin:0 var(--spalt) clamp(24px,3vw,40px);
  color:var(--dampat);text-decoration:none;
  font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;
  padding-block:6px;
}
.tillbaka::before{content:"← ";color:var(--massing-text)}
.tillbaka:hover{color:var(--black)}

/* ─── Plagget: film vänster, orden höger ─── */
.plagg{
  display:grid;
  grid-template-columns:minmax(0,6fr) minmax(0,5fr);
  gap:clamp(28px,4.5vw,80px);
  align-items:center;
  padding:0 var(--spalt) var(--sektion) 0;
}
.plagg__film video{
  width:100%;height:min(76vh,720px);object-fit:cover;
  filter:saturate(.94) contrast(1.02);
}
.plagg__film figcaption{
  margin-top:12px;padding-left:var(--spalt);
  font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--dampat);
}
.plagg__ord{max-width:44ch}
.plagg__ord h1{
  font-size:clamp(2.1rem,3.6vw,3.4rem);line-height:1.06;margin-bottom:1.2rem;
}
.plagg__text{color:var(--dampat);margin-bottom:1.6rem;max-width:38ch}
.plagg__pris{
  font-size:.82rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--black);padding-bottom:1.6rem;border-bottom:1px solid var(--harlinje);
}

/* Löftena är kundens tre frågor besvarade, inte en punktlista med bockar. */
.loften{list-style:none;margin:0 0 2.2rem}
.loften li{
  padding:14px 0 14px 0;border-bottom:1px solid var(--harlinje);
  font-size:.98rem;color:var(--dampat);
  display:grid;grid-template-columns:26px 1fr;align-items:baseline;
}
.loften li::before{content:"·";color:var(--massing-text);font-size:1.4rem;line-height:1}

.plagg__lankar{display:flex;flex-wrap:wrap;gap:clamp(18px,3vw,44px)}
.lank--tyst{color:var(--dampat)}
.lank--tyst::after{background:var(--harlinje)}

/* ─── Plat otblizo ─── */
.nara{
  display:grid;grid-template-columns:repeat(12,1fr);
  gap:clamp(14px,2vw,28px);
  padding:var(--sektion) var(--spalt);
  background:var(--ben-djup);
  align-items:end;
}
.nara__rubrik{
  grid-column:1/3;align-self:center;
  font-size:clamp(1.4rem,2.1vw,2rem);line-height:1.1;
}
.nara__b{overflow:hidden}
.nara__b img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--lugn)}
.nara__b:hover img{transform:scale(1.03)}
.nara__b:nth-of-type(1){grid-column:3/7;aspect-ratio:3/4}
.nara__b:nth-of-type(2){grid-column:7/10;aspect-ratio:3/4;margin-bottom:clamp(24px,5vw,70px)}
.nara__b--hel{grid-column:10/13;aspect-ratio:2/3}

/* ─── Förfrågan ─── */
.zapitvane{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(34px,6vw,110px);
  padding:var(--sektion) var(--spalt);
}
.zapitvane__ord p{color:var(--dampat);margin-top:1.5rem;max-width:40ch}

/* ─── Fler plagg ─── */
.mer{padding:0 var(--spalt) var(--sektion)}
.mer__rad{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(14px,2vw,28px);margin-top:clamp(34px,4.5vw,60px);
}
.mer__kort{text-decoration:none;color:var(--black);display:block}
.mer__kort img{
  width:100%;aspect-ratio:3/4;object-fit:cover;
  transition:transform 1.1s var(--lugn);
}
.mer__kort:hover img{transform:scale(1.035)}
.mer__namn{display:block;margin-top:12px;font-size:.94rem}
.mer__pris{
  display:block;margin-top:3px;
  font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;color:var(--dampat);
}

@media (max-width:1080px){
  .plagg{grid-template-columns:1fr;padding-left:var(--spalt)}
  .plagg__film video{height:min(60vh,540px)}
  .plagg__film figcaption{padding-left:0}
  .nara{grid-template-columns:repeat(6,1fr)}
  .nara__rubrik{grid-column:1/7}
  .nara__b:nth-of-type(1){grid-column:1/4}
  .nara__b:nth-of-type(2){grid-column:4/7;margin-bottom:0}
  .nara__b--hel{grid-column:1/7;aspect-ratio:16/9}
  .zapitvane{grid-template-columns:1fr}
}
@media (max-width:620px){
  .mer__rad{grid-template-columns:1fr 1fr}
  .mer__kort:nth-child(3){display:none}
}