.product-wrap {
  max-width: 1280px; margin: 0 auto;
  padding: 120px 48px 80px;
  display: grid; grid-template-columns: 1fr 480px;
  gap: 64px; align-items: start;
}

/* min-width: 0 — et grid-element har min-width: auto som standard, så
   1fr-kolonnen nekter å bli smalere enn innholdet. Med mange miniatyrer
   blåser stripa opp kolonnen og skyver produktinfoen ut av layouten. */
.gallery { position: sticky; top: 100px; min-width: 0; }
.gallery-main {
  background: var(--product-bg); aspect-ratio: 3/4;
  overflow: hidden; margin-bottom: 12px; cursor: zoom-in;
}
.gallery-main img {
  width: 100%; height: 100%; object-fit: contain;
  transition: transform .4s ease;
}
.gallery-main:hover img { transform: scale(1.05); }
/* Rullbar: .thumb har flex-shrink: 0, så uten overflow renner bilde 8 og
   utover utenfor uten at man kommer til dem. Med 10+ bilder per produkt er
   det regelen, ikke unntaket. */
.gallery-thumbs {
  display: flex; gap: 10px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;
  cursor: grab;
}
.gallery-thumbs::-webkit-scrollbar { display: none; }
.gallery-thumbs:active { cursor: grabbing; }

/* Kantfading som hint om at det finnes flere bilder. Scrollbaren er skjult,
   så uten dette er det ingenting som røper at stripa kan rulles. Klassene
   settes av JS ut fra faktisk scrollposisjon. */
