/* Dølakaffe butikk – fase 1, testside-fasade.
 *
 * Alle farger, vekter, størrelser, radier og avstander kommer fra tokens.css
 * (kopi, redigeres aldri her). Tall som står i denne fila er forhold, ikke
 * verdier: fr/%, multiplikatorer på token (calc), opasitet for hover/deaktivert
 * fra designsystemets readme, og brekkpunktet i em fordi var() ikke virker i
 * @media. Hver av dem står i PROGRESS.md under «Tekniske avvik».
 */

/* --- Grunn ------------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--surface-grunn);
  color:var(--text-body);
  font:var(--type-brod);
}

h1,h2,p,figure,fieldset,ul{margin:0;padding:0}
ul{list-style:none}
fieldset{border:0;min-width:0}
legend{padding:0}

a{color:inherit;text-underline-offset:calc(var(--dk-strek-bredde) * 3)}
:focus-visible{
  outline:calc(var(--dk-strek-bredde) * 2) solid var(--dk-tekst);
  outline-offset:calc(var(--dk-strek-bredde) * 3);
}
img{display:block;width:100%;height:auto}

.rom{
  max-width:var(--container-maks);
  margin-inline:auto;
  padding-inline:var(--dk-marg);
}

.brod{margin-bottom:var(--dk-rom-3);max-width:var(--dk-maal-brod)}
.brod:last-child{margin-bottom:0}
.liten{font-size:var(--dk-fs-bildetekst)}
.dempet{opacity:var(--dk-dempet)}
.bildetekst{
  margin-top:var(--dk-rom-1);
  font-size:var(--dk-fs-bildetekst);
  font-weight:var(--dk-vekt-brod);
  opacity:var(--dk-dempet);
}
.label{
  margin-bottom:var(--dk-rom-2);
  font-size:var(--dk-fs-label);
  font-weight:var(--dk-vekt-label);
  text-transform:uppercase;
  letter-spacing:var(--dk-ls-label);
}
.h1{font:var(--type-h1)}
.pris-stor{font-weight:var(--dk-vekt-tittel);font-size:var(--dk-fs-pris)}

/* --- Header ------------------------------------------------------------------ */
.topp{
  position:sticky;
  top:0;
  z-index:10;
  background:var(--dk-krem);
  border-bottom:var(--dk-strek);
}
.topp-rad{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  align-items:baseline;
  gap:var(--dk-rom-2);
  padding-block:var(--dk-rom-2);
}
.ordmerke{font:var(--type-ordmerke);text-decoration:none}
/* Menypunktene på samme linje: modulknappene (Logg inn, Handlekurv) står i skyggeroten, så punktene står på
 * grunnlinja, ikke øverst (Håkon målte 7 px forskjell, 12.10). Mindre mellomrom på mobil, så alle punktene får plass i 360 px,
 * også «Handlekurv (2)» (NS-12: med rom-2 ble den brutt ned på en ny linje). Et punkt brytes aldri inni seg. */
.nav{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--dk-rom-1);font-size:var(--dk-fs-sted)}
.nav > *{white-space:nowrap}
.nav a{
  text-decoration:none;
  padding-bottom:var(--dk-strek-bredde);
  border-bottom:var(--dk-strek-bredde) solid transparent;
}
.nav a:hover,
.nav a[aria-current="page"]{border-bottom-color:var(--dk-tekst)}

/* --- Forside ----------------------------------------------------------------- */
/* Forsidebildet (NS-14, alternativ A): taket på høyden lar toppen av kaffekortene stå over bretten også i fullskjerm, og
 * utsnittet er låst på personen i døra (verdien fra skissen). svh der det støttes, så adresselinja på mobil ikke spiser bildet. */
.hero img{aspect-ratio:var(--dk-ar-kort);object-fit:cover;object-position:62% 50%;max-height:68vh;max-height:68svh}

.kortgrid{
  display:grid;
  gap:var(--dk-rom-5);
  margin-block:var(--dk-rom-5) var(--dk-gap-seksjon);
}
/* H1 på forsiden (NS-22 B) i feltet mellom bildeteksten og kortene: H1-en står der den doble margen sto (A4, 96 px på mobil), med
 * like mye luft over og under. Navnestørrelsen på mobil, så standardteksten står på én linje i 360 px; H1-størrelsen fra 45em. Uten tekst
 * fra FirstCrack er den skjult, som de andre blokkene på forsiden. */
