/* Vivanord — delad stilmall */
:root {
  --green-deep: #1d5c4d;
  --green-dark: #144238;
  --green-sage: #7fb069;
  --cream: #faf7f2;
  --cream-dark: #f0e9de;
  --ink: #22302c;
  --ink-soft: #5a6b65;
  --white: #ffffff;
  --gold: #d9a441;
  --radius: 14px;
  --shadow: 0 8px 30px rgba(29, 92, 77, 0.10);
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display: 'DM Serif Display', Georgia, serif;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font);
  background: var(--cream);
  color: var(--ink);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.container { max-width: 1120px; margin: 0 auto; padding: 0 24px; }

img { max-width: 100%; display: block; }

/* ---------- Nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 100;
  background: rgba(250, 247, 242, 0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--cream-dark);
}
.nav__inner { display: flex; align-items: center; justify-content: space-between; height: 68px; }
.nav__logo { font-size: 22px; font-weight: 800; color: var(--green-deep); text-decoration: none; letter-spacing: -0.5px; }
.nav__logo .brand-word { display: inline-block; white-space: nowrap; color: var(--green-deep); font-family: var(--font-display); font-size: 30px; font-weight: 400; letter-spacing: -1.2px; line-height: 1; }
.nav__logo .brand-word span { color: inherit; }
.footer__logo .brand-word, .verify__mark .brand-word { white-space: nowrap; font-family: var(--font-display); font-weight: 400; letter-spacing: -1px; }
.footer__logo .brand-word span { color: inherit; }
.nav__links { display: flex; gap: 28px; list-style: none; }
.nav__links a { color: var(--ink); text-decoration: none; font-size: 15px; font-weight: 500; }
.nav__links a:hover, .nav__links a.active { color: var(--green-deep); }
.nav__burger { display: none; background: none; border: 0; cursor: pointer; flex-direction: column; gap: 5px; padding: 6px; }
.nav__burger span { width: 24px; height: 2px; background: var(--ink); display: block; }

/* ---------- Knappar ---------- */
.btn {
  display: inline-block; text-decoration: none; font-weight: 700; font-family: var(--font);
  border-radius: 40px; cursor: pointer; border: 2px solid transparent;
  transition: transform 0.15s, box-shadow 0.15s, background 0.15s;
  text-align: center;
}
.btn:hover { transform: translateY(-2px); }
.btn--primary { background: var(--green-deep); color: var(--white); padding: 15px 34px; font-size: 16px; box-shadow: var(--shadow); }
.btn--primary:hover { background: var(--green-dark); }
.btn--ghost { border-color: var(--green-deep); color: var(--green-deep); padding: 13px 30px; font-size: 16px; }
.btn--gold { background: var(--gold); color: var(--green-dark); padding: 15px 34px; font-size: 16px; }
.btn--sm { padding: 10px 22px; font-size: 14px; }
.btn--block { display: block; width: 100%; }

/* ---------- Hero ---------- */
.hero { background: linear-gradient(160deg, var(--green-deep) 0%, var(--green-dark) 100%); color: var(--white); padding: 84px 0 72px; }
.hero__inner { max-width: 720px; }
.hero__badge {
  display: inline-block; background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.25);
  padding: 6px 16px; border-radius: 30px; font-size: 13px; font-weight: 600; margin-bottom: 22px;
}
.hero h1 { font-size: clamp(34px, 5vw, 52px); line-height: 1.12; font-weight: 800; letter-spacing: -1px; margin-bottom: 18px; }
.hero h1 em { font-style: normal; color: var(--green-sage); }
.hero__sub { font-size: 19px; color: rgba(255,255,255,0.85); margin-bottom: 30px; max-width: 560px; }
.hero__cta { display: flex; gap: 14px; flex-wrap: wrap; }
.hero__cta .btn--ghost { border-color: rgba(255,255,255,0.5); color: var(--white); }

/* Erbjudanderuta i hero. Priset ska gå att läsa innan besökaren scrollar — den som
   klickat på en annons om 199 kr ska se 199 kr direkt, annars uppstår tvivel om att
   det är rätt sida. Hela prenumerationsvillkoret står med, aldrig bara lockpriset. */