.gallery-thumbs.fade-h {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 56px), transparent);
          mask-image: linear-gradient(to right, #000 calc(100% - 56px), transparent);
}
.gallery-thumbs.fade-v {
  -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 56px), transparent);
          mask-image: linear-gradient(to left, #000 calc(100% - 56px), transparent);
}
.gallery-thumbs.fade-vh {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 56px, #000 calc(100% - 56px), transparent);
          mask-image: linear-gradient(to right, transparent, #000 56px, #000 calc(100% - 56px), transparent);
}
.thumb {
  width: 80px; height: 80px; background: #fff;
  border: 2px solid transparent; cursor: pointer;
  overflow: hidden; flex-shrink: 0; transition: border-color .2s;
}
.thumb.active { border-color: var(--ink); }
.thumb img { width: 100%; height: 100%; object-fit: contain; padding: 6px; }

.product-info { padding-top: 8px; }
.product-brand { font-size: var(--t-micro); letter-spacing: .4em; text-transform: uppercase; color: var(--rod); margin-bottom: 12px; }
.product-name { font-family: 'Cormorant Garamond', serif; font-size: var(--d-1); font-weight: 300; line-height: 1.1; margin-bottom: 6px; }
.product-subtitle { font-size: var(--t-fin); color: var(--soft); letter-spacing: .1em; margin-bottom: 24px; font-weight: 300; }
.product-price { font-size: var(--t-h4); font-weight: 400; letter-spacing: .03em; margin-bottom: 32px; }

.divider { border: none; border-top: 1px solid var(--hair); margin: 28px 0; }

.option-label { font-size: var(--t-micro); letter-spacing: .3em; text-transform: uppercase; color: var(--soft); margin-bottom: 12px; }

/* 28px, ikke 12: lufta ned mot kjøpsknappen lå tidligere i marginen til
   .size-guide-lenka som sto her. Da den gikk ut, gikk avstanden med. */
.size-grid { display: flex; gap: 8px; margin-bottom: 28px; flex-wrap: wrap; }

/* «Størrelse» til venstre, «Størrelsesguide» til høyre på samme linje: lenka
   står der kunden ser på knappene. */
.str-hode { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.str-guide-lenke {
  /* 44 px høy treffflate (Apples minstemål) uten at linja vokser: padding
     inn, negativ margin ut. Teksten alene er 11 px. */
  background: none; border: none; padding: 16px 0 16px 16px; margin: -16px 0 -4px; cursor: pointer;
  font-family: 'Montserrat', sans-serif; font-size: var(--t-micro); letter-spacing: .15em;
  text-transform: uppercase; color: var(--ink);
  text-decoration: underline; text-underline-offset: 3px;
}
/* Passform og modellinje rett under knappene. Knappene har margin-bottom 28,
   så fakta trekkes opp og tar marginen selv. */
.str-fakta { margin: -16px 0 28px; }
.str-passform { font-size: var(--t-fin); color: var(--ink); margin: 0 0 4px; }
.str-modell { font-size: var(--t-fin); color: var(--soft); line-height: 1.6; margin: 0; }
/* Knappen bærer begge navnene på størrelsen: tallet som står sydd inn i
   plagget, og intervallet som oversetter det. De sto på én linje før
   («1 XXS/XS»), og da leste de som ett langt navn ingen kjente igjen. Over
   hverandre leser de som det de er — en størrelse og en forklaring.
   Bredden er fri fordi lengste oversettelse er 6 tegn; min-width holder de
   korte kvadratiske så raden ikke blir hakkete. */
.size-btn {
  min-width: 52px; height: 52px; padding: 0 12px;
  display: inline-flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 1px;
  border: 1px solid var(--hair);
  background: #fff; font-size: var(--t-fin); letter-spacing: .1em;
  cursor: pointer; font-family: 'Montserrat', sans-serif;
  transition: background .2s, border-color .2s;
}
/* Tallet er størrelsens navn og skal lese som det. Bokstavene er
   oversettelsen under. Se produkt.html for hvorfor det ikke snus. */
.size-tall { font-size: var(--t-lead); font-weight: 300; letter-spacing: .05em; line-height: 1; }
.size-bokstaver { font-size: var(--t-micro); letter-spacing: .12em; color: var(--soft); line-height: 1; }
.size-enkelt { font-size: var(--t-fin); letter-spacing: .1em; }
/* På mørk bakgrunn må fotnoten arve knappens farge — var(--soft) forsvinner. */
.size-btn.active .size-bokstaver { color: rgba(255,255,255,.65); }
.size-btn:hover { border-color: var(--ink); }
.size-btn.active { background: var(--ink); color: #fff; border-color: var(--ink); }
/* Utsolgt er fortsatt overstrøket og nedtonet, men klikkbart: å velge den er
   veien til varselet. .3 var for svakt til å lese som noe man kan trykke på. */
/* Streken går over tallet alene. Strøket over begge linjene ble knappen en
   grå klump der verken størrelsen eller oversettelsen lot seg lese. */
.size-btn.sold-out { opacity: .45; cursor: pointer; }
.size-btn.sold-out .size-tall,
.size-btn.sold-out .size-enkelt { text-decoration: line-through; }
.size-btn.sold-out:hover { opacity: .7; border-color: var(--soft); }
.size-btn.sold-out.active {
  opacity: 1; background: transparent; color: var(--ink);
  border-color: var(--ink);
}


.btn-add {
  width: 100%; padding: 18px; background: var(--ink); color: #fff;
  border: none; font-family: 'Montserrat', sans-serif;
  font-size: var(--t-fin); letter-spacing: .3em; text-transform: uppercase;
  cursor: pointer; margin-bottom: 28px; transition: background .2s;
}
.btn-add:hover { background: #333; }
/* Trygghetslinjene under knappen. Små og nedtonet: de skal svare den som
   leter, ikke konkurrere med knappen. Knappen har margin-bottom 28, så lista
   trekkes opp. */
.kjop-trygg {
  list-style: none; margin: -16px 0 28px; padding: 0;
  font-size: var(--t-fin); line-height: 1.7; color: var(--soft);
}
.kjop-trygg li { position: relative; padding-left: 14px; }
.kjop-trygg li::before {
  content: ''; position: absolute; left: 0; top: .8em;
  width: 5px; height: 1px; background: currentColor;
}
.kjop-trygg a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.kjop-feil {
  font-size: var(--t-liten); color: #b3261e; margin-bottom: 12px;
  letter-spacing: .1em;
}

.accordion { border-top: 1px solid var(--hair); }
.accordion-item { border-bottom: 1px solid var(--hair); }
.accordion-btn {
  width: 100%; padding: 18px 0; background: none; border: none;
  display: flex; align-items: center; justify-content: space-between;
  font-family: 'Montserrat', sans-serif; font-size: var(--t-micro);
  letter-spacing: .25em; text-transform: uppercase; cursor: pointer; color: var(--ink);
}
.accordion-btn svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.5; transition: transform .3s; }
.accordion-btn.open svg { transform: rotate(45deg); }
.accordion-body { max-height: 0; overflow: hidden; transition: max-height .35s ease; font-size: var(--t-fin); line-height: 1.9; color: var(--soft); font-weight: 300; }
.accordion-body.open { max-height: 400px; }
.accordion-body-inner { padding-bottom: 20px; }
/* Avsnitt i beskrivelsen. Nettleserens egen p-marg er ett tegnhoyde i topp og
   bunn og gir et sprik som er stoerre enn linjeavstanden; 12 px leser som
   avsnitt uten aa rive teksten fra hverandre. Siste avsnitt dropper margen,
   ellers legger den seg oppa skuffens padding-bottom. */
.accordion-body-inner p { margin: 0 0 12px; }
.accordion-body-inner p:last-child { margin-bottom: 0; }
/* Punktlister. 18 px innrykk er nok til at kula staar utenfor tekstblokka og
   en linje som brekker legger seg under teksten, ikke under kula — det var
   nettopp den forskjellen <br> ikke kunne gi. */
.accordion-body-inner ul { margin: 0 0 12px; padding-left: 18px; }
.accordion-body-inner ul:last-child { margin-bottom: 0; }
.accordion-body-inner li { margin-bottom: 4px; }
.accordion-body-inner li:last-child { margin-bottom: 0; }
/* Lenka paa egen linje. Inline etter frakttekstene, som er hele setninger,
   ville lest som en fortsettelse av setningen og ikke som en utvei. */
.accordion-lenke {
  display: block; margin-top: 6px; color: var(--ink);
  text-decoration: underline; text-underline-offset: 3px;
}

/* USP */
.usp-row { display: flex; gap: 20px; margin-bottom: 32px; flex-wrap: wrap; }
.usp-item { flex: 1; text-align: center; min-width: 80px; }
.usp-icon { font-size: var(--t-lead); margin-bottom: 6px; }
.usp-text { font-size: var(--t-micro); letter-spacing: .15em; text-transform: uppercase; color: var(--soft); line-height: 1.6; }

/* RELATED */
.related-section { max-width: 1280px; margin: 0 auto; padding: 60px 48px 80px; }
.related-title { font-family: 'Cormorant Garamond', serif; font-size: var(--t-h3); font-weight: 300; margin-bottom: 32px; }
.related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.related-item { cursor: pointer; text-decoration: none; color: inherit; }
/* position: relative for .bilde-kommer i main.css. Ruta hadde ingen egen
   posisjonering, og etiketten ville festet seg til nærmeste posisjonerte
   forelder, altså et helt annet sted på siden. */
.related-img { position: relative; background: var(--product-bg); aspect-ratio: 3/4; overflow: hidden; margin-bottom: 14px; }
.related-img img { width: 100%; height: 100%; object-fit: contain; transition: transform .5s; }
.related-item:hover .related-img img { transform: scale(1.04); }
.related-name { font-family: 'Cormorant Garamond', serif; font-size: var(--t-lead); font-weight: 300; }
.related-price { font-size: var(--t-fin); color: var(--soft); margin-top: 4px; }

/* LIGHTBOX */
.lightbox {
  display: none; position: fixed; inset: 0; z-index: 1000;
  background: rgba(0,0,0,.92); align-items: center; justify-content: center;
}
.lightbox.active { display: flex; }
.lightbox-img {
  max-width: 90vw; max-height: 90vh;
  object-fit: contain;
  animation: lbfade .2s ease;
}
@keyframes lbfade { from { opacity:0; transform:scale(.97); } to { opacity:1; transform:none; } }
.lightbox-close {
  position: absolute; top: 24px; right: 32px;
  color: #fff; font-size: var(--t-h2); cursor: pointer; opacity: .6; line-height: 1;
}
.lightbox-close:hover { opacity: 1; }
.lightbox-prev, .lightbox-next {
  position: absolute; top: 50%; transform: translateY(-50%);
  color: #fff; font-size: var(--t-h2); cursor: pointer; opacity: .5;
  padding: 16px; user-select: none;
}
.lightbox-prev:hover, .lightbox-next:hover { opacity: 1; }
.lightbox-prev { left: 24px; }
.lightbox-next { right: 24px; }
.lightbox-counter {
  position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%);
  font-size: var(--t-micro); letter-spacing: .3em; color: rgba(255,255,255,.4);
  text-transform: uppercase;
}

@media (max-width: 768px) {
  .product-wrap {
    grid-template-columns: 1fr;
    padding: 80px 0 48px;
    gap: 0;
  }

  /* Galleri fullbredde */
  .gallery { position: static; }
  .gallery-main {
    aspect-ratio: 3/4;
    margin-bottom: 8px;
  }
  .gallery-thumbs { padding: 0 16px; gap: 6px; }
  .thumb { width: 56px; height: 56px; }

  /* Info med padding */
  .product-info { padding: 24px 16px 48px; }
  /* 32 px og ikke --d-1. Regelen sto i main.css og virket ikke — produkt.css
     lastes etterpå og setter --d-1 uten @media, så navnet har stått 36 px på
     telefon. Funnet av verktoy/doede_css_regler.py. */
  .product-name { font-size: var(--t-h2); }
  .product-price { font-size: var(--t-lead); }

  .size-grid { gap: 6px; }
  .size-btn { min-width: 44px; height: 44px; padding: 0 10px; font-size: var(--t-micro); }

  .btn-add { padding: 16px; font-size: var(--t-micro); }

  .usp-row { gap: 12px; }
  .usp-item { min-width: 60px; }
  .usp-icon { font-size: var(--t-brod); }
  .usp-text { font-size: var(--t-micro); }

  /* Related */
  .related-section { padding: 40px 16px 60px; }
  .related-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .related-name { font-size: var(--t-brod); }
  .related-price { font-size: var(--t-fin); }

  /* Lightbox mobil */
  .lightbox-prev { left: 8px; }
  .lightbox-next { right: 8px; }
  .lightbox-img { max-width: 95vw; }
}

.color-swatch {
  width: 28px; height: 28px; border-radius: 50%;
  border: 2px solid transparent; cursor: pointer;
  transition: border-color .2s; padding: 0;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.1);
}
.color-swatch.active {
  border-color: var(--ink);
  outline: 2px solid var(--flate);
  outline-offset: -4px;
}
/* Lenker til de andre fargene. Samme runding som .color-swatch, men 32 px for
   et bedre treffmål på mobil. Kanten fordi ASTORIA WHITE er #FFFFFF. */
.farge-lenker { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 24px; }
.farge-lenke {
  display: block; width: 32px; height: 32px; border-radius: 50%;
  border: 2px solid transparent; box-shadow: inset 0 0 0 1px rgba(0,0,0,.15);
  transition: border-color .2s;
}
.farge-lenke:hover, .farge-lenke:focus-visible { border-color: var(--soft); }
.farge-lenke.active { border-color: var(--ink); outline: 2px solid var(--flate); outline-offset: -4px; }

@media (max-width: 768px) {
  /* pan-y og ikke bare pinch-zoom: `pinch-zoom` alene forbyr nettleseren å
     rulle, så en finger som startet på hovedbildet sto fast, og man måtte
     flytte den utenfor bildet for å komme videre nedover (Morten, 11. sep).
     Loddrett rulling går nå som ellers på siden; sidelengs sveip er fortsatt
     sveipekoden sin, som leser touchend selv og ikke trenger nettleserens
     panorering. */
  .gallery-main img {
    touch-action: pan-y pinch-zoom;
  }

  /* Swipe-indikator dots */
  .gallery-dots {
    display: flex; justify-content: center; gap: 6px;
    padding: 10px 0 4px;
  }
  .gallery-dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: #ddd; transition: background .2s;
  }
  .gallery-dot.active { background: var(--ink); }
}

