/* ---------- tokens ---------- */
:root{
  /* Mörk bas, ljusa element. Grunden är djup kall granit; korten och
     panelerna ligger som ljusa tryck på en mörk vägg.

     Knepet som gör det hanterbart: de ljusa ytorna DEFINIERAR OM samma
     tokens lokalt (se "ljusa ytor" längre ned). All text, alla linjer och
     till och med knappen vänder då automatiskt inuti dem — vi slipper
     dubbla uppsättningar klasser. */
  /* LJUS BAS. Mörkt är ett smalt register: det gör natt, snö och expedition
     bra och gör vingårdar och sommarhav dåligt. Grunden är dagsljus med
     värmen som en antydan, inte som en beige ton, så att snö får vara vit.
     Det cinematiska bor kvar i fotona, som ligger i mörka helbreddsband. */
  --stone:#F7F6F3; --paper:#FFFFFF; --fill:#EFEDE8;
  --line:#DBD8D1; --line-soft:#EAE8E2;
  --ink:#1C1F1B; --ink-2:#484C45; --ink-3:#797E76;
  --accent:#1C1F1B; --accent-hi:#000000; --on-accent:#FFFFFF;
  /* --sun bär information, inte dekoration: säsongens bästa läge och
     formulärets felläge. På ljus grund är den mossgrön. */
  --sun:#5F8A4C; --sun-ink:#4E7540; --on-sun:#FFFFFF;
  --sky-a:#EDEBE6; --sky-b:#F9F8F5;
  --ridge-far:#C8C5BC; --ridge-near:#6C7067; --water:#D6D9D2;
  /* kanter i stället för skuggor — blocken bär sig själva */
  --lift:none;
  --lift-hi:none;
  --r:0px;
  color-scheme:light;
}

/* ---------- ljusa ytor ----------
   Allt inuti en ljus yta får omdefinierade tokens och vänder därmed
   själv: text, hjälptext, linjer och knapp. */
/* De här ytorna vände förr tokens till ljust mitt i mörkret. Nu är sidan
   redan ljus, så de behöver bara vara en vitare platta mot den. Blocket
   står kvar i stället för att raderas: det håller ihop vilka ytor som är
   "upphöjda", och det är den distinktionen resten av filen bygger på. */
.card,.step,.season,.split,.boka-in,.ondemand,.cta,.tavla,.fragor,.samtycke{
  --paper:#FFFFFF; --fill:#F6F5F2;
  color:var(--ink);
  background-color:#FFFFFF;
}

/* ---------- grund ---------- */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  /* Ljuskällan uppe till vänster ger ytan en riktning. Utan den är sidan en
     platt färgplatta, och det var det som lästes som kallt. */
  margin:0;background:
    radial-gradient(130% 85% at 16% -6%, #FFFFFF 0%, #F8F7F4 40%, #F1EFEA 100%) fixed;color:var(--ink);
  font-family:'Familjen Grotesk',system-ui,-apple-system,sans-serif;
  font-size:16.5px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
h1,h2,h3,h4{margin:0;font-weight:400;text-wrap:balance}
/* Displayen tar plats: vikt 500 ur variabelfonten, tight satt, optisk storlek på */
.d{font-family:'Newsreader',Georgia,serif;font-weight:500;letter-spacing:-.03em;line-height:1.04;font-optical-sizing:auto}
::selection{background:var(--accent);color:var(--on-accent)}
.mono{font-family:'Geist Mono',ui-monospace,Menlo,monospace;font-variant-numeric:tabular-nums}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
canvas{display:block}

.wrap{
  max-width:1180px;margin:0 auto;
  padding-left:max(32px,env(safe-area-inset-left));
  padding-right:max(32px,env(safe-area-inset-right));
}
@media(max-width:640px){
  .wrap{padding-left:max(20px,env(safe-area-inset-left));padding-right:max(20px,env(safe-area-inset-right))}
}

/* EN rytm: sektioner varvar grund och fyllnad, inget annat skiljer dem åt */
.sec{padding:124px 0}
.sec.alt{background:var(--fill)}
@media(max-width:640px){.sec{padding:76px 0}}
/* rubrikblocket öppnar med en hårlinje och en rubrik som tar plats */
.sec-head{display:flex;align-items:flex-end;gap:40px;flex-wrap:wrap;margin-bottom:52px;
  border-top:1px solid var(--line);padding-top:30px}
.sec-head h2{font-size:clamp(34px,4.8vw,60px);max-width:19ch;line-height:1.02}
.lede{margin:16px 0 0;color:var(--ink-2);max-width:50ch;font-size:17px;line-height:1.6}
/* Inget hängande indrag. Ingressen ligger i samma block som rubriken och
   ska linjera med den — indraget var tänkt för när ingressen står i egen
   spalt bredvid rubriken, men så ser ingen sektion ut på sajten. Skavde två
   gånger innan det togs bort. */

/* ---------- rörelse ----------
   Startlägena (dolt, förskjutet) gäller BARA när skript är på och rörelse
   tillåten — utan JavaScript är allt innehåll synligt från första bild. */
.rv{transition:opacity .8s cubic-bezier(.18,.9,.22,1),transform .8s cubic-bezier(.18,.9,.22,1)}
.rv.in{opacity:1;transform:none}
@media (scripting: enabled) and (prefers-reduced-motion: no-preference){
  .rv:not(.in){opacity:0;transform:translateY(34px)}
  .card:not(.in){opacity:0;transform:translateY(34px)}
  .card:not(.in) .card-art img{clip-path:inset(0 0 100% 0)}
  .hero:not(.go) h1 .ln i{transform:translateY(105%)}
  .hero:not(.go) .hero-tag,.hero:not(.go) .hero-lede,.hero:not(.go) .hero-cta{opacity:0;transform:translateY(22px)}
}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .rv{opacity:1;transform:none;transition:none}
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

/* ---------- ovanpå foto ----------
   En bild är mörk, alltså är texten på den ljus, oavsett att sidan runt
   omkring är ljus. Det är läsbarhet, inte smak, och det är enda stället där
   den gamla mörka uppsättningen lever kvar. */
.hero,.band,.butik-topp,.kvittotopp,.resa-bild,.nav:not(.solid){
  --ink:#FFFFFF; --ink-2:#E6E9E4; --ink-3:#BFC4BD;
  --accent:#FFFFFF; --accent-hi:#FFFFFF; --on-accent:#1C1F1B;
  --line:rgba(255,255,255,.34); --line-soft:rgba(255,255,255,.2);
  color:#FFFFFF;
}
.hero .btn:not(.btn-ghost),.band .btn:not(.btn-ghost){background:#FFF;color:#1C1F1B}
.hero .btn-ghost,.band .btn-ghost{color:#FFF;border-color:rgba(255,255,255,.5)}

/* ---------- nav ---------- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:60;
  border-bottom:1px solid transparent;
  transition:background .45s ease,border-color .45s ease;
}
/* Slöjan bakom menyn. Filmen byter ljushet hela tiden, så menyn kan inte
   förlita sig på att bakgrunden råkar vara mörk. Den ligger under innehållet
   och försvinner när navet ändå blir solitt vid scroll. */
.nav::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(20,24,27,.72),rgba(20,24,27,0));
  height:150%;transition:opacity .45s ease;
}
.nav.solid::before{opacity:0}
.nav-in{position:relative}
/* Skuggan behövs bara medan menyn ligger över bilden. Blir navet solitt mot
   den ljusa sidan ser en mörk textskugga bara smutsig ut. */
.nav-links a:not(.btn){text-shadow:0 1px 12px rgba(0,0,0,.55)}
.mark{text-shadow:0 1px 12px rgba(0,0,0,.55)}
.nav.solid .nav-links a:not(.btn),.nav.solid .mark{text-shadow:none;color:var(--ink-2)}
.nav.solid .mark{color:var(--ink)}
.nav.solid .nav-links .btn{color:var(--ink);border-color:var(--line)}
.nav.solid{
  background:color-mix(in srgb,var(--stone) 94%,transparent);
  -webkit-backdrop-filter:blur(16px) saturate(1.4);backdrop-filter:blur(16px) saturate(1.4);
  border-bottom-color:var(--line-soft);
}
.nav-in{display:flex;align-items:center;gap:34px;height:74px}
.mark{display:inline-flex;align-items:center;gap:12px;text-decoration:none;white-space:nowrap;color:var(--ink)}
.mark .icon{width:86px;height:25px;flex:none}
.mark .word{font-family:'Newsreader',Georgia,serif;font-size:19px;letter-spacing:.07em;text-transform:uppercase;line-height:1}
@media(max-width:400px){.mark .icon{width:66px;height:19px}.mark .word{font-size:16px}}
.nav-links{display:flex;gap:28px;margin-left:auto;align-items:center}
/* Väljaren står tätt intill knappen, inte 28 px ut i tomma intet. */
.nav-links .sprak{margin-left:-16px}
.nav-links a{text-decoration:none;font-size:15px;color:var(--ink-2);position:relative;transition:color .25s}
.nav-links a:not(.btn)::after{
  content:"";position:absolute;left:0;right:0;bottom:-5px;height:1px;background:currentColor;
  transform:scaleX(0);transform-origin:left;transition:transform .35s cubic-bezier(.16,.8,.3,1);
}
@media (hover:hover){
  .nav-links a:not(.btn):hover{color:var(--ink)}
  .nav-links a:not(.btn):hover::after{transform:scaleX(1)}
}
@media(max-width:920px){.nav-links a:not(.btn){display:none}}
@media(max-width:420px){.nav-links .btn{display:none}}

/* Knappen är ljus mot mörk grund — ingen kulör alls. Grönt, sand, granit och
   koppar har alla underkänts i tur och ordning; slutsatsen är att svaret inte
   är en bättre accentfärg utan ingen. Ljusstyrkan får bära handlingen. */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:13px 26px;font-size:15px;font-weight:500;letter-spacing:.01em;
  background:var(--accent);color:var(--on-accent);text-decoration:none;
  transition:background .25s,color .25s;white-space:nowrap;
}
@media (hover:hover){.btn:hover{background:var(--accent-hi)}}
.btn:active{background:var(--accent-hi)}
.btn-ghost{background:transparent;color:var(--ink);box-shadow:none;border:1px solid var(--line);font-weight:400}
/* I navet: kontur i radens skala, inte ett ljust block som skriker */
.nav-links .btn{
  background:transparent;color:var(--ink);border:1px solid rgba(237,240,242,.42);
  padding:9px 18px;font-size:14px;font-weight:400;
}
@media (hover:hover){.nav-links .btn:hover{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}}
.nav.solid .nav-links .btn{border-color:var(--line)}
@media (hover:hover){.btn-ghost:hover{background:transparent;border-color:var(--ink);color:var(--ink)}}

/* hamburgare */
.burger{display:none;width:44px;height:44px;margin-right:-10px;position:relative;flex:none}
.burger span{
  position:absolute;left:12px;width:20px;height:1.5px;background:var(--ink);border-radius:2px;
  transition:transform .4s cubic-bezier(.2,.9,.25,1);
}
.burger span:nth-child(1){top:19px}
.burger span:nth-child(2){top:25px}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(3px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){transform:translateY(-3px) rotate(-45deg)}
@media(max-width:920px){.burger{display:block}}
.mobilemenu{
  position:fixed;inset:0;z-index:55;background:var(--stone);
  padding:calc(88px + env(safe-area-inset-top)) max(20px,env(safe-area-inset-left))
          calc(48px + env(safe-area-inset-bottom));
  display:flex;flex-direction:column;gap:2px;opacity:0;pointer-events:none;transition:opacity .3s ease;
  /* Sidan bakom är låst medan menyn är öppen, så menyn måste kunna skrolla
     själv. Annars går det som med språkväljaren: det som hamnar under
     skärmkanten gick varken att se eller trycka på.
     overscroll-behavior hindrar att svepet läcker ut till sidan bakom. */
  overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
}
.mobilemenu.open{opacity:1;pointer-events:auto}
.mobilemenu a{
  font-family:'Newsreader',serif;font-weight:500;font-size:27px;letter-spacing:-.02em;text-decoration:none;
  padding:15px 0;border-bottom:1px solid var(--line-soft);opacity:0;transform:translateY(22px);
}
.mobilemenu.open a{opacity:1;transform:none;transition:opacity .5s cubic-bezier(.16,.8,.3,1),transform .5s cubic-bezier(.16,.8,.3,1)}
.mobilemenu.open a:nth-child(1){transition-delay:.06s}
.mobilemenu.open a:nth-child(2){transition-delay:.11s}
.mobilemenu.open a:nth-child(3){transition-delay:.16s}
.mobilemenu.open a:nth-child(4){transition-delay:.21s}
.mobilemenu.open a:nth-child(5){transition-delay:.26s}
.mobilemenu .btn{
  margin-top:28px;align-self:flex-start;font-size:16px;padding:14px 28px;border-bottom:none;
  font-family:'Familjen Grotesk',sans-serif;letter-spacing:0;transition-delay:.31s;
}
@media (prefers-reduced-motion: reduce){.mobilemenu a{opacity:1;transform:none}}

/* ---------- hjälte ---------- */
.hero{position:relative;min-height:min(84svh,780px);display:flex;align-items:flex-end;overflow:hidden}
@supports not (height:100svh){.hero{min-height:min(84vh,780px)}}
.hero-art{position:absolute;inset:-6% 0 0;will-change:transform}
.hero-art img{width:100%;height:106%;object-fit:cover;object-position:center 42%}

/* ---------- rörlig hjältebild ----------
   Filmen är ett LAGER ovanpå stillbilden, inte en ersättning för den. Den
   ligger osynlig tills sajt.js sagt till, så en sida utan JavaScript, med
   reduced-motion eller på sparsamt dataläge ser exakt likadan ut som förut.
   Toningen är lång med flit: ett hårt byte läser som att sidan laddar om. */
.hjaltefilm{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center 42%;
  opacity:0;pointer-events:none;
}
.hjaltefilm.spelar{opacity:1}
/* Resesidans bild är beskuren på mitten, inte som hjälten */
.resa-bild .hjaltefilm{object-position:center}
@media (prefers-reduced-motion: reduce){.hjaltefilm{display:none}}
/* Texten ligger på fotot, så mörkret måste vara i bilden — inte i temat.
   Samma slöja i ljust och mörkt läge, annars blir rubriken oläslig. */
.hero-veil{
  position:absolute;inset:0;
  background:
    linear-gradient(180deg, rgba(20,24,27,.34) 0%, rgba(20,24,27,.04) 26%,
                    rgba(20,24,27,.62) 66%, rgba(20,24,27,.9) 100%),
    linear-gradient(90deg, rgba(20,24,27,.34) 0%, transparent 58%);
}
.hero-in{color:var(--ink);position:relative;z-index:3;padding-top:120px;padding-bottom:72px}
.hero h1{color:var(--ink);text-shadow:0 2px 34px rgba(0,0,0,.34)}
.hero-lede{color:var(--ink-2)}
.hero .btn-ghost{color:var(--ink);border-color:var(--line)}
@media (hover:hover){.hero .btn-ghost:hover{background:transparent;border-color:var(--ink)}}
.hero h1{font-size:clamp(46px,7.2vw,96px);max-width:12ch;line-height:.96}
.hero h1 .ln{display:block;overflow:hidden}
.hero h1 .ln i{display:block;font-style:normal;transition:transform 1.05s cubic-bezier(.16,.85,.28,1)}
.hero h1 .ln:nth-child(2) i{transition-delay:.1s}
/* ---------- märkesraden ----------
   Varumärkeslinjen har EN visuell identitet på hela sajten: mono, versaler,
   spärrad, med ett kort streck framför. Den ska se likadan ut i hjälten, i
   avsluten och i sidfoten — därför bor stilen här och inte hos hjälten.
   Färgen ärvs, så raden vänder av sig själv inuti de ljusa ytorna. */
.marke{
  display:flex;align-items:center;gap:14px;
  font-family:'Geist Mono',ui-monospace,Menlo,monospace;
  font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink);margin:0;
}
.marke::before{content:"";flex:none;width:34px;height:2px;background:var(--ink)}
@media (max-width:520px){.marke{font-size:10.5px;letter-spacing:.16em;gap:10px}
  .marke::before{width:24px}}
@media (max-width:412px){.marke{font-size:9.5px;letter-spacing:.1em;gap:8px}
  .marke::before{width:18px}}

/* Hjältens variant: står över fotot och behöver därför skugga, plus egen
   luft och infällning. Liten text över foto har ingen egen massa och
   försvinner mot snö utan två skuggor. */
.hero-tag{
  margin-bottom:22px;
  text-shadow:0 1px 3px rgba(0,0,0,.92),0 2px 26px rgba(0,0,0,.85);
  transition:opacity .9s cubic-bezier(.16,.8,.3,1) .22s,transform .9s cubic-bezier(.16,.8,.3,1) .22s;
}
@media (max-width:520px){.hero-tag{font-size:10.5px;letter-spacing:.16em;gap:10px}
  .hero-tag::before{width:24px}}
