/* Pokepuls — mobil forst. Ingen rammeverk, ingen byggesteg.
   Alt som ikke er innhold skal komme seg unna: hele skjermen er en liste. */

:root {
  --bg: #0b0d10;
  --flate: #14181d;
  --flate-2: #1b2027;
  --kant: #262c35;
  --tekst: #e8ecf1;
  --tekst-svak: #8b95a3;
  --gul: #ffcb05;
  --gronn: #2ecc71;
  --rod: #ff5f56;
  --bla: #4c9aff;
  --topp-h: 148px;
  --miniatyr: 46px;
  --radius: 14px;
}

* { box-sizing: border-box; }

/* `display: flex` pa .chips slar nettleserens standardregel for [hidden],
   sa filterradene ble staende igjen nar man byttet fane. Denne linjen ma
   ligge for reglene som setter display. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--tekst);
  font: 15px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        "Helvetica Neue", Arial, sans-serif;
  padding-bottom: calc(66px + env(safe-area-inset-bottom));
  overscroll-behavior-y: none;
}

button { font: inherit; color: inherit; }

/* ------------------------------------------------------------ toppfelt */

.topp {
  position: sticky; top: 0; z-index: 20;
  background: rgba(11, 13, 16, .93);
  backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid var(--kant);
  padding: max(10px, env(safe-area-inset-top)) 14px 8px;
}

.topp-rad { display: flex; align-items: center; justify-content: space-between; gap: 10px; }

.merke { margin: 0; font-size: 21px; letter-spacing: -.4px; font-weight: 800; }
.merke-poke { color: var(--tekst); }
.merke-puls { color: var(--gul); }

.puls {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--flate); border: 1px solid var(--kant);
  border-radius: 999px; padding: 5px 11px 5px 9px;
  font-size: 12px; color: var(--tekst-svak); cursor: pointer;
}
.prikk {
  width: 8px; height: 8px; border-radius: 50%; background: var(--tekst-svak);
  box-shadow: 0 0 0 0 currentColor;
}
.prikk.ok { background: var(--gronn); animation: banke 2.4s ease-out infinite; color: var(--gronn); }
.prikk.gammel { background: var(--gul); color: var(--gul); }
.prikk.nede { background: var(--rod); color: var(--rod); }
@keyframes banke {
  0% { box-shadow: 0 0 0 0 rgba(46, 204, 113, .55); }
  70% { box-shadow: 0 0 0 7px rgba(46, 204, 113, 0); }
  100% { box-shadow: 0 0 0 0 rgba(46, 204, 113, 0); }
}
@media (prefers-reduced-motion: reduce) { .prikk.ok { animation: none; } }

.sok-rad { position: relative; margin-top: 9px; }
#sok {
  width: 100%; padding: 10px 34px 10px 13px;
  background: var(--flate); border: 1px solid var(--kant);
  border-radius: 11px; color: var(--tekst); font-size: 16px; /* 16px = ingen iOS-zoom */
  -webkit-appearance: none;
}
#sok:focus { outline: none; border-color: var(--gul); }
#sok::placeholder { color: var(--tekst-svak); }
.tom-sok {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  background: none; border: 0; font-size: 22px; line-height: 1;
  color: var(--tekst-svak); padding: 4px 9px; cursor: pointer;
}