.forsidetittel{margin-top:var(--dk-rom-4);font:var(--type-navn)}
.forsidetittel + .kortgrid{margin-top:var(--dk-rom-4)}
.forsidetittel:not(:has(fc-tekst:not(:empty))){display:none}
.kaffekort{display:block;text-decoration:none}
.kaffekort img{aspect-ratio:var(--dk-ar-kort);object-fit:cover}
.stripe{display:block;height:var(--dk-stripe);margin-bottom:calc(var(--dk-rom-3) - var(--dk-rom-1))}
.stripe-kort{display:block;width:var(--dk-stripe-kort);height:var(--dk-stripe);margin-bottom:var(--dk-rom-3)}
.stripe-marine{background:var(--dk-lane-marine)}
.stripe-gronn{background:var(--dk-lane-gronn)}
.navn{font:var(--type-navn)}
.sted{
  margin-bottom:calc(var(--dk-rom-3) - var(--dk-rom-2));
  font-size:var(--dk-fs-sted);
  opacity:var(--dk-dempet);
}
.rolle{margin-bottom:var(--dk-rom-2);font-size:var(--dk-fs-knapp);max-width:var(--dk-maal-anledning)}
.kortfot{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:var(--dk-rom-2);
  font-size:var(--dk-fs-knapp);
  font-weight:var(--dk-vekt-tittel);
}
.cta{text-decoration:underline;text-underline-offset:calc(var(--dk-strek-bredde) * 3)}

/* Abonnementsstripa: strek over og under, tekst til venstre, knapp til høyre.
 * Prototypens 24 px luft er snappet til tokenskalaen (20 px), som ellers på sida. */
.abostripe{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  align-items:center;
  gap:var(--dk-rom-3);
  margin-bottom:var(--dk-gap-seksjon);
  padding-block:var(--dk-rom-3);
  border-block:var(--dk-strek);
}
.abostripe p{max-width:var(--dk-maal-brod);font-size:var(--dk-fs-knapp)}
.abostripe strong{font-weight:var(--dk-vekt-tittel)}

.todelt{display:grid;gap:var(--dk-rom-5)}
.tittel{margin-bottom:var(--dk-rom-3);font:var(--type-navn)}
.foto img{aspect-ratio:var(--dk-ar-produkt);object-fit:cover}

/* --- Produktside ------------------------------------------------------------- */
.tilbake{
  display:inline-block;
  margin-block:var(--dk-rom-3);
  font-size:var(--dk-fs-sted);
  text-decoration:none;
}
.produkt{display:grid;gap:var(--dk-rom-4);align-items:start}
.produktfoto img{aspect-ratio:var(--dk-ar-kort);object-fit:cover}
.produktinfo .h1{margin-bottom:var(--dk-strek-bredde)}
.produktsted{font-size:var(--dk-fs-knapp);margin-bottom:var(--dk-rom-3)}
.anledning{margin-bottom:var(--dk-rom-3);font-size:var(--dk-fs-anledning);max-width:var(--dk-maal-anledning)}
.batch{margin-block:var(--dk-rom-1) var(--dk-rom-3);font-size:var(--dk-fs-sted)}

.ruter{margin-bottom:var(--dk-rom-3)}
.ruterad{display:flex;flex-wrap:wrap;column-gap:var(--dk-rom-3)}
.rute{
  display:flex;
  align-items:center;
  gap:calc(var(--dk-rom-3) / 2);
  padding-block:calc(var(--dk-rom-3) / 4);
  font-size:var(--dk-fs-knapp);
  cursor:pointer;
}
.rute input{
  appearance:none;
  -webkit-appearance:none;
  flex:none;
  width:1.05em;
  height:1.05em;
  margin:0;
  padding:calc(var(--dk-rom-1) / 2);
  border:calc(var(--dk-strek-bredde) * 1.5) solid var(--dk-tekst);
  border-radius:0;
  background:transparent content-box;
  cursor:pointer;
}
.rute input:checked{background-color:var(--dk-tekst)}