/* Raden är 32 tecken och får inte brytas — vid 390 px låg sista punkten i
   kanten och på 360 px hade den klippts. Krymp hellre spärrningen. */
@media (max-width:412px){.hero-tag{font-size:9.5px;letter-spacing:.1em;gap:8px}
  .hero-tag::before{width:18px}}

.hero-lede{
  font-size:clamp(17px,1.7vw,20px);max-width:44ch;margin:26px 0 0;
  transition:opacity .9s cubic-bezier(.16,.8,.3,1) .34s,transform .9s cubic-bezier(.16,.8,.3,1) .34s;
}
.hero-cta{
  display:flex;gap:12px;flex-wrap:wrap;margin-top:34px;
  transition:opacity .9s cubic-bezier(.16,.8,.3,1) .46s,transform .9s cubic-bezier(.16,.8,.3,1) .46s;
}
@media (orientation:landscape) and (max-height:600px){
  .hero{min-height:auto}
  .hero-in{padding:calc(104px + env(safe-area-inset-top)) 0 48px}
}

/* ---------- löftesraden ---------- */
.loften{border-bottom:1px solid var(--line-soft);background:var(--stone)}
.loften-in{
  display:grid;grid-template-columns:repeat(4,1fr);gap:40px;
  padding-top:52px;padding-bottom:52px;
}
@media(max-width:880px){.loften-in{grid-template-columns:repeat(2,1fr);gap:32px 28px}}
@media(max-width:460px){.loften-in{grid-template-columns:1fr;gap:24px}}
/* Tre fält i stället för fyra: raderna är längre och behöver bredden.
   Bryter direkt till en spalt — två av tre lämnar en ensam luffare. */
.loften.tre .loften-in{grid-template-columns:repeat(3,1fr);gap:52px}
@media(max-width:880px){.loften.tre .loften-in{grid-template-columns:1fr;gap:28px}}
.loften-in div{display:flex;flex-direction:column;gap:8px;border-left:1px solid var(--line);padding-left:22px}
.loften-in b{font-size:clamp(26px,2.6vw,36px);color:var(--accent);line-height:1.06;font-weight:500}
.loften.tre .loften-in span{max-width:34ch;font-size:15px}
.loften-in span{font-size:14px;color:var(--ink-2);line-height:1.5;max-width:26ch}

/* ---------- levande stillbilder ----------
   Långsam zoom (Ken Burns) och drivande dimma. Ger rörelse utan att
   ladda ner en enda megabyte video, och stängs av vid reducerad rörelse. */
@keyframes kenburns{
  from{transform:scale(1.02) translate3d(0,0,0)}
  to{transform:scale(1.12) translate3d(0,-1.8%,0)}
}
.hero-art img{animation:kenburns 34s ease-out forwards}
.band img{animation:kenburns 40s ease-out forwards;animation-play-state:paused}
.band.in img{animation-play-state:running}
@media (prefers-reduced-motion: reduce){
  .hero-art img,.band img{animation:none}
}

/* ---------- helbleed-band ---------- */
.band{
  position:relative;min-height:min(64svh,520px);display:flex;align-items:flex-end;
  overflow:hidden;isolation:isolate;
}
.band.rv{opacity:1;transform:none;transition:none}
/* object-position sätts PER BAND i markupen, inte här: bilderna har motivet på
   olika höjd och en gemensam regel gör fel på minst en av dem. Se band() i
   sajt.py, som mätt var innehållet ligger i varje bild. */
/* Utsnittet kommer som variabler från band(): --u för alla bredder, --um
   tar över på mobil när bandet skickat ett. En smal skärm visar en smal
   vertikal skiva av en liggande bild, och samma mittpunkt som på desktop
   kan då kapa motivet helt. */
.band img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;
  object-position:var(--u,center 78%)}
@media(max-width:640px){.band img{object-position:var(--um,var(--u,center 78%))}}
.band::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg, rgba(20,24,27,.18) 0%, rgba(20,24,27,.06) 34%,
                             rgba(20,24,27,.86) 100%);
}
.band-in{padding-bottom:56px;color:var(--ink)}
.band-in p{
  font-size:clamp(32px,5vw,64px);margin:0;max-width:17ch;line-height:1.02;
}
.band-in span{
  display:block;margin-top:16px;max-width:44ch;font-size:16.5px;
  color:var(--ink-2);
}
.band-bild{
  position:absolute;right:max(32px,env(safe-area-inset-right));bottom:22px;z-index:1;
  font-family:'Newsreader',serif;font-style:italic;font-size:14px;
  color:var(--ink-3);
}
@media(max-width:720px){.band-bild{display:none}}
@media(max-width:640px){.band{min-height:min(56svh,420px)}.band-in{padding-bottom:38px}}

/* ---------- stegen ---------- */
/* Stegen står som ett sammanfogat block — fyra ytor, 1px mörk fog emellan. */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;margin-bottom:52px;align-items:stretch}
@media(max-width:860px){.steps{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.steps{grid-template-columns:1fr}}
.step{
  background:var(--paper);border:none;text-decoration:none;
  padding:28px 26px 24px;display:flex;flex-direction:column;gap:10px;text-align:left;
  transition:filter .25s;
}
@media (hover:hover){.step:hover{filter:brightness(1.05)}}

.step .rail{display:flex;gap:4px}
.step .rail i{height:3px;flex:1;background:var(--line)}
.step .rail i.on{background:var(--accent)}
.step:nth-child(4) .rail i.on{background:var(--ink)}
.step h3{font-family:'Newsreader',serif;font-weight:500;font-size:23px;letter-spacing:-.02em}
.step p{margin:0;font-size:14.5px;color:var(--ink-2);line-height:1.5}
.step .n{margin-top:auto;padding-top:12px;font-size:13.5px;color:var(--ink-3)}

/* ---------- filter ---------- */
.filters{display:flex;flex-direction:column;gap:16px;margin-bottom:36px}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{
  padding:9px 16px;font-size:13.5px;min-height:40px;letter-spacing:.02em;
  color:var(--ink-2);background:transparent;border:1px solid var(--line);
  transition:color .25s,border-color .25s,background .25s;
}
@media (hover:hover){.chip:hover{color:var(--ink);border-color:var(--ink-3)}}
.chip[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.fbar{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.count{font-size:15px;color:var(--ink-2)}
.count b{color:var(--ink);font-weight:500}
.reset{font-size:14.5px;color:var(--ink-2);text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--line)}
@media (hover:hover){.reset:hover{color:var(--ink);text-decoration-color:currentColor}}
.selects{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}
.sortsel{
  background:transparent;border:1px solid var(--line);color:var(--ink);
  padding:10px 14px;font-size:14.5px;border-radius:0;cursor:pointer;min-height:40px;
}
@media(max-width:640px){.selects{margin-left:0;width:100%}.sortsel{flex:1;min-width:0}}

/* ---------- resekort ---------- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:46px 34px}
.card{
  text-align:left;display:flex;flex-direction:column;gap:14px;width:100%;text-decoration:none;
  transition:opacity .8s cubic-bezier(.18,.9,.22,1),transform .8s cubic-bezier(.18,.9,.22,1);
}
.card.in{opacity:1;transform:none}
.card-art{
  position:relative;aspect-ratio:4/3;overflow:hidden;border-radius:0;
  background:var(--fill);
}

/* Ett uppslag först, som i en tidning — inte femton likadana rutor. */
.card.stor{grid-column:span 2;gap:20px}
.card.stor .card-art{aspect-ratio:16/9}
.card.stor .card-title{font-size:clamp(32px,3.6vw,46px)}
.card.stor .card-note{font-size:16.5px;max-width:52ch}
.card.stor .card-body{gap:10px}
@media(max-width:719px){.card.stor{grid-column:span 1}.card.stor .card-art{aspect-ratio:4/3}}
.card-art img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform 1.1s cubic-bezier(.16,.8,.3,1);
}
@media (hover:hover){
  .card:hover .card-art img{transform:scale(1.045)}
}
.card-tag{
  position:absolute;top:0;left:0;font-size:11.5px;letter-spacing:.12em;
  text-transform:uppercase;padding:8px 14px;
  background:#0E1215;color:#F2F5F7;
}
.card-body{display:flex;flex-direction:column;gap:8px;flex:1}
.card-where{display:block;font-size:13.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3)}
.card-title{display:block;font-family:'Newsreader',serif;font-weight:500;font-size:27px;letter-spacing:-.025em;line-height:1.1}
.card-note{display:block;color:var(--ink-2);font-size:15px}
.card-foot{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:auto;padding-top:14px;
  border-top:1px solid var(--line-soft);font-size:14.5px;color:var(--ink-2);
}
.card-foot .price{margin-left:auto;color:var(--ink);font-size:16px}
.tempo{display:inline-flex;align-items:center;gap:9px;font-size:14px;color:var(--ink-2)}
.tempo .dots{display:inline-flex;gap:3px}
.tempo s{text-decoration:none;width:6px;height:6px;background:var(--line);display:block}
.tempo s.on{background:var(--accent)}
.tempo.t4 s.on{background:var(--ink)}

/* ---------- på beställning ---------- */
.ondemand{
  margin-top:64px;background:var(--paper);
  display:grid;grid-template-columns:1fr 1fr;overflow:hidden;
}
@media(max-width:860px){.ondemand{grid-template-columns:1fr}}
.ondemand-txt{padding:44px 44px 40px}
@media(max-width:640px){.ondemand-txt{padding:32px 24px}}
.ondemand h2{font-size:clamp(30px,3.8vw,44px)}
.ondemand-steg{list-style:none;padding:0;margin:24px 0 0;display:flex;flex-direction:column;gap:14px;counter-reset:od}
.ondemand-steg li{display:flex;gap:14px;font-size:15.5px;color:var(--ink-2);counter-increment:od}
.ondemand-steg li::before{
  content:counter(od);flex:none;width:24px;height:24px;
  background:var(--fill);color:var(--ink);font-family:'Geist Mono',monospace;font-size:12px;
  display:grid;place-items:center;
}
.od-form{
  padding:44px;background:var(--fill);display:flex;flex-direction:column;gap:18px;justify-content:center;
}
@media(max-width:640px){.od-form{padding:32px 24px}}
.od-field{display:flex;flex-direction:column;gap:7px}
.od-field label{font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.od-field input,.od-field select,.od-field textarea{
  background:var(--paper);border:1px solid var(--line);color:var(--ink);
  padding:13px 16px;font:inherit;font-size:15.5px;border-radius:0;width:100%;
  transition:border-color .25s,box-shadow .25s;
}
.od-field textarea{resize:vertical;min-height:78px}
/* iOS zoomar automatiskt in HELA sidan när ett fält under 16 px får fokus.
   Det ser ut som att layouten exploderar. 16px är gränsen, inte en smaksak. */
@media(max-width:820px){
  .od-field input,.od-field select,.od-field textarea,.boka-antal select{font-size:16px}
}
.od-field input:focus,.od-field select:focus,.od-field textarea:focus{
  outline:none;border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 12%,transparent);
}
.od-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.od-form .btn{margin-top:6px;align-self:flex-start}

/* ---------- säsong ---------- */
.legend{display:flex;gap:20px;flex-wrap:wrap;font-size:14.5px;color:var(--ink-2);margin-left:auto;margin-bottom:4px}
.legend span{display:inline-flex;align-items:center;gap:9px}
.legend i{width:22px;height:8px;display:block}
.legend i.go{background:color-mix(in srgb,var(--accent) 30%,transparent)}
.legend i.peak{background:var(--sun)}
.season{
  background:var(--paper);
  overflow-x:auto;-webkit-overflow-scrolling:touch;padding:6px 0;
}
.season table{border-collapse:collapse;width:100%;min-width:800px}
.season th,.season td{padding:0;text-align:center}
.season thead th{
  font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);
  padding:20px 0 16px;font-weight:400;border-bottom:1px solid var(--line-soft);
}
.season thead th:first-child{
  text-align:left;padding-left:26px;width:260px;
  position:sticky;left:0;z-index:3;background:var(--paper);box-shadow:1px 0 0 var(--line-soft);
}
.season tbody td,.season tbody .rowname{border-bottom:1px solid var(--line-soft);height:46px}
.season tbody tr:last-child td,.season tbody tr:last-child .rowname{border-bottom:none}
.rowname{
  text-align:left;padding-left:26px;font-size:15.5px;white-space:nowrap;font-weight:400;
  position:sticky;left:0;z-index:2;background:var(--paper);box-shadow:1px 0 0 var(--line-soft);
}
.rowname a{text-decoration:none}
@media (hover:hover){.rowname a:hover{text-decoration:underline;text-underline-offset:3px}}
.rowname small{display:block;font-size:12.5px;color:var(--ink-3);letter-spacing:.06em;text-transform:uppercase;margin-top:2px}
@media (hover:hover){
  .season tbody tr:hover td{background:var(--fill)}
  .season tbody tr:hover .rowname{background:var(--fill)}
}
.cell{
  display:block;height:8px;margin:0 6px;background:var(--line-soft);
  transform:scaleX(.25);opacity:0;
  transition:transform .6s cubic-bezier(.16,.8,.3,1),opacity .6s;
}
.season.in .cell{transform:none;opacity:1}
.cell.on{background:color-mix(in srgb,var(--accent) 30%,transparent)}
.cell.on.peak{background:var(--sun);height:10px}
@media(max-width:720px){
  .season thead th:first-child,.rowname{width:170px;padding-left:18px}
  .rowname{font-size:14.5px;white-space:normal;line-height:1.3}
  .season table{min-width:640px}
}

/* ---------- om oss: toppen ---------- */
/* Rubriken till vänster, hela manifestet till höger — EN rad där båda
   halvorna bär. Rubriken i full bredd med manifestet i egen rad under gav
   två rader som var och en lämnade halva skärmen tom. 7/5 med rubriken i
   den breda spalten: en displayrubrik tål att brytas, brödtexten behöver
   sin radlängd i den smala. */
.topp-delad{display:grid;gap:clamp(30px,5vw,76px);align-items:start}
@media(min-width:940px){
  .topp-delad{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
  /* En halv radhöjd ner: högerspalten linjerar med rubrikens x-höjd i
     stället för med versalöverkanten, som fick spalterna att se fellinjerade
     ut fast de satt på exakt samma kant. */
  .manifest-spalt{padding-top:14px}
}
/* Den bärande meningen sätts påtagligt större, inte 3,5 px större. Ärvd
   .lede.stor låg på 20 px mot brödtextens 16,5 och läste då som samma text
   i två stycken — ingen hierarki alls. Brutal skalkontrast utan
   mellanregister är hela den riktning Filip satte. */
.manifest-spalt .lede.stor{margin:0;max-width:24ch;color:var(--ink);
  font-size:clamp(21px,2.4vw,29px);line-height:1.24;letter-spacing:-.015em}
.manifest-txt{margin-top:clamp(20px,2.4vw,30px)}
.manifest-txt p{margin:0 0 18px;color:var(--ink-2);font-size:16.5px;line-height:1.68;max-width:52ch}
.manifest-txt p:last-child{margin-bottom:0}

/* ---------- om oss: personen ---------- */
/* Guidrutnätet nedan är byggt för FLERA och Stay Wild har en person. Ett
   auto-fit-rutnät med ett kort i lämnar två tomma spalter bredvid, och
   förskjutningsregeln som ska bryta upp raden gör då ingenting alls.
   Det här blocket är byggt för en: påståendet till vänster, personen som är
   beviset för det till höger. */
/* Rubriken till vänster, texten till höger. Måtten är 5/7 och inte 7/5:
   spalten som bär BRÖDTEXT ska ha radlängden, och en display-rubrik bryter
   hellre tidigt än sent. */
.person{display:grid;gap:clamp(30px,5vw,72px);align-items:start}
/* Texten till vänster får radlängden, uppgifterna till höger tar bara den
   bredd de behöver. 7/5 och inte 6/6: ett dataregister lika brett som
   brödtexten läser som en andra textspalt. */
@media(min-width:880px){.person{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}}
.sec-head .role{font-family:'Geist Mono',monospace;font-size:12px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-2);display:block;margin-bottom:14px}
/* Ingen egen toppmarginal när registret ligger direkt i spalten: .person-kort
   har redan sitt hårstreck och sin luft, och de två tillsammans blev ett tomt
   gap mellan strecket och första raden. */
.person-kort .vem-kontakt{border-top:0;margin-top:0}
/* ---------- om oss: kontakten ---------- */
/* Som en avläsning, samma grammatik som resornas dataregister: etikett i mono,
   värdet i brödtextgrad, hårstreck mellan raderna. Tre rader i stället för en
   lös rad länkar — det gör dem läsbara som uppgifter i stället för som en
   fotnot. Står sist i spalten om vad vi gör: först vad du kan boka, sedan hur
   du når fram. */