@media (min-width: 769px) {
  .gallery-dots { display: none; }
}

/* PRODUKT HERO */
.produkt-hero {
  /* svh og ikke vh: 100vh er skjermen UTEN adresselinja, altsaa hoeyere enn
     det som faktisk vises. Heroen er bunnforankret, saa navn, pris og knapp
     havnet under folden — og gled opp i syne foerst naar iOS trakk inn
     linja ved foerste scroll. svh er den synlige hoeyden og staar stille.
     dvh ville fulgt linja opp og ned og gitt reflow midt i scrollet; det er
     riktig for story-panelet lenger nede, som ikke ruller, men galt her.
     vh staar igjen foerst som reserve for eldre nettlesere. */
  /* minus baandet: staar tickeren paa, er den synlige hoeyden mindre. */
  position: relative; width: 100vw; height: calc(100vh - var(--ticker-h, 0px)); height: calc(100svh - var(--ticker-h, 0px));
  background-size: cover; background-position: center;
  background-image: var(--hero-bilde);
  display: flex; align-items: flex-end;
}
/* Over mobilbredde er flaten bredere enn 1800-avledningen dekker på retina,
   og den ble blåst opp og kornete. Se lag_banner() i api/images.py. */
@media (min-width: 769px) {
  .produkt-hero { background-image: var(--hero-bilde-stor); }
  /* Eget PC-bilde: forankringen inline er målt på det stående mobilbildet og
     treffer ikke her. Et bilde laget for PC er komponert for å stå sentrert. */
  .produkt-hero--pc-bilde { background-position: center !important; }
}
/* Stående hero, altså høyere enn bred (satt av filteret er_staende). Et
   3:4-bilde i en flate på 1440 × 810 viser bare ~40 % av høyden. Sentrert ble
   det jakka uten hode (Balaclava Pink, 15. september). Forankret 8 % fra
   toppen kommer ansikt og skuldre med. På mobil er flaten smalere enn 3:4, så
   hele høyden vises uansett, og verdien gjør ingenting der. Liggende heroer
   står sentrert som før, fordi motivet ikke alltid står øverst på dem.
   Templaten overstyrer 8 % inline med hero_forankring (templating.py), som
   måler hvor motivet begynner. Balaclava White sitter på huk og trenger 36 %.
   Regelen her gjelder bare når bildet ikke kan leses. */