.hero__offer {
  background: rgba(255,255,255,0.10); border: 1px solid rgba(255,255,255,0.22);
  border-radius: var(--radius); padding: 16px 18px; margin-bottom: 26px;
  font-size: 15px; line-height: 1.55; color: rgba(255,255,255,0.9); max-width: 540px;
}
.hero__offer strong { color: var(--white); font-size: 17px; }
.hero__offer-tag {
  display: block; width: fit-content; background: var(--gold); color: var(--green-dark);
  font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  padding: 4px 11px; border-radius: 999px; margin-bottom: 9px;
}
.hero__reassure { font-size: 13.5px; color: rgba(255,255,255,0.72); margin-top: 16px; }

/* ---------- Trygghetsrad ---------- */
.trust-bar { background: var(--white); border-bottom: 1px solid var(--cream-dark); }
/* padding-block, inte padding-shorthand: raden ar en .container, och shorthanden
   nollstallde dess 24 px sidopadding. Pa mobil hamnade texten da i skarmkanten. */
.trust-bar__inner { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding-block: 20px; }
.trust-item { display: flex; align-items: center; gap: 9px; font-size: 14px; font-weight: 600; color: var(--green-deep); }
.trust-item .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green-sage); flex-shrink: 0; }

/* ---------- Sektioner ---------- */
.section { padding: 76px 0; }
.section--white { background: var(--white); }
.section--green { background: var(--green-deep); color: var(--white); }
.section__head { text-align: center; max-width: 620px; margin: 0 auto 48px; }
.section__eyebrow { text-transform: uppercase; letter-spacing: 2px; font-size: 12px; font-weight: 700; color: var(--green-sage); margin-bottom: 10px; }
.section__head h2 { font-size: clamp(26px, 3.5vw, 36px); font-weight: 800; letter-spacing: -0.5px; margin-bottom: 12px; }
.section__head p { color: var(--ink-soft); font-size: 17px; }
.section--green .section__head p { color: rgba(255,255,255,0.8); }

/* ---------- Produktkort ---------- */
.products-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 22px; }
.product-card {
  background: var(--white); border: 1px solid var(--cream-dark); border-radius: var(--radius);
  padding: 28px 24px; display: flex; flex-direction: column; box-shadow: var(--shadow);
}
.product-card__icon { font-size: 40px; margin-bottom: 14px; }
.product-card h3 { font-size: 20px; font-weight: 800; margin-bottom: 6px; color: var(--green-deep); }
.product-card__tag { font-size: 13px; color: var(--ink-soft); margin-bottom: 12px; }
.product-card__claim { font-size: 14px; color: var(--ink); background: var(--cream); border-radius: 8px; padding: 12px; margin-bottom: 16px; flex: 1; }
.product-card__price { font-size: 15px; margin-bottom: 14px; }
.product-card__price strong { font-size: 22px; color: var(--green-deep); }
.product-card__price s { color: var(--ink-soft); margin-left: 6px; }

/* Produktkortets knapprad. Kortet ledde tidigare bara till produktsidan, vilket la ett
   extra klick mellan besökaren och kassan. Beställ-knappen är primär, "Läs mer" finns
   kvar för den som vill läsa innehållsförteckningen först. */
.card-actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.card-actions__more {
  font-size: 14px; font-weight: 600; color: var(--green-deep);
  text-decoration: underline; text-underline-offset: 3px;
}

/* ---------- Klistrig köpknapp på mobil ----------
   På mobil ligger nav-knappen bakom hamburgermenyn och sidans CTA:er hamnar utanför
   skärmen så fort besökaren scrollat. Fältet nedan ser till att det alltid finns en
   nästa åtgärd inom räckhåll för tummen. Visas aldrig på desktop och aldrig i kassan —
   där ÄR sidan köpknappen. */
