/*
 * eg-ui.css — en stil för hela sajten (fas 8, steg 07, 2026-10-09).
 *
 * Ägarens beslut: piller överallt (inga fyrkantiga knappar i VERSALER), en rubrikfont
 * (Poppins), brödtext Roboto, samma kort och samma två krämfärger på alla sidor.
 * Förebild: de nya sidorna (kategori, infosidor, kontakt, företagssidan).
 *
 * Laddas från headern (displayHeaderNovFive.tpl), alltså på alla sidor. Sidornas egna
 * filer laddas senare i <body>, därför börjar varje regel med "html body" — högre
 * specificitet vinner oavsett ordning. Inga ändringar i sidornas egna filer: de
 * redigeras parallellt i andra arbetspass, och den här filen går att ta bort i ett
 * steg om något blir fel.
 *
 * Mätning före (7 sidor, computed styles): 6 knappsystem, 3 rubrikfonter (Poppins,
 * Barlow, Inter), kortradie 10–24 px, 7 nästan likadana krämfärger.
 * Se _fas8_hastighet/07_enhetlig_stil/README.md.
 */

:root {
  --eg-ink: #1a1a1a;
  --eg-text: #3b3b3b;
  --eg-muted: #6b645a;
  --eg-cream: #f2ede3;      /* sektioner */
  --eg-cream-2: #f9f6f0;    /* ljusa sektioner, interna ytor */
  --eg-line: #e6dfd2;       /* kortkant, avdelare */
  --eg-yellow: #ffbc38;
  --eg-yellow-hover: #ffae0f;
  --eg-brown: #8c4e08;      /* accenter, eyebrow, länkar */
  --eg-r-card: 16px;
  --eg-r-inner: 12px;
  --eg-font-head: 'Poppins', 'Helvetica Neue', Arial, sans-serif;
  --eg-font-body: 'Roboto', 'Helvetica Neue', Arial, sans-serif;
}

/* ── 1. Rubrikfont: Barlow (infosidor, delar av startsidan) och Inter (produktsidan) → Poppins ── */
html body { --icp-ff-head: var(--eg-font-head); }
html body .pgr-page { --ff-head: var(--eg-font-head); --ff-body: var(--eg-font-body); }
html body .eg-best__title,
html body .eg-new__title,
html body .eg-clients__title,
html body .eg-faq__title,
html body .eg-hiw__title,
html body .eg-hiw__step-title,
html body .eg-rev__title { font-family: var(--eg-font-head); letter-spacing: -0.01em; }

/* ── 2. Knappar: tre sorter, alla piller ──────────────────────────────────────────── */
/* Gemensam form */
html body .eg-btn,
html body .eg-btn-outline,
html body .eg-b2b__btn,
html body .eg-tb__btn,
html body .eg-ba__btn,
html body .eg-mockup__upload-btn,
html body .eg-mockup__footer-btn,
html body .eg-mockup__order-btn,
html body .eg-mockup__act,
html body .pgr-btn-primary,
html body .pgr-btn-secondary,
html body .eg-teknikval__btn,
html body .open-comment-form,
html body#cart .btn.btn-primary {
  border-radius: 999px;
  font-family: var(--eg-font-head);
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0;
  border-width: 2px;
  border-style: solid;
  transition: background-color .15s, border-color .15s, color .15s;
}
html body .eg-btn,
html body .eg-b2b__btn,
html body .eg-tb__btn,
html body .eg-ba__btn,
html body .eg-mockup__upload-btn,
html body .eg-mockup__footer-btn,
html body .eg-mockup__order-btn {
  min-height: 48px;
  height: auto;
  padding: 0 26px;
  font-size: 15px;
  width: auto;
  min-width: 0;
}

/* Gul = huvudhandling (designa, bygg offert, till kassan) */
html body .eg-btn--primary,
html body .eg-b2b__btn--primary,
html body .eg-mockup__footer-btn--primary,
html body .eg-mockup__upload-btn,
html body .eg-ba__btn,
html body .eg-mockup__act--design,
html body .pgr-btn-primary,
html body#cart .btn.btn-primary {
  background-color: var(--eg-yellow);
  border-color: var(--eg-yellow);
  color: var(--eg-ink);
}
html body .eg-btn--primary:hover,
html body .eg-b2b__btn--primary:hover,
html body .eg-mockup__footer-btn--primary:hover,
html body .eg-mockup__upload-btn:hover,
html body .eg-ba__btn:hover,
html body .eg-mockup__act--design:hover,
html body .pgr-btn-primary:hover,
html body .pgr-btn-primary:focus,
html body#cart .btn.btn-primary:hover {
  background-color: var(--eg-yellow-hover);
  border-color: var(--eg-yellow-hover);
  color: var(--eg-ink);
}
html body#cart .btn.btn-primary.disabled,
html body#cart .btn.btn-primary[disabled] { background-color: #e7e2d8; border-color: #e7e2d8; color: var(--eg-muted); }