.handling{
  display:flex;
  flex-direction:column;
  gap:calc(var(--dk-rom-3) / 2);
  max-width:var(--dk-maal-anledning);
}
.knapp{
  display:block;
  padding:var(--dk-rom-2) var(--dk-rom-3);
  border:var(--dk-strek);
  border-radius:var(--dk-radius);
  background:transparent;
  color:var(--dk-tekst);
  font-family:var(--dk-font);
  font-weight:var(--dk-vekt-label);
  font-size:var(--dk-fs-knapp);
  line-height:var(--dk-lh-navn);
  text-align:center;
  text-decoration:none;
  cursor:pointer;
}
.knapp:hover{opacity:.9}
.knapp-marine{background:var(--dk-lane-marine);border-color:var(--dk-lane-marine);color:var(--dk-tekst-paa-lane)}
.knapp-gronn{background:var(--dk-lane-gronn);border-color:var(--dk-lane-gronn);color:var(--dk-tekst-paa-lane)}
.knapp:disabled{opacity:.45;cursor:default}
.blaned{margin-top:var(--dk-rom-3)}

.seksjon{
  margin-top:var(--dk-rom-6);
  padding-top:var(--dk-rom-4);
  border-top:var(--dk-strek);
}
.kjopbunn{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  align-items:center;
  gap:var(--dk-rom-3);
  margin-top:var(--dk-rom-5);
  padding-top:var(--dk-rom-3);
  border-top:var(--dk-strek);
}

/* --- Abonnement -------------------------------------------------------------- */
.abointro{margin-bottom:var(--dk-rom-5);max-width:var(--dk-maal-brod)}
.abointro .h1{margin-bottom:calc(var(--dk-rom-3) - var(--dk-rom-1))}
.abotopp{
  margin-bottom:calc(var(--dk-rom-3) - var(--dk-rom-1));
  font-weight:var(--dk-vekt-tittel);
  font-size:var(--dk-fs-anledning);
  max-width:var(--dk-maal-anledning);
}
.abointro .brod{margin-bottom:var(--dk-rom-2);font-size:var(--dk-fs-knapp)}

.kolonner{display:grid;gap:var(--dk-rom-4);align-items:start}

.valgliste{margin-bottom:var(--dk-rom-4)}
.valgliste label{
  display:flex;
  align-items:baseline;
  gap:calc(var(--dk-rom-3) / 2);
  padding-block:var(--dk-rom-2);
  border-bottom:var(--dk-strek);
  font-size:var(--dk-fs-knapp);
  cursor:pointer;
}
.valgliste legend + label{border-top:var(--dk-strek)}
.valgliste input{margin:0;accent-color:var(--dk-tekst)}
.merke{opacity:var(--dk-dempet);font-size:var(--dk-fs-sted)}

/* Pris per leveranse følger valgt kaffe og rytme – kun CSS (:has), ingen JS.
 * Uten :has-støtte står standardvalget (Startskuddet, 2 poser) igjen. */