.buy-bar { display: none; }
@media (max-width: 760px) {
  .buy-bar {
    display: flex; align-items: center; gap: 12px;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 120;
    background: rgba(250, 247, 242, 0.97); backdrop-filter: blur(10px);
    border-top: 1px solid var(--cream-dark);
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    box-shadow: 0 -6px 24px rgba(29, 92, 77, .10);
  }
  .buy-bar__text { font-size: 12.5px; line-height: 1.35; color: var(--ink-soft); flex: 1; min-width: 0; }
  .buy-bar__text strong { display: block; font-size: 14px; color: var(--green-deep); }
  .buy-bar .btn { flex-shrink: 0; padding: 12px 20px; font-size: 14px; }
  /* Plats för fältet så att det aldrig täcker sidfotens sista rad. */
  body.has-buy-bar { padding-bottom: 76px; }

  /* Cookiebannern och dess återöppningsknapp är också fästa i underkanten (cookies.js).
     Utan det här låg de ovanpå köpknappen på mobil — samtycket är det första besökaren
     möter från en annons, och det får inte skymma vägen vidare. */
  body.has-buy-bar #nv-cookie { bottom: 92px; }
  body.has-buy-bar .nv-ck-reopen { bottom: 86px; }
}

/* ---------- Kompakta produktkort på mobil (startsidan) ----------
   Sex fullstora kort gjorde produktlistan till 41 % av startsidan, och tryckte ned
   "Så funkar det" till skärm 6,6 och FAQ till skärm 9,7. Ingen som kommit från en
   annons tar sig dit. Korten blir därför liggande på mobil — bild, namn, pris, knapp.

   Den långa produkttexten tas bort HÄR, inte från sajten: produktsidan har kvar hela
   innehållsförteckningen och hälsopåståendet, och "Läs mer" går dit. Gäller bara
   startsidans rutnät, inte de breda korten på produktsidan. */
@media (max-width: 560px) {
  .products-grid:not(.products-grid--wide) .product-card {
    display: grid; grid-template-columns: 88px minmax(0, 1fr);
    column-gap: 15px; align-items: center; padding: 16px 18px;
  }
  .products-grid:not(.products-grid--wide) .product-card > * { grid-column: 2; }
  .products-grid:not(.products-grid--wide) .product-card__shot {
    grid-column: 1; grid-row: 1 / span 20; align-self: center;
    width: 88px; height: auto; margin: 0;
  }
  .products-grid:not(.products-grid--wide) .product-card__claim { display: none; }
  .products-grid:not(.products-grid--wide) .product-card h3 { font-size: 19px; }
  .products-grid:not(.products-grid--wide) .product-card__tag { font-size: 12px; margin-bottom: 8px; }
  .products-grid:not(.products-grid--wide) .product-card__price { font-size: 13.5px; margin-bottom: 12px; }
  .products-grid:not(.products-grid--wide) .product-card__price strong { font-size: 19px; }
  .products-grid:not(.products-grid--wide) .product-card__guide {
    margin-top: 10px; padding-top: 10px; font-size: 12.5px;
  }
  .products-grid:not(.products-grid--wide) .card-actions { gap: 12px; }
}

/* Hoppa till innehållet — syns bara vid tangentbordsfokus. */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--green-deep); color: var(--white);
  padding: 12px 18px; border-radius: 0 0 10px 0; font-weight: 700; text-decoration: none;
}
.skip-link:focus { left: 0; }

/* ---------- Steg (så funkar det) ---------- */
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 26px; }
.step { text-align: center; padding: 0 10px; }
.step__num {
  width: 52px; height: 52px; border-radius: 50%; background: var(--green-sage); color: var(--white);
  font-size: 22px; font-weight: 800; display: flex; align-items: center; justify-content: center; margin: 0 auto 16px;
}
.step h3 { font-size: 18px; font-weight: 700; margin-bottom: 8px; }
.step p { font-size: 15px; color: var(--ink-soft); }
.section--green .step p { color: rgba(255,255,255,0.8); }
.section--green .step__num { background: rgba(255,255,255,0.15); }

/* ---------- Löfte / USP-lista ---------- */
.promise-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 22px; }
.promise {
  background: var(--white); border-radius: var(--radius); padding: 26px; border: 1px solid var(--cream-dark);
}
.promise__icon { font-size: 30px; margin-bottom: 12px; }
.promise h3 { font-size: 17px; font-weight: 700; margin-bottom: 8px; color: var(--green-deep); }
.promise p { font-size: 15px; color: var(--ink-soft); }