.vem-kontakt{margin:clamp(28px,3.4vw,38px) 0 0;display:grid;gap:0;
  border-top:1px solid var(--line)}
.vem-kontakt > div{display:grid;grid-template-columns:96px minmax(0,1fr);gap:20px;
  padding:14px 0;border-bottom:1px solid var(--line-soft);align-items:baseline}
.vem-kontakt dt{font-family:'Geist Mono',monospace;font-size:11px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--ink-2)}
.vem-kontakt dd{margin:0;font-size:16px;line-height:1.5}
.vem-kontakt a{text-decoration:underline;text-underline-offset:5px;
  text-decoration-color:var(--line);transition:text-decoration-color .3s}
@media (hover:hover){.vem-kontakt a:hover{text-decoration-color:currentColor}}
@media(max-width:520px){
  .vem-kontakt > div{grid-template-columns:1fr;gap:4px}
}
.person-kort{border-top:2px solid var(--ink);padding-top:24px}
.person-kort p{margin:0 0 14px;color:var(--ink-2);font-size:15.5px;line-height:1.65}
.person-kort p:last-child{margin-bottom:0}
/* Vägarna vidare. Två länkar under texten, inte en knapp: sidan har redan sin
   uppmaning längst ner, och två knappar i samma vy tävlar om samma klick.
   .lank följer sajtens befintliga textlänk (se .filter-lank): understruken med
   linjefärg, som mörknar på hover. Att hitta på en egen stil för en länk som
   redan finns är hur en sajt slutar se ut som en sajt. */
.lank{text-decoration:underline;text-underline-offset:5px;
  text-decoration-color:var(--line);transition:text-decoration-color .3s}
@media (hover:hover){.lank:hover{text-decoration-color:currentColor}}
.person-lankar{display:flex;gap:24px;flex-wrap:wrap;margin-top:22px}
.person-lankar .lank{font-size:15px;color:var(--ink)}

/* ---------- om oss: löftena ---------- */
/* Rader i full bredd, inte .trust-rutnätet. Den formen används redan på
   /sa-gar-det-till/, och samma uppställning två gånger gör att sidorna läser
   som varandras kopior. Rader läser dessutom som en hållning man går igenom,
   inte som fyra likvärdiga rutor — och fyra rutor i ett auto-fit-rutnät blev
   dessutom 3+1 med två tomma platser på andra raden. */
/* ---------- guider ---------- */
.guides{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:40px}
/* Förskjutning så raden inte läser som en tabell över personal. */
@media(min-width:1040px){
  .guides > :nth-child(even){margin-top:52px}
  .guides > :nth-child(4n+3){margin-top:26px}
}
.guide{display:flex;flex-direction:column;gap:13px}
.gpic{
  width:100%;aspect-ratio:4/3;border-radius:var(--r);background:var(--fill);
  display:grid;place-items:center;border:1px solid var(--line-soft);
  transition:background .35s;
}
.gpic span{
  font-size:clamp(52px,7vw,76px);line-height:1;color:var(--accent);
  opacity:.5;transition:opacity .35s,transform .5s cubic-bezier(.16,.8,.3,1);
}
@media (hover:hover){.guide:hover .gpic{background:var(--paper)}.guide:hover .gpic span{opacity:.8;transform:translateY(-3px)}}
.guide h2{font-family:'Newsreader',serif;font-weight:500;font-size:24px;letter-spacing:-.02em}
.guide .role{font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
.guide p{margin:0;font-size:15.5px;line-height:1.6;color:var(--ink-2)}

/* ---------- klubben ---------- */
.split{
  display:grid;grid-template-columns:1fr 1fr;align-items:stretch;background:var(--paper);
  overflow:hidden;
}
@media(max-width:860px){.split{grid-template-columns:1fr}}
.split-txt{padding:56px 52px;display:flex;flex-direction:column;justify-content:center}
@media(max-width:640px){.split-txt{padding:38px 24px}}
.split-txt h2{font-size:clamp(30px,3.8vw,46px)}
.split-list{list-style:none;padding:0;margin:26px 0 30px;display:flex;flex-direction:column;gap:12px}
.split-list li{display:flex;gap:14px;align-items:baseline;font-size:15.5px;color:var(--ink-2)}
.split-list li::before{content:"";width:16px;height:1px;background:var(--accent);flex:none;transform:translateY(-5px)}
.split-art{position:relative;min-height:340px;background:var(--fill)}
.split-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* ---------- trygghet ---------- */
/* Villkoren bredvid sin rubrik, inte under. Rubriken i egen spalt till
   vänster, de fyra punkterna 2x2 till höger — auto-fit gav 3+1 med en
   föräldralös fjärde punkt, och rubrikraden lämnade halva skärmen tom. */
.villkor{display:grid;gap:clamp(34px,5vw,84px);align-items:start}
@media(min-width:960px){.villkor{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}}
.villkor-huvud h2{font-size:clamp(34px,4.8vw,60px);max-width:15ch;line-height:1.02}
.villkor-huvud .lede{margin-top:20px}
.trust{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 44px;margin:0}
@media(max-width:600px){.trust{grid-template-columns:1fr}}
.trust dt{font-family:'Newsreader',serif;font-size:21px;letter-spacing:-.01em;margin-bottom:9px;padding-top:28px;border-top:1px solid var(--line-soft)}
.trust dd{margin:0 0 28px;font-size:15.5px;color:var(--ink-2);line-height:1.65}

/* ---------- så går det till ---------- */
.gang{
  list-style:none;padding:0;margin:0;counter-reset:g;
  display:grid;grid-template-columns:repeat(5,1fr);gap:0;
}
/* Stegen bor i samma sektion som rubriken — toppen läser som EN enhet i
   stället för rubrik, tomrum, remsa. Luften sätts här i stället för av
   sektionsbytet som låg emellan. */
.sid-topp .gang{margin-top:clamp(56px,7vw,92px)}
@media(max-width:1000px){.gang{grid-template-columns:repeat(2,1fr);gap:36px 40px}}
@media(max-width:560px){.gang{grid-template-columns:1fr;gap:30px}}
.gang li{counter-increment:g;padding:0 28px 0 0;position:relative}
.gang li::before{
  content:counter(g,decimal-leading-zero);
  display:block;font-family:'Geist Mono',monospace;font-size:12.5px;letter-spacing:.12em;
  color:var(--accent);margin-bottom:16px;padding-top:20px;border-top:2px solid var(--accent);
}
@media(min-width:1001px){
  .gang li::after{
    content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--line);z-index:-1;
  }
}
.gang h3{font-size:20px;letter-spacing:-.01em;margin-bottom:8px}
.gang p{margin:0;font-size:15px;color:var(--ink-2);line-height:1.6}

/* ---------- vanliga frågor ---------- */
/* FAQ-kortet spänner hela bredden: rubriken i vänsterspalten, frågorna i
   höger. Kortet låg förr på 760 px med skärmens högra halva död bredvid. */
.fragor{margin-top:clamp(72px,9vw,110px);padding:clamp(26px,3.5vw,46px);
  display:grid;gap:clamp(20px,3vw,64px);align-items:start}
@media(min-width:900px){.fragor{grid-template-columns:minmax(0,4fr) minmax(0,8fr)}}
@media(max-width:640px){.fragor{padding:24px 20px 18px}}
.fragor > h2{font-size:clamp(27px,2.6vw,36px);margin:0;max-width:12ch}
.fragor details{border-top:1px solid var(--line-soft)}
.fragor details:last-of-type{border-bottom:1px solid var(--line-soft)}
.fragor summary{
  padding:20px 40px 20px 0;cursor:pointer;list-style:none;position:relative;
  font-size:17px;transition:color .25s;
}
.fragor summary::-webkit-details-marker{display:none}
.fragor summary::after{
  content:"";position:absolute;right:6px;top:50%;width:11px;height:11px;
  border-right:1.5px solid var(--ink-3);border-bottom:1.5px solid var(--ink-3);
  transform:translateY(-70%) rotate(45deg);transition:transform .3s cubic-bezier(.16,.8,.3,1);
}
.fragor details[open] summary::after{transform:translateY(-25%) rotate(-135deg)}
@media (hover:hover){.fragor summary:hover{color:var(--accent)}}
.fragor details p{margin:0 0 22px;font-size:15.5px;color:var(--ink-2);line-height:1.65;max-width:62ch}

/* ---------- kontakt ---------- */
/* Tiderna direkt under ingressen. Ring-knappen som stod emellan är struken
   (Filip 2026-08-21): numret finns i ingressens uppmaning, kanalraden och
   sidfoten — knappen var en fjärde upprepning. */
.kontakt-tider{margin:20px 0 0;max-width:44ch;font-size:15.5px;color:var(--ink-2);line-height:1.6}

/* Kanalerna som en rad i full bredd, samma grammatik som fraktvillkoren i
   butiken: fogade celler, monoetikett, värdet i brödtextgrad. Registret i
   en halvtom högerspalt är borta. */
.kanalrad{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1px;
  background:var(--line-soft);border:1px solid var(--line-soft);
  margin:clamp(52px,7vw,88px) 0 0}
.kanalrad > div{background:var(--stone);padding:22px 24px}
.kanalrad dt{font-family:'Geist Mono',ui-monospace,monospace;font-size:11px;
  letter-spacing:.11em;text-transform:uppercase;color:var(--ink-2);margin-bottom:8px}
.kanalrad dd{margin:0;font-size:16.5px;line-height:1.5}
.kanalrad a{text-decoration:none;border-bottom:1px solid var(--line);padding-bottom:1px}
@media (hover:hover){.kanalrad a:hover{border-bottom-color:var(--accent);color:var(--accent)}}

/* Formuläret och fotot delar rad; fotot täcker sin spalt så båda slutar på
   samma kant. På smalt läge staplas de och fotot återgår till sin egen
   proportion. */
.kontakt{display:grid;grid-template-columns:1.15fr 1fr;gap:64px;align-items:start}
@media(max-width:820px){.kontakt{grid-template-columns:1fr;gap:40px}}
.kontakt-bild{margin:0;align-self:stretch}
.kontakt-bild img{display:block;width:100%;height:100%;object-fit:cover}
@media(max-width:820px){.kontakt-bild img{height:auto}}

/* ---------- sidfot ---------- */
/* Sidfoten ska kännas som en ankomst, inte som att sidan tar slut i mörker.
   Två grepp: en borstad silverlinje över hela bredden att landa på, och en
   mycket svag ljusning uppåt i ytan så plattan skiljer sig från sidan utan
   att bli en egen låda. Samma material som registret och bokningsrutan. */