.produkt-hero--staende { background-position: center 8%; }
/* Lys topp (er_lys_topp): menyen er mørk der (#mainNav.lys-topp), så
   mørketonen øverst har ingen jobb å gjøre. Den gjorde bare det hvite
   grått, og mørk logo på grått leses dårligere enn på hvitt. Bunntonen står,
   for navn og pris er fortsatt hvit tekst. */
.produkt-hero--lys-topp .produkt-hero-overlay {
  background: linear-gradient(to bottom, rgba(0,0,0,0) 45%, rgba(0,0,0,.7) 100%);
}
/* Én gradient, ingen vignett. Begge endene gjør lesbarhetsarbeid, ikke dekor:
   nederst står navn/pris/CTA — hvit tekst måler 1.2–3.6:1 mot bildene uten scrim.
   Øverst står den hvite nav-logoen — 11 av 14 hero-bilder ga 1.03:1 der.
   Den gamle topptonen på .1 var for svak; .45 løfter logoen til ~3.5:1. */
.produkt-hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom,
    rgba(0,0,0,.45) 0%, rgba(0,0,0,0) 14%,
    rgba(0,0,0,0) 45%, rgba(0,0,0,.7) 100%);
}
.produkt-hero-content {
  position: relative; z-index: 2;
  padding: 0 56px 64px;
  animation: fadeup .9s .3s both ease;
}
.produkt-hero-brand {
  font-size: var(--t-micro); letter-spacing: .4em; text-transform: uppercase;
  color: var(--ice); margin-bottom: 12px;
}
.produkt-hero-name {
  font-family: 'Cormorant Garamond', serif;
  font-size: var(--d-hero);
  font-weight: 300; color: #fff; line-height: 1; margin-bottom: 12px;
}
.produkt-hero-price {
  font-size: var(--t-lead); color: rgba(255,255,255,.8);
  letter-spacing: .05em;
}
.produkt-hero-scroll {
  position: absolute; right: 48px; bottom: 60px; z-index: 2;
  writing-mode: vertical-rl; font-size: var(--t-micro); letter-spacing: .3em;
  text-transform: uppercase; color: rgba(255,255,255,.5);
  display: flex; align-items: center; gap: 12px;
}
.produkt-hero-scroll::after {
  content: ''; display: block; width: 1px; height: 50px;
  background: rgba(255,255,255,.35);
  animation: scrollline 2s ease-in-out infinite;
}
.has-hero .product-wrap {
  position: relative; z-index: 2;
  background: var(--flate);
  margin-top: -40px;
  border-radius: 20px 20px 0 0;
  box-shadow: 0 -8px 40px rgba(0,0,0,.15);
  padding-top: 48px;
}
@media (max-width: 768px) {
  .produkt-hero-content { padding: 0 24px 48px; }
  .produkt-hero-scroll { display: none; }
}

