/* Björnkassan UF
 *
 * Formspråket kommer ur bjornkassen_mockup_v3.html och ändras inte på eget
 * bevåg. Färgerna står här, på ett ställe, och byts inte ut godtyckligt.
 * Se SPECIFIKATION avsnitt 19.
 */

:root {
  --green: #194a39;
  --lime: #e7f0df;
  --cream: #faf8f2;
  --ink: #1b2924;
  --muted: #66736c;
  --line: #dde3d9;
  --orange: #c06e32;

  /* Statusfärger. Vilken status som får vilken färg bestäms i en tabell,
   * aldrig genom att gissa ur statustexten. Se SPECIFIKATION avsnitt 13. */
  --ok-bg: #dff1e5;      --ok-text: #23653e;
  --wait-bg: #fff0d7;    --wait-text: #996221;
  --onway-bg: #e2ebfa;   --onway-text: #315f9d;
  --bad-bg: #fae2df;     --bad-text: #973e32;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font: 15px/1.5 Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  background: var(--cream);
  color: var(--ink);
}

button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
a { color: var(--green); }

/* ------------------------------------------------------------------ ramverk */

.wrap { max-width: 1160px; margin: auto; padding: 0 22px; }

header {
  background: white;
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 4;
}

/* Menyn ligger intill loggan, inte ute vid kanten. På en bred skärm blir
   avståndet annars så stort att de två inte längre ser ut att höra ihop. */
.top {
  display: flex;
  align-items: center;
  min-height: 75px;
  gap: 38px;
}

.brand {
  font-weight: 900;
  font-size: 23px;
  color: var(--green);
  letter-spacing: -1px;
  text-decoration: none;
}
.brand small { font-size: 11px; letter-spacing: 2px; margin-left: 4px; }

.nav { display: flex; gap: 7px; flex-wrap: wrap; }
.nav a {
  color: var(--ink);
  text-decoration: none;
  padding: 10px 13px;
  border-radius: 10px;
}
.nav a:hover, .nav a[aria-current="page"] { background: var(--lime); }

main { padding: 35px 0 70px; }

.footer {
  padding: 25px;
  text-align: center;
  border-top: 1px solid var(--line);
  font-size: 12px;
  color: var(--muted);
}
.footer a { color: var(--green); }

/* ------------------------------------------------------------------- text */

h1 {
  font-size: clamp(38px, 5vw, 65px);
  line-height: 1.07;
  letter-spacing: -2.5px;
  margin: 10px 0 18px;
  color: var(--green);
}
h2 { font-size: 30px; letter-spacing: -0.8px; margin: 5px 0 20px; }
h3 { margin: 0 0 12px; }
h4 { margin: 16px 0 9px; }

.eyebrow {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-weight: 850;
  color: #567960;
}
.muted { color: var(--muted); }
.mini { font-size: 12px; }
.subtle { font-size: 12px; color: var(--muted); }

/* ----------------------------------------------------------------- knappar */

.btn {
  background: var(--green);
  color: white;
  border: 0;
  border-radius: 11px;
  padding: 12px 18px;
  font-weight: 750;
  text-decoration: none;
  display: inline-block;
}
.btn:hover { filter: brightness(1.1); }
.btn.secondary { background: var(--lime); color: var(--green); }
.btn.outline { background: white; color: var(--green); border: 1px solid var(--green); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; filter: none; }

.ghost {
  background: transparent;
  border: 1px solid transparent;
  color: var(--ink);
  padding: 10px 13px;
  border-radius: 10px;
}

.smallbtn {
  background: var(--lime);
  color: var(--green);
  border: 0;
  border-radius: 8px;
  padding: 8px 11px;
  font-weight: 700;
}
.smallbtn.dark { background: var(--green); color: #fff; }

/* ------------------------------------------------------------------- block */

.card {
  background: white;
  border: 1px solid var(--line);
  border-radius: 17px;
  padding: 23px;
}

.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 19px; }
.two { display: grid; grid-template-columns: 1.4fr 0.8fr; gap: 22px; }
/* En spalt som haller flera kort isar. Behovs i kassan, dar hogerspalten
   bar bade bestallningen och upplysningarna fore kop. */
.spalt { display: flex; flex-direction: column; gap: 22px; }
.features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 28px 0; }
.features .card { padding: 20px; }