footer{
  padding:88px 0 44px;color:var(--ink-2);position:relative;
  background:linear-gradient(180deg,#EFEDE8 0%,#EBE9E3 55%,#E7E4DE 100%);
}
footer::before{
  content:"";position:absolute;top:0;left:0;right:0;height:2px;
  /* Ljusare och tjockare: på 1 px försvann linjen nästan helt. Ändarna
     tonar ut så den inte ser ut som en kant utan som en ljusreflex. */
  background:linear-gradient(90deg,
    rgba(244,247,249,0) 0%, #7E8992 8%, #E8EDF1 26%, #FFFFFF 42%,
    #8C979F 62%, #E4EAEE 82%, rgba(244,247,249,0) 100%);
}
/* Tre block med var sin uppgift: identitet, hela sajten, kontaktuppgifter.
   Märkesspalten är bredast eftersom loggan bär den; de två andra är listor
   och behöver bara sin egen radbredd. */
.foot{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:56px;align-items:start}
@media(max-width:820px){.foot{grid-template-columns:1fr 1fr;gap:40px}}
/* På telefon staplades allt i en spalt och foten blev 800 px hög. Märket
   får hela bredden överst, de två listorna delar raden under — halva
   höjden, och de har ändå gott om plats. */
@media(max-width:520px){
  .foot{grid-template-columns:1fr 1fr;gap:34px 20px}
  /* Loggan centrerad överst som en vinjett, listorna i två spalter under. */
  .foot-brand{grid-column:1 / -1;display:flex;flex-direction:column;
    align-items:center;text-align:center;gap:4px}
  .foot-brand .marke{justify-content:center}
  .foot-brand .logo-full{margin-bottom:14px}
}
.foot-brand p{font-size:15.5px;line-height:1.6;max-width:34ch;margin:0}
.logo-full{display:block;width:200px;height:91px;color:var(--ink);margin-bottom:20px}
@media(max-width:640px){.logo-full{width:170px;height:77px}}
.foot h4{font-size:12.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3);margin:0 0 14px;font-weight:400}
.foot ul{list-style:none;padding:0;margin:0}
.foot a{text-decoration:none;font-size:15.5px;color:var(--ink-2);display:inline-block;padding:6px 0;transition:color .25s}
@media (hover:hover){.foot a:hover{color:var(--ink)}}
.foot-note{font-size:13.5px;color:var(--ink-3);margin:12px 0 0;max-width:30ch}
/* robotfälla — dold för människor, synlig för skript */
.fanga{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.formstatus{margin:4px 0 0;font-size:14.5px;color:var(--ink-2);min-height:1.4em}
.formstatus.ok{color:var(--accent)}
.formstatus.fel{color:var(--sun-ink)}
.od-form .btn[disabled]{opacity:.6;pointer-events:none}
.foot-bottom{
  margin-top:56px;padding-top:24px;border-top:1px solid var(--line-soft);
  display:flex;gap:22px;flex-wrap:wrap;align-items:baseline;font-size:13.5px;color:var(--ink-3);
}
.foot-bottom .note{margin-left:auto;text-align:right;max-width:46ch;line-height:1.55}
.foot-bottom .note a{color:var(--ink-2);text-decoration:underline;text-underline-offset:3px}
.foot-bottom > a{color:var(--ink-3);text-decoration:underline;text-underline-offset:3px;
  transition:color .25s}
@media (hover:hover){.foot-bottom > a:hover{color:var(--ink)}}
@media(max-width:820px){.foot-bottom .note{margin-left:0;text-align:left}}

/* ---------- resefakta (spec, dagar, ingår) ---------- */
/* resefakta: mörka datablock med 1px fog — siffrorna i mono, ljusa mot mörkt */
/* ---------- resans dataregister ----------
   Sex inramade rutor i en rad som rymmer fem gav en ensam luffare, och
   lådorna talade emot resten av sajten där vi tagit bort ramar överallt.
   Här är siffrorna ett REGISTER i stället: etikett över värde, åtskilda av
   hårlinjer. Tre fasta spalter i stället för auto-fit, så antalet poster
   aldrig kan lämna någon ensam — sex går jämnt upp i tre, i två och i en.
   Det här är sidans mest värdefulla innehåll; ärliga siffror är hela vår
   skillnad mot branschen och ska se ut som data, inte som en widget. */
.spec{
  /* auto-fit, inte tre fasta: silvret ligger i rutnätets egen bakgrund, så
     en tom cell blir en tom silverruta. Resesidan har sex fakta och ser
     likadan ut, varusidorna har två till fyra. */
  display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
  /* Silvret ligger i rutnätets EGEN bakgrund. Cellerna har egen mörk yta,
     så det som syns genom 1 px gap och 1 px padding är toningen — ramen och
     fogarna blir samma borstade metall som bokningsrutan, utan att något
     extra element behövs. */
  /* Silvret krävde en mörk grund för att läsa som metall. På ljus grund blir
     samma toning grådaskig, så fogarna är linjer i stället.
     Linjerna sitter på CELLERNA, inte som en bakgrund bakom rutnätet: en
     bakgrund målar även de tomma cellerna, och då blir en ojämn faktalista
     ett vitt hål i registret. */
  gap:0;padding:0;background:none;
  border-top:1px solid var(--line);border-left:1px solid var(--line);
}
.spec div{background:#FFFFFF;padding:18px 22px 20px;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.spec dt{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin-bottom:9px}
.spec dd{margin:0;font-family:'Geist Mono',monospace;font-size:21px;font-variant-numeric:tabular-nums;color:var(--ink);line-height:1}
/* Två spalter hela vägen ner. Sex poster går jämnt upp i två, så inget
   hamnar ensamt — och staplat på varandra blir registret en lista i stället
   för en tabell, vilket är hela poängen med det. */
@media(max-width:760px){
  .spec{grid-template-columns:repeat(2,1fr)}
  .spec div{padding:15px 16px 17px}
  .spec dt{font-size:10px;letter-spacing:.1em;margin-bottom:7px}
  .spec dd{font-size:18px}
}
.d-sec h2{font-size:12.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3);margin-bottom:16px;font-weight:400;font-family:'Familjen Grotesk',sans-serif}
.days{list-style:none;padding:0;margin:0}
.days li{display:flex;gap:20px;padding:13px 0;border-bottom:1px solid var(--line-soft);font-size:15.5px;color:var(--ink-2)}
.days li:last-child{border-bottom:none}
.days b{font-size:13px;color:var(--accent);flex:none;width:52px;padding-top:2px;font-weight:400;letter-spacing:.05em}
.incl{display:grid;grid-template-columns:1fr 1fr;gap:28px}
@media(max-width:520px){.incl{grid-template-columns:1fr}}
.incl ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:9px;font-size:15px;color:var(--ink-2)}
.incl li{display:flex;gap:11px}
.incl li::before{content:"+";color:var(--accent);flex:none}
.incl .no li::before{content:"–";color:var(--ink-3)}
/* ---------- säsongsremsan ----------
   Bara de månader resan går. Perioder som inte hänger ihop (vår + höst)
   ritas som skilda grupper med ett tydligt glapp, så uppehållet syns.
   Färgen bär informationen — --sun är kvar just för att den betyder något
   här — och bokstaven gör den läsbar utan att man ska behöva räkna. */
/* Obruten linje: inga glapp mellan fälten, fönstret ska läsa som ETT spann. */
.mband{display:flex;gap:0;align-items:flex-start}
.mband .mk{display:flex;flex-direction:column;gap:8px;min-width:0;flex:1}
.mband .mk i{height:5px;background:var(--line);display:block}
.mband .mk b{
  font-family:'Geist Mono',ui-monospace,monospace;font-size:12px;
  font-weight:400;text-align:center;color:var(--ink-2);letter-spacing:0;
}
/* Tre lägen i samma linje: bästa läget, går, och går inte (men ligger
   inom fönstret). Det sista är dämpat men inte borta — annars hade
   linjen brutits och fönstret slutat läsa som ett spann. */
.mband .mk.gar i{background:color-mix(in srgb,var(--accent) 40%,transparent)}
.mband .mk.mellan i{background:var(--line)}
.mband .mk.mellan b{color:var(--ink-3);opacity:.75}
.mband .mk.peak i{background:var(--sun);height:8px;margin-top:-3px}
.mband .mk.peak b{color:var(--ink)}
.mband-txt{margin-top:16px}
@media(max-width:560px){
  .mband .mk b{font-size:10.5px;letter-spacing:-.02em}
}
.mband .mk.gar i{background:color-mix(in srgb,var(--accent) 38%,transparent)}
.mband .mk.gar b{color:var(--ink-2)}
.mband .mk.peak i{background:var(--sun);height:5px;margin-top:-2px}
.mband .mk.peak b{color:var(--ink)}
.mband-txt{margin-top:14px}
/* ================= flersidigt ================= */

.hoppa{
  position:absolute;left:-9999px;top:0;z-index:200;background:var(--accent);color:var(--on-accent);
  padding:12px 20px;border-radius:0 0 var(--r) 0;text-decoration:none;
}
.hoppa:focus{left:0}

/* brödsmulor */
.smulor{padding-top:96px;font-size:14px;color:var(--ink-3)}
.smulor .wrap{display:flex;gap:10px;flex-wrap:wrap;align-items:baseline}
.smulor a{color:var(--ink-2);text-decoration:none}
@media (hover:hover){.smulor a:hover{color:var(--ink)}}
.smulor .sep{color:var(--line)}

/* sidtopp — rubriken på en undersida */
.sid-topp{padding-top:44px}
main > .sec.sid-topp:first-child{padding-top:132px}
/* med brödsmulor ovanför är navhöjden redan kompenserad — ingen dubbel luft */
.smulor + main > .sec.sid-topp:first-child{padding-top:44px}
/* 84 px var för mycket. Manifestmeningen på /om-oss/ tog 252 px höjd i tre
   rader innan ett enda ord hunnit sägas, och samma register bär kontakt,
   på beställning och så går det till — alltså fyra sidor med en banderoll i
   toppen. /resor/ hade redan sänkts separat från 90 till 52 av exakt samma
   skäl, vilket är beviset för att felet ligger i registret och inte på en
   sida. 64 px är fortfarande display och inte brödtext, men rubriken slutar
   vara det enda man ser.
   Måttet sänks samtidigt från 18ch till 16ch: en display-rad ska brytas av
   satsen, inte av spaltens ytterkant. */
.sid-topp h1{font-size:clamp(34px,5vw,64px);max-width:16ch;line-height:1.03}
.lede.stor{font-size:clamp(17px,1.8vw,20px);max-width:56ch;margin-top:20px}

/* uppmaning i botten av varje sida — leder vidare i stället för att ta slut */
.cta{
  background:var(--fill);padding:52px 56px;
  display:flex;gap:40px;align-items:center;flex-wrap:wrap;
}
@media(max-width:640px){.cta{padding:36px 26px;gap:26px}}
.cta h2{font-size:clamp(27px,3.6vw,42px);max-width:18ch}
.cta .lede{margin-top:12px}
.cta .btn{margin-left:auto;flex:none}
@media(max-width:760px){.cta .btn{margin-left:0}}

/* ---------- resesidan ---------- */
.resa-bild{position:relative;height:min(66svh,600px);overflow:hidden;margin-top:-1px}
.resa-bild img{width:100%;height:100%;object-fit:cover}
.resa-bild::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(20,24,27,.22) 0%, transparent 38%,
                             rgba(20,24,27,.62) 100%);
}
@media(max-width:640px){.resa-bild{height:min(42svh,340px)}}
.resa-in{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:64px;padding-top:56px;padding-bottom:96px;align-items:start}
@media(max-width:940px){.resa-in{grid-template-columns:1fr;gap:44px}}
.resa-txt .where{
  display:block;font-size:13px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--accent);margin-bottom:14px;
}
.resa-txt h1{font-size:clamp(38px,5.6vw,70px);line-height:1;max-width:20ch}
.resa-txt .spec{margin:36px 0 44px}
.resa-txt .d-sec{margin-bottom:44px}
.resa-txt .d-sec > p{margin:0;font-size:16.5px;color:var(--ink-2);line-height:1.65;max-width:62ch}
.niva-rad{margin-bottom:12px}
.mband-txt{margin:12px 0 0;font-size:15px;color:var(--ink-2)}
.guide-liten{display:flex;gap:20px;align-items:flex-start}
.guide-liten .gpic{width:96px;aspect-ratio:1;flex:none}
.guide-liten .gpic span{font-size:38px}
.guide-liten h3{font-family:'Newsreader',serif;font-size:20px;margin:2px 0 8px;font-weight:400;letter-spacing:0;text-transform:none;color:var(--ink)}
.guide-liten p{margin:0;font-size:15.5px;color:var(--ink-2);line-height:1.6}

/* bokningsrutan följer med i sidled */
.boka{position:sticky;top:96px}
@media(max-width:940px){.boka{position:static}}
.boka-in{
  background:var(--paper);
  padding:30px 28px;display:flex;flex-direction:column;gap:14px;
}
.boka-in .p{font-family:'Geist Mono',ui-monospace,monospace;font-variant-numeric:tabular-nums;font-size:32px;letter-spacing:-.02em;line-height:1}
.boka-in .p small{
  display:block;font-family:'Familjen Grotesk',sans-serif;
  font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin-top:8px;
}
.boka-in .btn{width:100%}
.boka-not{margin:6px 0 0;font-size:13.5px;color:var(--ink-3);line-height:1.6}



/* tomt läge i listan */
.tomt{
  margin:44px 0 0;padding:48px 24px;text-align:center;background:var(--paper);
  border:1px solid var(--line-soft);border-radius:var(--r);color:var(--ink-2);
}
.tomt[hidden]{display:none}
.tomt a{color:var(--accent)}

.stor-knapp{font-size:17px;padding:16px 30px}
.kontaktform{background:transparent;padding:0;max-width:520px}
.card[hidden]{display:none}

/* ================= avgångar =================
   Registret hålls: datum och platser är DATA och sätts i mono,
   resans namn är berättelse och sätts i serif. */

/* startsidans tavla — inte en tabell utan ett besked. Närmaste avgången bär
   hela panelen: serifnamn i stort, datum och nedräkning som mono-datumrad,
   platsläget som avslut. De följande fyra står som en stillsam lista bakom
   en hårlinje, med egen rubrik. 1–2 platser kvar är sajtens bästa
   säljargument och får den inverterade chippen (samma tokens, ingen ny färg). */
.tavla{
  background:var(--paper);border:1px solid var(--line-soft);border-radius:var(--r);
  box-shadow:var(--lift);overflow:hidden;
  display:grid;grid-template-columns:1.35fr 1fr;align-items:stretch;
}
.tavla.ensam{grid-template-columns:1fr}
.avg{display:grid;text-decoration:none;transition:background .25s}
/* .avg-ned delas med resesidans lista — grunden lämnas som den var,
   mono-varianterna scope:as till tavlan */
.avg-ned{font-size:12.5px;color:var(--ink-3)}
.avg-ned:empty{display:none}
.tavla .avg-ned{font-family:'Geist Mono',ui-monospace,monospace;font-variant-numeric:tabular-nums}

/* närmaste avgången — tavlans besked */
.avg-nasta{
  display:flex;flex-direction:column;align-items:flex-start;justify-content:center;
  padding:56px 60px;min-width:0;
}
.avg-nasta .avg-dat{display:flex;gap:16px;align-items:baseline;flex-wrap:wrap}
.avg-nasta .avg-dat time{
  font-family:'Geist Mono',ui-monospace,monospace;font-size:14px;
  letter-spacing:.14em;text-transform:uppercase;font-variant-numeric:tabular-nums;
}
.avg-nasta .avg-ned{font-size:13px}
.avg-nasta .avg-namn{display:block;font-size:clamp(30px,3.2vw,44px);line-height:1.05;margin-top:18px}
.avg-nasta .avg-var{display:block;font-size:12.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);margin-top:14px}
.avg-nasta .avg-status{margin-top:32px}

/* de fyra därefter — manifestlistan */
.avg-flera{border-left:1px solid var(--line-soft);display:flex;flex-direction:column;padding-bottom:12px;min-width:0}
.avg-fler-rubrik{
  display:block;padding:26px 36px 14px;
  font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);
}
.avg-flera .avg{
  grid-template-columns:minmax(0,1fr) auto;gap:7px 16px;align-items:baseline;
  padding:17px 36px;border-top:1px solid var(--line-soft);
}
.avg-flera .avg-dat{grid-column:1;grid-row:1;display:flex;gap:12px;align-items:baseline}
.avg-flera .avg-status{grid-column:2;grid-row:1}
.avg-flera .avg-status.fa{padding:6px 9px;margin:-6px -9px -6px 0}
.avg-flera .avg-resa{grid-column:1/-1;grid-row:2}
.avg-flera .avg-dat time{
  font-family:'Geist Mono',ui-monospace,monospace;font-size:13.5px;
  font-variant-numeric:tabular-nums;letter-spacing:.02em;
}
.avg-flera .avg-ned{font-size:11px}
.avg-resa{min-width:0;display:flex;flex-direction:column;gap:3px}
.avg-flera .avg-namn{display:block;font-size:18px;line-height:1.3}
.avg-flera .avg-var{display:block;font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3)}
.avg-status{
  font-family:'Geist Mono',ui-monospace,monospace;font-size:11px;
  letter-spacing:.08em;text-transform:uppercase;font-variant-numeric:tabular-nums;
  color:var(--ink);white-space:nowrap;justify-self:end;
}
.avg-nasta .avg-status{font-size:12px}
.avg-status.fa{background:var(--accent);color:var(--on-accent);padding:8px 12px}
.avg-status.slutsald{color:var(--ink-3)}
.tavla-tom{grid-column:1/-1;margin:0;padding:36px 40px;color:var(--ink-2);font-size:15.5px}
.tavla-tom a{color:var(--accent)}
@media(max-width:960px){
  .tavla{grid-template-columns:1fr}
  .avg-nasta{padding:44px 36px}
  .avg-flera{border-left:none;border-top:1px solid var(--line-soft)}
}
@media(max-width:640px){
  .avg-nasta{padding:34px 22px 36px}
  .avg-nasta .avg-namn{margin-top:14px}
  .avg-nasta .avg-status{margin-top:26px}
  .avg-fler-rubrik{padding:20px 22px 10px}
  .avg-flera .avg{gap:6px 14px;padding:15px 22px}
  .tavla-tom{padding:28px 22px}
}

/* resekortens avgångsrad */
.card-avg{display:block;font-size:13.5px;color:var(--ink-2)}

/* resesidans lista i bokrutan */
.avg-rubrik{
  margin:6px 0 0;font-family:'Familjen Grotesk',sans-serif;font-size:12.5px;
  letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3);font-weight:400;
}
.avg-lista{list-style:none;margin:0;padding:0}
.avg-lista li{
  display:flex;align-items:baseline;gap:12px;padding:10px 0;
  border-bottom:1px solid var(--line-soft);font-size:14px;
}
.avg-lista li:last-child{border-bottom:none}
.avg-lista li[hidden]{display:none}
.avg-lista time{font-family:'Geist Mono',ui-monospace,monospace;font-variant-numeric:tabular-nums}
.avg-lista .kvar{margin-left:auto;color:var(--accent);white-space:nowrap}
.avg-lista .kvar.slutsald{color:var(--ink-3)}

/* Raden ÄR valet. Radioknappen bär semantiken (tangentbord, skärmläsare,
   ett val i taget) men ritas inte — markeringen är hela raden. */
.avg-val{display:flex;align-items:baseline;gap:12px;width:100%;cursor:pointer;
  padding:10px 12px;margin:0 -12px;transition:background-color .18s}
.avg-val input{position:absolute;opacity:0;width:0;height:0}
.avg-val:has(input:checked){background:color-mix(in srgb,var(--accent) 12%,transparent)}
.avg-val:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:-2px}
@media (hover:hover){.avg-val:not(.slut):hover{background:color-mix(in srgb,var(--accent) 7%,transparent)}}
.avg-val.slut{cursor:default;opacity:.5}
/* Bocken syns bara på den valda raden och tar ingen plats annars. */
.avg-val::before{content:"";width:7px;height:7px;border:1px solid var(--ink-3);
  border-radius:50%;flex:none;align-self:center;transition:background-color .18s,border-color .18s}
.avg-val:has(input:checked)::before{background:var(--accent);border-color:var(--accent)}
.avg-lista li{padding:0}
.avg-lista li:has(.avg-val){padding:0}

/* antal + summa i rutan: två rader i samma register som specen, inte
   ännu ett formulärfält */