/* COMING SOON */
.coming-soon-wrap { margin: 24px 0; }
.coming-soon-label {
  font-size: var(--t-fin); letter-spacing: .3em; text-transform: uppercase;
  color: var(--soft); margin-bottom: 20px;
}
.countdown {
  display: flex; gap: 16px; margin-bottom: 16px;
}
.countdown-item {
  text-align: center; min-width: 60px;
  background: var(--ink); color: #fff;
  padding: 12px 8px;
}
.countdown-item span {
  font-family: 'Cormorant Garamond', serif;
  font-size: var(--t-h2); font-weight: 300; display: block; line-height: 1;
}
.countdown-item p {
  font-size: var(--t-micro); letter-spacing: .2em; text-transform: uppercase;
  color: rgba(255,255,255,.5); margin-top: 4px;
}
.waitlist-form { display: flex; gap: 0; margin-top: 20px; }
.waitlist-form input {
  flex: 1; padding: 14px 16px; border: 1px solid var(--hair);
  background: #fff; font-family: 'Montserrat', sans-serif;
  font-size: var(--t-brod); outline: none;
}
.waitlist-form input:focus { border-color: var(--ink); }
.waitlist-form button {
  padding: 14px 24px; background: var(--ink); color: #fff;
  border: none; font-family: 'Montserrat', sans-serif;
  font-size: var(--t-micro); letter-spacing: .2em; text-transform: uppercase;
  cursor: pointer; white-space: nowrap;
}
.waitlist-form button:hover { background: #333; }
.waitlist-ok {
  font-size: var(--t-liten); color: #2e7d32; margin-top: 12px;
  letter-spacing: .1em;
}
.waitlist-feil {
  font-size: var(--t-liten); color: #b3261e; margin-top: 12px;
  letter-spacing: .1em;
}
.waitlist-vilkar {
  font-size: var(--t-micro); line-height: 1.6; color: var(--muted, #8a8378);
  margin-top: 10px;
}
.waitlist-vilkar a { color: inherit; text-decoration: underline; }

.utsolgt-varsel {
  margin-top: 24px; padding: 22px 20px;
  background: var(--flate); border: 1px solid var(--hair);
}
.utsolgt-tittel {
  font-size: var(--t-micro); letter-spacing: .2em; text-transform: uppercase;
  margin: 0 0 6px;
}
.utsolgt-tekst { font-size: var(--t-liten); color: var(--soft); margin: 0; line-height: 1.6; }
.utsolgt-varsel .waitlist-form { margin-top: 14px; }

@media (max-width: 768px) {
  .countdown { gap: 8px; }
  .countdown-item { min-width: 48px; padding: 10px 6px; }
  .countdown-item span { font-size: var(--t-h4); }
  .countdown-item p { font-size: var(--t-micro); }
  .waitlist-form { flex-direction: column; }
  .waitlist-form input { width: 100%; }
  .waitlist-form button { width: 100%; padding: 14px; }
}

/* HISTORIE — utdrag på siden, hele teksten i modal.
   Utdraget står på flategrønt etter skissen fra 10. september, samme grønne som
   båndet over menyen. Hvit tekst på --gronn-dyp er 11.25:1, etiketten på .7
   hvit er 6.4:1. Skissen har en rød pil i lenka; her står pinnen fra
   klodemerket i stedet — samme røde pin som skiller leddene i båndet over
   menyen, på samme grønne. Rødt på --gronn-dyp er 2.19:1, men kravet om 3:1
   gjelder ikke: teksten bærer lenka og pinnen er pynt. Rødt mot mørkegrønt er
   likevel paret fargeblinde ikke skiller, så pinnen skal aldri bære mening
   alene. Morten valgte rød pin 11. september, etter hvit pil 10. september. */
.story-teaser {
  margin: 36px 0 8px;
  padding: 36px 34px;
  background: var(--gronn-dyp); color: #fff;
}
.story-eyebrow {
  font-size: var(--t-micro); letter-spacing: .3em; text-transform: uppercase;
  color: var(--soft); margin-bottom: 14px;
}
/* .story-eyebrow brukes også i modalen, som er hvit — derfor avgrenset. */
.story-teaser .story-eyebrow { color: rgba(255,255,255,.7); }
.story-excerpt {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: var(--t-lead); font-weight: 300; line-height: 1.65;
  color: #fff; margin-bottom: 18px;
}
.story-open {
  display: inline-flex; align-items: center; gap: 9px;
  background: none; border: none; padding: 0; cursor: pointer;
  font-family: inherit; font-size: var(--t-fin); letter-spacing: .22em;
  text-transform: uppercase; color: #fff;
  border-bottom: 1.5px solid #fff; padding-bottom: 3px;
}
/* Den globale fokusringen er --ink, og den er 1.9:1 mot grønnen — usynlig. */
.story-open:focus-visible { outline-color: #fff; outline-offset: 4px; }
/* Pinnen løfter seg på hover i stedet for å skli til høyre, som pilen gjorde —
   en pin som glir sidelengs ser ut som en pil som har mistet formen.
   pin-rod-ikon.png er ui/originaler/pin-rod.png beskåret tett; originalen har 65 % luft i
   bredden og ville gitt en pin på 5 px her. Båndet over menyen bruker samme fil. */
.story-pin {
  height: 16px; width: auto; flex: none;
  transition: transform .2s ease;
}
.story-open:hover .story-pin { transform: translateY(-3px); }

.story-modal {
  display: none; position: fixed; inset: 0; z-index: 1001;
  background: rgba(17,17,17,.72);
  align-items: center; justify-content: center; padding: 40px 24px;
}
.story-modal.active { display: flex; }
.story-panel {
  position: relative;
  background: var(--flate);
  width: 100%; max-width: 720px; max-height: 86vh;
  display: flex; flex-direction: column;
  overflow: hidden;
  animation: storyfade .25s ease;
}
/* Panelet ruller ikke — det gjoer dette laget. Ellers ville krysset, som er
   absolutt plassert mot panelet, rulle bort sammen med teksten. */
.story-scroll {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 64px 72px 72px;
}
@keyframes storyfade { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:none; } }
.story-close {
  position: absolute; top: 14px; right: 20px; z-index: 2;
  /* 44px er tommelmaal. Bakgrunnen i kremfarge er ikke pynt: teksten ruller
     naa under krysset, og uten den blir glyfen uleselig over broedteksten. */
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--flate); border: none; padding: 0;
  font-size: var(--t-h3); line-height: 1; cursor: pointer;
  color: var(--soft); opacity: .7;
}
.story-close:hover { opacity: 1; }
.story-heading {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: var(--t-h2); font-weight: 300; line-height: 1.15;
  color: var(--ink); margin-bottom: 36px;
}

/* Brødteksten er Montserrat — Cormorant er vakker, men historiene er lange
   nok til at lesbarhet slår eleganse her. Overskriftene bærer serifen. */
.story-body p {
  font-size: var(--t-liten); line-height: 1.95; color: #3a3a3a;
  margin-bottom: 20px;
}
.story-body h3 {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: var(--t-h3); font-weight: 300; color: var(--ink);
  margin: 44px 0 16px;
}
.story-body > h3:first-child { margin-top: 0; }
.story-body ul { list-style: none; margin: 0 0 22px; padding: 0; }
.story-body li {
  font-size: var(--t-liten); line-height: 1.9; color: #3a3a3a;
  padding: 14px 0; border-bottom: 1px solid var(--hair);
}
.story-body li:first-child { border-top: 1px solid var(--hair); }
.story-body strong {
  font-weight: 600; color: var(--ink);
  letter-spacing: .04em;
}

@media (max-width: 768px) {
  .story-modal { padding: 0; }
  .story-panel {
    max-width: none; max-height: none;
    /* 100vh regner med at adresselinja er borte, saa bunnen av panelet havner
       under nettleserlinja paa iOS. dvh foelger den synlige hoeyden; vh staar
       igjen som reserve for eldre nettlesere. */
    height: 100vh; height: 100dvh;
  }
  .story-scroll { padding: 56px 26px 48px; }
  .story-heading { font-size: var(--t-h3); margin-bottom: 28px; }
  .story-body h3 { font-size: var(--t-h4); margin: 34px 0 14px; }
  .story-teaser { padding: 28px 24px; }
}

/* Seksjonsskille i historien — «---» på egen linje i PIM */
.story-body .story-rule {
  border: none; border-top: 1px solid var(--hair);
  width: 56px; margin: 40px 0;
}
.story-body em { font-style: italic; }

/* Anmeldelser, sist i trekkspillet. Stjernene er tegn, se produkt.html. */
.anmeldelse { padding: 14px 0; border-bottom: 1px solid var(--hair); }
.anmeldelse:first-child { padding-top: 0; }
.accordion-body-inner .anmeldelse-stjerner { margin: 0 0 6px; letter-spacing: .1em; color: var(--ink); }
/* Kunden skriver avsnitt med linjeskift; uten pre-line blir de én klump. */
.accordion-body-inner .anmeldelse-tekst { margin: 0 0 6px; white-space: pre-line; }
.accordion-body-inner .anmeldelse-kilde { margin: 0; font-size: var(--t-fin); color: var(--soft); }
.anmeldelse-dato { margin-left: 8px; }
.accordion-body-inner .anmeldelse-kontroll { margin: 14px 0 0; font-size: var(--t-fin); color: var(--soft); }

/* Brødsmuler over produktnavnet, til kategorisida plagget hører til. Samme
   uttrykk som på kategorisidene (kolleksjon.css). */
.product-info .brodsmuler { font-size: var(--t-fin); color: var(--soft); letter-spacing: .1em; margin-bottom: 16px; }
.product-info .brodsmuler a { color: inherit; }

/* MOBIL: KJØPET FØRST
   Heroen sto i full skjermhøyde over galleriet, og kjøpsknappen havnet 1 800 px
   ned, 2,2 skjermhøyder (målt 12.10 på 390 × 844). Med kapselbanneret oppå
   viste første skjerm verken navn, pris eller knapp. På mobil går sida derfor
   rett til galleriet. Heroen står på PC, der kjøpet nås på 1,5 skjerm. */
@media (max-width: 768px) {
  .produkt-hero { display: none; }
  /* Menyen er fast og ligger over toppen av sida: båndet (--ticker-h) og
     menylinja på 68 px. */
  .product-wrap,
  .has-hero .product-wrap {
    margin-top: 0; border-radius: 0; box-shadow: none;
    padding-top: calc(var(--ticker-h, 0px) + 68px);
  }
  /* Brødsmulene skjøv navn og pris ned under folden. BreadcrumbList i
     JSON-LD står uansett, så søkemotorene mister ingenting. */
  .product-info .brodsmuler { display: none; }
  /* Miniatyrene er skjult: på telefon sveiper man, og prikkene sier hvor
     mange bilder det er. Stripa tok 64 px som skjøv prisen inn under
     kjøperaden. Elementene står i DOM-en, for sveipekoden teller på dem. */
  .gallery-thumbs { display: none; }
  .product-info { padding-top: 14px; }
  .product-brand { margin-bottom: 6px; }
  .product-subtitle { margin-bottom: 10px; }
  .product-price { margin-bottom: 0; }
  .product-info .divider { margin: 20px 0; }
}

/* KJØPERADEN */
.kjoprad { display: none; }
@media (max-width: 768px) {
  /* Plass til raden under det siste på sida, også over hjemlinja. */
  body.har-kjoprad { padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }
  .kjoprad {
    display: flex; align-items: center; gap: 14px;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 150;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
    background: var(--flate); border-top: 1px solid var(--hair);
    transform: translateY(110%); transition: transform .25s ease;
  }
  .kjoprad.synlig { transform: none; }
  /* Kapselbanneret står nederst og er et valg kunden skal ta. Raden venter
     til det er gjort, i stedet for å legge seg oppå eller under. */
  body:has(#wsk) .kjoprad { transform: translateY(110%); }
  .kjoprad-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
  .kjoprad-navn {
    font-family: 'Cormorant Garamond', serif; font-size: var(--t-brod); font-weight: 300;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .kjoprad-pris { font-size: var(--t-fin); letter-spacing: .03em; color: var(--soft); }
  .kjoprad-knapp {
    flex: none; padding: 15px 18px; min-width: 170px;
    background: var(--ink); color: #fff; border: none;
    font-family: 'Montserrat', sans-serif; font-size: var(--t-micro);
    letter-spacing: .2em; text-transform: uppercase; cursor: pointer;
  }
}

/* STØRRELSESARKET — fra bunnen på mobil, midt på skjermen over det. */
.str-ark { position: fixed; inset: 0; z-index: 180; }
.str-ark[hidden] { display: none; }
.str-ark-bakgrunn {
  position: absolute; inset: 0; background: rgba(0,0,0,.4);
  opacity: 0; transition: opacity .25s;
}
.str-ark.apen .str-ark-bakgrunn { opacity: 1; }
.str-ark-panel {
  position: absolute; left: 50%; top: 50%;
  width: min(440px, calc(100vw - 32px)); max-height: 80vh; overflow-y: auto;
  background: var(--flate); padding: 22px 24px 26px;
  transform: translate(-50%, -46%); opacity: 0;
  transition: transform .25s ease, opacity .25s ease;
}
.str-ark.apen .str-ark-panel { transform: translate(-50%, -50%); opacity: 1; }
.str-ark-topp { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.str-ark-tittel { font-size: var(--t-micro); letter-spacing: .3em; text-transform: uppercase; color: var(--soft); }
.str-ark-lukk {
  width: 44px; height: 44px; margin: -10px -12px -10px 0;
  background: none; border: none; font-size: var(--t-h3); line-height: 1;
  color: var(--soft); cursor: pointer;
}
.str-ark-valg { display: flex; flex-direction: column; }
/* 56 px høye rader: tommelmål med god margin, og plass til navnet og tallet
   på én linje. */
.str-ark-rad {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 56px; padding: 0 4px; width: 100%;
  background: none; border: none; border-bottom: 1px solid var(--hair);
  font-family: 'Montserrat', sans-serif; color: var(--ink); cursor: pointer; text-align: left;
}
.str-ark-rad:first-child { border-top: 1px solid var(--hair); }
.str-ark-rad:hover, .str-ark-rad:focus-visible { background: #fff; }
.str-ark-navn { display: flex; align-items: baseline; gap: 10px; }
.str-ark-rad.utsolgt .str-ark-navn { opacity: .45; }
.str-ark-status { font-size: var(--t-micro); letter-spacing: .12em; text-transform: uppercase; color: var(--soft); }
@media (max-width: 768px) {
  .str-ark-panel {
    left: 0; right: 0; top: auto; bottom: 0; width: auto; max-height: 85vh; max-height: 85dvh;
    padding: 18px 16px calc(20px + env(safe-area-inset-bottom, 0px));
    transform: translateY(100%); opacity: 1;
  }
  .str-ark.apen .str-ark-panel { transform: none; }
}


/* Størrelsesarket: modellinja og guidelenka under radene. */
.str-ark-fot { margin-top: 14px; }
.str-ark .str-guide-lenke { margin-bottom: 0; }
/* Størrelsesguiden: skuff fra høyre, samme mål og overgang som kurvskuffen
   (main.css). Hode og lukkeknapp låner kurvens klasser, så de to skuffene
   ser like ut. Bredere enn kurven fordi målskjemaet har opptil seks
   kolonner. */
.guide-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.4);
  z-index: 200; opacity: 0; pointer-events: none; transition: opacity .3s;
}
.guide-overlay.active { opacity: 1; pointer-events: all; }
.guide-skuff {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: 560px; max-width: 100vw;
  background: var(--flate); z-index: 201;
  transform: translateX(100%); transition: transform .35s ease;
  display: flex; flex-direction: column;
}
.guide-skuff.active { transform: none; }
.guide-kropp {
  flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: 24px 28px calc(28px + env(safe-area-inset-bottom, 0px));
}
.guide-plagg {
  font-family: 'Cormorant Garamond', serif; font-size: var(--t-lead); font-weight: 300;
  margin: 0 0 14px;
}
.guide-kropp .str-passform, .guide-kropp .str-modell { margin-bottom: 14px; }
.guide-kropp .size-guide-eget { margin-top: 8px; }
@media (max-width: 768px) {
  .guide-kropp { padding: 20px 20px calc(28px + env(safe-area-inset-bottom, 0px)); }
}