.between { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.line { border: 0; border-top: 1px solid var(--line); margin: 18px 0; }

.hero {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  overflow: hidden;
  border-radius: 23px;
  background: #e7efdf;
  min-height: 370px;
}
.heroText {
  padding: 55px 45px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}
.heroArt {
  /* Mjuk ljusning bakom bjornen i stallet for ett eget fargfalt. Den harda
     kanten mitt i rutan lasas som tva olika rutor som rakat hamna intill
     varandra. */
  background: radial-gradient(circle at 52% 56%, #cfe4c2 0%, #e7efdf 72%);
  display: flex;
  align-items: center;
  justify-content: center;
}

.banner {
  padding: 15px 18px;
  background: var(--lime);
  border: 1px solid #c9ddc6;
  border-radius: 12px;
  margin-bottom: 20px;
}
.notice-orange {
  padding: 13px 15px;
  background: #fff2e3;
  border: 1px solid #ebc69c;
  border-radius: 11px;
  margin: 13px 0;
  color: #794c20;
}

/* --------------------------------------------------------------- produkter */

.product-photo {
  aspect-ratio: 1 / 1;
  width: 100%;
  border-radius: 12px;
  overflow: hidden;
  background: var(--lime);
}

/* På en bred skärm växer en kvadratisk bild annars tills första raden
 * produkter inte får plats utan att man skrollar. Bilderna är kvar
 * kvadratiska, men slutar växa. */
@media (min-width: 801px) {
  .product-photo { max-width: 250px; margin-inline: auto; }
}
.product-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.product-photo svg { width: 100%; height: 100%; display: block; }

.prodBottom { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 17px; }
.price { font-size: 21px; font-weight: 900; color: var(--green); }

/* ---------------------------------------------------------------- formulär */

.field { display: flex; flex-direction: column; gap: 5px; margin: 13px 0; }
.field label { font-weight: 700; font-size: 13px; }
.field input, .field select, .field textarea {
  border: 1px solid #cbd5cb;
  border-radius: 10px;
  padding: 12px;
  background: white;
  width: 100%;
}
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid #91b398; }
.field .hint { display: block; font-size: 12px; color: var(--muted); }
.field .error { font-size: 12px; color: var(--bad-text); font-weight: 700; }

/* ---------------------------------------------------------------- tabeller */

table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 13px 9px; border-bottom: 1px solid var(--line); }
th { font-size: 12px; text-transform: uppercase; color: var(--muted); }
.tablewrap { overflow-x: auto; }

/* ----------------------------------------------------------------- status */

.status {
  display: inline-block;
  padding: 5px 9px;
  background: #eef1eb;
  color: #50615b;
  border-radius: 99px;
  font-size: 12px;
  font-weight: 750;
  white-space: nowrap;
}
.status.ok    { background: var(--ok-bg);    color: var(--ok-text); }
.status.wait  { background: var(--wait-bg);  color: var(--wait-text); }
.status.onway { background: var(--onway-bg); color: var(--onway-text); }
.status.bad   { background: var(--bad-bg);   color: var(--bad-text); }

/* ----------------------------------------------------------------- adminen */

.admin-shell { display: grid; grid-template-columns: 205px minmax(0, 1fr); gap: 18px; align-items: start; }
.admin-menu {
  background: white;
  border: 1px solid var(--line);
  border-radius: 17px;
  padding: 12px;
  position: sticky;
  top: 98px;
}
.admin-menu a {
  display: block;
  padding: 11px 12px;
  margin: 2px 0;
  border-radius: 9px;
  text-decoration: none;
  color: var(--ink);
  font-weight: 650;
}
.admin-menu a:hover, .admin-menu a[aria-current="page"] { background: var(--lime); color: var(--green); }
.admin-main { min-width: 0; }

.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 13px; margin-bottom: 22px; }
.stat strong { font-size: 28px; color: var(--green); display: block; }
.metric-label { font-size: 12px; color: var(--muted); }

.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 0 0 14px; }
.toolbar { display: flex; gap: 9px; align-items: center; flex-wrap: wrap; margin: 12px 0; }

/* -------------------------------------------------------- hjälpmedel m.m. */