.boka-antal{display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding-top:14px;border-top:1px solid var(--line-soft)}
.boka-antal label{font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.boka-antal select{background:var(--paper);border:1px solid var(--line);color:var(--ink);
  padding:8px 12px;font:inherit;font-size:15px;min-width:78px}
.boka-summa{display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  margin:0;padding-bottom:2px}
.boka-summa span{font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.boka-summa b{font-size:21px;font-weight:400;letter-spacing:-.01em}

/* ---------- kassan ----------
   Ett köp får inte trängas i en spalt på 300 px, och Stripes kassa kommer
   ljus. En vit platta mitt i en mörk panel blir en krock hur fin panelen än
   är, så arket ÄR ljust hela vägen: samma ljusa yta som korten på sajten,
   med silverkanten kvar från bokningsrutan. Då finns ingen söm att dölja
   när kassan monteras. */
.kassa{
  border:none;padding:0;max-width:560px;width:calc(100% - 40px);
  background:none;color:var(--ink);overflow:visible;max-height:92vh;
}
.kassa::backdrop{background:rgba(28,31,27,.5);backdrop-filter:blur(4px)}
.kassa-in{
  --ink:#1C1F1B; --ink-2:#484C45; --ink-3:#797E76;
  --line:#DBD8D1; --line-soft:#EAE8E2;
  --paper:#FFFFFF; --fill:#F6F5F2;
  --accent:#1C1F1B; --accent-hi:#000000; --on-accent:#FFFFFF;
  color:var(--ink);border:1px solid #D9D5CD;padding:34px 40px 32px;
  max-height:92vh;overflow-y:auto;
  /* Ingen silverram: den krävde mörk grund för att läsa som metall. Panelen
     lyfts av skuggan mot den ljusa sidan i stället. */
  background:linear-gradient(178deg,#FFFFFF 0%,#FBFAF8 100%);
  box-shadow:0 30px 80px rgba(28,31,27,.22);
}
/* Öppningen: panelen kommer underifrån, kort och utan studs. */
.kassa[open]{animation:kassaIn .3s cubic-bezier(.22,.7,.28,1)}
.kassa[open]::backdrop{animation:kassaFad .3s ease}
@keyframes kassaIn{from{opacity:0;transform:translateY(14px) scale(.985)}}
@keyframes kassaFad{from{opacity:0}}
@media (prefers-reduced-motion:reduce){
  .kassa[open],.kassa[open]::backdrop{animation:none}
}

/* Två steg, utsatta. Att veta att det finns ett steg till är hela skillnaden
   mellan att fylla i ett formulär och att veta var man är i ett köp. */
.kassa-steg{
  list-style:none;margin:0 0 22px;padding:0;display:flex;gap:22px;
  font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);
}
.kassa-steg li{display:flex;align-items:center;gap:8px}
.kassa-steg span{
  width:20px;height:20px;border:1px solid var(--line);border-radius:50%;
  display:grid;place-items:center;font-size:11px;letter-spacing:0;
}
.kassa-steg .nu{color:var(--ink)}
.kassa-steg .nu span{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}

.kassa-in .where{display:block;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.kassa-in h2{font-size:30px;margin:9px 0 0;line-height:1.08}
.kassa-x{
  position:absolute;top:12px;right:14px;width:36px;height:36px;font-size:21px;
  line-height:1;color:#1B2227;opacity:.45;z-index:2;
}
.kassa-x:hover{opacity:1}

/* Steg 1: hela kvittot. */
.kassa-kvitto{margin:24px 0 0;display:grid;gap:1px;background:var(--line-soft);border:1px solid var(--line-soft)}
.kassa-kvitto>div{background:var(--paper);display:flex;justify-content:space-between;
  align-items:baseline;gap:18px;padding:12px 16px}
.kassa-kvitto dt{color:var(--ink-2);font-size:14px}
.kassa-kvitto dd{margin:0;font-size:15px;text-align:right}
.kassa-kvitto .stor dd{font-size:22px}
.kassa-kvitto .stor dt{color:var(--ink)}
.kassa-kvitto[hidden]{display:none}

/* Steg 2: kvittot kokas ner till en rad så att kassan får plats. Man ska
   fortfarande se VAD man betalar för utan att scrolla tillbaka. */
.kassa-kort{
  margin:20px 0 0;padding:13px 16px;background:var(--fill);border:1px solid var(--line-soft);
  display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  font-size:14px;color:var(--ink-2);
}
.kassa-kort b{font-family:'Geist Mono',ui-monospace,monospace;font-size:17px;font-weight:400;color:var(--ink);white-space:nowrap}
.kassa-kort[hidden]{display:none}

.kassa-in .kassa-form{padding:24px 0 0;background:none;gap:16px}
.kassa-in .kassa-form[hidden]{display:none}
.kassa-knappar{display:flex;gap:12px;flex-wrap:wrap;margin-top:2px}
.kassa-in .kassa-form .btn{margin-top:0;align-self:auto;flex:1 1 auto}
.kassa-in .foot-note{max-width:none;margin:0}

/* Rutan Stripe målar i. Arket är redan vitt, så kassan ska smälta in och
   bara skiljas av en linje — ingen kant, ingen platta, ingen skarv. */
.stripe-ruta{margin:20px 0 0;padding:18px 0 0;border-top:1px solid var(--line-soft);
  min-height:340px;animation:kassaTon .32s ease}
.stripe-ruta[hidden]{display:none}
@keyframes kassaTon{from{opacity:0;transform:translateY(6px)}}
@media (prefers-reduced-motion:reduce){.stripe-ruta{animation:none}}

.kassa-tillbaka{
  margin:18px 0 0;padding:0;font-size:13.5px;color:var(--ink-3);
  text-decoration:underline;text-underline-offset:3px;
}
.kassa-tillbaka:hover{color:var(--ink)}
.kassa-tillbaka[hidden]{display:none}

/* ---------- kvittosidan ----------
   Resans egen bild i botten, texten ovanpå. Den som just har betalat ska se
   vart hen ska, inte en kvittoblankett. Bilden sätts av sajt.js när vi vet
   vilken resa det gäller, och tills dess är ytan bara mörk. */
.kvittotopp{position:relative;overflow:hidden;padding:118px 0 76px;isolation:isolate}
.kvittobild{
  position:absolute;inset:0;z-index:-1;background:var(--stone) center/cover no-repeat;
  opacity:0;transition:opacity .9s ease;
}
.kvittobild.pa{opacity:1}
/* Bilden bär text, alltså måste den dämpas. Två lager: ett jämnt mörker och
   en botten som går helt i svart där texten står. */
.kvittotopp::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(20,24,27,.62) 0%,rgba(20,24,27,.72) 45%,rgba(20,24,27,.94) 100%);
}
.kvitto-in{max-width:760px}
.kvitto-in .marke{margin-bottom:26px}
.kvitto-in h1{font-size:clamp(38px,6vw,66px);margin:0}
.kvitto-in .lede{margin:20px 0 0;max-width:56ch}

.nedrakning{
  margin:38px 0 0;display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;
  padding-top:26px;border-top:1px solid rgba(237,240,242,.22);
}
.nedrakning b{font-size:clamp(46px,8vw,84px);font-weight:500;letter-spacing:-.03em;line-height:1}
.nedrakning span{font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2)}
.nedrakning[hidden]{display:none}

.kvittorad{
  margin:34px 0 0;display:grid;gap:1px;background:rgba(237,240,242,.18);
  border:1px solid rgba(237,240,242,.18);max-width:520px;
}
.kvittorad>div{
  background:rgba(20,24,27,.72);display:flex;justify-content:space-between;
  align-items:baseline;gap:18px;padding:12px 16px;
}
.kvittorad dt{color:var(--ink-2);font-size:14px}
.kvittorad dd{margin:0;font-size:15px;text-align:right}
.kvittorad[hidden]{display:none}
.kvitto-prov{
  margin:18px 0 0;font-family:'Geist Mono',ui-monospace,monospace;font-size:12px;
  letter-spacing:.06em;color:var(--sun-ink);
}
.kvitto-prov[hidden]{display:none}
.kvitto-hjalp{margin:36px 0 0;font-size:14.5px;color:var(--ink-2)}
.kvitto-hjalp a{color:var(--accent)}

/* Loggan som ett sigill i nedre hörnet. Dämpad: den ska signera sidan,
   inte konkurrera med nedräkningen om blicken. */
.kvitto-sigill{
  position:absolute;right:clamp(20px,5vw,64px);bottom:clamp(24px,4vw,52px);
  display:flex;flex-direction:column;align-items:flex-end;gap:9px;
  opacity:.55;pointer-events:none;
}
.kvitto-sigill svg{width:96px;height:auto;color:var(--ink);display:block}
.kvitto-sigill span{
  font-family:'Geist Mono',ui-monospace,monospace;font-size:10.5px;
  letter-spacing:.28em;text-transform:uppercase;color:var(--ink);
}

@media(max-width:640px){
  .kvittotopp{padding:86px 0 56px}
  .nedrakning{margin-top:30px}
  /* På luren finns inget tomt hörn att signera i — sigillet ställer sig
     under innehållet i stället för att lägga sig över det. */
    /* Samma indrag som .wrap, annars hamnar loggan i en egen marginal. */
  .kvitto-sigill{position:static;align-items:flex-start;margin:44px 0 0;
    padding-left:max(32px,env(safe-area-inset-left))}
  .kvitto-sigill svg{width:78px}
}

@media(max-width:640px){
  /* På luren är panelen sidan. Halvhöga rutor med sidmarginal ser ut som
     en app som inte vet vad den vill. */
  .kassa{width:100%;max-width:none;margin:auto 0 0;max-height:92vh;overflow-y:auto}
  .kassa-in{padding:30px 22px 26px}
  .kassa-in h2{font-size:25px}
  .kassa-knappar{flex-direction:column}
  /* Namn och telefon sida vid sida blir 165 px var på en lur. Stapla. */
  .kassa-in .od-row{grid-template-columns:1fr}
}
.avg-tom{margin:4px 0 0;font-size:14px;color:var(--ink-2);line-height:1.6}
.avg-tom[hidden]{display:none}
.avg-tom a{color:var(--accent)}

/* slutsålt-tagg i säsongskartan */
.tag-slutsald{
  display:inline-block;margin-left:8px;padding:2px 9px;border:1px solid var(--line);
  font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-3);vertical-align:2px;
}

/* bilder från genomförda resor */
.galleri{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px}
.galleri img{
  width:100%;aspect-ratio:3/2;object-fit:cover;display:block;
  background:var(--fill);
}

/* ================= sidövergångar =================
   Sidorna ska kännas som en sajt, inte som separata dokument. Webbläsaren
   tonar mellan dem, medan meny och sidfot står stilla — och klickar man på
   ett resekort växer just den bilden ut till resesidans hjältebild. */
@view-transition{navigation:auto}