.pv{display:none;margin-bottom:var(--dk-rom-1)}
.pv .liten{display:block}
.pv-startskuddet-2{display:block}
.abo:has(.valgliste input:checked) .pv-startskuddet-2{display:none}
.abo:has(#k-startskuddet:checked):has(#r-2:checked) .pv-startskuddet-2,
.abo:has(#k-startskuddet:checked):has(#r-3:checked) .pv-startskuddet-3,
.abo:has(#k-startskuddet:checked):has(#r-4:checked) .pv-startskuddet-4,
.abo:has(#k-smaaspenstig:checked):has(#r-2:checked) .pv-smaaspenstig-2,
.abo:has(#k-smaaspenstig:checked):has(#r-3:checked) .pv-smaaspenstig-3,
.abo:has(#k-smaaspenstig:checked):has(#r-4:checked) .pv-smaaspenstig-4,
.abo:has(#k-begge:checked):has(#r-2:checked) .pv-begge-2,
/* Begge finnes bare for 2 poser. Velges 3 eller 4, skjules valget og prisen
 * faller tilbake til Startskuddet – knappen er marineblå i begge tilfeller. */
.abo:has(#k-begge:checked):has(#r-3:checked) .pv-startskuddet-3,
.abo:has(#k-begge:checked):has(#r-4:checked) .pv-startskuddet-4{display:block}
.abo:has(#r-3:checked) .valg-begge,
.abo:has(#r-4:checked) .valg-begge{display:none}
.fraktlinje{margin-bottom:var(--dk-rom-3);font-size:var(--dk-fs-sted)}

.knapp-abo{width:100%;background:var(--dk-lane-marine);border-color:var(--dk-lane-marine);color:var(--dk-tekst-paa-lane)}
.abo:has(#k-smaaspenstig:checked) .knapp-abo{background:var(--dk-lane-gronn);border-color:var(--dk-lane-gronn)}

.note{
  max-width:var(--dk-maal-anledning);
  margin-top:var(--dk-rom-2);
  padding:calc(var(--dk-rom-2) - var(--dk-rom-1) / 2) var(--dk-rom-2);
  border:var(--dk-strek);
  border-radius:var(--dk-radius);
  background:var(--surface-note);
  font-size:var(--dk-fs-bildetekst);
}

/* --- Handlekurv og kasse ----------------------------------------------------- */
.kurvtittel{margin-bottom:var(--dk-rom-4)}
.kurvlinje{
  display:grid;
  grid-template-columns:30% 1fr auto;
  gap:var(--dk-rom-3);
  align-items:start;
  padding-block:var(--dk-rom-3);
  border-block:var(--dk-strek);
}
.kurvbilde img{aspect-ratio:var(--dk-ar-kort);object-fit:cover}
.kurvnavn{font:var(--type-navn)}
.linjesum{font-weight:var(--dk-vekt-tittel)}
.summerad{
  display:flex;
  justify-content:space-between;
  gap:var(--dk-rom-3);
  padding-block:var(--dk-rom-2);
  border-bottom:var(--dk-strek);
  font-size:var(--dk-fs-knapp);
}
.sumrad{font-weight:var(--dk-vekt-tittel);font-size:var(--dk-fs-pris)}

.felter{margin-bottom:var(--dk-rom-4)}
.felt{display:block;margin-bottom:var(--dk-rom-3)}
.felt span{
  display:block;
  margin-bottom:var(--dk-rom-1);
  font-size:var(--dk-fs-knapp);
  font-weight:var(--dk-vekt-tittel);
}
.felt input{
  display:block;
  width:100%;
  padding:calc(var(--dk-rom-2) - var(--dk-strek-bredde)) var(--dk-rom-2);
  border:var(--dk-strek);
  border-radius:var(--dk-radius);
  background:var(--dk-krem);
  color:var(--dk-tekst);
  font:inherit;
}
.felter:disabled input{opacity:.45}

/* --- Bunnlinje (Vipps-krav: synlig på hver side) ----------------------------- */
.bunn{
  margin-top:var(--dk-gap-seksjon);
  padding-block:var(--dk-rom-4) var(--dk-rom-5);
  border-top:var(--dk-strek);
}
.bunnlinje{
  display:flex;
  flex-direction:column;
  gap:var(--dk-rom-1);
  font-size:var(--dk-fs-sted);
}

/* --- Over 720 px (45em): to kolonner ----------------------------------------- */
@media (min-width:45em){
  .hero img{aspect-ratio:var(--dk-ar-hero)}
  .kortgrid{grid-template-columns:1fr 1fr;gap:var(--dk-rom-4)}
  .forsidetittel{font:var(--type-h1)}
  .todelt{grid-template-columns:1fr 40%;gap:var(--dk-gap-kolonne);align-items:start}
  .todelt .tekst{align-self:center}
  .produkt{grid-template-columns:1.15fr 1fr;gap:var(--dk-gap-kolonne)}
  .produktfoto img{aspect-ratio:var(--dk-ar-produkt)}
  .kolonner{grid-template-columns:1fr 1fr;gap:var(--dk-gap-kolonne)}
  .handling-kompakt{flex-direction:row}
  .nav{gap:var(--dk-rom-3)}
  .bunnlinje{flex-direction:row;flex-wrap:wrap;column-gap:var(--dk-rom-3)}
  .bunn{padding-block:var(--dk-rom-5) var(--dk-rom-6)}
}

/* --- FirstCrack-komponentene (fase 2) ---------------------------------------
 * Kaffene, produktsida, handlekurven og takkesida tegnes av firstcrack.no/butikk.js
 * med Dølakaffe-temaet (Shadow DOM). Til skriptet er lastet, og uten JavaScript,
 * står fasaden inni elementet som før – derfor marg bare når elementet er klart. */
fc-butikk,fc-produkt,fc-kurv,fc-takk,fc-konto,fc-klubb,fc-omtale,fc-abonnement,fc-personvern,fc-informasjonskapsler{display:block}
/* Mens modulen henter data, er fasaden skjult (FirstCrack setter data-fc-tilstand). Feiler hentingen, står den. */
[data-fc-tilstand="laster"]>*{visibility:hidden}
fc-kurv-knapp,fc-konto-knapp{display:inline-block}
/* Forsidens tekster fra FirstCrack (<fc-tekst>, NS-12) står i vanlig DOM med skjelettets typografi. Til de er tegnet, og når FirstCrack
 * ikke svarer, er de tomme: da skjules blokken de står i, så forsiden står med bildene og fasaden, uten hull. */
.tekst > fc-tekst{display:block}
.tekst > fc-tekst p{margin-bottom:var(--dk-rom-3);max-width:var(--dk-maal-brod)}
.tekst > fc-tekst p:last-child{margin-bottom:0}
.klubbstripe:not(:has(fc-tekst:not(:empty))),.klubbstripe strong:has(> fc-tekst:empty),.klubbstripe a:has(> fc-tekst:empty),.klubbstripe p:not(:has(fc-tekst:not(:empty))),.tittel:has(> fc-tekst:empty),figcaption:has(> fc-tekst:empty),.tekst > fc-tekst:empty{display:none}
.todelt .tekst:has(fc-tekst):not(:has(fc-tekst:not(:empty))){display:none}
.todelt:has(.tekst fc-tekst):not(:has(.tekst fc-tekst:not(:empty))){grid-template-columns:minmax(0,25em);justify-content:center}
fc-butikk:defined{margin-block:var(--dk-rom-5) var(--dk-gap-seksjon);--fc-avstand:var(--dk-rom-5) var(--dk-rom-4)}
/* Det tomme feltet på forsiden (NS-22 A4): rutenettet har margen over kortene allerede, så <fc-butikk> i det får ingen i tillegg */
.kortgrid > fc-butikk:defined{margin-top:0}
/* Kortene side om side: <fc-butikk> får hele bredden i rutenettet (før sto den i første kolonne, og kortene under hverandre) */
.kortgrid > fc-butikk{grid-column:1 / -1}

/* Beløp brytes aldri midt i («338 / kr»). */
.pris,.linjesum,.pris-stor,.sumrad span{white-space:nowrap}
.kjopbunn .pris-stor{white-space:normal}

/* --- Salgsvilkårene (NS-17 C) ---------------------------------------------------
   Som på holdesiden: brødtekstbredde, overskriftene i tittelvekt, en dempet linje mellom punktene. Bare token-verdier. */
.vilkar{max-width:var(--dk-maal-brod);padding-bottom:var(--dk-rom-6)}
.vilkar h1{margin-bottom:var(--dk-rom-2)}
.vilkar h2{margin:var(--dk-rom-5) 0 var(--dk-rom-2);font-weight:var(--dk-vekt-tittel);font-size:var(--dk-fs-pris);line-height:var(--dk-lh-navn)}
.vilkar h3{margin:var(--dk-rom-4) 0 var(--dk-rom-2);font-weight:var(--dk-vekt-tittel);font-size:var(--dk-fs-anledning);line-height:var(--dk-lh-navn)}
.vilkar p{margin:0 0 var(--dk-rom-3)}
.vilkar strong{font-weight:var(--dk-vekt-tittel)}
.vilkar .oppdatert{opacity:var(--dk-dempet)}
.vilkar hr{height:0;margin:var(--dk-rom-4) 0;border:0;border-top:var(--dk-strek);opacity:var(--dk-dempet)}