/* Kontur = andra handling (alla mössor, visa alla, mer information, beställ) */
html body .eg-btn--outline,
html body .eg-btn-outline,
html body .eg-b2b__btn--outline,
html body .eg-mockup__footer-btn--outline,
html body .eg-tb__btn,
html body .eg-mockup__order-btn,
html body .eg-mockup__act--order,
html body .pgr-btn-secondary,
html body .open-comment-form {
  background-color: transparent;
  border-color: var(--eg-ink);
  color: var(--eg-ink);
}
html body .eg-btn--outline:hover,
html body .eg-btn-outline:hover,
html body .eg-b2b__btn--outline:hover,
html body .eg-mockup__footer-btn--outline:hover,
html body .eg-tb__btn:hover,
html body .eg-mockup__order-btn:hover,
html body .eg-mockup__act--order:hover,
html body .pgr-btn-secondary:hover,
html body .open-comment-form:hover {
  background-color: rgba(26, 26, 26, .06);
  border-color: var(--eg-ink);
  color: var(--eg-ink);
}

/* Produktsidans gula teknikknapp: redan gul, bara formen */
html body .eg-teknikval__btn { border-color: transparent; }

/* ── 3. Kort: samma radie och kant ─────────────────────────────────────────────────── */
html body .pgr-process-card,
html body .pgr-bulk-card,
html body .icp-tile,
html body .eg-ct__note {
  border-radius: var(--eg-r-card);
  border-color: var(--eg-line);
}

/* ── 4. Bakgrunder: temats egna par överallt ─────────────────────────────────────── */
/* --eg-canvas (#f9f8f6, ljus) och --eg-stamp (#f0ece4, kräm) finns redan i header-redesign.css
   och används av kategori, kontakt och infosidor. Startsidans block har sina färger i
   modulens inställningar (EG_BLOCK_*_BG) — ändrade till samma par. */
:root { --eg-cream: var(--eg-stamp, #f0ece4); --eg-cream-2: var(--eg-canvas, #f9f8f6); }
html body .pgr-page { --canvas: var(--eg-canvas, #f9f8f6); }
html body .b2b { --cream: var(--eg-stamp, #f0ece4); --cream2: var(--eg-canvas, #f9f8f6); --line: var(--eg-line); }

/* Produktsidan: "Skriv ett omdöme" — temat sätter radie/färg med id-selektor */
html body#product .open-comment-form.btn {
  border-radius: 999px; background-color: transparent; border: 2px solid var(--eg-ink); color: var(--eg-ink);
  font-family: var(--eg-font-head); font-weight: 700; font-size: 15px; text-transform: none; min-height: 48px;
}
html body#product .open-comment-form.btn:hover { background-color: rgba(26, 26, 26, .06); }

/* Produktkort i listor: samma kant som övriga kort */
html body .product-miniature.js-product-miniature { border-color: var(--eg-line); }

/* ── 5. Finlir efter mätningen ─────────────────────────────────────────────────────── */
/* Kundvagnens knappar: temats 11 px → samma storlek som övriga */
html body#cart .btn.btn-primary { font-size: 15px; min-height: 48px; padding: 0 24px; display: inline-flex; align-items: center; justify-content: center; }
/* Mörka piller (kategori, kontakt, infosidor): samma typsnitt som alla andra knappar */
html body .eg-cat-cta__btn,
html body .eg-cf__btn,
html body .js-eg-ct-map-load,
html body .icp-btn { font-family: var(--eg-font-head); font-weight: 700; letter-spacing: 0; text-transform: none; }
/* Företagssidans svart = sajtens svart */
html body .b2b { --ink: var(--eg-ink); }
/* Kort på krämfärgad yta ska vara vita (startsidans B2B-block: genomskinliga kort syntes inte) */
html body .eg-b2b__feature {
  background-color: #fff;
  border: 1px solid var(--eg-line);
  border-radius: var(--eg-r-card);
}
html body .eg-b2b__feature:hover { border-color: #d6ccb8; box-shadow: 0 8px 24px rgba(26, 26, 26, .06); }
html body .eg-b2b__img-wrap, html body .eg-b2b__img { border-radius: var(--eg-r-card); }
/* Startsidans B2B-block har vit bakgrund (ägaren 09.10: fotots ljusgrå bakgrund krockade med krämen) */
html body .eg-b2b__img { border-radius: var(--eg-r-card); display: block; }
/* Produktsidans teknikval låg genomskinligt på krämen */
html body .eg-teknikval { background-color: #fff; }