/* ---------- FAQ ---------- */
.faq { max-width: 720px; margin: 0 auto; }
.faq__item { background: var(--white); border: 1px solid var(--cream-dark); border-radius: 10px; margin-bottom: 12px; overflow: hidden; }
.faq__q {
  width: 100%; background: none; border: 0; font-family: var(--font); font-size: 16px; font-weight: 700;
  color: var(--ink); padding: 18px 20px; text-align: left; cursor: pointer;
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
}
.faq__q::after { content: '+'; font-size: 22px; color: var(--green-sage); font-weight: 400; }
.faq__item.open .faq__q::after { content: '–'; }
.faq__a { display: none; padding: 0 20px 18px; font-size: 15px; color: var(--ink-soft); }
.faq__item.open .faq__a { display: block; }

/* ---------- CTA-banner ---------- */
.cta-banner { text-align: center; }
.cta-banner h2 { font-size: clamp(26px, 3.5vw, 38px); font-weight: 800; margin-bottom: 14px; }
.cta-banner p { font-size: 17px; color: rgba(255,255,255,0.85); margin-bottom: 28px; max-width: 520px; margin-left: auto; margin-right: auto; }

/* ---------- Kampanjsida (tävling) ---------- */
.camp-hero { background: linear-gradient(160deg, var(--green-deep), var(--green-dark)); color: var(--white); padding: 56px 0 48px; text-align: center; }
.camp-hero h1 { font-size: clamp(30px, 5vw, 46px); font-weight: 800; letter-spacing: -0.5px; margin-bottom: 12px; }
.camp-hero h1 em { font-style: normal; color: var(--gold); }
.camp-hero p { font-size: 18px; color: rgba(255,255,255,0.85); max-width: 560px; margin: 0 auto; }
.camp-prize {
  display: inline-block; background: var(--gold); color: var(--green-dark); font-weight: 800;
  padding: 8px 22px; border-radius: 30px; font-size: 15px; margin-bottom: 20px;
}

.quiz-wrap { max-width: 560px; margin: -30px auto 0; padding: 0 24px 70px; position: relative; z-index: 2; }
.quiz-card { background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow); padding: 34px 30px; }
.quiz-progress { height: 6px; background: var(--cream-dark); border-radius: 3px; margin-bottom: 26px; overflow: hidden; }
.quiz-progress__bar { height: 100%; background: var(--green-sage); width: 20%; transition: width 0.3s; }
.quiz-step { display: none; }
.quiz-step.active { display: block; }
.quiz-step h2 { font-size: 21px; font-weight: 800; margin-bottom: 6px; color: var(--green-deep); }
.quiz-step .quiz-hint { font-size: 14px; color: var(--ink-soft); margin-bottom: 20px; }
.quiz-options { display: flex; flex-direction: column; gap: 10px; }
.quiz-option {
  width: 100%; text-align: left; font-family: var(--font); font-size: 16px; font-weight: 600;
  background: var(--cream); border: 2px solid var(--cream-dark); border-radius: 10px;
  padding: 15px 18px; cursor: pointer; transition: border-color 0.15s, background 0.15s;
}
.quiz-option:hover { border-color: var(--green-sage); background: var(--white); }
.quiz-option.selected { border-color: var(--green-deep); background: #eef5ee; }

.form-field { margin-bottom: 16px; }
.form-field label { display: block; font-size: 14px; font-weight: 700; margin-bottom: 6px; }
.form-field input {
  width: 100%; padding: 13px 15px; border: 2px solid var(--cream-dark); border-radius: 10px;
  font-family: var(--font); font-size: 16px; background: var(--white);
}
.form-field input:focus { outline: none; border-color: var(--green-sage); }
.consent { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; color: var(--ink-soft); margin-bottom: 12px; }
.consent input { margin-top: 3px; flex-shrink: 0; }
.consent a { color: var(--green-deep); }

.quiz-thanks { text-align: center; }
.quiz-thanks .big { font-size: 48px; margin-bottom: 12px; }
.quiz-thanks h2 { font-size: 24px; font-weight: 800; color: var(--green-deep); margin-bottom: 10px; }
.quiz-thanks p { color: var(--ink-soft); margin-bottom: 20px; }
.offer-box { background: var(--cream); border: 2px dashed var(--green-sage); border-radius: var(--radius); padding: 22px; margin-bottom: 20px; }
.offer-box strong { color: var(--green-deep); font-size: 18px; }

.camp-legal { max-width: 720px; margin: 0 auto; padding: 0 24px 60px; font-size: 12px; color: var(--ink-soft); }
.camp-legal h3 { font-size: 14px; color: var(--ink); margin: 18px 0 6px; }

/* ---------- Footer ---------- */
.footer { background: var(--green-dark); color: rgba(255,255,255,0.75); padding: 50px 0 30px; font-size: 14px; }
.footer__grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 40px; margin-bottom: 34px; }
.footer__logo { font-size: 20px; font-weight: 800; color: var(--white); margin-bottom: 10px; }
.footer__logo span { color: var(--green-sage); }
.footer h4 { color: var(--white); font-size: 14px; margin-bottom: 12px; }
.footer ul { list-style: none; }
.footer li { margin-bottom: 8px; }
.footer a { color: rgba(255,255,255,0.75); text-decoration: none; }
.footer a:hover { color: var(--white); }
.footer__bottom { border-top: 1px solid rgba(255,255,255,0.12); padding-top: 22px; font-size: 12px; text-align: center; }
/* Cookie-inställningarna nås härifrån i stället för från en flytande knapp som låg
   ovanpå knapparna i hero på mobil. Ser ut som en länk, är en knapp — den öppnar en
   dialog och navigerar ingenstans. */