::view-transition-group(root){animation-duration:.42s}
::view-transition-old(root){
  animation:vt-ut .26s cubic-bezier(.4,0,1,1) both;
}
::view-transition-new(root){
  animation:vt-in .42s cubic-bezier(.16,.8,.3,1) both;
}
@keyframes vt-ut{to{opacity:0}}
@keyframes vt-in{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

/* det som står still mellan sidor */
.nav{view-transition-name:sw-nav}
footer{view-transition-name:sw-sidfot}

/* bilden som morfar mellan kort och resesida */
::view-transition-old(*),::view-transition-new(*){mix-blend-mode:normal}

@media (prefers-reduced-motion: reduce){
  @view-transition{navigation:none}
}

/* ================= detaljer =================
   Små saker som gör skillnad i handen. Allt är påbyggnad — funkar sidan
   utan JavaScript funkar den fortfarande, bara tystare. */

/* läsindikator — bara på långa sidor */
.progress{
  position:fixed;top:0;left:0;right:0;height:2px;z-index:70;
  background:var(--accent);transform:scaleX(0);transform-origin:0 50%;
  transition:transform .1s linear;pointer-events:none;
}

/* bokningsraden som fälls upp när prisrutan rullat förbi */
.bokrad{
  position:fixed;left:0;right:0;bottom:0;z-index:65;
  background:color-mix(in srgb,var(--stone) 94%,transparent);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border-top:1px solid var(--line);
  padding:12px max(20px,env(safe-area-inset-left)) calc(12px + env(safe-area-inset-bottom));
  transform:translateY(110%);transition:transform .45s cubic-bezier(.16,.85,.28,1);
}
.bokrad.upp{transform:none}
.bokrad-in{max-width:1180px;margin:0 auto;display:flex;align-items:center;gap:18px}
.bokrad .namn{font-family:'Newsreader',serif;font-size:17px;line-height:1.2;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bokrad .pris{margin-left:auto;font-size:16px;white-space:nowrap}
.bokrad .btn{flex:none;padding:11px 22px}
@media(max-width:520px){.bokrad .namn{display:none}.bokrad .pris{margin-left:0}.bokrad .btn{margin-left:auto}}

/* tillbaka upp */
.upp-knapp{
  position:fixed;right:22px;bottom:22px;z-index:64;width:46px;height:46px;
  background:var(--paper);border:1px solid var(--line);
  display:grid;place-items:center;color:var(--ink-2);
  opacity:0;transform:translateY(12px) scale(.9);pointer-events:none;
  transition:opacity .35s,transform .35s cubic-bezier(.16,.8,.3,1),color .25s;
}
.upp-knapp.syns{opacity:1;transform:none;pointer-events:auto}
@media (hover:hover){.upp-knapp:hover{color:var(--accent);border-color:var(--accent)}}
.upp-knapp svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2}
body:has(.bokrad.upp) .upp-knapp{bottom:86px}

/* rubriker som faller in ord för ord */
.ord{display:inline-block;overflow:hidden;vertical-align:top}
.ord i{
  display:inline-block;font-style:inherit;transform:translateY(100%);
  transition:transform .8s cubic-bezier(.16,.85,.28,1);
}
.ord.in i{transform:none}

/* bilder som sveper in i stället för att tona */
.card-art img{clip-path:inset(0 0 0 0)}
.card .card-art img{transition:transform 1.1s cubic-bezier(.16,.8,.3,1),clip-path .9s cubic-bezier(.16,.85,.28,1)}

/* säsongskartan: hela månadskolumnen lyser när man pekar på den */
.season td[data-m]{transition:background .2s}
.season.kol-1 td[data-m="1"],.season.kol-2 td[data-m="2"],.season.kol-3 td[data-m="3"],
.season.kol-4 td[data-m="4"],.season.kol-5 td[data-m="5"],.season.kol-6 td[data-m="6"],
.season.kol-7 td[data-m="7"],.season.kol-8 td[data-m="8"],.season.kol-9 td[data-m="9"],
.season.kol-10 td[data-m="10"],.season.kol-11 td[data-m="11"],.season.kol-12 td[data-m="12"]{
  background:color-mix(in srgb,var(--accent) 7%,transparent);
}
.season th[data-m]{transition:color .2s}
.season.kol-1 th[data-m="1"],.season.kol-2 th[data-m="2"],.season.kol-3 th[data-m="3"],
.season.kol-4 th[data-m="4"],.season.kol-5 th[data-m="5"],.season.kol-6 th[data-m="6"],
.season.kol-7 th[data-m="7"],.season.kol-8 th[data-m="8"],.season.kol-9 th[data-m="9"],
.season.kol-10 th[data-m="10"],.season.kol-11 th[data-m="11"],.season.kol-12 th[data-m="12"]{
  color:var(--accent);
}

/* kopiera-bekräftelse */
.kopiera{cursor:pointer;position:relative}
.rostat{
  position:fixed;left:50%;bottom:34px;transform:translate(-50%,16px);z-index:120;
  background:var(--ink);color:var(--stone);padding:12px 22px;
  font-size:14.5px;opacity:0;pointer-events:none;
  transition:opacity .3s,transform .35s cubic-bezier(.16,.8,.3,1);
}
.rostat.syns{opacity:1;transform:translate(-50%,0)}

/* filtret: aktiv knapp får en mjuk puls när den byts */
.chip[aria-pressed="true"]{animation:puls .4s cubic-bezier(.16,.8,.3,1)}
@keyframes puls{0%{transform:scale(.94)}60%{transform:scale(1.03)}100%{transform:scale(1)}}

@media (prefers-reduced-motion: reduce){
  .ord i{transform:none}
  .chip[aria-pressed="true"]{animation:none}
  .progress,.bokrad,.upp-knapp{transition:none}
}

/* ---------- pekskärm: träffytor ≥44 px ---------- */
@media (pointer:coarse){
  .chip{min-height:44px;padding:11px 20px}
  .sortsel{min-height:44px}
  .foot a{padding:10px 0}
  .smulor a{display:inline-block;padding:10px 0;margin:-10px 0}
}

/* endast för skärmläsare */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* ================= mörk bas, ljusa block =================
   Grunden är nästan svart granit. Ytorna ovanpå är ljusa, platta och
   hårda i kanterna — tryckta ark på en mörk vägg, inte svävande kort. */

body{
  /* Ljuset kommer uppifrån vänster. En aning varmare i toppen, svalare mot
     botten: ytan får en riktning i stället för att vara en platt platta. */
  background:
    radial-gradient(130% 85% at 16% -6%, #FFFFFF 0%, transparent 46%),
    radial-gradient(70% 45% at 92% 4%, rgba(95,138,76,.05) 0%, transparent 62%),
    linear-gradient(178deg, #FAF9F7 0%, #F5F3EF 52%, #F0EEE9 100%);
  background-attachment:fixed;
}
.sec.alt{
  background:
    radial-gradient(110% 60% at 18% 0%, rgba(255,255,255,.028) 0%, transparent 60%),
    linear-gradient(180deg, transparent 0%, var(--fill) 24%, var(--fill) 76%, transparent 100%);
}
.loften{
  background:linear-gradient(180deg, rgba(255,255,255,.03) 0%, transparent 55%, rgba(0,0,0,.16) 100%);
  border-bottom:1px solid var(--line-soft);
}
/* Här låg en mörk granitgradient på .nav.solid kvar från den mörka basen.
   Den körde över den ljusa frostade listen (definierad vid nav-blocket) i
   kaskaden — samtidigt som textfärgerna vänt till mörkt bläck. Resultatet
   var mörk text på mörk list så fort man skrollat 40 px, på ALLA sidor.
   Regeln är struken: navets solida läge ägs av nav-blocket, inte av
   texturpasset här nere. */

/* de ljusa ytorna: platta ark, ingen lutning, inga skuggor */
.card,.step,.season,.split,.boka-in,.ondemand,.cta,.tavla,.fragor{
  background-image:none;background-color:#FFFFFF;
}
/* kortets bildruta ligger inuti en ljus yta — behåll den neutral */
.card-art,.gpic{background-color:#EDEBE6;background-image:none}
/* guideporträttens initial: mörk mot den ljusa plattan, inte ton i ton */
.gpic span{color:#6C7067;opacity:1}
/* kortet är en ljus platta med hård kant: luft runt innehållet */
.card{padding:0 0 20px;overflow:hidden}
.card .card-body{padding:0 20px}
.card-art{border-radius:0;box-shadow:none}

/* avgångstavlan: raden lyser svagt när man pekar */
@media (hover:hover){
  .avg:hover{background:var(--fill)}
}

/* ---------- bokningsstegen ---------- */
/* auto-fit, inte fyra fasta: gap:1px ritar sömmar genom att bakgrunden
   lyser igenom, och en tom cell i rutnätet blir därför en tom ruta med
   ram. Med tre steg fanns en fjärde cell som ingen hade beställt. */
.bokasteg{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1px;background:var(--line-soft)}
@media(max-width:900px){.bokasteg{grid-template-columns:1fr}}
.bokasteg li{background:var(--fill);padding:34px 28px 32px}
.bokasteg span{display:block;font-size:12px;letter-spacing:.16em;color:var(--ink-3);margin-bottom:20px}
.bokasteg h3{font-size:23px;margin-bottom:10px}
.bokasteg p{margin:0;color:var(--ink-2);font-size:15px;line-height:1.6}
.boka-villkor dl{margin:20px 0 0;display:grid;gap:1px;background:var(--line)}
.boka-villkor dl>div{background:var(--paper);display:flex;justify-content:space-between;gap:18px;padding:13px 16px}
.boka-villkor dt{color:var(--ink-2);font-size:14px}
.boka-villkor dd{margin:0;font-size:14px;text-align:right}

/* Summan i bokningsformuläret. Samma register som villkoren bredvid, men
   inuti formuläret: besökaren ska se vad som dras utan att flytta blicken. */
.summa{margin:24px 0 0;display:grid;gap:1px;background:var(--line);border:1px solid var(--line)}
.summa>div{background:var(--paper);display:flex;justify-content:space-between;gap:18px;padding:13px 16px}
.summa dt{color:var(--ink-2);font-size:14px}
.summa dd{margin:0;font-size:14px;text-align:right}
.summa dd.stark{font-size:17px;color:var(--ink)}
/* Kvittoreferensen på tacksidan */
.kvitto{margin:22px 0 0;font-size:13px;color:var(--ink-3);letter-spacing:.06em}

/* ---------- platshållarmärkning ----------
   Måste synas. En skiss som läses som färdig kostar mer än en ful ruta. */
.platshallare{
  margin:28px 0 0;padding:12px 16px;border:1px dashed var(--line);
  font-family:'Geist Mono',ui-monospace,monospace;font-size:12.5px;
  letter-spacing:.04em;color:var(--ink-2);max-width:62ch;
}

/* Stående bild i beställningsblocket. Ligger som en remsa ovanför texten på
   smala skärmar och som en hög bild bredvid på breda — samma bild, två roller. */
.ondemand-bild{width:100%;height:230px;object-fit:cover;display:block;margin-bottom:26px}
@media(min-width:900px){.ondemand-bild{height:300px}}

/* Här låg en äldre .kontakt-bild-dubblett (max-width:480px, height:auto)
   som i kaskaden körde över den nya cover-regeln vid .kontakt-blocket —
   samma kvarlevesläkte som nav-buggen. Skärpeskälet den bar på håller ändå:
   spalten är ~480 px och cover-beskärningen skalar bara ~3 %. */

/* Bilden i nästa-avgången. Fyller den döda ytan i vänsterspalten och gör
   målet konkret — och den byter av sig själv när nästa avgång byter.
   Ligger överst i rutan, inte som bakgrund: texten under ska stå på den
   ljusa panelen och behålla sin kontrast oavsett hur ljus bilden är. */
/* Ingen negativ TOPPmarginal — .tavla har overflow:hidden och klipper bort
   allt som sticker upp ur panelen. Rutans toppluft tas bort i stället. */
.avg-nasta:has(.avg-bild){padding-top:0;justify-content:flex-start}
.avg-bild{display:block;overflow:hidden;align-self:stretch;margin:0 -60px 34px}
.avg-bild img{width:100%;height:212px;object-fit:cover;display:block}
@media(max-width:960px){.avg-bild{margin:0 -36px 28px}.avg-bild img{height:200px}}
@media(max-width:640px){.avg-bild{margin:0 -22px 24px}.avg-bild img{height:170px}}

/* Ingressen under "Nästa avresa." hade det hängande indraget som .sec-head
   ger alla ledes. Det är rätt när ingressen står i egen spalt bredvid
   rubriken, men här står den rakt under — och då läser indraget bara som
   feljusterat. Scopat till den här sektionen, resten av sajten rörs inte. */
.tavla-sek .sec-head .lede{margin-left:0}

/* Vägen vidare ligger sist i listan, inte som en lös knapp ovanför panelen.
   Den är en rad bland raderna — samma luft, samma hårlinje — men i mono och
   versaler så att den läser som en åtgärd och inte som en sjätte avgång. */
.avg-alla{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  text-decoration:none;color:var(--ink-2);
  font-family:'Geist Mono',ui-monospace,monospace;
  font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  padding:22px 30px;border-top:1px solid var(--line-soft);
  transition:background .25s,color .25s;
}
.avg-alla::after{content:"→";font-size:14px;letter-spacing:0}
@media (hover:hover){.avg-alla:hover{background:var(--fill);color:var(--ink)}}
@media(max-width:640px){.avg-alla{padding:20px 22px}}

/* Panelen ska sitta i sidan, inte ligga på den. En kort toning i underkanten
   löser upp den nedre kanten mot sektionens mörka grund.
   OBS färgen är hårdkodad: .tavla är en ljus yta och definierar om --fill
   lokalt, så var(--fill) här inne är den LJUSA fyllningen — inte sektionens
   bakgrund. #1B2126 är .sec.alt-bakgrunden.
   Kort och svag med flit — "Alla 15 resor" ligger i toningen och får inte
   tappa läsbarhet. */
.tavla{position:relative}
/* Ingen ram alls. Panelen är ljus mot mörk grund och behöver ingen kant för
   att synas — och en ljus ram skär av toningen precis där panelen ska
   lösas upp i bakgrunden. */
.tavla{border:none;padding-bottom:18px}
@media(max-width:640px){.tavla{padding-bottom:14px}}
.tavla::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:26px;
  /* Bara de sista pixlarna. Uppgiften ar inte att tona panelen utan att ta
     bort den harda kanten i underkanten — allt over det blir ett eget
     visuellt nummer i stallet for en detalj. */
  background:linear-gradient(180deg,
    rgba(27,33,38,0)    0%,
    rgba(27,33,38,.16) 22%,
    rgba(27,33,38,.40) 44%,
    rgba(27,33,38,.66) 64%,
    rgba(27,33,38,.86) 82%,
    rgba(27,33,38,.97) 93%,
    rgba(27,33,38,1)  100%);
  pointer-events:none;
}

/* Svaret på frågan rutorna väcker: "vilket steg är JAG på?".
   Stackad och vänsterställd som allt annat på sajten — tvåspaltsvarianten
   läste som en ny sektion i stället för som en fortsättning på stegen. */
.stegsvar{margin-top:56px;border-top:1px solid var(--line);padding-top:32px}
.stegsvar h3{font-size:clamp(23px,2.2vw,30px);margin-bottom:18px}
.stegsvar p{margin:0;color:var(--ink-2);font-size:16px;line-height:1.65}
.stegsvar p + p{margin-top:16px}
.stegsvar a{color:var(--ink);text-underline-offset:4px}
@media(max-width:640px){.stegsvar{margin-top:42px;padding-top:26px}}


/* Märkesraden i avsluten och sidfoten */
.cta .marke{margin-bottom:20px}
/* Sidfoten är sajtens tystaste register — märkesraden ska finnas där, men
   inte ta samma plats som i hjälten. Mindre grad, kortare streck. */
.foot .marke,footer .marke{margin-bottom:14px;font-size:10px;letter-spacing:.16em}
.foot .marke::before,footer .marke::before{width:24px;height:1px}



/* Märkesraden nere till höger i nästa-avgången. Den fyller den döda ytan
   under bilden och signerar sektionen — samma lockup som i hjälten, bara
   nedtonad så den inte konkurrerar med resenamnet. */
/* Full svärta. Det är ett varumärkesmärke, inte hjälptext — och eftersom
   den är liten, mono och spärrad konkurrerar den ändå inte med resenamnet.
   Den läser som en signatur. */
.avg-marke{margin-top:auto;align-self:flex-end;padding-top:36px;color:var(--ink)}
.avg-marke::before{background:var(--ink)}
@media(max-width:960px){.avg-marke{align-self:flex-start;padding-top:30px}}

/* Bred variant av rubrikblocket: ingressen får löpa över hela bredden i
   stället för att brytas på 50 tecken. Rubriken behåller sitt korta mått —
   det är brödtexten som ska gå över sidan, inte rubriken. */
.sec-head.bred > div{flex:1 1 auto;min-width:0}
.sec-head.bred .lede{max-width:none}

/* ---------- /resor/: trappan som struktur ----------
   Femton likvärdiga resor i ett rutnät blir en katalog. Grupperade efter
   steg blir de en trappa — husets bärande idé — och sidan förklarar sig
   själv innan någon rört ett filter. Allt här är scopat till .stegvis så
   startsidans rutnät är orört. */
.topp-smal{padding-bottom:0}
.topp-smal h1{font-size:clamp(32px,4vw,52px)}
.topp-smal .lede{margin-top:14px;max-width:none}

/* INGEN bakgrund och ingen sticky här. Sidan har radiella gradienter i
   botten, så en platt --stone bakom filterraden blev en synlig ljusare
   rektangel i wrap-bredden — hela sektionen såg ut att sitta i en bur.
   En sticky rad kräver en ogenomskinlig bakgrund; utan sticky behövs
   ingen, och då finns inget att se kanterna på. */
.filters{padding:6px 0 0}

.stegvis{display:flex;flex-direction:column;gap:78px}
.steggrupp[hidden]{display:none}
/* Stegets beskrivning står UNDER rubriken och löper över hela bredden.
   Tvåspaltsvarianten sköt ner texten i en egen kolumn och gjorde rubriken
   ensam till vänster — stackat läser det som ett stycke, inte som en tabell. */
.steggrupp-huvud{margin-bottom:32px;border-top:1px solid var(--line);padding-top:22px}
.steggrupp-nr{display:block;font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-3)}
.steggrupp-huvud h2{margin-top:8px;font-size:clamp(26px,3vw,38px)}
.steggrupp-huvud p{margin:14px 0 0;color:var(--ink-2);font-size:15.5px;line-height:1.6}
@media(max-width:820px){.steggrupp-huvud{margin-bottom:24px}}

/* Korten är LIKA STORA här — ingen tidningsuppslag, alla femton är
   likvärdiga och ojämna kort var precis det som läste som osammansatt. */
/* Fogen mellan korten ritas av KORTEN, inte av rutnätets bakgrund. Med
   bakgrundstekniken målas även tomma celler — på surfplatta i stående läge
   blev den ensamma resan i en tregrupp stående bredvid ett mörkt hål.
   box-shadow tar ingen plats i layouten, så grannarnas linjer möts i
   springan och blir en hårlinje. */
.steglista{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:transparent}
.steglista .card{box-shadow:0 0 0 1px var(--line-soft)}
@media(max-width:980px){
  .steglista{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:620px){.steglista{grid-template-columns:1fr}}
.steglista .card.stor{grid-column:auto}

/* ---------- /resor/: filterraden utan rutor ----------
   Ramade chips staplade under rubriken läste som en kontrollpanel. Här är
   de text med ett streck under den valda — samma funktion, ingen låda.
   Scopat till .stegvis-sidan; startsidans chips är orörda. */
.topp-smal ~ .sec .chip,
.filters .chip{
  border:none;background:transparent;padding:8px 2px;margin-right:26px;
  min-height:40px;font-size:14.5px;color:var(--ink-3);position:relative;
}
.filters .chip::after{
  content:"";position:absolute;left:0;right:0;bottom:6px;height:1px;
  background:currentColor;transform:scaleX(0);transform-origin:left;
  transition:transform .3s cubic-bezier(.16,.8,.3,1);
}
@media (hover:hover){.filters .chip:hover{color:var(--ink-2)}
  .filters .chip:hover::after{transform:scaleX(1)}}
.filters .chip[aria-pressed="true"]{background:transparent;color:var(--ink);font-weight:500}
.filters .chip[aria-pressed="true"]::after{transform:scaleX(1);height:2px;background:var(--ink)}
.filters .chips{gap:0;row-gap:2px}

/* Väljarna får samma tysta behandling: understruken text, ingen låda. */
.filters .sortsel{
  border:none;background:transparent;padding:8px 22px 8px 2px;
  color:var(--ink-2);border-bottom:1px solid var(--line);border-radius:0;
}
@media (hover:hover){.filters .sortsel:hover{color:var(--ink);border-bottom-color:var(--ink-3)}}
.filters .fbar{margin-top:14px}

/* Vägen till säsongskartan där väljarna satt. En länk, inte en kontroll —
   frågan "när är det bäst att åka" har en egen sida som svarar bättre. */
.filter-lank{margin-left:auto;font-size:14.5px;color:var(--ink-2);
  text-decoration:underline;text-underline-offset:5px;text-decoration-color:var(--line)}
@media (hover:hover){.filter-lank:hover{color:var(--ink);text-decoration-color:currentColor}}
@media(max-width:640px){.filter-lank{margin-left:0}}

/* Grupperna har tre resor. I TVÅ spalter blir den sista ensam och sidan
   lyser igenom bredvid den som ett hål — låt den ta hela raden i stället.
   Bara i det här bandet: i tre spalter går grupperna jämnt ut, och i en
   spalt finns ingen rad att fylla. Höjden styrs av .card-art:s
   aspect-ratio, så i full bredd behövs ett bredare format. */
@media(min-width:621px) and (max-width:980px){
  .steglista .card:last-child:nth-child(odd){grid-column:1 / -1}
  .steglista .card:last-child:nth-child(odd) .card-art{aspect-ratio:21/8}
}

/* En explicit display i CSS vinner över hidden-attributets display:none
   från webbläsarens standardmall — därför måste den skrivas ut. */
.fbar[hidden]{display:none}



/* "On demand" i filterraden är en LÄNK, inte ett filter — den har inget
   data-v och får därför inte heta .chip, annars plockar filtrets
   klicklyssnare upp den och sätter ett odefinierat filtervärde.
   Tyngre än de andra med flit: den är en väg vidare, inte ett urval. */
.chip-lank{
  display:inline-flex;align-items:center;min-height:40px;
  padding:8px 2px;margin-right:26px;font-size:14.5px;font-weight:600;
  color:var(--ink);text-decoration:none;position:relative;
}
.chip-lank::after{
  content:"";position:absolute;left:0;right:0;bottom:6px;height:2px;
  background:currentColor;transform:scaleX(0);transform-origin:left;
  transition:transform .3s cubic-bezier(.16,.8,.3,1);
}
@media (hover:hover){.chip-lank:hover::after{transform:scaleX(1)}}

/* ---------- mörk variant av avslutsblocket ----------
   .cta står i listan över ljusa ytor och definierar om tokens lokalt. Den
   mörka varianten måste därför sätta TILLBAKA de mörka värdena, annars
   ärver den den ljusa uppsättningen och texten blir svart på svart.
   Ramen behövs: mörkt mot mörkt syns inte utan en kant. */
.cta.mork{
  --ink:#EDF0F2; --ink-2:#A3ADB4; --ink-3:#78828A;
  --line:#333C43; --line-soft:#262E34;
  --paper:#1B2126; --fill:#222A30;
  --accent:#EDF0F2; --accent-hi:#FFFFFF; --on-accent:#14181B;
  /* Silver som MATERIAL, inte som färg. Två bakgrundslager i ett:
     padding-box bär rutans egen yta, border-box bär ramen. Ramen får en
     toning som vandrar från blank vit till mörk metall och tillbaka — så
     ser den ut som en fasad kant i stället för en ritad linje.
     Ytan är nästan sidans egen färg, bara en aning ljusare uppe till
     vänster, vilket läser som ett svagt ljusfall över metall. */
  border:1px solid transparent;
  background:
    linear-gradient(152deg,#1B2127 0%,#161B20 42%,#14181B 100%) padding-box,
    linear-gradient(138deg,#F4F7F9 0%,#AEB9C1 18%,#5B666E 44%,#8C979F 68%,#E8EDF1 100%) border-box;
  box-shadow:none;
  color:var(--ink);
}
.cta.mork h2{color:var(--ink)}
.cta.mork .lede{color:var(--ink-2)}

/* Avslutsblocket hör ihop med listan ovanför — 124 px på båda sidor gav
   nästan 250 px glapp och blocket läste som en egen sektion. */
.sec-tatt{padding-top:34px}
@media(max-width:640px){.sec-tatt{padding-top:20px}}

/* Knappen i silver — men fortfarande rutans ljusaste yta, annars slutar den
   läsa som det man ska klicka på. Toningen är vertikal och svag: borstad
   metall, inte en blank knapp. Kanten uppe ljusare än nere ger den tjocklek. */
.cta.mork .btn{
  background:linear-gradient(180deg,#FBFDFE 0%,#E4EAEE 38%,#C9D2D8 100%);
  color:#14181B;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),inset 0 -1px 0 rgba(20,24,27,.14);
}
@media (hover:hover){
  .cta.mork .btn:hover{background:linear-gradient(180deg,#FFFFFF 0%,#F1F5F7 40%,#DCE3E8 100%)}
}

/* ---------- stillastående bandbild ----------
   Bilden sitter fast mot rutan och sektionen blir ett fönster som sidan
   glider förbi. background-attachment:fixed är enda sättet utan JavaScript.

   Två undantag, båda medvetna:
   · på pekskärmar faller den tillbaka till en vanlig bakgrund — fixed är
     notoriskt hackig i iOS Safari och kostar mer än den ger där,
   · vid reducerad rörelse står den still på vanligt sätt, för den här
     effekten ÄR rörelse även om inget animeras. */
.band-fast{
  background-size:cover;background-repeat:no-repeat;
  background-attachment:fixed;background-color:var(--stone);
}
@media (hover:none),(prefers-reduced-motion:reduce){
  .band-fast{background-attachment:scroll}
}

/* Bandets text något högre upp — den satt nära nog kanten för att kännas
   fastklämd mot sektionens slut. */
.band-fast .band-in{padding-bottom:92px}
@media(max-width:640px){.band-fast .band-in{padding-bottom:64px}}

/* Chipsen radbryter till tre rader på mobil och äter halva skärmen. Där
   ersätts de av en väljare — samma urval, en rad. Bara ett av de två
   visas åt gången, så de kan aldrig säga emot varandra på skärmen. */
.aktsel{display:none}
@media(max-width:640px){
  .filters .chips{display:none}
  .aktsel{
    display:block;width:100%;appearance:none;
    border:none;border-bottom:1px solid var(--line);border-radius:0;
    background:transparent;color:var(--ink);
    font-size:16px;padding:12px 28px 12px 2px;min-height:44px;
    background-image:linear-gradient(45deg,transparent 50%,var(--ink-2) 50%),
                     linear-gradient(135deg,var(--ink-2) 50%,transparent 50%);
    background-position:calc(100% - 12px) 50%,calc(100% - 7px) 50%;
    background-size:5px 5px,5px 5px;background-repeat:no-repeat;
  }
}

/* På mobil ligger väljarens understreck och första steggruppens överlinje
   direkt efter varandra och läser som två avskärmningar. Gruppens tas bort
   — men bara den FÖRSTA, de övriga behöver sin linje för att skilja stegen
   åt. Väljarens streck stannar: det säger att den är en kontroll. */
@media(max-width:640px){
  .stegvis .steggrupp:first-child .steggrupp-huvud{border-top:none;padding-top:6px}
}

/* Väljaren satt tätt mot ingressen och läste som en del av brödtexten.
   Luft ovanför, så den blir en egen sak. */
@media(max-width:640px){.aktsel{margin-top:22px}}

/* ---------- två justeringar efter granskning ----------
   1. De inaktiva filterorden låg i --ink-3, sajtens svagaste ton. Det är
      en läsbarhetsfråga, inte en smakfråga — upp ett steg. */
/* Ett steg till: de inaktiva orden är valbara handlingar, inte hjälptext.
   Nära full styrka — det aktiva ordet skiljs ändå ut av strecket under och
   av vikten, så kontrasten behöver inte bära den skillnaden. */
/* OBS specificiteten: den tidigare regeln matchar via `.topp-smal ~ .sec
   .chip` (0,3,0) och slår en enkel `.filters .chip` (0,2,0) hur långt ned i
   filen den än står. Därför tre klasser här — annars ser man ingen skillnad
   och tror att färgen är fel vald. */
/* Hårdkodad ljusgrå. Den satt bra mot den gamla mörka grunden och blev
   nästan osynlig när sidan blev ljus. Tokens vänder med paletten, hexvärden
   gör det inte, och det är hela poängen med att ha tokens. */
.filters .chips .chip{color:var(--ink-2)}
@media (hover:hover){.filters .chips .chip:hover{color:var(--ink)}}

/* ---------- bokningsrutan i samma material som on demand-rutan ----------
   Samma teknik: två bakgrundslager i ett, padding-box bär ytan och
   border-box bär den silvertonade ramen. .boka-in står i listan över ljusa
   ytor och definierar om tokens lokalt, så de mörka värdena måste sättas
   tillbaka här — annars blir texten svart på svart. */
.boka-in{
  --ink:#EDF0F2; --ink-2:#C3CBD1; --ink-3:#9BA5AC;
  --line:#333C43; --line-soft:#262E34;
  --paper:#1B2126; --fill:#222A30;
  --accent:#EDF0F2; --accent-hi:#FFFFFF; --on-accent:#14181B;
  color:var(--ink);
  border:1px solid transparent;
  background:
    linear-gradient(152deg,#1B2127 0%,#161B20 42%,#14181B 100%) padding-box,
    linear-gradient(138deg,#F4F7F9 0%,#AEB9C1 18%,#5B666E 44%,#8C979F 68%,#E8EDF1 100%) border-box;
}
/* Knappen: samma borstade silver som i on demand-rutan, fortfarande rutans
   ljusaste yta så den läser som handlingen. */
.boka-in .btn:not(.btn-ghost){
  background:linear-gradient(180deg,#FBFDFE 0%,#E4EAEE 38%,#C9D2D8 100%);
  color:#14181B;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),inset 0 -1px 0 rgba(20,24,27,.14);
}
@media (hover:hover){
  .boka-in .btn:not(.btn-ghost):hover{background:linear-gradient(180deg,#FFFFFF 0%,#F1F5F7 40%,#DCE3E8 100%)}
}

/* ---------- en enda guide ----------
   Rutnätet byggdes för fyra kort. Med ett enda sträcks det över hela
   bredden och platshållarinitialen blir en jättekvadrat. Här står kortet
   som ett uppslag i stället: bild till vänster i rimligt format, text
   bredvid. `:only-child` gör att det slår om av sig självt om Nicole
   lägger till fler guider senare. */
.guide:only-child{
  display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);
  column-gap:40px;row-gap:14px;align-content:center;margin-top:0;
}
/* Explicit placering: bilden bär hela vänsterspalten, texten staplas i
   högerspalten. Utan det placerar grid barnen ett i taget och brödtexten
   hamnar under bilden. Kortet har tre barn: .gpic, en div med roll+namn,
   och ett stycke. */
.guide:only-child .gpic{grid-column:1;grid-row:1 / span 2;align-self:center}
.guide:only-child > div{grid-column:2;grid-row:1;align-self:end}
.guide:only-child > p{grid-column:2;grid-row:2;align-self:start}
.guide:only-child .gpic{aspect-ratio:1/1}
.guide:only-child .gpic span{font-size:clamp(44px,5vw,64px)}
.guide:only-child h2{font-size:30px}
.guide:only-child p{max-width:52ch}
@media(max-width:700px){
  .guide:only-child{grid-template-columns:1fr;gap:18px}
  .guide:only-child .gpic{aspect-ratio:4/3;max-width:280px}
}

/* Instagram i märkeskolumnen: en egen ikon med eget utrymme, inte en rad i
   länklistan. Som textlänk bland textlänkar läste den som påklistrad.
   Träffytan är 44 px trots att glyfen är 20. */
/* Instagram bor i kontaktspalten — den är en kontaktväg, inte en del av
   märket. Glyfen börjar exakt vid spaltens textkant och träffytan växer åt
   höger i stället för att hänga ut åt vänster; en negativ marginal måste
   räknas om varje gång layouten ändras och glider förr eller senare. */
.ig{
  display:inline-flex;align-items:center;justify-content:flex-start;
  width:44px;height:44px;margin:14px 0 0;color:var(--ink-3);
  transition:color .25s;
}
.ig svg{width:20px;height:20px}
@media (hover:hover){.ig:hover{color:var(--ink)}}


/* ---------- sidfotens block ---------- */
.foot-kol h4{margin-bottom:16px}
/* Länkarna har redan 6 px innerpadding för träffytan; en gap ovanpå det
   gjorde kolumnen till en pelare. Noll gap, paddingen bär avståndet. */
.foot-kol ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:0}
.foot-adress{
  margin:22px 0 0;font-size:14.5px;line-height:1.65;color:var(--ink-3);
}
/* Undertexten är sajtens tystaste rad: två uppgifter, var sin ände. */
.foot-bottom{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}
@media(max-width:520px){.foot-bottom{flex-direction:column;gap:6px}}


/* ---------- sidfoten på telefon: centrerad ----------
   Ligger sist i filen med flit. Basreglerna för .foot och .foot-bottom står
   längre upp, och media-frågor ändrar inte specificitet — en tidigare
   placerad mobilregel hade förlorat mot dem.

   SpaltPARET centreras, inte raderna inuti. Centrerad text i en länklista
   ger ojämn vänsterkant och blir svår att skanna. */
@media(max-width:520px){
  .foot{grid-template-columns:auto auto;justify-content:center;gap:34px 44px}
  .foot-brand{grid-column:1 / -1}
  /* Undertexten står kvar på EN rad med var uppgift i sin ände, även på
     telefon. Staplad hamnade organisationsnumret under bolagsnamnet och
     läste som en fortsättning på det i stället för som ett eget fält. */
  .foot-bottom{flex-direction:row;justify-content:space-between;
    align-items:baseline;gap:14px;text-align:left}
}

/* Varukort utan bildruta: vi har inga produktfoton, och en tom grå platta
   per vara ser ut som ett fel snarare än som en platshållare. */


/* ================= butiken =================
   Ingen ljus platta, inga 1 px-fogar. Bilderna står fritt på den mörka
   grunden med luft emellan, och texten ligger under dem utan ram. Plattorna
   gjorde varje vara till en ruta i ett formulär, och det var precis det som
   fick butiken att läsa som en katalog i stället för ett urval. */
/* Nedbantad 2026-08-21, Filip: "lite för stor/överdimensionerad". Butikens
   hjälte är en entré, inte en kampanj — rubriken en grad mindre och luften
   åtdragen. Måtten nedan var 130/96 och 40–74 px. */
.butik-topp{position:relative;overflow:hidden;isolation:isolate;padding:102px 0 66px}
.butik-topp-bild{
  position:absolute;inset:0;z-index:-2;background:var(--stone) center 38%/cover no-repeat;
  transform:scale(1.06);animation:butikDrift 26s ease-in-out infinite alternate;
}
/* Långsam drift i bilden. Knappt märkbar, men skillnaden mellan en levande
   yta och en tapet. */
@keyframes butikDrift{to{transform:scale(1.13) translate3d(-1.5%,-1%,0)}}
.butik-topp::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(20,24,27,.58) 0%,rgba(20,24,27,.7) 46%,rgba(20,24,27,.97) 100%);
}
.butik-topp-in{max-width:800px}
.butik-topp .marke{margin-bottom:18px}
.butik-topp h1{font-size:clamp(34px,4.8vw,54px);margin:0}
.butik-topp .lede{margin:16px 0 0;max-width:52ch}
.butik-topp .platshallare{margin-top:24px;background:rgba(20,24,27,.5)}
/* Första sektionen efter hjältebilden ska inte lägga på sin vanliga toppluft
   ovanpå bandets egna 96 px — det blev ett tomrum stort som en skärm. */
.butik-topp + .sec{padding-top:64px}
@media (prefers-reduced-motion:reduce){.butik-topp-bild{animation:none}}
@media(max-width:640px){.butik-topp{padding:72px 0 48px}}

.butik-grid{
  /* Fyra spalter på en laptop, inte tre. Med tre blev korten 349 px breda,
     och bilden är kvadratisk, så varje vara tog 349 px på höjden också.
     Rutnätet läste som en utställning i stället för en butik. */
  display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,205px),1fr));
  gap:40px 28px;
}
/* Storkortet (två spalter, två rader) är borttaget tillsammans med kortens
   brödtext: lika stora rutor med bild, namn och pris är butikens grammatik —
   urvals-rytmen läste som ett magasin. Se varukort() i sajt.py. */
.pkort{display:flex;flex-direction:column;gap:12px;text-decoration:none;color:var(--ink);height:100%}
.pkort-bild{position:relative;aspect-ratio:1;overflow:hidden;background:var(--fill);min-width:0}
.pkort-bild img{width:100%;max-width:100%;height:100%;object-fit:cover;display:block;
  transition:transform 1.1s cubic-bezier(.16,.84,.24,1),filter .5s}
@media (hover:hover){
  .pkort:hover .pkort-bild img{transform:scale(1.06)}
  .pkort:hover .pkort-in{transform:none;opacity:1}
  .pkort:hover h3{color:var(--accent-hi)}
}
/* "Se varan" glider upp underifrån vid hovring. Rör sig bara på enheter som
   faktiskt har en pekare — på en lur syns den aldrig och tar ingen plats. */
.pkort-in{
  position:absolute;left:0;right:0;bottom:0;padding:14px 18px;
  background:linear-gradient(180deg,rgba(20,24,27,0) 0%,rgba(20,24,27,.88) 100%);
  /* Fast vit, inte var(--ink): gradienten bakom är alltid mörk, men bläcket
     vände till mörkt när sajten bytte till ljus bas — mörkt på mörkt gjorde
     remsan osynlig. Kvarleva från mörka temat, samma släkte som nav-buggen. */
  color:#FFFFFF;font-family:'Geist Mono',ui-monospace,monospace;font-size:11.5px;
  letter-spacing:.16em;text-transform:uppercase;
  transform:translateY(100%);opacity:0;transition:transform .45s cubic-bezier(.2,.8,.3,1),opacity .35s;
}
@media (hover:none){.pkort-in{display:none}}
.pkort.slut .pkort-bild img{filter:grayscale(1) brightness(.6)}
.pkort-slut{
  position:absolute;left:0;top:0;padding:8px 14px;background:var(--paper);color:var(--stone);
  font-family:'Geist Mono',ui-monospace,monospace;font-size:11px;letter-spacing:.12em;text-transform:uppercase;
}
/* Namn överst, priset under — och priset FÖRANKRAT i kortets nederkant.
   Namn och pris på samma rad såg bra ut tills ett namn bröt till två rader:
   då satt priset kvar vid första raden med fortsättningen hängande under,
   och hela raden läste som knäckt (Filip: "texten sitter inte"). Rutnätet
   sträcker korten i samma rad till samma höjd, så margin-top:auto lägger
   alla priser på en gemensam linje oavsett hur namnen bryter. Grotesken och
   inte seriffen: seriffrubriker under bilderna var halva anledningen till
   att rutnätet läste som artiklar. */
.pkort-txt{display:flex;flex-direction:column;gap:7px;flex:1}
.pkort h3{font-size:16px;font-weight:500;letter-spacing:-.005em;line-height:1.3;transition:color .3s}
.pkort-pris{font-size:15px;color:var(--ink);white-space:nowrap;margin-top:auto}

/* ---------- mer ur butiken, på varusidan ----------
   På mobil sveps korten i sidled i stället för att staplas (Filip), och
   "Hela butiken" flyttar från rubrikraden till under remsan — knappen ska
   ligga efter det man svept igenom, inte före. Samma svepgrammatik som
   startsidans remsa: ingen snap (den snäppte förbi indraget), studs och
   svep-läckage avstängda, dold rullningslist, indraget som tomma flexrutor
   eftersom höger-padding i en skrollbehållare inte är att lita på. */
.vara-mer .mer-alla{display:none}
@media(max-width:640px){
  .vara-mer .sec-head .btn{display:none}
  .vara-mer .butik-grid{
    display:flex;overflow-x:auto;overflow-y:hidden;gap:18px;
    overscroll-behavior-x:none;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;padding-bottom:6px;
    margin-left:calc(-1 * max(20px, env(safe-area-inset-left)));
    margin-right:calc(-1 * max(20px, env(safe-area-inset-right)));
  }
  .vara-mer .butik-grid::-webkit-scrollbar{display:none}
  /* spacer + gap = wrappens 20 px, så första kortet linjerar med rubriken */
  .vara-mer .butik-grid::before{content:"";flex:0 0 calc(max(20px, env(safe-area-inset-left)) - 18px)}
  .vara-mer .butik-grid::after{content:"";flex:0 0 calc(max(20px, env(safe-area-inset-right)) - 18px)}
  .vara-mer .butik-grid .pkort{flex:0 0 auto;width:min(64vw,250px)}
  .vara-mer .mer-alla{display:inline-flex;margin-top:26px}
}

/* fraktvillkoren som fyra korta fakta */
.fraktrad{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1px;background:var(--line-soft);border:1px solid var(--line-soft)}
.fraktrad>div{background:var(--stone);padding:26px 24px}
.fraktrad span{display:block;font-family:'Geist Mono',ui-monospace,monospace;font-size:21px;margin-bottom:10px}
.fraktrad p{margin:0;font-size:14.5px;color:var(--ink-2);line-height:1.55}

/* ---------- en vara ---------- */
/* padding-top/bottom, ALDRIG kortformen: .vara-in sitter på samma element
   som .wrap, och `padding:40px 0 88px` nollar wrappens sidmarginal. Då bleder
   texten ut i skärmkanten på en lur. .resa-in gör redan rätt. */
.vara-in{display:grid;grid-template-columns:1fr;gap:40px;padding-top:40px;padding-bottom:88px}
@media(min-width:920px){
  .vara-in{grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);gap:72px;padding-top:56px;padding-bottom:104px;align-items:start}
  /* Köpspalten följer med i skrollet: bilden är hög, och man ska inte behöva
     rulla tillbaka för att lägga varan i korgen. */
  .vara-kolumn{position:sticky;top:104px}
}
.vara-bild{overflow:hidden;background:var(--fill)}
.vara-bild img{width:100%;height:auto;display:block;aspect-ratio:4/5;object-fit:cover}
.vara-txt .where{display:block;font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
.vara-txt h1{font-size:clamp(34px,4.6vw,54px);margin:14px 0 0}
.vara-txt .lede{margin:20px 0 0}
.vara-pris{margin:26px 0 0;font-size:30px}
.vara-frakt{margin:18px 0 0;font-size:13.5px;color:var(--ink-3)}
/* Fraktraden och "Om varan" satt ihop. Rubriken behöver egen luft för att
   läsa som en ny sektion och inte som en fortsättning på fraktvillkoren. */
.vara-txt .d-sec{margin-top:38px}
/* Faktalistan på en varusida är INTE resesidans register. Där bär siffrorna
   hela beslutet och får ta plats; här är de detaljer man läser efter att man
   bestämt sig. Alltså inga celler, ingen silverram och ingen stor typografi
   — bara etikett till vänster, värde till höger, hårfin linje emellan. */
.varufakta{margin:26px 0 0;display:block}
.varufakta>div{
  display:flex;align-items:baseline;justify-content:space-between;gap:24px;
  padding:11px 0;border-bottom:1px solid var(--line-soft);
}
.varufakta>div:first-child{border-top:1px solid var(--line-soft)}
.varufakta dt{
  font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);
  flex:none;
}
.varufakta dd{
  margin:0;font-family:'Geist Mono',ui-monospace,monospace;font-variant-numeric:tabular-nums;
  font-size:14.5px;color:var(--ink);text-align:right;
}
@media(max-width:430px){
  /* Inte staplat: "VOLYM — 45 liter" får plats på en rad även på en lur, och
     att stapla varje par gav dubbelt så hög lista utan att bli tydligare.
     Långa värden bryter i stället inom sin egen spalt. */
  .varufakta>div{gap:14px;padding:10px 0}
  .varufakta dt{font-size:11px;letter-spacing:.1em}
  .varufakta dd{font-size:13.5px}
}

.vara-kop{margin:28px 0 0;display:flex;flex-direction:column;gap:20px;max-width:440px}
.vara-val{display:flex;flex-direction:column;gap:11px}
.vara-val.dold{display:none}
.vara-val-rubrik{font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
/* Storlekarna som knappar. Man ska SE att XXL är slut utan att öppna en meny. */
.stlrad{display:flex;flex-wrap:wrap;gap:9px}
.stl{position:relative;cursor:pointer}
.stl input{position:absolute;opacity:0;width:0;height:0}
.stl span{
  display:block;min-width:56px;padding:12px 16px;text-align:center;
  border:1px solid var(--line);color:var(--ink-2);font-size:15px;
  transition:border-color .25s,color .25s,background-color .25s;
}
@media (hover:hover){.stl:not(.slut):hover span{border-color:var(--ink-3);color:var(--ink)}}
.stl input:checked+span{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.stl input:focus-visible+span{outline:2px solid var(--accent);outline-offset:2px}
/* Slutsåld storlek stryks över i stället för att bara tonas ned: det syns
   även för den som inte ser skillnad på två gråtoner. */
.stl.slut{cursor:default}
.stl.slut span{color:var(--ink-3);border-color:var(--line-soft);text-decoration:line-through;opacity:.65}
.vara-kop .btn{align-self:flex-start;padding:15px 32px}
.vara-kop .btn[disabled]{opacity:.5;pointer-events:none}

/* ---------- varukorgen ----------
   Knappen syns bara när det ligger något i korgen. En tom varukorgsikon är
   bara en påminnelse om att man inte har köpt något. */
/* Korgen i sidhuvudet, på butikssidorna. Accent-tokenparet vänder själv med
   navens läge: ljus siffra på mörk platta över hjältebilden, tvärtom på den
   solida listen. Utanför butiken finns den inte — där gäller den flytande
   knappen nedan, som bara visas när något ligger i korgen. */
.korg-nav{
  display:flex;align-items:center;gap:10px;font-size:15px;color:var(--ink-2);
  white-space:nowrap;transition:color .25s;text-shadow:0 1px 12px rgba(0,0,0,.55);
}
.nav.solid .korg-nav{text-shadow:none}
.korg-nav svg{flex:none}
.korg-nav .korgantal{background:var(--accent);color:var(--on-accent);text-shadow:none}
@media (hover:hover){.korg-nav:hover{color:var(--ink)}}
.korg-nav[hidden]{display:none}
/* På mobil bär påsen och siffran knappen själva — ordet ryms inte bredvid
   logga och burgare, och gapet i nav-raden dras åt av samma skäl. */
@media(max-width:640px){
  .korg-nav .korg-ord{display:none}
  .nav-in{gap:18px}
  .nav-links{margin-left:auto}
  /* Avdelningsetiketten viker för korgen: logga + BUTIK + påse + burgare
     ryms inte på 390. Brödsmulan direkt under säger redan var man är. */
  .avdelning{display:none}
}

/* Den flytande varukorgsknappen som följde med utanför butiken är struken
   (Filip 2026-08-21): korgen finns bara i butikens sidhuvud. Siffran nedan
   används av den knappen — bakgrund/färg vänds i .korg-nav-regeln ovan. */
.korgantal{
  display:grid;place-items:center;min-width:21px;height:21px;padding:0 5px;
  background:var(--on-accent);color:var(--accent);border-radius:11px;font-size:11.5px;letter-spacing:0;
}

.korglista{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:1px;background:var(--line-soft);border:1px solid var(--line-soft)}
.korglista li{background:var(--paper);display:grid;grid-template-columns:56px 1fr auto auto auto;
  align-items:center;gap:14px;padding:12px 14px}
.korglista img,.korgbild{width:56px;height:56px;object-fit:cover;display:block;background:var(--fill)}
.korgtext{display:flex;flex-direction:column;gap:3px;min-width:0}
.korgtext b{font-weight:400;font-size:15px;line-height:1.25}
.korgtext span{font-size:12.5px;color:var(--ink-3)}
.korgantalval{display:flex;align-items:center;gap:2px;border:1px solid var(--line)}
.korgantalval button{width:30px;height:30px;font-size:15px;color:var(--ink-2)}
.korgantalval button:hover{color:var(--ink);background:var(--fill)}
.korgantalval span{min-width:22px;text-align:center;font-family:'Geist Mono',ui-monospace,monospace;font-size:14px}
.korgpris{font-size:15px;white-space:nowrap}
.korgbort{width:26px;height:26px;font-size:16px;color:var(--ink-3)}
.korgbort:hover{color:var(--ink)}
.korg-tom{margin:24px 0 0;color:var(--ink-2)}
@media(max-width:560px){
  .korglista li{grid-template-columns:44px 1fr auto;grid-template-areas:"b t x" "b a p";row-gap:8px}
  .korglista img,.korgbild{width:44px;height:44px;grid-area:b}
  .korgtext{grid-area:t}
  .korgantalval{grid-area:a}
  .korgpris{grid-area:p;text-align:right}
  .korgbort{grid-area:x;justify-self:end}
}

/* Avdelningsmärket i sidhuvudet. Butiken har egen meny, och då måste det
   framgå VAR man är — annars ser det bara ut som att navigationen bytts ut. */
.avdelning{
  font-family:'Geist Mono',ui-monospace,monospace;font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-3);
  padding-left:12px;margin-left:2px;border-left:1px solid var(--line);
}
@media(max-width:520px){.avdelning{padding-left:9px;font-size:10px;letter-spacing:.12em}}

/* ---------- butiksremsan på startsidan ----------
   En remsa man bläddrar i, inte ett rutnät. Rutnätet sa "här är butiken";
   remsan säger "här finns mer, svep". Den går utanför wrappen i högerkant
   med flit: ett halvt kort som sticker ut är det tydligaste tecknet på att
   något fortsätter. */
/* INGEN .rv på remsan. Infällningen sätter opacity:0 tills en observatör
   hinner slå till, och blir den aldrig utlöst är korten osynliga fast de
   går att skrolla förbi. Rubriken ovanför fälls in, det räcker som rörelse:
   varor man kan köpa ska inte vara beroende av att en animation lyckas. */
.remsa{
  overflow-x:auto;overflow-y:hidden;
  /* iOS studsar vidare när man svept förbi sista kortet, och studsen visar
     tom yta bortom innehållet. Det känns som att remsan aldrig tar slut.
     overscroll-behavior-x:none stänger av både studsen och att svepet
     läcker vidare till sidan bakom. */
  overscroll-behavior-x:none;
  /* INGEN scroll-snap. Med snap snäppte webbläsaren till första kortet redan
     vid inladdning och skrollade därmed förbi indraget, så remsan startade
     med ett avhugget kort i skärmkanten. Snap var en finess, indraget är
     inte det. */
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  padding-bottom:6px;
}
.remsa::-webkit-scrollbar{display:none}
.remsa:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
/* INGET width:max-content. Med max-content frågar layouten varje kort hur
   brett det vill vara, och korten innehåller bilder på 1100 px. Chromium
   respekterar kortets satta bredd, men WebKit faller i vissa lägen tillbaka
   på bildens egen — sex kort à 1100 px blir 6600 px att svepa igenom.
   Utan max-content sätts bredden bara av korten, som har en fast bredd. */
.remsa-in{display:flex;gap:26px}
/* Indraget som en TOM FLEXRUTA, inte som padding. Padding på ett
   max-content-element inuti en skrollbehållare gav noll i praktiken; en
   spacer är otvetydig. ::after ger samma luft i slutet, annars klistrar
   sista kortet i kanten när man skrollat hela vägen. */
.remsa-in::before,.remsa-in::after{content:"";flex:0 0 32px}

/* Kortbredden räknas ur radens bredd, inte tvärtom: på laptop ska exakt TRE
   kort få plats innanför wrappen, sen tar pilen vid. Ett kort plus en flik
   hör hemma på lur, där man sveper och behöver se att det finns mer.

   ORDNINGEN ÄR AVSIKTLIG: basregeln står FÖRE mediafrågorna. Mediafrågor
   höjer inte specificiteten, så en likadan regel längre ner i filen vinner
   oavsett skärmbredd. Det har bitit i det här projektet förut. */
/* Ett kort i nästan hela skärmbredden blev en vägg: bilden är kvadratisk, så
   318 px brett kort betyder 318 px hög bild plus text. Taket gör kortet
   hanterbart och visar mer av nästa. */
.remsa .pkort{flex:0 0 auto;width:min(64vw,250px);height:auto}

@media(max-width:640px){
  /* Samma indrag som .wrap har på små skärmar, annars börjar remsan längre
     in än rubriken ovanför och det syns direkt. */
  .remsa-in{gap:18px}
  .remsa-in::before,.remsa-in::after{flex-basis:max(20px,env(safe-area-inset-left))}
}
@media(min-width:600px){
  /* Från laptopbredd slutar remsan vid wrappens kant i stället för vid
     skärmens. Annars tittar ett fjärde kort fram, och då är det inte tre
     kort och en pil längre. */
  .remsa{max-width:1180px;margin-left:auto;margin-right:auto}
  .remsa .pkort{width:calc((100vw - 64px - 52px) / 3)}
}
@media(min-width:1245px){
  .remsa .pkort{width:calc((1180px - 64px - 52px) / 3)}
}

/* Pilarna sitter i sektionsrubriken och finns bara där det finns en pekare.
   På en lur sveper man, och då är två knappar bara i vägen. */
.remsknappar{display:none;gap:10px;margin-left:auto;align-self:flex-end}
/* Bara bredd, inte hover: en pekskärmslaptop rapporterar ingen pekare men
   har gott om plats, och då ska pilarna finnas. På en lur sveper man. */
@media(min-width:760px){.remsknappar{display:flex}}
.remsknapp{
  width:46px;height:46px;border:1px solid var(--line);color:var(--ink-2);
  font-size:17px;line-height:1;transition:border-color .25s,color .25s,background-color .25s;
}
.remsknapp:hover{border-color:var(--accent);color:var(--ink);background:var(--fill)}
.remsknapp[disabled]{opacity:.3;pointer-events:none}

/* Knappen under korten, inte uppe i rubriken. Bred och tydlig: den är
   sektionens avslut, inte en detalj i marginalen. */
.btn-bred{
  display:flex;align-items:center;justify-content:center;gap:14px;
  width:100%;margin-top:44px;padding:20px 28px;
  background:none;color:var(--ink);border:1px solid var(--line);
  font-size:15px;letter-spacing:.02em;
  transition:border-color .3s,background-color .3s,gap .3s;
}
@media (hover:hover){
  .btn-bred:hover{border-color:var(--accent);background:var(--fill);gap:20px}
}
.btn-bred span{font-family:'Geist Mono',ui-monospace,monospace}

/* ---------- språkväljaren ----------
   En <details>, inte en meny i javascript: den fungerar innan skripten
   laddat och för den som stängt av dem. Länkarna går till SAMMA sida på det
   andra språket, inte till startsidan. */
.sprak{position:relative}
/* Ingen ram. Väljaren stod tidigare mellan menyn och knappen med egen ram
   och konkurrerade med båda. Nu står den sist, efter handlingen, och ser ut
   som det den är: en inställning. */
/* Väljaren får INTE ligga i sidhuvudet på lur. Där finns bara plats för
   loggan, knappen och hamburgaren, och när väljaren la sig emellan knuffades
   hamburgaren ut ur bild. Då fanns ingen knapp att öppna menyn med. Väljaren
   bor i mobilmenyn i stället, längst ner där den hör hemma. */
@media(max-width:920px){.nav-links .sprak{display:none}}
.sprak summary{
  list-style:none;cursor:pointer;display:flex;align-items:center;gap:6px;
  padding:8px 4px 8px 12px;
  font-family:'Geist Mono',ui-monospace,monospace;font-size:11.5px;
  letter-spacing:.14em;color:var(--ink-3);transition:color .25s;
}
.sprak summary::-webkit-details-marker{display:none}
.sprak summary::after{content:"";width:5px;height:5px;border-right:1px solid currentColor;
  border-bottom:1px solid currentColor;transform:rotate(45deg) translate(-2px,-2px)}
.sprak[open] summary::after{transform:rotate(-135deg) translate(-1px,-1px)}
.sprak summary:hover{color:var(--ink)}
.sprak-lista{
  position:absolute;right:0;top:calc(100% + 8px);z-index:70;min-width:150px;
  display:flex;flex-direction:column;
  background:var(--stone);border:1px solid var(--line);
  box-shadow:0 14px 34px rgba(10,13,15,.5);
}
.sprak-lista a{
  padding:11px 15px;text-decoration:none;color:var(--ink-2);font-size:14px;
  border-bottom:1px solid var(--line-soft);
}
.sprak-lista a:last-child{border-bottom:none}
.sprak-lista a:hover{background:var(--fill);color:var(--ink)}
.sprak-lista a[aria-current]{color:var(--ink)}
.sprak-lista a[aria-current]::before{content:"· "}
/* I mobilmenyn är det gott om plats: visa språken som en rad i stället för
   en utfällbar ruta i en utfällbar meny. */
/* En rad, inget som fälls ut. Fem koder får plats bredvid varandra även på
   den smalaste luren, och då finns inget som kan hamna utanför skärmen. */
.mobilemenu .sprakrad{margin-top:34px;gap:18px}
.mobilemenu .sprakrad a{font-size:13px;padding-bottom:4px}

/* Språken som en rad i sidfoten. Fem koder får plats bredvid varandra, så
   ingen rullgardin behövs: allt syns på en gång och sidhuvudet slipper. */
.sprakrad{display:flex;flex-wrap:wrap;gap:14px;margin:26px 0 0}
.sprakrad a{
  font-family:'Geist Mono',ui-monospace,monospace;font-size:11.5px;
  letter-spacing:.16em;color:var(--ink-3);text-decoration:none;
  padding-bottom:3px;border-bottom:1px solid transparent;transition:color .25s,border-color .25s;
}
.sprakrad a:hover{color:var(--ink)}
.sprakrad a[aria-current]{color:var(--ink);border-bottom-color:var(--ink)}