.screen-reader {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}
.skip-link {
  position: absolute;
  left: -9999px;
}
.skip-link:focus {
  left: 12px; top: 12px;
  background: var(--green);
  color: white;
  padding: 10px 14px;
  border-radius: 9px;
  z-index: 20;
}
:focus-visible { outline: 3px solid #91b398; outline-offset: 2px; }

/* ------------------------------------------------------------------- mobil */

@media (max-width: 800px) {
  .hero, .two { grid-template-columns: 1fr; }
  .heroText { padding: 34px; }
  .heroArt { min-height: 210px; }
  .grid, .features { grid-template-columns: 1fr 1fr; }
  .stats { grid-template-columns: 1fr 1fr; }
  .top { align-items: flex-start; flex-direction: column; padding: 14px 0; }
  .nav a { padding: 7px 9px; }
}

@media (max-width: 850px) {
  .admin-shell { grid-template-columns: 1fr; }
  .admin-menu { position: static; display: flex; overflow-x: auto; gap: 5px; }
  .admin-menu a { flex: 0 0 auto; white-space: nowrap; }
}

@media (max-width: 540px) {
  .grid, .features { grid-template-columns: 1fr; }
  .card { padding: 16px; }
  .wrap { padding: 0 14px; }
  h2 { font-size: 25px; }
  th, td { padding: 9px 4px; font-size: 12px; }
}

/* ----------------------------------------------------------------- utskrift */

@media print {
  header, .admin-menu, .no-print, .footer { display: none !important; }
  body { background: white; }
  .card { border: 0; padding: 0; }
  .wrap { max-width: none; padding: 0; }
}

/* Formulär som ligger på en rad i en tabell, till exempel i risklistan.
   Bryter ner sig under varandra på liten skärm. */
.radform { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.radform input { flex: 1 1 140px; min-width: 0; }
.radform button { flex: 0 0 auto; }

/* Stegen på startsidan. Siffran gör ordningen synlig utan att texten
   behöver säga "först", "sedan" och "till sist". */
.steg { position: relative; padding-top: 26px; }
.steg .siffra {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  margin-bottom: 12px;
  border-radius: 50%;
  background: var(--lime);
  color: var(--green);
  font-weight: 800;
  font-size: 15px;
}

/* Björnen i hjältebilden. Får inte bli så stor att den trycker undan
   knapparna på en liten skärm. */
.heroArt .bjorn { width: 72%; max-width: 300px; height: auto; display: block; }
@media (max-width: 980px) {
  .heroArt .bjorn { width: 46%; max-width: 200px; }
}

/* Startsidan ska rymmas utan att besökaren scrollar för att se de tre stegen.
   Därför är hjältebilden lägre här än på andra sidor, rubriken något mindre,
   och luften mellan delarna knappare. Reglerna gäller bara startsidan, så
   inget annat blir trångt av det. */
.start main { padding-top: 20px; }
.start .hero { min-height: 0; }
.start .heroText { padding: 34px 40px; }
.start h1 { font-size: clamp(32px, 3.6vw, 50px); margin: 4px 0 14px; }
.start .heroText p { margin: 0 0 18px; }
.start .heroArt .bjorn { width: 48%; max-width: 186px; }
.start .features { margin: 18px 0 0; }
.start .features .card { padding: 17px 20px; }
.start .features h3 { margin: 0 0 7px; }
.start .steg { padding-top: 17px; }
.start .steg .siffra { width: 26px; height: 26px; margin-bottom: 9px; font-size: 14px; }

@media (max-width: 980px) {
  .start .heroArt .bjorn { width: 38%; max-width: 150px; }
}

/* Tre varor i rad på startsidan. Fyra blir trångt när bilderna är kvadratiska,
   och tre räcker för att visa bredden i sortimentet. */
.grid.tre { grid-template-columns: repeat(3, 1fr); }

/* Vinsträknaren på "Sälj med klassen".
   Siffran står i en egen ruta bredvid sin etikett, så den går att läsa av
   utan att man först letar reda på var reglaget står. */
.raknare { background: var(--lime); margin-bottom: 18px; }

.raknare-rad {
  margin: 18px 0;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 4px 12px;
}
.raknare-rad label { grid-column: 1; grid-row: 1; font-weight: 650; }
.raknare-rad input[type="range"] {
  grid-column: 1 / -1;
  grid-row: 2;
  width: 100%;
  margin-top: 6px;
  accent-color: var(--green);
}
.raknare-rad .raknare-tal {
  grid-column: 2;
  grid-row: 1;
  background: white;
  border: 1px solid #cfdcc8;
  border-radius: 9px;
  padding: 2px 12px;
  font-size: 15px;
}
.raknare-rad .raknare-tal b { font-size: 21px; color: var(--green); }

.raknare-tabell { width: 100%; margin-top: 22px; }
.raknare-tabell td { padding: 7px 0; border-bottom: 1px solid #cfdcc8; }
.raknare-tabell td:last-child { text-align: right; }

.raknare-svar { margin: 20px 0 4px; font-size: 18px; }
.raknare-svar strong {
  display: block;
  font-size: clamp(36px, 5vw, 52px);
  line-height: 1.1;
  letter-spacing: -1.6px;
  color: var(--green);
}

/* Björnen bredvid ordmärket. Höjden är låst till textens, så sidhuvudet
   behåller sin höjd. alt är tomt med flit: länken säger redan Björnkassan,
   och en skärmläsare ska inte läsa upp namnet två gånger. */
.brand { display: inline-flex; align-items: center; gap: 9px; }
.brand-bjorn { height: 34px; width: auto; display: block; }

/* Produktsidan: bilden får inte bli så hög att texten hamnar under vikten.
   Rutan är kvadratisk, så en begränsad höjd begränsar också bredden. */
.produktbild { max-width: 420px; margin: 0 auto; }

/* Anmälningsknappen i menyn. Den ska läsas som en knapp, inte som ännu en
   länk, och får därför inte menyns hovereffekt. */
.nav .navbtn { color: white; padding: 9px 15px; margin-left: 4px; }
.nav .navbtn:hover, .nav .navbtn[aria-current="page"] { background: #143d2f; }

/* Ankaret hamnar annars under det klistrade sidhuvudet. */
#anmalan { scroll-margin-top: 92px; }

/* Inloggningen i sidfoten. Diskret, eftersom den bara angår en handfull
   personer — men synlig, eftersom skyddet är låset och inte att adressen
   är svår att hitta. */
.footer .inloggning { color: var(--muted); text-decoration: none; }
.footer .inloggning:hover { text-decoration: underline; }


/* Swish-rutan pa betalningssidan.

   Knappen ar det forsta man ser, eftersom de allra flesta star med telefonen
   i handen. QR-koden ligger under for den som sitter vid en dator. Bada leder
   till samma adress, dar belopp och ordernummer redan ar ifyllda. */
.swish-betala { margin: 14px 0 6px; }
.swish-knapp { display: block; text-align: center; width: 100%; }
.swish-qr {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px;
  width: 220px;
  margin: 12px 0 6px;
}
.swish-qr svg { display: block; width: 100%; height: auto; }
.swish-manuellt {
  border-top: 1px solid var(--line);
  margin-top: 12px;
  padding-top: 10px;
}


/* Faktatabellen pa produktsidan.

   I en telefon ar bredden slut och rubriken stod tatt intill vardet, sa att
   "MANGD" och "Fyrpack" sag ut som ett enda ord. Darfor laggs rubriken pa en
   egen rad under 640 px. Pa en bred skarm far rubrikkolumnen en fast bredd
   i stallet, sa att vardena borjar pa samma stalle. */
.produktfakta th { width: 30%; padding-right: 16px; }

@media (max-width: 640px) {
  .produktfakta, .produktfakta tbody, .produktfakta tr { display: block; }
  .produktfakta th, .produktfakta td { display: block; width: auto; padding: 0; }
  .produktfakta th { border: 0; padding-right: 0; }
  .produktfakta td { padding: 2px 0 12px; border-bottom: 1px solid var(--line); }
}


/* En etikett som skarmlasaren laser upp men ogat inte ser. Anvands dar
   rubriken ovanfor redan sager vad faltet ar, sa att den synliga texten
   inte star dubbelt. */
.visuellt-dold {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* Deltagarens egna sida, den hon skickar till slakt och vanner.

   Namnet ar det storsta pa sidan. Den som far lanken av sitt barnbarn ska se
   barnbarnet forst och varorna sedan. */
/* Deltagarens egen sida.
   Rubriken ar inte en rubrik i en text utan en halsning fran en person, och
   da duger inte en platt ruta. Bandet overst ger sidan en overkant, ringen
   med bjornen ger den ett ansikte och namnet far vila mot vitt. Allt ritas
   med fargerna som redan finns, sa att inget nytt behover laddas. */
.saljare-hero {
  position: relative;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 0 26px 34px;
  margin: 10px 0 30px;
  text-align: center;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(27, 41, 36, .05), 0 8px 24px rgba(27, 41, 36, .06);
}

/* Bandet. Adresserna till bilderna satts av sidan, i --bandbild och
   --bandbild-liten, inte har: en stilmall kan ligga kvar i webblasaren aven
   nar dess egen adress bytt versionsnummer, och da pekar den pa en bild som
   inte finns. Sidan skapas vid varje besok och kan inte bli gammal sa.

   Tva bilder behovs. Den breda ar nastan 4:1, och samma bild pa en telefon
   beskars till mitten -- dar det bara ar tomt bord. Mobilbilden ar nastan
   fyrkantig och behaller hela motivet.

   Den grona ytan ligger kvar under. Laddas fotot inte alls blir bandet
   gront i stallet for en gra lucka. */
.saljare-band {
  height: 216px;
  margin: 0 -26px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 24px 40px;
  background-color: var(--green);
  background-image:
    linear-gradient(to bottom, rgba(27,41,36,.5) 0%, rgba(27,41,36,.2) 48%, rgba(27,41,36,.42) 100%),
    var(--bandbild, none);
  background-size: cover, cover;
  background-position: center, center;
}

/* Halsningen ligger pa bilden och inte under den. Den ar sagd av deltagaren
   och hor ihop med fotot; under ringen hade den bara blivit en etikett.

   Den ar stor med flit. Som liten versalrad lastes den som en etikett pa
   bilden i stallet for som nagot en person sager, och det forsta en kund
   motas av ska vara en halsning. Bredden ar satt sa att den bryts till tva
   rader, vilket ger bandet en mitt att vila i. */
.saljare-valkommen {
  margin: 0;
  max-width: 18ch;
  color: #fff;
  font-size: 34px;
  line-height: 1.14;
  letter-spacing: -.015em;
  font-weight: 800;
  text-wrap: balance;
  text-shadow: 0 2px 10px rgba(0, 0, 0, .45), 0 6px 34px rgba(0, 0, 0, .35);
}

.saljare-ring {
  width: 112px; height: 112px;
  margin: -56px auto 16px;
  border-radius: 50%;
  background: #fff;
  border: 5px solid #fff;
  box-shadow: 0 4px 18px rgba(27, 41, 36, .2);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  position: relative;
}
.saljare-ring img { width: 92px; height: 92px; object-fit: contain; display: block; }

.saljare-namn {
  margin: 0 0 6px;
  font-size: 44px; line-height: 1.04; letter-spacing: -.025em;
  color: var(--green);
  text-wrap: balance;
}
.saljare-klass {
  margin: 0 0 18px; color: var(--muted); font-weight: 600; font-size: 16px;
}

/* Andamalet ar gruppens egna ord och star som en mening, inte i en ruta.
   Rutan sag ut som en knapp och lockade till klick.

   Vadjan ligger i samma stycke. Tva stycken gjorde hjalten sa hog att
   knappen hamnade under skarmkanten pa en barbar dator. */
.saljare-andamal {
  margin: 0 auto 12px; max-width: 52ch;
  font-size: 17px; line-height: 1.5; color: var(--ink);
}
.saljare-andamal:last-of-type { margin-bottom: 20px; }
/* De tre uppgifterna. Fakta-raden ar sidans starkaste argument och far
   darfor samma storlek som andamalet; sista dagen star i orange, eftersom
   den ar det enda pa sidan som tar slut. */
.saljare-fakta {
  margin: 0 auto 8px; max-width: 48ch;
  font-size: 19px; line-height: 1.45; color: var(--ink);
}
.saljare-fakta b { color: var(--green); }

/* Anne-Lies egen text. Valkomstraden ar storre an brodtexten under, sa att
   den tar emot blicken nar den slappt rubriken pa bilden. Uppmaningen strax
   over knappen ar fet, eftersom den ar det enda i texten som ber om nagot. */
.saljare-valkomst {
  margin: 0 auto 10px; max-width: 46ch;
  font-size: 20px; line-height: 1.4; color: var(--ink); font-weight: 600;
}
.saljare-uppmaning {
  margin: 0 auto 16px; max-width: 46ch;
  font-size: 17px; font-weight: 700; color: var(--ink);
}
.saljare-sista {
  margin: 0 auto 22px;
  font-size: 16px; font-weight: 700; color: var(--orange);
}
.saljare-smatt {
  margin: 14px auto 0; max-width: 46ch;
  font-size: 14px; line-height: 1.5; color: var(--muted);
}

.saljare-hero .btn { padding: 15px 38px; font-size: 17px; }
.saljare-fot { margin-top: 30px; }

@media (max-width: 640px) {
  .saljare-hero { padding: 0 18px 28px; }
  .saljare-band {
    height: 182px; margin: 0 -18px;
    padding: 0 18px 34px;
    background-image:
      linear-gradient(to bottom, rgba(27,41,36,.5) 0%, rgba(27,41,36,.22) 50%, rgba(27,41,36,.45) 100%),
      var(--bandbild-liten, var(--bandbild, none));
  }
  .saljare-valkommen { font-size: 25px; max-width: 15ch; }
  .saljare-ring { width: 96px; height: 96px; margin: -48px auto 14px; }
  .saljare-ring img { width: 78px; height: 78px; }
  .saljare-namn { font-size: 32px; }
  .saljare-klass { margin-bottom: 16px; }
  .saljare-valkomst { font-size: 18px; }
  .saljare-andamal { font-size: 16px; margin-bottom: 10px; }
  .saljare-uppmaning { font-size: 16px; }
  .saljare-fakta { font-size: 17px; }
  .saljare-sista { font-size: 15px; margin-bottom: 18px; }
  .saljare-smatt { font-size: 13px; }

}


/* Exempelsumman pa startsidan. Star under knapparna, eftersom den ar ett skal
   att trycka pa dem och inte en rubrik i sig. */
.hero-exempel {
  display: inline-block;
  margin: 4px 0 20px;
  padding: 10px 16px;
  background: var(--lime);
  border-radius: 12px;
  font-size: 16px;
  color: var(--ink);
}
.hero-exempel b { color: var(--green); }


/* De tre pastaendena hogst upp. Bocken ritas med ett tecken och inte med en
   bild, sa att den foljer med i textstorleken och aldrig saknas. */
.hero-punkter { list-style: none; margin: 14px 0 20px; padding: 0; }
.hero-punkter li {
  position: relative;
  padding-left: 30px;
  margin-bottom: 9px;
  font-size: 17px;
  line-height: 1.45;
}
.hero-punkter li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  top: -1px;
  font-size: 19px;
  font-weight: 700;
  color: var(--green);
}

@media (max-width: 640px) {
  .hero-punkter li { font-size: 16px; padding-left: 26px; }
}


/* Saljkatalogen: sortimentet sett med klassens ogon.

   Vinsten ligger som en rund marke uppe till hoger pa bilden, eftersom det ar
   den siffran lararen letar efter. Kundens pris star under, i vanlig text, sa
   att de tva inte tavlar om uppmarksamheten. */
.saljkort { display: flex; flex-direction: column; }
.saljkort h3 { margin: 14px 0 2px; font-size: 18px; }
.saljkort-pris { margin: 8px 0 0; color: var(--muted); }
.saljkort-pris b { color: var(--ink); }

.saljkort-bild { position: relative; }
.saljkort-bild img {
  display: block; width: 100%; aspect-ratio: 1 / 1;
  object-fit: cover; border-radius: 12px; background: #fff;
}

.saljkort-vinst {
  position: absolute; top: 8px; right: 8px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: 92px; height: 92px;
  background: var(--orange); color: #fff;
  border-radius: 50%;
  font-size: 12px; line-height: 1.15; text-align: center;
  box-shadow: 0 2px 8px rgba(0,0,0,.18);
}
.saljkort-vinst b { font-size: 21px; font-weight: 800; }

@media (max-width: 640px) {
  .saljkort-vinst { width: 78px; height: 78px; font-size: 11px; }
  .saljkort-vinst b { font-size: 18px; }
}


/* Avprickningen. Faltet for ordernumret ar stort och tydligt, eftersom det ar
   det enda man tittar pa medan man laser i Swish-appen med andra handen. */
.avprickning { display: flex; gap: 14px; align-items: flex-end; flex-wrap: wrap; }
.avprickning .field { flex: 1 1 220px; margin: 0; }
.avprickning #nummer {
  font-size: 22px;
  letter-spacing: .04em;
  font-variant-numeric: tabular-nums;
  text-transform: uppercase;
}
.avprickning button { flex: 0 0 auto; }

@media (max-width: 640px) {
  .avprickning { flex-direction: column; align-items: stretch; }
  .avprickning button { width: 100%; }
}


/* Vem bestallningen raknas till.
   Lanken bestammer och kunden valjer inte, sa det har ar ett besked och inte
   ett falt. Darfor ingen ram och ingen knapp — bara namnet, tydligt nog att
   hon ser om hon hamnat hos fel person. */
.stottar { margin: 0; }
.stottar-namn {
  display: block;
  margin: 2px 0 1px;
  font-size: 21px;
  line-height: 1.25;
  color: var(--green);
}
.stottar .mini { color: var(--muted); }

/* Kunden som hittat hit utan lank.
   Orange, eftersom det ar ett hinder och inte ett fel hon gjort. Texten
   sager vad hon ska gora, inte vad som saknas. */
.ingen-lank {
  background: var(--wait-bg);
  border-radius: 14px;
  padding: 18px 20px;
}
.ingen-lank h3 { margin: 0 0 8px; color: var(--wait-text); font-size: 18px; }
.ingen-lank p { margin: 0 0 8px; }
.ingen-lank p:last-child { margin-bottom: 0; }


/* En lank som ska kunna lasas upp i telefon och skrivas av fran ett papper.
   Bryts mitt i ordet, eftersom en adress utan mellanslag annars skjuter ut
   rutan pa en smal skarm. */
.lank {
  display: inline-block;
  background: #f0f3eb;
  padding: 9px 12px;
  border-radius: 8px;
  word-break: break-all;
  font-size: 15px;
}

/* Deltagarens egen lank pa QR-arket. Mindre an saljlanken, eftersom den
   inte ska forvaxlas med den som delas ut. */
.qr-ruta .minlank {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed var(--line);
  font-size: 11px;
  color: var(--muted);
  word-break: break-all;
}


/* Produktkortet.
   Priset star over namnet och storre an det, eftersom kunden jamfor pris
   forst och laser namnet sedan. Mangden ar en egen gra rad under namnet och
   inte inbakad i namnet, sa att rubriken forblir lasbar. */
.card.vara { display: flex; flex-direction: column; gap: 0; }
.card.vara .product-photo { display: block; border-radius: 12px; overflow: hidden; }
.card.vara .price.stor {
  margin: 16px 0 2px;
  font-size: 26px; font-weight: 800; color: var(--green);
  font-variant-numeric: tabular-nums;
}
.card.vara h3 { margin: 0 0 4px; font-size: 17px; line-height: 1.3; }
.card.vara h3 a { color: var(--ink); text-decoration: none; }
.card.vara h3 a:hover { text-decoration: underline; }
.card.vara .mini { margin: 0 0 14px; flex: 1; }

/* Stegaren. Ett tryck per vara i stallet for lagg till, besked, leta upp
   knappen igen. Antalet star mellan tecknen, sa kunden ser vad hon valt
   utan att ga till varukorgen. */
.stegare {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-top: auto;
}
.stegare button {
  width: 44px; height: 44px; flex: 0 0 auto;
  border-radius: 50%; border: 1px solid var(--line);
  background: #fff; color: var(--green);
  font-size: 23px; line-height: 1; font-weight: 700;
  cursor: pointer;
}
.stegare button:hover:not(:disabled) { background: var(--lime); }
.stegare button:disabled { color: #bcc6bf; cursor: default; }
.stegare [data-plus] { background: var(--green); color: #fff; border-color: var(--green); }
.stegare [data-plus]:hover { background: #216348; }
.stegare [data-antal] {
  font-weight: 700; color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.stegare[data-vald="ja"] [data-antal] { color: var(--green); }


/* Raden under rubriken Varorna. "Varorna" ensamt sager bara vad som star
   nedanfor; raden sager hur manga de ar och hur man lagger till en. */
.varor-under { margin: -8px 0 18px; color: var(--muted); }