.chips {
  display: flex; gap: 7px; margin-top: 9px;
  overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  padding-bottom: 2px;
}
.chips::-webkit-scrollbar { display: none; }
.chips-under { margin: 12px 14px 4px; }
.chip {
  flex: 0 0 auto; padding: 6px 12px; border-radius: 999px;
  background: var(--flate); border: 1px solid var(--kant);
  color: var(--tekst-svak); font-size: 13px; white-space: nowrap; cursor: pointer;
}
.chip.pa { background: var(--gul); border-color: var(--gul); color: #1a1400; font-weight: 600; }

/* ---------------------------------------------------------------- liste */

main { padding: 0 14px; }
.teller { color: var(--tekst-svak); font-size: 12.5px; margin: 12px 2px 8px; }
.hjelp { color: var(--tekst-svak); font-size: 13px; margin: 14px 2px; }
.tom { color: var(--tekst-svak); text-align: center; margin: 40px 10px; }

.sett-tittel {
  display: flex; align-items: center; gap: 8px;
  margin: 18px 2px 8px; font-size: 13px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .6px; color: var(--tekst-svak);
}
.sett-tittel::after { content: ""; flex: 1; height: 1px; background: var(--kant); }

.merkelapp {
  font-size: 10px; font-weight: 700; letter-spacing: .4px;
  padding: 2px 6px; border-radius: 5px; text-transform: uppercase;
  background: var(--flate-2); color: var(--tekst-svak); border: 1px solid var(--kant);
}
.merkelapp.jp { color: #ff8a8a; border-color: #4a2727; background: #2a1a1a; }
.merkelapp.cn { color: #ffd479; border-color: #4a3b1c; background: #2a2314; }
.merkelapp.ko { color: #9ec1ff; border-color: #24365a; background: #161f2e; }

.kort {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 12px 13px; margin-bottom: 8px; text-align: left;
  background: var(--flate); border: 1px solid var(--kant);
  border-radius: var(--radius); cursor: pointer;
}
.kort:active { background: var(--flate-2); }
/* Andre-fanen bruker <a class="kort"> for aa lenke rett til butikken.
 * Uten dette tar nettleseren over med blaatt og understrek, og raden ser
 * ut som en feil midt i en ellers mork side. */
a.kort { color: inherit; text-decoration: none; }
/* Prisen skal aldri klemmes av en lang tittel. */
.kort-hoyre { flex: 0 0 auto; padding-left: 4px; }
.kort-venstre { flex: 1; min-width: 0; }

/* display:block er ikke pynt her -- det er hele fiksen.
 *
 * `overflow`, `text-overflow` og `white-space` virker IKKE paa et inline-
 * element, og .kort-navn staar paa et <span>. Reglene har altsaa aldri
 * gjort noe. Paa produktlista merkes det ikke, for der er navnene korte
 * («Booster Box»). Paa Andre-fanen er de raa butikktitler paa hundre tegn,
 * og da la de seg tvers over prisen.
 *
 * min-width: 0 paa .kort-venstre er den andre halvparten: uten den nekter
 * et flex-element aa krympe under sitt eget innhold, og da hjelper ingen
 * ellipsis. */
.kort-navn {
  display: block;
  font-weight: 600; font-size: 15px; margin-bottom: 3px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.kort-under {
  font-size: 12.5px; color: var(--tekst-svak);
  display: flex; gap: 7px; align-items: center;
  min-width: 0;
}
/* Butikknavnet under tittelen kan ogsaa vaere langt. */
.kort-under > * { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kort-hoyre { text-align: right; }
.pris { font-weight: 700; font-size: 15px; font-variant-numeric: tabular-nums; }
.pris.ingen { color: var(--tekst-svak); font-weight: 500; font-size: 13px; }
.lager { font-size: 11.5px; margin-top: 2px; }
.lager.inne { color: var(--gronn); }
.lager.ute { color: var(--tekst-svak); }

.mer {
  display: block; width: 100%; margin: 6px 0 20px; padding: 11px;
  background: var(--flate); border: 1px solid var(--kant);
  border-radius: var(--radius); color: var(--tekst-svak); cursor: pointer;
}

/* ------------------------------------------------------------ hendelser */

.hendelse { display: flex; gap: 11px; align-items: flex-start; padding: 11px 13px; }
.hendelse-ikon {
  flex: 0 0 auto; width: 26px; height: 26px; border-radius: 8px;
  display: grid; place-items: center; font-size: 13px; font-weight: 700;
}
.k-restock { background: rgba(46,204,113,.14); color: var(--gronn); }
.k-ny { background: rgba(255,203,5,.14); color: var(--gul); }
.k-prisendring { background: rgba(76,154,255,.14); color: var(--bla); }
.k-utsolgt { background: rgba(255,95,86,.12); color: var(--rod); }
.hendelse-tid { font-size: 11.5px; color: var(--tekst-svak); }
.gjennomstreket { text-decoration: line-through; color: var(--tekst-svak); }

/* ------------------------------------------------------------- fanelinje */

.faner {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  display: flex; background: rgba(11,13,16,.95);
  backdrop-filter: blur(12px); border-top: 1px solid var(--kant);
  padding-bottom: env(safe-area-inset-bottom);
}
.fane-knapp {
  flex: 1; background: none; border: 0; padding: 9px 4px 10px;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  font-size: 11px; color: var(--tekst-svak); cursor: pointer;
}
.fane-knapp svg { width: 21px; height: 21px; fill: none; stroke: currentColor;
                  stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.fane-knapp.valgt { color: var(--gul); }

/* ------------------------------------------------------------------ ark */

.ark-bakgrunn { position: fixed; inset: 0; background: rgba(0,0,0,.6); z-index: 40; }
.ark {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  max-height: 86vh; overflow-y: auto; -webkit-overflow-scrolling: touch;
  background: var(--flate); border-radius: 20px 20px 0 0;
  border-top: 1px solid var(--kant);
  padding: 8px 16px calc(26px + env(safe-area-inset-bottom));
  animation: opp .22s ease-out;
}
@keyframes opp { from { transform: translateY(18px); opacity: .4; } }
.ark-hank { width: 38px; height: 4px; border-radius: 2px; background: var(--kant); margin: 0 auto 10px; }
.ark-lukk {
  position: absolute; top: 8px; right: 10px; background: none; border: 0;
  font-size: 26px; line-height: 1; color: var(--tekst-svak); padding: 4px 10px; cursor: pointer;
}
.ark h2 { margin: 4px 0 2px; font-size: 19px; }
.ark .ark-under { color: var(--tekst-svak); font-size: 13px; margin-bottom: 14px;
                  display: flex; gap: 8px; align-items: center; }
.ark h3 { font-size: 12px; text-transform: uppercase; letter-spacing: .6px;
          color: var(--tekst-svak); margin: 18px 0 8px; }

.tilbud {
  display: flex; align-items: center; gap: 11px; padding: 11px 12px;
  margin-bottom: 7px; background: var(--flate-2); border: 1px solid var(--kant);
  border-radius: 11px; text-decoration: none; color: inherit;
}
.tilbud-venstre { flex: 1; min-width: 0; }
/* Begge ma vaere block. Som inline-spans lop butikknavnet og tittelen
   sammen til "BoosterpakkerCOLLECT 151 VOL. 4 ...". */
.tilbud-butikk { display: block; font-weight: 600; font-size: 14px; }
.tilbud-tittel { display: block; font-size: 12px; color: var(--tekst-svak);
                 overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pil { color: var(--tekst-svak); flex: 0 0 auto; }

@media (min-width: 720px) {
  main, .chips-under { max-width: 720px; margin-left: auto; margin-right: auto; }
  .topp { padding-left: max(14px, calc(50vw - 360px)); padding-right: max(14px, calc(50vw - 360px)); }
  .ark { left: 50%; transform: translateX(-50%); width: 640px; border-radius: 20px 20px 0 0; }
}


/* ------------------------------------------------------------- bilder */

.miniatyr {
  width: var(--miniatyr); height: var(--miniatyr); flex: 0 0 auto;
  border-radius: 9px; object-fit: contain;
  background: var(--flate-2); border: 1px solid var(--kant);
}

.tilbud-bilde {
  width: 38px; height: 38px; flex: 0 0 auto; border-radius: 7px;
  object-fit: contain; background: var(--flate); border: 1px solid var(--kant);
}

.ark-topp { display: flex; gap: 14px; align-items: flex-start; margin: 4px 0 6px; }
.ark-bilde {
  width: 104px; height: 104px; flex: 0 0 auto; border-radius: 12px;
  object-fit: contain; background: var(--flate-2); border: 1px solid var(--kant);
}
.ark-tekst { flex: 1; min-width: 0; }
.ark-tekst h2 { margin: 0 0 4px; }

.folge-merke { color: var(--gul); font-size: 12px; }

/* ------------------------------------------------------- konto og folg */

.topp-hoyre { display: flex; align-items: center; gap: 8px; }

.konto-knapp {
  display: grid; place-items: center; width: 34px; height: 34px;
  border-radius: 999px; background: var(--flate); border: 1px solid var(--kant);
  color: var(--tekst-svak); cursor: pointer; flex: 0 0 auto;
}
.konto-knapp svg { width: 19px; height: 19px; fill: none; stroke: currentColor;
                   stroke-width: 1.8; stroke-linecap: round; }
.konto-knapp.innlogget { color: #1a1400; background: var(--gul); border-color: var(--gul); }

.folg-knapp {
  margin-top: 10px; padding: 8px 14px; border-radius: 999px;
  background: var(--flate-2); border: 1px solid var(--kant);
  color: var(--tekst); font-size: 14px; cursor: pointer;
}
.folg-knapp.pa { background: var(--gul); border-color: var(--gul); color: #1a1400; font-weight: 600; }

.skjema { display: flex; flex-direction: column; gap: 12px; margin-top: 6px; }
.skjema label { display: flex; flex-direction: column; gap: 5px;
                font-size: 13px; color: var(--tekst-svak); }
.skjema input {
  padding: 11px 12px; background: var(--flate-2); border: 1px solid var(--kant);
  border-radius: 11px; color: var(--tekst); font-size: 16px; /* 16px = ingen iOS-zoom */
  -webkit-appearance: none;
}
.skjema input:focus { outline: none; border-color: var(--gul); }

.hovedknapp {
  padding: 12px; border-radius: 12px; border: 0; cursor: pointer;
  background: var(--gul); color: #1a1400; font-weight: 700; font-size: 15px;
}
.hovedknapp[disabled] { opacity: .6; }
.hovedknapp.smal { display: inline-block; margin-top: 14px; padding: 10px 18px; }

.lenkeknapp {
  margin-top: 14px; background: none; border: 0; padding: 6px 0;
  color: var(--bla); font-size: 14px; cursor: pointer;
}

.feil { color: var(--rod); font-size: 13.5px; margin: 0; }
.hjelp.liten { font-size: 12px; margin-top: -4px; }

/* ===================================================== nytt i v6 ===== */

/* «12 min siden» pa et produktkort. Liten, men den er grunnen til at
   toppen av listen er verdt a se pa. */
.nylig {
  font-size: 11px; font-weight: 600; color: var(--gronn);
  background: rgba(46, 204, 113, .12); border-radius: 999px;
  padding: 1px 7px; margin-left: 4px; white-space: nowrap;
}

/* ------------------------------------------------------------ varsler */

.varselboks {
  margin-top: 18px; padding: 14px; border-radius: var(--radius);
  background: var(--flate-2); border: 1px solid var(--kant);
}
.varselboks h3 { margin: 0 0 6px; font-size: 15px; }
.varselboks .hovedknapp { width: 100%; margin-top: 4px; }
/* Av-knappen skal ikke se like innbydende ut som pa-knappen. */
.varselboks .hovedknapp.av {
  background: var(--flate); color: var(--tekst); border: 1px solid var(--kant);
}
.bryter {
  display: flex; align-items: center; gap: 9px; margin-top: 12px;
  font-size: 13.5px; color: var(--tekst-svak); cursor: pointer;
}
.bryter input { width: 18px; height: 18px; accent-color: var(--gul); }

/* -------------------------------------------------- serverrendret side */
/* Sidene under /p/ deler farger og typografi med appen, men har sitt eget,
   enklere oppsett: de er en inngangsdor fra Google, ikke en app. */

body.side { padding-bottom: 40px; }
.side-topp { padding: 16px; border-bottom: 1px solid var(--kant); }
.side-hjem { text-decoration: none; font-size: 19px; font-weight: 800; }
.side-innhold { padding: 18px 16px; max-width: 780px; margin: 0 auto; }
.side-innhold h1 { font-size: 24px; margin: 0 0 4px; line-height: 1.2; }
.side-innhold h2 { font-size: 16px; margin: 26px 0 10px; color: var(--tekst-svak); }
.side-under { color: var(--tekst-svak); font-size: 14px; margin: 0 0 16px; }

.side-status {
  padding: 12px 14px; border-radius: var(--radius); font-size: 15px; margin: 0 0 16px;
}
.side-status.inne { background: rgba(46, 204, 113, .12); color: var(--gronn); }
.side-status.ute  { background: var(--flate-2); color: var(--tekst-svak); }

.side-cta {
  display: inline-block; padding: 12px 18px; border-radius: 12px;
  background: var(--gul); color: #1a1400; font-weight: 700; text-decoration: none;
}

.side-liste { list-style: none; padding: 0; margin: 0; }
.side-tilbud {
  display: grid; grid-template-columns: 1fr auto auto; gap: 4px 12px;
  align-items: center; padding: 12px 0; border-bottom: 1px solid var(--kant);
}
.side-tilbud a { text-decoration: none; color: inherit; min-width: 0; }
.side-butikk { display: block; font-weight: 600; }
.side-tittel {
  display: block; font-size: 12.5px; color: var(--tekst-svak);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.side-pris { font-variant-numeric: tabular-nums; font-weight: 600; }
.side-lager { font-size: 12px; }
.side-lager.inne { color: var(--gronn); }
.side-lager.ute  { color: var(--tekst-svak); }

.side-fot {
  padding: 24px 16px; max-width: 780px; margin: 0 auto;
  color: var(--tekst-svak); font-size: 13px;
}
.side-fot a { color: var(--bla); }

/* ---------------------------------------------------------------- admin */

body.admin { padding-bottom: 40px; }
body.admin .topp { position: static; }
.admin-merke {
  font-size: 11px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--bg); background: var(--gul); border-radius: 5px;
  padding: 2px 6px; margin-left: 8px; vertical-align: middle;
}
.merke a { text-decoration: none; }
#admin-innhold { padding: 14px 16px; max-width: 1100px; margin: 0 auto; }
#admin-innhold h2 { font-size: 15px; margin: 26px 0 8px; color: var(--tekst-svak); }
#admin-innhold h3 { font-size: 14px; margin: 20px 0 6px; }

/* Helsekortet skal kunne leses pa en armlengdes avstand. Det er det eneste
   pa siden som betyr noe hvis svaret er «nede». */
.helsekort {
  display: flex; flex-direction: column; gap: 3px;
  padding: 16px; border-radius: var(--radius); margin-bottom: 16px;
}
.helsekort strong { font-size: 19px; }
.helsekort span { font-size: 13px; opacity: .85; }
.helsekort.ok     { background: rgba(46, 204, 113, .14); color: var(--gronn); }
.helsekort.gammel { background: rgba(255, 203, 5, .14);  color: var(--gul); }
.helsekort.nede   { background: rgba(255, 95, 86, .16);  color: var(--rod); }

.tallrad { display: flex; flex-wrap: wrap; gap: 8px; }
.talle {
  flex: 1 1 90px; padding: 11px 12px; border-radius: 11px;
  background: var(--flate-2); border: 1px solid var(--kant);
}
.talle b { display: block; font-size: 20px; font-variant-numeric: tabular-nums; }
.talle span { font-size: 11.5px; color: var(--tekst-svak); }

.tabell { border: 1px solid var(--kant); border-radius: 11px; overflow: hidden; }
.tabell .rad {
  display: flex; flex-wrap: wrap; gap: 4px 14px; padding: 10px 12px;
  border-bottom: 1px solid var(--kant); font-size: 13px;
}
.tabell .rad:last-child { border-bottom: 0; }
.tabell .rad span:first-child { flex: 1 1 200px; }
.tabell .rad.feil { background: rgba(255, 95, 86, .07); }
.tabell .rad.klikkbar { cursor: pointer; }
.tabell .rad.klikkbar:hover { background: var(--flate-2); }
.tabell .ua { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; }

.admin-sok {
  width: 100%; margin: 10px 0; padding: 11px 12px; font-size: 16px;
  background: var(--flate-2); border: 1px solid var(--kant);
  border-radius: 11px; color: var(--tekst); -webkit-appearance: none;
}

.umatchet {
  padding: 12px; border: 1px solid var(--kant); border-radius: 11px;
  margin-bottom: 8px;
}
.umatchet.koblet { border-color: var(--gronn); opacity: .7; }
.umatchet-topp { display: flex; gap: 10px; align-items: flex-start; }
.umatchet-topp img {
  width: 44px; height: 44px; object-fit: contain; border-radius: 8px;
  background: var(--flate-2); flex: 0 0 auto;
}
.umatchet-topp b { display: block; font-size: 13.5px; }
.umatchet-verktoy { margin-top: 10px; }
.koble-sok {
  width: 100%; padding: 9px 11px; font-size: 16px; border-radius: 9px;
  background: var(--flate); border: 1px solid var(--kant); color: var(--tekst);
  -webkit-appearance: none;
}
.koble-treff { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.koble-treff .chip { font-size: 12px; }
.umatchet-verktoy .ok { color: var(--gronn); font-size: 13px; }

/* ------------------------------------------------------- feedback */

.skjema textarea {
  padding: 11px 12px; background: var(--flate-2); border: 1px solid var(--kant);
  border-radius: 11px; color: var(--tekst); font: inherit; font-size: 16px;
  resize: vertical; -webkit-appearance: none;
}
.skjema textarea:focus { outline: none; border-color: var(--gul); }

.umatchet.ny { border-color: var(--gul); }
.fb-topp { display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; }
.fb-tekst {
  white-space: pre-wrap; margin: 8px 0; font-size: 14px;
  border-left: 2px solid var(--kant); padding-left: 10px;
}

/* Tekstlister pa personvernsiden. .side-liste er for tilbudsrader og har
   sitt eget rutenett; denne er vanlig prosa med kulepunkt. */
.side-liste-tekst { padding-left: 20px; margin: 0 0 16px; }
.side-liste-tekst li { margin-bottom: 8px; }
.side-innhold code {
  background: var(--flate-2); padding: 1px 5px; border-radius: 5px;
  font-size: 13px;
}
.side-innhold a { color: var(--bla); }

/* Forhandssalg og bestillingsvarer: synlige, men tydelig ikke «pa lager». */
.pris.bestilling { color: var(--bla); }
.lager.bestilling { color: var(--bla); }
.merkelapp.bestilling {
  background: rgba(76, 154, 255, .15); color: var(--bla);
  font-size: 11px; padding: 2px 7px; border-radius: 999px; white-space: nowrap;
}
.side-lager.bestilling { color: var(--bla); }
.side-status.bestilling { background: rgba(76, 154, 255, .12); color: var(--bla); }

/* Nedtelling til et sett som ikke er sluppet enna.
 *
 * Ligger over listen og utenfor filtrene. Den skal se ut som en plakat, ikke
 * som enda et produktkort -- den konkurrerer med resten av siden om
 * oppmerksomhet, og den vinner bare hvis den ser annerledes ut. */
.slipp {
  margin: 14px;
  padding: 16px;
  border-radius: 14px;
  border: 1px solid var(--gul);
  background: linear-gradient(160deg, rgba(255, 200, 0, .10), transparent 70%);
}
.slipp-topp { display: flex; align-items: center; gap: 14px; margin-bottom: 10px; }
.slipp-dager {
  font-size: 40px;
  font-weight: 700;
  line-height: 1;
  color: var(--gul);
  font-variant-numeric: tabular-nums;
}
.slipp-tekst { font-size: 15px; line-height: 1.3; }
.slipp-tekst strong { font-size: 17px; }
.slipp .hovedknapp { margin-top: 10px; }
.slipp .lenkeknapp { margin-top: 6px; }

/* Prisgrense per vare. Skal se ut som en innstilling, ikke som et skjema --
 * den staar rett under folgeknappen og maa ikke stjele oppmerksomhet fra
 * prisene, som er det folk kom for. */
.grense {
  display: flex; align-items: center; gap: 6px;
  margin-top: 8px; font-size: 13px; color: var(--tekst-svak);
}
.grense input {
  width: 88px; padding: 5px 8px; border-radius: 8px;
  border: 1px solid var(--kant); background: var(--flate);
  color: var(--tekst); font-size: 14px; font-variant-numeric: tabular-nums;
}

/* Bunntekst.
 *
 * To jobber, og den ene er ikke design: ansvarsfraskrivelsen MAA staa der
 * folk faktisk er, ikke gjemt paa en underside. Vi viser priser vi henter
 * automatisk fra andres nettsider, og vi er ikke part i kjopet. Sier vi det
 * ikke hoyt, har vi latt vaere aa si det.
 *
 * Den andre er sokemotorer: lenkene herfra er det som gjor at /butikker og
 * /kalender i det hele tatt blir funnet.
 *
 * I appen ligger den OVER den faste fanelinja, med luft under seg saa den
 * ikke havner bak. */
.bunn {
  margin: 32px 14px calc(78px + env(safe-area-inset-bottom));
  padding-top: 18px;
  border-top: 1px solid var(--kant);
  color: var(--tekst-svak);
  font-size: 12.5px;
  line-height: 1.55;
}
.side .bunn { margin-bottom: 32px; max-width: 780px; margin-left: auto; margin-right: auto; }
.bunn-lenker { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-bottom: 14px; }
.bunn-lenker a { color: var(--tekst); text-decoration: none; }
.bunn-lenker a:hover { text-decoration: underline; }
.bunn-tekst { margin: 0 0 8px; }
.bunn-merke { margin: 14px 0 0; opacity: .7; }

/* Honningkrukka. Maa vaere usynlig for mennesker OG for skjermlesere, men
 * fortsatt i DOM-en og utfyllbar for en robot. display:none er ikke nok --
 * enkelte roboter hopper over skjulte felt. */
.honning {
  position: absolute; left: -9999px; width: 1px; height: 1px;
  overflow: hidden;
}

/* Serverrendrede oversiktssider: butikker og kalender. */
.tabell-side { overflow-x: auto; margin: 14px 0; }
.tabell-side table { width: 100%; border-collapse: collapse; font-size: 14px; }
.tabell-side th, .tabell-side td {
  padding: 9px 10px; border-bottom: 1px solid var(--kant); text-align: left;
}
.tabell-side th { color: var(--tekst-svak); font-weight: 500; font-size: 12.5px; }
.tabell-side .tall { text-align: right; font-variant-numeric: tabular-nums; }

.kal-post {
  padding: 14px 0; border-bottom: 1px solid var(--kant);
}
.kal-post h3 { margin: 4px 0 6px; font-size: 17px; }
.kal-dato {
  display: flex; align-items: baseline; gap: 10px;
  font-size: 13px; color: var(--tekst-svak);
}
.kal-naar { color: var(--gul); font-weight: 600; }

/* Stolper paa statistikksiden. Ren HTML og en bredde i prosent -- et
 * diagrambibliotek er hundre kilobyte for dette. */
.stolper { margin: 10px 0 6px; }
.stolpe-rad {
  display: grid; grid-template-columns: 1fr 2fr auto;
  gap: 10px; align-items: center; padding: 4px 0; font-size: 13px;
}
.stolpe-merk { color: var(--tekst); overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; }
.stolpe-spor { background: var(--flate); border-radius: 999px; height: 8px; }
.stolpe-fyll { display: block; height: 8px; border-radius: 999px; background: var(--gul); }
.stolpe-tall { color: var(--tekst-svak); font-variant-numeric: tabular-nums;
  font-size: 12px; white-space: nowrap; }


/* Sorteringsvalget. Ligger over filterknappene, ikke inni dem: et filter
   fjerner rader, en sortering flytter dem. Blandes de i samme rad, tror
   folk at «Slippdato» skjuler sett uten dato. */
.sorter-rad {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 9px;
  font-size: 13px;
  color: var(--tekst-svak);
}
.sorter-rad select {
  background: var(--flate);
  color: var(--tekst);
  border: 1px solid var(--kant);
  border-radius: 999px;
  padding: 6px 26px 6px 12px;
  font-family: inherit;
  font-size: 16px; /* 16px = ingen iOS-zoom, samme grunn som #sok */
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%238b95a3' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 10px;
}
.sorter-rad select:focus-visible { outline: 2px solid var(--gul); }


/* Lenker til soesknene i samme sett. Ligger nederst paa produktsiden:
   den som ikke fant det den lette etter, skal ha et sted aa gaa som ikke
   er tilbakeknappen. */
.side-sosken { list-style: none; padding: 0; margin: .5rem 0 1rem; }
.side-sosken li {
  display: flex; align-items: baseline; gap: .5rem;
  padding: 9px 0; border-bottom: 1px solid var(--kant);
}
.side-sosken a { color: var(--tekst); text-decoration: none; }
.side-sosken a:hover { text-decoration: underline; }
.side-sosken-inne { font-size: 12px; color: var(--gronn); }
.side-mer { font-size: 13px; color: var(--tekst-svak); margin-top: 1.2rem; }
.side-mer a { color: var(--tekst-svak); }


/* =====================================================================
   RESTOCK-STRIPE, FILTERKNAPP, RUTENETT -- OG KARTET SOM ENNA PROVES
   =====================================================================
   Alt dette laa bak `body.ny` mens det ble provd ut. Fire av fem er
   godkjent og staar naa for alle; prefikset er fjernet. Kartreglene
   staar igjen, men de gjor ingenting uten knappen, og den finnes bare
   paa /ny.
   ===================================================================== */

/* Sammenleggbart panel. Da funksjonen sto til proving var dette
   `display: contents` paa forsiden, saa beholderen ikke fantes i
   layouten der. Naa gjelder den overalt, og trikset kan gaa. */
.filterpanel {
  display: block;
  max-height: 0;
  overflow: hidden;
  transition: max-height 160ms ease-out;
}
.filterpanel.apent { max-height: 300px; overflow-x: auto; }

.filterlinje {
  display: flex; align-items: center; gap: 7px;
  margin-top: 9px;
  overflow-x: auto; scrollbar-width: none;
}
.filterlinje::-webkit-scrollbar { display: none; }

.filterknapp {
  display: flex; align-items: center; gap: 6px; flex: none;
  background: var(--tekst); color: var(--bg);
  border: 0; border-radius: 999px;
  padding: 7px 14px; font-size: 13.5px; font-weight: 600;
}
.filterteller {
  background: rgba(11, 13, 16, .22);
  border-radius: 999px; padding: 1px 6px;
  font-size: 11px; font-variant-numeric: tabular-nums;
}
.aktive-filtre { display: flex; gap: 7px; }
.aktiv-chip {
  display: flex; align-items: center; gap: 6px; flex: none;
  background: var(--flate-2); border: 1px solid var(--kant);
  border-radius: 999px; padding: 6px 10px 6px 12px;
  font-size: 13px; white-space: nowrap;
}
.aktiv-chip button {
  border: 0; background: none; padding: 0 2px;
  color: var(--tekst-svak); font-size: 15px; line-height: 1;
}

/* --- restock-stripen: det eneste som haster --- */
.stripe {
  background: var(--flate-2);
  border: 1px solid var(--kant);
  border-radius: var(--radius);
  padding: 12px;
  margin-bottom: 12px;
}
.stripe-topp {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 9px;
}
.stripe-merke {
  font-size: 11px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--gronn);
}
.stripe-antall {
  font-size: 11px; color: var(--tekst-svak);
  font-variant-numeric: tabular-nums;
}
.stripe-rad {
  display: flex; align-items: center; gap: 10px; width: 100%;
  background: var(--flate); border: 1px solid var(--kant);
  border-radius: 12px; padding: 8px;
  margin-bottom: 7px; text-align: left; color: inherit;
}
.stripe-rad:last-child { margin-bottom: 0; }
.stripe-bilde {
  width: 34px; height: 44px; flex: none;
  border-radius: 6px; object-fit: contain; background: var(--flate-2);
}
/* min-width: 0 -- uten den nekter flex-barnet aa krympe, og teksten
   presser prisen ut av kortet i stedet for aa forkortes. */
.stripe-tekst { flex: 1; min-width: 0; }
.stripe-navn {
  display: block; font-size: 13.5px; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.stripe-meta {
  display: block; font-size: 11px; color: var(--tekst-svak);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.stripe-pris {
  flex: none; font-size: 14px; font-weight: 700;
  font-variant-numeric: tabular-nums;
}
/* Ingenting inne: én stille linje. En tom fremhevet blokk roper like hoyt
   som en full, og da slutter folk aa se paa den. */
.stripe-stille {
  font-size: 12px; color: var(--tekst-svak);
  padding: 8px 2px 12px;
}

#tom-liste .lenkeknapp {
  display: block; margin: 12px auto 0;
}

/* --- kart over fysiske butikker (testomraadet) --- */
.kartknapp {
  flex: none; margin-left: auto;
  background: var(--flate-2); color: var(--tekst);
  border: 1px solid var(--kant); border-radius: 999px;
  padding: 7px 13px; font-size: 13px; white-space: nowrap;
}
.kart-boks {
  height: 320px;
  border: 1px solid var(--kant);
  border-radius: var(--radius);
  margin: 12px 0;
  overflow: hidden;
  background: var(--flate-2);
}

/* OSM-flisene er lyse, appen er mork.
 *
 * Dette er den vanlige maaten aa gjore OSM morkt paa uten aa binde seg
 * til en betalt flisleverandor: inverter, snu fargehjulet tilbake saa
 * vann fortsatt er blaatt, og demp litt. */
.leaflet-tile-pane {
  filter: invert(1) hue-rotate(180deg) brightness(.92) contrast(.9);
}
.leaflet-container { background: var(--flate-2); }
.leaflet-control-attribution {
  background: rgba(11, 13, 16, .75) !important;
  color: var(--tekst-svak) !important;
  font-size: 10px !important;
}
.leaflet-control-attribution a { color: var(--tekst-svak) !important; }
.leaflet-control-zoom a {
  background: var(--flate) !important;
  color: var(--tekst) !important;
  border-color: var(--kant) !important;
}

/* Markorene ligger UTENFOR flis-panelet, saa fargefilteret over roerer
   dem ikke -- de skal vaere gronne, ikke inverterte. */
.kart-merke { fill: var(--gronn); fill-opacity: .85; stroke: #0b0d10; stroke-width: 2; }
.kart-merke.kommer { fill: none; stroke: var(--tekst-svak); stroke-width: 2; }
.kart-meg { fill: var(--bla); fill-opacity: .9; stroke: #0b0d10; stroke-width: 2; }

.leaflet-popup-content-wrapper, .leaflet-popup-tip {
  background: var(--flate) !important;
  color: var(--tekst) !important;
}
.leaflet-popup-content { font-size: 13px; }
.popup-adresse { color: var(--tekst-svak); font-size: 11.5px; }

.stedliste { list-style: none; padding: 0; margin: 12px 0 0; }
.stedliste li {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--kant);
}
.stedliste li:last-child { border-bottom: 0; }
.stedliste span span { display: block; }
.stedavstand {
  flex: none; font-size: 12px; color: var(--tekst-svak);
  font-variant-numeric: tabular-nums;
}

/* To lenkeknapper etter hverandre i slippboksen hang sammen uten
   mellomrom: «Vis alle 16 produkteneHele slippkalenderen». De er inline,
   og HTML kollapser ikke linjeskift til et synlig skille inne i en
   flex-fri beholder. */
.slipp .lenkeknapp { display: inline-block; margin-right: 14px; }
.slipp .lenkeknapp:last-child { margin-right: 0; }
.kart-forklaring circle { fill: var(--gronn); }
.kart-forklaring circle.tom {
  fill: none; stroke: var(--tekst-svak); stroke-width: 1.4;
}
.kart-forklaring text { fill: var(--tekst-svak); font-size: 9.5px; }

/* --- rutenett med store bilder (testomraadet) --- */
.visknapp {
  flex: none;
  background: var(--flate-2); color: var(--tekst);
  border: 1px solid var(--kant); border-radius: 999px;
  padding: 7px 13px; font-size: 13px; white-space: nowrap;
}
.liste.rutenett {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
@media (min-width: 560px)  { .liste.rutenett { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 860px)  { .liste.rutenett { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1120px) { .liste.rutenett { grid-template-columns: repeat(5, 1fr); } }

/* Settoverskriftene hoerer til listen. I et rutenett ville de brutt
   kolonnene i biter og gjort rutenettet til en liste med luft i. */
.liste.rutenett .sett-tittel { display: none; }

.rutekort {
  display: flex; flex-direction: column; gap: 8px;
  background: var(--flate); border: 1px solid var(--kant);
  border-radius: var(--radius);
  padding: 10px; text-align: left; cursor: pointer;
  color: inherit;
}
.rutekort:active { background: var(--flate-2); }

.rutebilde {
  position: relative; display: block;
  /* Kvadratisk ramme uansett bildeformat. Uten den hopper radene i
     hoyde etter hvilke pakkeskudd butikkene tilfeldigvis har. */
  aspect-ratio: 1 / 1;
  background: var(--flate-2);
  border-radius: 10px; overflow: hidden;
}
.rutefoto {
  width: 100%; height: 100%;
  /* contain, ikke cover: en booster box skal ikke beskjaeres slik at
     settnavnet paa esken forsvinner. */
  object-fit: contain;
  padding: 6px;
}
.rute-folges {
  position: absolute; top: 6px; right: 6px;
  background: rgba(11, 13, 16, .72); border-radius: 999px;
  width: 22px; height: 22px; display: grid; place-items: center;
  font-size: 12px; color: var(--rod);
}
.rutenavn {
  font-size: 13px; font-weight: 600; line-height: 1.25;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; min-height: 2.5em;
}
.rutebunn { display: flex; align-items: center; gap: 7px; }
.ruteprikk { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.ruteprikk.inne { background: var(--gronn); }
.ruteprikk.forhand { background: var(--gul); }
.ruteprikk.ute { background: var(--kant); }
.rutepris {
  font-size: 14px; font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* --- postnummer i stedet for posisjonstilgang --- */
.postrad { display: flex; align-items: center; gap: 10px; margin: 12px 0 4px; }
.postrad label { font-size: 13px; color: var(--tekst-svak); flex: none; }
#postnr {
  width: 96px; padding: 9px 12px;
  background: var(--flate-2); border: 1px solid var(--kant);
  border-radius: 10px; color: var(--tekst);
  font-size: 16px; /* 16px = ingen iOS-zoom */
  font-variant-numeric: tabular-nums;
  -webkit-appearance: none;
}