.nv-ck-link {
  background: none; border: 0; padding: 0; cursor: pointer;
  font-family: inherit; font-size: inherit; color: rgba(255,255,255,0.75);
  text-decoration: underline; text-underline-offset: 2px;
}
.nv-ck-link:hover { color: var(--white); }

/* ---------- Mobil ---------- */
@media (max-width: 760px) {
  .nav__links {
    display: none; position: absolute; top: 68px; left: 0; right: 0;
    background: var(--cream); flex-direction: column; padding: 20px 24px; gap: 16px;
    border-bottom: 1px solid var(--cream-dark);
  }
  .nav__links.open { display: flex; }
  .nav__burger { display: flex; }
  .nav__cta { display: none; }
  .hero { padding: 56px 0 48px; }
  /* En punkt per rad nar de wrappar — centrerade ser de ut som en avsiktlig
     lista i stallet for en ojamn vanstermarginal. */
  .trust-bar__inner { justify-content: center; }
  .trust-item { justify-content: center; text-align: center; }
  .footer__grid { grid-template-columns: 1fr; gap: 26px; }
}

/* På 375 px sköt rubrik, ingress och erbjudanderuta ned köpknappen under vikten.
   Det klistriga fältet fångar upp det, men den primära knappen ska ändå synas utan
   att besökaren behöver scrolla. */
@media (max-width: 560px) {
  .hero { padding: 40px 0 40px; }
  .hero h1 { font-size: clamp(29px, 8.4vw, 38px); }
  .hero__sub { font-size: 17px; margin-bottom: 22px; }
  .hero__badge { font-size: 12px; padding: 5px 13px; margin-bottom: 18px; }
  .hero__offer { padding: 14px 15px; margin-bottom: 20px; font-size: 14px; }
  .hero__cta { gap: 10px; }
  .hero__cta .btn { width: 100%; }
}

/* ---------- Produktburk (illustration) ----------
   Ersätter emoji-platshållarna. Detta är en ILLUSTRATION, inte ett fotografi — och det är
   avsiktligt: en stockbild eller en konkurrents produktfoto som utges för att vara Medvitals
   burk är vilseledande marknadsföring, och Meta avvisar annonser för det.
   Byts mot riktiga förpackningsfoton när Medvital levererat sitt bildpaket. Behåll då
   samma yttermått (96×120) så korten inte hoppar. --jar sätts per produkt i HTML. */
.product-jar { width: 96px; height: 120px; margin-bottom: 16px; display: block; }
.product-jar .jar-cap { fill: var(--jar, var(--green-sage)); }
.product-jar .jar-body { fill: var(--white); stroke: var(--cream-dark); stroke-width: 2; }
.product-jar .jar-label { fill: var(--jar, var(--green-sage)); }
.product-jar .jar-text {
  fill: var(--white); font-family: var(--font); font-size: 15px; font-weight: 800;
  text-anchor: middle; letter-spacing: -.02em;
}
.product-jar .jar-shine { fill: var(--cream); opacity: .55; }