@import url('https://fonts.googleapis.com/css2?family=Inter+Tight:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Inter:wght@400;500;600;700&display=swap');
/* Föreningsplattformen 2.0 (wk2) — Ombyggd från grunden 2026-10-20.
   Nordic Civic Warmth: Varmt kalkpapper, djup föreningsgrön, skogsbläck och guldockra.
   Alla färger ur Blocksy-paletten. */
body.wk2 {
  --c1: var(--theme-palette-color-4);  /* #141413 Djup skogsbläck (text/ink) */
  --c2: var(--theme-palette-color-1);  /* #141413 Föreningsgrön (primär) */
  --c3: var(--theme-palette-color-2);  /* #2A2A28 Mörk föreningsgrön (hover) */
  --c4: var(--theme-palette-color-9);  /* #F2B84B Varm guldockra (accent/badge) */
  --c5: var(--theme-palette-color-7);  /* #FFFFFF Varmt kalkpapper (sidbakgrund) */
  --c6: var(--theme-palette-color-6);  /* #F5F4F0 Ljust linne (sektioner) */
  --c7: var(--theme-palette-color-8);  /* #FFFFFF Kritvit (kortytor) */
  --c8: var(--theme-palette-color-10); /* #787771 Sekundärtext */
  --c9: var(--theme-palette-color-5);  /* #E4DCCF Varm sand (ramar/detaljer) */
  --wk2-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --wk2-display: "Inter Tight", "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  --line: color-mix(in srgb, var(--c1) 12%, transparent);
  --line-strong: color-mix(in srgb, var(--c1) 22%, transparent);
  --shadow-sm: 0 8px 24px -10px color-mix(in srgb, var(--c1) 12%, transparent);
  --shadow-lg: 0 28px 64px -20px color-mix(in srgb, var(--c1) 28%, transparent);
  --r: 18px;
  --r-lg: 26px;
  background: var(--c5);
  font-family: var(--wk2-sans);
  -webkit-font-smoothing: antialiased;
}
body.wk2 .ct-container-full[data-vertical-spacing] {
  --theme-content-vertical-spacing: 0px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Kicker & Badges */

/* Knappar */

/* Partner- & Förtroendelist under Hero */

/* ---------- NY HERO MED INTERAKTIV SEGMENTVÄXLARE ---------- */

/* Segment-piller i Heron */

/* Segment-kort i högerspalten på Heron */

/* Klassisk stage för undersidor */

/* ---------- STYRELSEBORDET LIVE-SIMULATOR (/styrelse/ & startsida) ---------- */

/* ---------- STYRELSEOFFERT- & KALKYLATORBYGGARE ---------- */

/* ---------- KORT, PAKET & PRISER ---------- */

/* 3-spårs Priskort (Gratis Templ / Supportavtal InstaWP / Flersektion & AI) */

/* Steg */

/* Exempel & Filter */

/* Flikar (När ni vill mer) */

/* Varför & FAQ */

/* CTA */

/* Beställ & Formulär */

/* Blocksy-behållaren: sektionerna går kant i kant */

.wk2 .entry-content > *:has(> .wkx) {
  max-width: none !important;
  width: 100vw;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
}
.wk2 [data-vertical-spacing] { padding-top: 0 !important; padding-bottom: 0 !important; }
.wk2 .ct-container-full, .wk2 article.page { overflow-x: clip; }

/* Hjälpklasser */

/* Jämförelsetabell */

/* Responsivt */

/* Utskriftsvänligt beslutsunderlag för styrelsemötet */
@media print {
  header, footer, .faq { display: none !important; }
  body.wk2 { background: #fff !important; }
}

/* WebbPlattformens tvåraderslogotyp (Webb + Blågul symbol i övre högra fickan / Plattformen under, enhetlig textfärg utan kontrast på W & P) */
.wp-logo-lines {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  line-height: 1;
  font-family: var(--wk2-display);
  font-weight: 700;
  font-size: 1.24rem;
  letter-spacing: -0.016em;
  color: var(--c1);
  text-align: left;
}
.wp-logo-lines .wp-l1 {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  width: 100%;
  gap: 8px;
  margin-bottom: 2px;
}
.wp-logo-lines .wp-l1-sym {
  display: inline-block;
  width: 42px;
  height: 31px;
  flex-shrink: 0;
  margin-bottom: 1px;
  margin-right: 1px;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: right bottom;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 188' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='11' y='11' width='234' height='166' rx='22' fill='%23FFCC00' stroke='%23006496' stroke-width='22' stroke-linejoin='round'/%3E%3Crect x='46' y='44' width='164' height='34' rx='3' fill='%23006496'/%3E%3C/svg%3E");
}
.wp-logo-lines .wp-l2 {
  display: block;
  line-height: 0.98;
}

/* Erbjudande: Uppgradera din nuvarande webbplats till WebbPlattformen */

/* ==========================================================================
   WPKIT EKOSYSTEM & AI/LLM KUNSKAPSBAS (/wpkit/ & /wpkit/{slug}/)
   ========================================================================== */

/* Editions-växlare i Apple/Blyerts-stil */

/* Sök & Filter-panel i Apple/Blyerts-stil */

/* Status-badges (diskreta Apple/Stripe-toner) */

/* Katalog-grid & Verktygskort (ärver .apl-eco-grid och .apl-eco-card) */

/* Enskild Verktygsdossier (/wpkit/{slug}/) */

/* Sidospalt på verktygssida */

/* ==========================================================================
   WP FÖRBUND — OMDESIGN (BENTO HERO, KÅRBORDET & REDAKTIONELL SPLIT)
   ========================================================================== */

/* Redaktionell 2-kolumns-diagnos */

/* Kårbordet Dual-View (Lokalkårens vy vs Kansliets vy) */

/* ==========================================================================
   FUNKTIONSSIDOR (/funktioner/ & /funktioner/{slug}/) — Mobbin Directory UX
   ========================================================================== */

/* 1. Slimmad 2-nivåers Subnav på /funktioner/{slug}/ (ersätter väggen av 19 knappar) */

/* 2. Mobbin Command Header på /funktioner/ (Kompakt så urvalet syns direkt utan skroll) */

.wk2 .wkx.sec[data-fn-directory] {
  padding: 20px 0 64px;
}

/* Search Shell + Quick Chips + Persona Bar */

/* Persona / Branschfilter */

/* 3. Flaggskepps-Bento (3 visuella signaturkort under katalogen) */

/* 4. 2-Kolumns Sticky Directory Layout (Stripe / Linear / Rippling på Mobbin) */

/* Interaktiv "Er funktionskorg / Stack Builder" i vänsterspalten */

/* 5. Huvudkatalogens Verktygslist (Räknare + Vyväxlare Kort / Tabell) */
.wk2 .wkx[data-fn-directory].is-filtered .fn-dir-toolbar {
  border-color: var(--c2);
  background: color-mix(in srgb, var(--c2) 7%, var(--c7));
}

/* Domängrupper & Scannable Mobbin Capability Cards */

.wk2 .wkx tr[data-fn-row][hidden] {
  display: none !important;
}
.wk2 .wkx[data-fn-directory].is-filtered .fn-domain-head {
  padding-bottom: 5px;
}
.wk2 .wkx[data-fn-directory].is-filtered .fn-domain-head p {
  display: none;
}

/* Ersätter vs Under huven-remsa (Mobbin Comparison Strip) */

/* 6. Kompakt Jämförelsetabell / Matrisvy (Customer.io / Snowflake på Mobbin) */

/* 4-stegs funktionskedja (Vad som händer i vardagen -> diskret verktygslänk) */

/* Under huven — nedtonad verktygs- & infrastrukturpanel */

/* ==========================================================================
   TOPPNAVIGATION I BLOCKSY (EN REN HUVUDRAD + APPLE-INSPIRERADE MEGA-DROPDOWNS)
   ========================================================================== */
body.wk2 header#header,
body.wk2 header.ct-header {
  position: relative !important;
  z-index: 100000 !important;
}
body.wk2 header.ct-header [data-row*="middle"] {
  position: relative !important;
  z-index: 100000 !important;
  --height: 76px !important;
  min-height: 76px !important;
  background: #FFFEFB !important;
  border-bottom: 1px solid rgba(17, 17, 17, 0.10) !important;
}
body.wk2 header.ct-header [data-row*="middle"] > .ct-container {
  position: relative !important;
  min-height: 76px !important;
  height: 76px !important;
}
body.wk2 header.ct-header [data-row*="middle"] [data-column],
body.wk2 header.ct-header [data-row*="middle"] [data-items] {
  position: static !important;
  height: 76px !important;
  min-height: 76px !important;
}
/* Dölj den gamla andra menyraden (bottom-row) permanent — ersatt av Branscher & Exempel-dropdown */
body.wk2 header.ct-header [data-row*="bottom"] {
  display: none !important;
}

/* Mobilmeny (#offcanvas har klassen .ct-panel.ct-header i Blocksy — måste behålla position:fixed och högsta z-index!) */
body.wk2 #offcanvas.ct-panel {
  position: fixed !important;
  inset: var(--admin-bar, 0px) 0 0 0 !important;
  width: 100vw !important;
  height: calc(100dvh - var(--admin-bar, 0px)) !important;
  z-index: 999999 !important;
  background: rgba(17, 17, 17, 0.45) !important;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
body.wk2 #offcanvas.ct-panel .ct-panel-inner {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  height: 100% !important;
  width: min(88vw, 420px) !important;
  max-width: min(88vw, 420px) !important;
  background: #FFFEFB !important;
  color: #111111 !important;
  border-left: 1px solid rgba(17, 17, 17, 0.12) !important;
  box-shadow: -20px 0 60px rgba(17, 17, 17, 0.22) !important;
  z-index: 1000000 !important;
}
body.wk2 #offcanvas.ct-panel .ct-panel-actions {
  padding: 20px 24px 12px !important;
  border-bottom: 1px solid rgba(17, 17, 17, 0.08) !important;
  justify-content: flex-end !important;
}
body.wk2 #offcanvas.ct-panel .ct-toggle-close {
  color: #111111 !important;
  --theme-icon-color: #111111 !important;
  background: #F4EFE6 !important;
  border-radius: 999px !important;
  width: 36px !important;
  height: 36px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
body.wk2 #offcanvas.ct-panel .ct-toggle-close svg {
  fill: #111111 !important;
}
body.wk2 #offcanvas.ct-panel .ct-panel-content-inner {
  padding: 20px 24px 36px !important;
  overflow-y: auto !important;
}
body.wk2 #offcanvas.ct-panel [data-id="mobile-menu"] {
  --theme-link-initial-color: #111111 !important;
  --theme-link-hover-color: #111111 !important;
  --theme-icon-color: #111111 !important;
  width: 100% !important;
}
body.wk2 #offcanvas.ct-panel .mobile-menu a.ct-menu-link {
  color: #111111 !important;
  font-family: "Inter Tight", "Inter", sans-serif !important;
  font-weight: 700 !important;
  font-size: 1.08rem !important;
  padding: 10px 0 !important;
}
body.wk2 #offcanvas.ct-panel .mobile-menu .sub-menu a.ct-menu-link {
  font-family: "Inter", sans-serif !important;
  font-weight: 500 !important;
  font-size: 0.94rem !important;
  color: #333333 !important;
  padding: 7px 0 !important;
}
body.wk2 #offcanvas.ct-panel .mobile-menu .ct-toggle-dropdown-mobile {
  color: #111111 !important;
  --theme-icon-color: #111111 !important;
}
body.wk2 #offcanvas.ct-panel .mobile-menu .ct-toggle-dropdown-mobile svg {
  fill: #111111 !important;
}

body.wk2 #offcanvas.ct-panel .odoo-mobile-mod-nav {
  width: 100% !important;
  background: #F4EFE6 !important;
  border: 1px solid rgba(17, 17, 17, 0.10) !important;
  border-radius: 12px !important;
  padding: 14px !important;
  margin-bottom: 18px !important;
}
body.wk2 #offcanvas.ct-panel .odoo-mobile-mod-lbl {
  font: 700 11px/1.3 "Inter", sans-serif !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  color: #555450 !important;
  margin-bottom: 10px !important;
}
body.wk2 #offcanvas.ct-panel .odoo-mobile-mod-pills {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
}
body.wk2 #offcanvas.ct-panel .odoo-mobile-mod-btn {
  appearance: none !important;
  border: 1px solid rgba(17, 17, 17, 0.14) !important;
  background: #FFFEFB !important;
  color: #111111 !important;
  font: 600 13px/1.25 "Inter", sans-serif !important;
  padding: 7px 11px !important;
  border-radius: 8px !important;
  cursor: pointer !important;
}
body.wk2 #offcanvas.ct-panel .odoo-mobile-mod-btn.is-active {
  background: #111111 !important;
  border-color: #111111 !important;
  color: #FFFFFF !important;
}

body.wk2 #header-menu-1,
body.wk2 #header-menu-1 > ul.menu {
  position: static !important;
  height: 76px !important;
  display: flex !important;
  align-items: stretch !important;
  --menu-items-spacing: 22px;
}
body.wk2 #header-menu-1 > ul.menu > li {
  height: 76px !important;
  display: flex !important;
  align-items: center !important;
  position: static !important;
}
body.wk2 #header-menu-1 > ul.menu > li > a.ct-menu-link {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  height: 100% !important;
  font-size: .92rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.015em !important;
  color: #111111 !important;
  transition: color .15s ease, background .15s ease;
}
body.wk2 #header-menu-1 > ul.menu > li > a.ct-menu-link:hover {
  color: #111111 !important;
}
body.wk2 #header-menu-1 > ul.menu > li.current-menu-item > a.ct-menu-link {
  color: #111111 !important;
  font-weight: 700 !important;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}

/* Snyggare marginal och storlek på högerknappen (Plattformsvagnen) så den aldrig klipper */
body.wk2 .ct-header .ct-header-cta .ct-button {
  background: #F5F4F0 !important;
  color: #111111 !important;
  border: 0 !important;
  border-radius: 999px !important;
  padding: 9px 18px !important;
  min-height: 40px !important;
  height: 40px !important;
  font-weight: 700 !important;
  font-size: 0.86rem !important;
  letter-spacing: -0.01em !important;
  white-space: nowrap !important;
  box-shadow: none !important;
}
body.wk2 .ct-header .ct-header-cta .ct-button:hover {
  background: #F2CF00 !important;
  color: #111111 !important;
  transform: translateY(-1px);
}

/* ==========================================================================
   BLYERTS-INSPIRERADE MEGAMENYER (.bly-mega) FÖR ALLA 5 DROPDOWNS
   ========================================================================== */
body.wk2 #header-menu-1 > ul.menu > li.menu-item-has-children > ul.sub-menu {
  position: absolute !important;
  top: 100% !important;
  left: 16px !important;
  right: 16px !important;
  width: auto !important;
  max-width: 1360px !important;
  margin-inline: auto !important;
  margin-top: 0 !important;
  display: block !important;
  background: #FFFEFB !important;
  border: 1px solid rgba(17, 17, 17, 0.10) !important;
  border-top: 1px solid rgba(17, 17, 17, 0.08) !important;
  border-radius: 0 0 20px 20px !important;
  padding: 26px 30px !important;
  box-shadow: 0 24px 52px rgba(17, 29, 23, 0.14), 0 4px 12px rgba(17, 29, 23, 0.06) !important;
  z-index: 100005 !important;
  overflow: visible !important;
}
/* Osynlig hover-brygga ovanför hela dropdown-bredden så diagonal musrörelse aldrig tappar kontakten */
body.wk2 #header-menu-1 > ul.menu > li.menu-item-has-children > ul.sub-menu::before {
  content: "" !important;
  position: absolute !important;
  top: -16px !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  height: 20px !important;
  transform: none !important;
  background: transparent !important;
  display: block !important;
  pointer-events: auto !important;
}
/* Säkerställ att :hover och .ct-active alltid håller menyn öppen och klickbar */
body.wk2 #header-menu-1 > ul.menu > li.menu-item-has-children:hover > ul.sub-menu,
body.wk2 #header-menu-1 > ul.menu > li.menu-item-has-children:focus-within > ul.sub-menu,
body.wk2 #header-menu-1 > ul.menu > li.menu-item-has-children.ct-active > ul.sub-menu {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: translate3d(0, 0, 0) !important;
  max-height: none !important;
  overflow: visible !important;
}

body.wk2 #header-menu-1 ul.sub-menu > li {
  border: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
}
body.wk2 #header-menu-1 ul.sub-menu > li::before,
body.wk2 #header-menu-1 ul.sub-menu > li::after {
  display: none !important;
}


/* Avgränsare efter 20 Funktioner + WpKit (115) i Apple Chapter Bar */

/* ==========================================================================
   AI-FÖRST WORDPRESS (/ai/ & /ai-forst/) — GAMLA (KADENCE) VS NYA (UNBLOCK + NOVAMIRA)
   ========================================================================== */

/* 1. Generationsskifte-kort (Gen 1 Kadence vs Gen 2 Unblock + Novamira) */

/* 2. Dubbel styrning (Din AI + Du själv i WordPress) */

/* 3. Kompakt Generations-Banner för Startsidan & /exempel/ */

/* ==========================================================================
   BLYERTS-LYFTET (2026-10-21) — SCANDINAVIAN EDITORIAL BENTO DESIGN SYSTEM
   Inspirerat av blyerts.com (IKEA Global / Berghs Bento):
   - Arkitektonisk 8px radie istället för runda SaaS-piller
   - Noll svävande skuggor (platta, taktila Bento-ytor i #FFFEFB & #F4EFE6)
   - Redaktionella overlines utan grön kapsel eller prick
   - Vänsterställda sektionshuvuden med stram typografisk hierarki
   - Specifikationsrader med kvadratisk markör istället för grå piller-knappar
   ========================================================================== */

body.wk2 {
  --c1: #141A17;
  --c2: #23533D;
  --c3: #193D2C;
  --c4: #E5B343;
  --c5: #FFFEFB;
  --c6: #F4EFE6;
  --c7: #FFFFFF;
  --c8: #4A544E;
  --c9: #E4DDD0;
  --line: rgba(20, 26, 23, 0.12);
  --line-strong: rgba(20, 26, 23, 0.22);
  --shadow-sm: none;
  --shadow-lg: none;
  --r: 8px;
  --r-lg: 10px;
  background: var(--c5);
}

/* Bred, redaktionell container (1380px) */

/* Typografisk skärpa */

/* 1. Redaktionell overline (.kicker) utan kapsel och utan prick */

/* 2. Vänsterställda redaktionella sektionshuvuden */

/* 3. Arkitektoniska knappar (8px radie, inga skuggor) */

/* 4. Platta Bento-kort (noll skuggor, 8px hörn, #F4EFE6 på vit sektion, #FFFFFF på sand-sektion) */

/* 5. Hero & Interaktiv Branschväxlare (Bento-stil med 01–08 numrering) */

/* 6. Raka, arkitektoniska skärmdumpar & bort med falska macOS-prickar */

/* 7. Specifikationsrader (.dam-stats) på landningssidor – som .kat-val på blyerts.com */

/* 8. Referensrad under Hero (Trustbar) */

/* 9. Priskort (.plans > .plan) i Bento-stil utan utstickande badge */

/* 10. Uppgraderingsruta (.upgrade-offer) & AI-skiftesbanner (.ai-shift-banner) */

/* 11. Hero Bento-kort (.seg-box, .forbund-bento, .seg-tags, .fb-badge, prisväxlare) */

/* 12. Startsidans .seg-bar, .seg-btn, .seg-card, .seg-tag, .seg-feats + Undersidors .s1/.s2, .tag, .chip & Prisväxlare */

/* Prisväxlare ([wk2_prisvaxel]) som arkitektonisk Bento-kontroll */

.wk2 .wkx .pslot button[aria-pressed="true"] {
  background: var(--c1) !important;
  border-color: var(--c1) !important;
  color: var(--c5) !important;
}

/* Toppnavigation & Undre branschrad med 6px radie istället för runda kapslar */
body.wk2 #header-menu-1 > ul.menu > li > a.ct-menu-link[href*="/ai/"] {
  border-radius: 6px !important;
}

/* ==========================================================================
   13. MOBBIN / BLYERTS ARKITEKTONISK LINJELAYOUT (UTAN NÄSTLADE RUTOR)
   ========================================================================== */

/* Elimigera dubbla pilar (→ →) på kort */

/* Lugnare brödtext utan fetstils-brus */

/* Hero-mätpunkter med tunna vertikala hårlinjer (som Blyerts Main.dc.html) */

/* Hero högerspalt: Rent skärmavbildningsfönster + 3 numrerade rader utan nästlade kort */

/* Arbetsorder-kort på /ai/ (som Blyerts Main.dc.html) */

/* Asymmetrisk 2-kolumnssektion (.ed-split: 360px vänster + 1fr höger, som Blyerts Fordelar & Konfigurationen) */

/* Två kolumner med delad 1.5px ram (.ed-sheet, som Blyerts Jamfor.dc.html) */

/* Horisontell 3-kolumnsremsa under jämförelsearket (.ed-trio) */

/* Ren specifikationstabell med hårlinjer (.ed-table, som Blyerts Fordelar & Konfigurationen) */

/* 2-kolumns konfigurationstabell (.ed-table.ed-conf) */

/* ==========================================================================
   14. IKEA.COM GLOBAL (/global/en/) & BLYERTS.COM FÄRG- OCH BLOCKARKITEKTUR
   Utgår 100 % från den heliga blågula WebbPlattformen-loggan (#0058A3 + #FFDB00)
   och Blyerts Form 1.0 (refresh.css / blyerts-form.css):
   - Obruten #FFFEFB-duk (inga 100vw sandbeiga ränder tvärs över skärmen)
   - Kolsvart bläck (#111111) & neutral mörkgrå (#484848) (noll skogsgrön text)
   - Ramlösa #F4EFE6-kort (8px radie) + Helgult (#FFDB00) utvalt kort i grids
   - Inramade 8px IKEA Color-Boxes i Djupblått (#004F8B) och Signalgult (#FFDB00)
   - Piller-knappar (999px) inne i 8px Bento-kort (IKEA Skapa-standard)
   ========================================================================== */

body.wk2 {
  --c1: #111111 !important;
  --c2: #0058A3 !important;
  --c3: #00437D !important;
  --c4: #FFDB00 !important;
  --c5: #FFFEFB !important;
  --c6: #F4EFE6 !important;
  --c7: #FFFFFF !important;
  --c8: #484848 !important;
  --c9: #E5E0D5 !important;
  --line: rgba(17, 17, 17, 0.12) !important;
  --line-strong: rgba(17, 17, 17, 0.22) !important;
  background: #FFFEFB !important;
  color: #111111 !important;
}

/* 14.1 Sidhuvud (Exakt som blyerts.com: ren #FFFEFB-rad + IKEA-gul Beställ-knapp med #111111-text) */
body.wk2 .ct-header [data-row*="middle"] {
  background: #FFFEFB !important;
  border-bottom: 1px solid rgba(17, 17, 17, 0.10) !important;
}
body.wk2 .ct-header [data-row*="bottom"] {
  background: #F4EFE6 !important;
  border-bottom: 1px solid rgba(17, 17, 17, 0.12) !important;
}
body.wk2 .ct-header [data-id="button"] .ct-button {
  background: #F5F4F0 !important;
  color: #111111 !important;
  border: 0 !important;
  border-radius: 999px !important;
  font-weight: 700 !important;
  padding: 9px 20px !important;
  box-shadow: none !important;
}
body.wk2 .ct-header [data-id="button"] .ct-button:hover {
  background: #111111 !important;
  color: #FFFFFF !important;
}
body.wk2 #header-menu-1 > ul.menu > li > a.ct-menu-link {
  color: #111111 !important;
  font-weight: 500 !important;
}
body.wk2 #header-menu-1 > ul.menu > li > a.ct-menu-link:hover,
body.wk2 #header-menu-1 > ul.menu > li.current-menu-item > a.ct-menu-link {
  color: #111111 !important;
}
body.wk2 #header-menu-1 > ul.menu > li > a.ct-menu-link[href*="/ai/"] {
  background: transparent !important;
  border: 0 !important;
  padding: 0 8px !important;
  height: 100% !important;
  color: #111111 !important;
  font-weight: 600 !important;
}
body.wk2 #header-menu-1 > ul.menu > li > a.ct-menu-link[href*="/ai/"]::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #F5F4F0;
  border: 1.5px solid #111111;
  margin-right: 6px;
}
body.wk2 #header-menu-1 > ul.menu > li.current-menu-item > a.ct-menu-link[href*="/ai/"] {
  background: transparent !important;
  color: #111111 !important;
  font-weight: 700 !important;
  text-decoration: underline !important;
  text-decoration-thickness: 2px !important;
  text-underline-offset: 6px !important;
}

/* 14.2 Obruten #FFFEFB-duk (inga 100vw sandbeiga ränder tvärs över skärmen) */

/* 14.3 Overlines / Kickers i neutral mörkgrå (#484848) som på ikea.com & blyerts.com (aldrig gröna!) */

/* 14.4 Knappar enligt IKEA Skapa & blyerts.com (999px pillerknappar inne i 8px Bento-ytor) */

/* 14.5 Kort (.card & .plan) som på blyerts.com/plattformen/:
   Ramlösa #F4EFE6-plattor + Helgult (#FFDB00) utvalt kort + rundade pillerlänkar längst ner */

/* 14.6 Jämförelsearket (.ed-sheet) & Arbetsorder-kortet (.wo-card) i IKEA/Blyerts-palett */

/* 14.7 IKEA Color-Box i Djupblått (#004F8B — exakt som det blå blocket på blyerts.com/plattformen/) */

/* 14.8 IKEA Color-Box i Signalgult (#FFDB00 — exakt som det avslutande gula blocket på blyerts.com/plattformen/) */

/* 14.9 Filterknappar (.ex-filter-btn, .pslot button) som .ik-cat-btn på blyerts.com */

.wk2 .wkx .pslot button[aria-pressed="true"] {
  background: #111111 !important;
  border-color: #111111 !important;
  color: #FFFFFF !important;
}

/* 14.10 Sidfot i varm sand (#F4EFE6) med kolsvart text som på blyerts.com */
body.wk2 .ct-footer {
  background: #F4EFE6 !important;
  color: #111111 !important;
  border-top: 1px solid rgba(17, 17, 17, 0.12) !important;
}
body.wk2 .ct-footer * {
  color: #111111 !important;
}

/* 14.11 Formulärruta (.formbox) på /bestall/, /support/ & /kontakt/ — blyerts-form-arkitektur */

/* ==========================================================================
   LOGOSNURRA (SLOW MARQUEE) PÅ STARTSIDAN & EXEMPEL
   ========================================================================== */
@keyframes wk2LogoMarquee {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(-50%, 0, 0);
  }
}

/* 15.2 Centrerad rubrik över FAQ-sektionen på alla sidor (.faq har max-width: 820px; margin: 0 auto) */

/* 15.3 Textmarkering (::selection) samt inline-markeringar (code, kbd, samp, mark) & länkar i mörka block */
:root,
body.wk2 {
  --theme-selection-background-color: #F5F4F0 !important;
  --theme-selection-text-color: #111111 !important;
}
::selection,
body.wk2 ::selection,
body.wk2 *::selection {
  background-color: #F5F4F0 !important;
  color: #111111 !important;
  -webkit-text-fill-color: #111111 !important;
}
::-moz-selection,
body.wk2 ::-moz-selection,
body.wk2 *::-moz-selection {
  background-color: #F5F4F0 !important;
  color: #111111 !important;
}

/* Inline code / mark på ljusa ytor */

/* Inline code / mark & textlänkar inne i mörkblå/mörka block (.guide-showcase, .upgrade-offer, .fb-flow, .sec.ink) */

/* 15.4 Driftlogg & Plattformsnyheter (/driftlogg/) — ren blyerts.com & IKEA Global form */

.wk2 .wkx [data-dl-feed].ed-table.ed-conf .ed-k {
  grid-template-columns: 52px 1fr !important;
}
.wk2 .wkx [data-dl-feed].ed-table.ed-conf .ed-desc b {
  color: #111111 !important;
  font-weight: 700 !important;
}
.wk2 .wkx [data-dl-feed].ed-table.ed-conf .ed-desc a {
  font-weight: 700 !important;
  color: #111111 !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
}
.wk2 .wkx [data-dl-feed].ed-table.ed-conf .ed-row[hidden] {
  display: none !important;
}

/* 15.5 Toppbanner på startsidan: Jobba Digitalt har blivit WebbPlattformen (IKEA Global #FFDB00 + #111111) */

/* 15.6 Blogg & Artiklar (/blogg/) + Responsivt Videokort ([wk2_youtube]) i blyerts.com & IKEA Global form */

/* 15.7 Hero Bento Grid (.wk2-bento) på startsidan — ren blyerts.com & IKEA Global form (inga svarta 1.5px-ramar eller nästlade boxar) */
/* 1. Namnbyte-kort (Helgul #FFDB00-platta utan hård svart ram, exakt som utvalda kort på blyerts.com) */

/* 2. Aktuellt / Driftlogg & Blogg (Ren #FFFFFF-platta med varm sand-topp #F4EFE6 som .wo-card) */

/* 3. 2x2 Snabblänkar (Ramlösa #F4EFE6 sandplattor exakt som .card på blyerts.com) */


/* 15.7 Apple-inspirerad Modulvy & Blocksy Content Block (Översikt · Krav & Pris · Funktioner · Byt eller avsluta · Teknisk info) */
body.wk2-eko-single {
  background: #FFFFFF !important;
}

/* Klistrad lokal produktlist (Apple Local Nav) precis under sidhuvudet */

/* Paneler: endast den aktiva fliken är synlig */

/* 1. ÖVERSIKT (Som Apple MacBook Air Bild 1) */

/* 3 stora lugna Apple-siffror utan tunga ramar */

/* Apples 3-kolumns utforskare (Exakt som Bild 2: Titta närmare / Koppla ihop / Mer om) */

/* Underflikar: Krav & Pris, Funktioner, Byt/Avsluta, Teknisk info — Ren Apple Spec-layout */

/* Diskret bottenrad för växlingsknapp (Nästa flik) */

/* Flik 6: För din AI · Kontexta-byggare i Apple-stil */

/* ==========================================================================
   15.8 APPLE + STRIPE / RIPPLING EKOSYSTEM-NAVIGERING (.apl-chapterbar, .apl-suite-bridge, .apl-eco-*)
   ========================================================================== */

/* 1. Kapitelrad / Funktionsmeny (alltid synlig som andrameny direkt under headern på alla sidor) */

/* Knappen "Alla 19 ▾" och Apple/Stripe 3-kolumners utfallsmeny */

/* 2. Stripe / Rippling Suite Bridge ("Samspelar i ekosystemet" inne på modulsidor) */

/* 3. Topp-wrapper på /funktioner/{slug}/ och alla sidor med .apl-chapterbar (nollställ 36px hero-topppadding så kapitelraden ligger dikt an mot sidhuvudet) */

/* 4. Apple Ekosystem-sida (/funktioner/) */

/* Fällbar jämförelsetabell längst ner på /funktioner/ */

/* Interaktiv Supademo-inbäddning (16:10 Retina från WordPress Playground, kant-i-kant med .apl-pane) */

/* ==========================================================================
   PLATTFORMSVAGNEN ([wk2_kundresa]) — Överst på startsidan
   Apple / Xiaomi / ICA-kundvagnskänsla med Bas · Pro · Max · Ultra
   ========================================================================== */

/* Steg 1: Kompakt utgångspunkt + Färdiga paket */

/* Arbetsyta: Hyllorna (vänster) + Sticky Kundvagn (höger) */

/* Lugna Funktionskort med Progressive Disclosure */

/* Lägg till-knapp uppe till höger på kortet */

/* Progressive disclosure (<details class="kr-fn-more">) på varje kort */

/* Högerkolumn: Elegant Sticky Kundvagn */

/* Plattformskategori (Wp Bas · Wp Pro · Wp Max · Wp Ultra) */

/* Utcheckningsknapp + Diskret verktygs-accordion */

/* Expanderbar PreOnOff-plan */

/* Kundvagnskvitto inbäddat i #skicka-vagnen */

/* ==========================================================================
   21. REDUCERAD VY FÖR MÄNNISKA + FULL KONTEXT FÖR AI (Blyerts Bento + SureDash)
   ========================================================================== */

/* Dölj sekundär Apple Chapterbar eftersom Blyerts Mega-menyer nu har alla 20 moduler & 115 verktyg */

/* --- 1. BLYERTS SPLIT HERO (2/3 Story + 1/3 #FFDB00 Gula Vägvisaren) --- */

/* Höger 1/3: Gula Vägvisaren (#FFDB00 som på blyerts.com) */

/* --- 2. RAD 2: DE 4 FUNKTIONSOMRÅDENA PÅ VARM APRIKOS/SAND (#FFAE66 / #F4EFE6) --- */

/* --- 3. RAD 3: MCLAREN-LOGIKEN & AI-FÖRST (2-kolumns Color-Box som blyerts.com) --- */

/* --- 4. RAD 4: 4 UTVALDA KUNDCASE + KUNDPORTAL-GENVÄG --- */

/* --- 5. PROGRESSIVE DISCLOSURE (<details class="wk-ai-vault">) FÖR AI & FÖRDJUPNING --- */

/* Kapitel-accordion på /funktioner/ så besökaren ser 4 lugna kapitel i stället för 20 kort direkt */

/* --- 6. SUREDASH KUNDPORTAL & ADMIN (Som blyerts.com 26-blyerts-portalbredd.php) --- */

/* Kundportal Dashboard ([wk2_kundportal]) */

/* ==========================================================================
   APPLE 3-STEGS KUNDRESA PÅ /BESTALL/ (.apb-*)
   ========================================================================== */

/* Fast översiktsbanner för WP Standard högst upp på /bestall/ */

/* Grundpaket-ruta i högerkolumnens vagn (.apb-cart-base) */

/* 2-kolumns Apple Store-layout */

/* Steg 1 & Steg 2: Taktila Apple-valkort */

/* Periodväxlare (Månad / År) i Steg 2 */

/* Diskret Gratisstart-rad under Steg 2 */

/* Steg 3: Snabbval + 8 Apple-tiles */

/* Expander för de övriga 12 specialmodulerna */

/* === HÖGER KOLUMN: STICKY SAMMANSTÄLLNING & FORMULÄR === */
.wk2 .apb-sum-pill {
  appearance: none;
  background: #F4EFE6;
  border: 1px solid rgba(17, 17, 17, 0.14);
  border-radius: 999px;
  padding: 4px 10px;
  font: 600 11.5px/1.25 var(--wk2-sans);
  color: #111111;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.wk2 .apb-sum-pill:hover {
  background: #FEE2E2;
  border-color: #DC2626;
}
.wk2 .apb-sum-pill em {
  font-style: normal;
  font-weight: 500;
  opacity: 0.65;
}
.wk2 .apb-sum-empty {
  font-size: 12px;
  color: #686662;
  font-style: italic;
}

/* Prisruta i högerkolumnen */

/* Verktygsknappar (PDF / AI / Länk) */

/* Integrerat kontaktformulär utan dubblettfrågor */
/* Dölj dubblettfrågor i Fluent Form #5 som redan besvarats i Steg 1–3 */

/* 1-sidigt beslutsunderlag för utskrift / förhandsgranskning */
.wk2 .apb-print-col h3 {
  font-family: var(--wk2-display) !important;
  font-size: 1.15rem !important;
  margin: 0 0 10px !important;
}
.wk2 .apb-print-col p,
.wk2 .apb-print-col li {
  font-size: 13.5px;
  line-height: 1.5;
  color: #2B2A28;
}

/* =========================================================
   NY SAMMANHÅLLEN STARTSIDA (Odoo 20-Apprutnät + Apple/IKEA/Blyerts)
   ========================================================= */
.wk2-global-chapterbar {
  display: none !important;
}

/* SEKTION 1B: WP STANDARD — RECEPTET SOM ALLT KRETSAR KRING + 4 ÖPPNA VÄGAR UTAN VALLGRAV */

/* 4 Öppna spår att starta med WP Standard */

/* SEKTION 2: ODOO-INSPIRERAT 20-APPRUTNÄT (5×4 VISUELLA APPAR) */

/* "Vad kan ni ersätta?"-rad under de 20 ikonerna */

/* SEKTION 3: VARFÖR HEMSIDA + WORDPRESS VINNER AI-ERAN (BLYERTS VARM APRIKOS #FFAE66 + VITA KORT) */

/* Uppgraderingsruta (.upgrade-offer) & .ai-shift-banner i Blyerts grå (#F4EFE6) med mörk text */

/* SEKTION 4: TVÅ TRYGGA VÄGAR IN (SPÅR A & SPÅR B MED SUBGRID) */

/* SEKTION 5: BEVIS I SKARP DRIFT + 8 BRANSCHUTGÅVOR */

/* ==========================================================================
   21. ODOO-INSPIRERAT STRUKTURERAT MEGA-INDEX (.bly-mega.is-odoo-index)
   4 rena kategorikolumner med distinkt rubrik + vertikal lista + centrerad fotrad
   ========================================================================== */

/* Framhävd nav-kolumn (exakt som Odoos inramade HEMSIDA-kolumn) */

/* 5:e kolumnen (.is-cta-col): Tydlig länkning till alla 24 funktioner (/funktioner/) */

/* ==========================================================================
   22. ODOO 3-STEGS NAVIGATIONSLOGIK (NIVÅ 1 GLOBAL · NIVÅ 2 APP-BAR · NIVÅ 3 HÖGER-TOC)
   ========================================================================== */

/* NIVÅ 1: Globala menyn har 4x6-megamenyn på "Funktioner ▾" på ALLA sidor (inkl. startsidan), medan övriga toppval är direktlänkar */
body.wk2 #header-menu-1 > ul.menu > li > a.ct-menu-link .ct-toggle-dropdown-desktop {
  display: none !important;
}
body.wk2 #header-menu-1 > ul.menu > li.menu-item-has-children > ul.sub-menu {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
body.wk2 #header-menu-1 > ul.menu > li.menu-item-has-children:hover > ul.sub-menu,
body.wk2 #header-menu-1 > ul.menu > li.menu-item-has-children:focus-within > ul.sub-menu,
body.wk2 #header-menu-1 > ul.menu > li.menu-item-has-children.ct-active > ul.sub-menu {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}
body.wk2:not(.has-odoo-appbar) #header-menu-1 > ul.menu > li:not(.menu-item-has-children) > ul.sub-menu,
body.wk2:not(.has-odoo-appbar) #header-menu-1 > ul.menu > li > .ct-toggle-dropdown-desktop-ghost {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Aktivt menyval inne i 4-kolumners-indexet (.is-current) — diskret fetstil inne i den tonade kategorirutan som på Odoo */

/* NIVÅ 2: Kontextuell App-meny på modulsidor (/funktioner/{slug}/ & /wpkit/{slug}/)
   Dölj de extra staplade raderna (.apl-chapterbar & .apl-subnav) så att ENDAST en rad finns i toppen */

/* Dölj de andra globala menyvalen när vi är inne i en specifik funktion/modul */
body.wk2.has-odoo-appbar #header-menu-1 > ul.menu > li:not(.is-odoo-switcher):not(.odoo-appbar-sep):not(.odoo-appbar-tab-li) {
  display: none !important;
}

body.wk2.has-odoo-appbar #header-menu-1 > ul.menu {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
}

/* App-växlaren till vänster om strecket (t.ex. "Formulär & Styrelsebord ▾" eller "CRM & Nyhetsbrev ▾") */
body.wk2.has-odoo-appbar #header-menu-1 > ul.menu > li.is-odoo-switcher > a.ct-menu-link {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  font: 700 14.5px/1.25 "Inter Tight", "Inter", sans-serif !important;
  color: #111111 !important;
  background: #F4EFE6 !important;
  border: 1px solid rgba(17, 17, 17, 0.14) !important;
  border-radius: 999px !important;
  padding: 7px 15px !important;
  height: auto !important;
  text-decoration: none !important;
}
body.wk2.has-odoo-appbar #header-menu-1 > ul.menu > li.is-odoo-switcher > a.ct-menu-link::before {
  display: none !important;
}
body.wk2.has-odoo-appbar #header-menu-1 > ul.menu > li.is-odoo-switcher:hover > a.ct-menu-link {
  background: #F5F4F0 !important;
  border-color: #111111 !important;
}

/* Vertikalt skiljestreck (│) mellan App-växlaren och funktionens undersidor */

/* Funktionens egna undersidor till höger om strecket (Översikt · PreBoarding · OnBoarding · OffBoarding · Teknisk info · För din AI) */

/* ==========================================================================
   KONSEKVENT SIDBREDD PÅ HELA SAJTEN (1380px ytterbredd / 28px sidomarginal = 1324px)
   Samma exakta vänster- och högerlinje för Toppnavigation, Startsida, Landningssidor & Temasidor
   ========================================================================== */
body.wk2 header.ct-header [data-row*="middle"] > .ct-container,
body.wk2 .ct-footer [data-row] > div,
body.wk2 .ct-footer .ct-container,
body.wk2 [data-apl-mod] .apl-pane {
  width: 100% !important;
  max-width: 1380px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 28px !important;
  padding-right: 28px !important;
  box-sizing: border-box !important;
}


body.wk2 [data-apl-mod] .apl-pane {
  padding-top: 44px !important;
  padding-bottom: 88px !important;
}

body.wk2 #header-menu-1 > ul.menu > li.menu-item-has-children > ul.sub-menu {
  left: 28px !important;
  right: 28px !important;
  max-width: 1324px !important;
}

.wk2 .odoo-pane-layout {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 200px !important;
  gap: 36px !important;
  align-items: start !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 auto !important;
  padding: 0 !important;
}

.wk2 .odoo-pane-main {
  min-width: 0 !important;
  width: 100% !important;
}

/* Gör läsriktningen lugn och se till att breda block (.guide-showcase, .forbund-bento, .apl-metrics) aldrig trycks ihop */

/* Nyckeltalsraden (.apl-metrics) är borttagen på alla modulsidor */

/* Kundcase-blocket (.guide-showcase): ge skärmdumpen gott om plats och lägg punkterna (.dam-stats) i 1 tydlig kolumn så de inte blir 2-ordsrader */
.wk2 .odoo-pane-main .guide-showcase {
  grid-template-columns: 1.05fr 0.95fr !important;
  gap: 36px !important;
  padding: clamp(28px, 3.2vw, 40px) !important;
  align-items: center !important;
}

/* Bento-flödesstegen (.fb-flow-steps): 2x2-rutnät istället för 4 trånga spalter */

.wk2 .odoo-side-toc {
  position: sticky !important;
  top: 96px !important;
  border-left: 1.5px solid rgba(17, 17, 17, 0.14) !important;
  padding: 2px 0 6px 18px !important;
  text-align: left !important;
}

.wk2 .odoo-toc-head {
  font: 500 11px/1.3 "Inter Tight", "Inter", sans-serif !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  color: #666660 !important;
  margin: 0 0 10px !important;
}

.wk2 .odoo-toc-list {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}

.wk2 .odoo-toc-list li {
  margin: 0 !important;
  padding: 0 !important;
}

.wk2 .odoo-toc-link {
  display: block !important;
  font: 500 13.4px/1.35 "Inter", sans-serif !important;
  color: #666660 !important;
  text-decoration: none !important;
  padding: 6px 0 6px 20px !important;
  margin-left: -21.5px !important;
  border-left: 2.5px solid transparent !important;
  border-radius: 0 !important;
  transition: color 0.14s ease, border-color 0.14s ease !important;
}

.wk2 .odoo-toc-link:hover {
  color: #111111 !important;
}

.wk2 .odoo-toc-link.is-active {
  color: #111111 !important;
  font-weight: 700 !important;
  border-left-color: #111111 !important;
  background: transparent !important;
}

/* Landningssidan /funktioner/: 4 öppna kategorier med 5 ikonkort per rad + högerställd sidnavigation */

@media (max-width: 1080px) {
  .wk2 .odoo-pane-layout {
    grid-template-columns: 1fr !important;
  }
  .wk2 .odoo-side-toc {
    display: none !important;
  }
}

@media (max-width: 680px) {
  body.wk2 header.ct-header [data-row*="middle"] > .ct-container,
  body.wk2 .ct-footer [data-row] > div,
  body.wk2 .ct-footer .ct-container,
  body.wk2 [data-apl-mod] .apl-pane {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }
}

/* ==========================================================================
   23. NYTT KREATIVT PRISFÖRSLAG (/pris-ny/) — "DET ÖPPNA RITBORDET / WP STANDARD"
   Blyerts varm papper (#FFFEFB), Blyerts grå (#F4EFE6), Signalgul (#FFDB00) & Bläck (#111111)
   ========================================================================== */

/* Förhandsvisningsband i toppen */

/* 1. HERO + INTERAKTIV SNABBKOMPASS */

/* Snabbkompassen till höger i Hero */

/* Gemensamt sektionshuvud */

/* 2. SPRÄNGSKISSEN (ANATOMI AV WP STANDARD) */
.wk2 .pny-bp-card[data-active-mode="support"] .pny-bp-status {
  background: #FFF9D2;
  border-color: #111111;
}

/* 3. DE 4 ÖPPNA SPÅREN MED CSS SUBGRID */

/* Komplettera befintlig sajt / Fristående modul */

/* 4. INTERAKTIV SAAS-BESPARINGSKALKYLATOR */

/* 5. INGEN VALLGRAV-KONTRAKTET */

/* 6. KOMPLETT JÄMFÖRELSEMATRIS (MODERN WEB GUIDANCE RESPONSIVE TABLE) */

/* ==========================================================================
   /start-ny/ — 5 lugna sektioner inspirerade av Sana, Framer, Plain/Glide, Sunday & Aside (Mobbin)
   ========================================================================== */

/* --- Knappar & länkar --- */

/* --- Sektion 1: Sana Hero + Framer Tabbed Product Stage --- */

/* Produktscenen i varm sand (#F5F2EB) */

/* Flik 4: 8 byggstenar i ett enda rent rutnät inne i scenen */

/* Målgruppsrad under scenen (Framer-mönstret) */

/* --- Gemensamt sektionshuvud --- */

/* --- Sektion 2: De 24 funktionerna (Plain + Glide + Kit) --- */

/* --- Sektion 3: Utan wp-admin & Med eller utan AI (Sunday / Sana 2-kortsplit) --- */

/* --- Sektion 4: Kundbevis & Logotypremsa --- */

/* --- Sektion 5: Avskalad 3-kolumns prisöversikt (Aside + Sprig på Mobbin) --- */

/* --- /pris/ & /pris-ny/ — Aside 4-kolumns priskort, 8 byggstenar & kalkylator --- */

/* 8 byggstenar (Framer / Plain 2-spaltslista utan nästlade rutor) */

/* Besparingskalkylator i ren Mobbin-stil */

/* --- /funktioner/ ([wk2_funktioner_ny]): Filterbar + Snabbsök + Kortfot --- */

/* ==========================================================================
   GLOBAL HARMONISERING (.wk2) — LÅT SAMMA MOBBIN-FORM GENOMSYRA HELA SAJTEN
   ========================================================================== */
body.wk2 {
  --c1: #141413 !important;
  --c2: #141413 !important;
  --c3: #2b2b29 !important;
  --c4: #F5F2EB !important;
  --c5: #ffffff !important;
  --c6: #F5F2EB !important;
  --c7: #ffffff !important;
  --c8: #57544D !important;
  --c9: rgba(20, 20, 19, 0.08) !important;
  --line: rgba(20, 20, 19, 0.07) !important;
  --line-strong: rgba(20, 20, 19, 0.12) !important;
  --shadow-sm: 0 8px 24px rgba(20, 20, 19, 0.04) !important;
  --shadow-lg: 0 20px 48px rgba(20, 20, 19, 0.06) !important;
  background: #ffffff !important;
  color: #141413 !important;
}

/* 1. Toppnavigationens CTA-knapp ("Kom igång →") och Megameny i samma #141413 / #F5F2EB språk */
body.wk2 .ct-header .ct-header-cta .ct-button,
body.wk2 .ct-header [data-id="button"] .ct-button {
  background: #141413 !important;
  color: #ffffff !important;
  border: 1px solid #141413 !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  font-weight: 600 !important;
}

body.wk2 .ct-header .ct-header-cta .ct-button:hover,
body.wk2 .ct-header [data-id="button"] .ct-button:hover {
  background: #2b2b29 !important;
  color: #ffffff !important;
  transform: translateY(-1px);
}

/* 2. Mjuka upp alla kickers/badges på alla undersidor till Sana-piller */

/* 3. Enhetliga knappar på hela sajten (Svart primärpiller + Sand sekundärpiller) */

/* 4. Plattformsvagnen (/bestall/ · .apb-*) — Stegvis flikkonfigurator (Apple / Square / Klaviyo / Xero) */

/* 4 klickbara stegflikar i toppen (role="tablist") */

/* Fokuserad scen — endast ett steg syns åt gången */

/* Fotrad i Steg 1–3 med live-val & Nästa/Tillbaka */

/* Steg 4: 2-kolumns slutför-vy (Kvitto vänster + Formulär höger) */

.wk2 .apb-sum-pill {
  background: #F5F2EB !important;
  border: 1px solid #E6E2D8 !important;
  color: #141413 !important;
  font-weight: 600 !important;
  padding: 4px 11px !important;
}

/* 5. Ersätt alla gamla IKEA-blå (#004F8B) och IKEA-gula (#FFDB00) block på alla 24 funktionssidor & branschsidor med Varm Sand (#F5F2EB) */

/* 6. De 24 funktionssidorna (/funktioner/{slug}/ · .apl-mod) & /wpkit/ i varm sand & #141413 */

/* 7. Städa bort hårda 2px-ramar och mörka lådor på övriga undersidor (.ed-sheet, .card, .fn-card, .kr-*) */

/* --- Responsivitet (Kort & snabb på mobil utan timslång scroll) --- */

@media (max-width: 680px) {
  .wk2 .mny-showcase-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ==========================================================================
   BRANSCH- & REFERENSPLATTFORMAR (/exempel/ — .mny-branch-card & .mny-showcase-*)
   ========================================================================== */

.wk2 .mny-showcase-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

@media (max-width: 1024px) {
  .wk2 .mny-showcase-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.wk2 .mny-showcase-card {
  display: flex;
  flex-direction: column;
  background: #FFFFFF;
  border: 1px solid #E6E2D8;
  border-radius: 18px;
  overflow: hidden;
  text-decoration: none !important;
  color: #141413 !important;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.2s ease, box-shadow 0.2s ease;
}

.wk2 .mny-showcase-card:hover {
  transform: translateY(-3px);
  border-color: #141413;
  box-shadow: 0 16px 36px rgba(20, 20, 19, 0.08);
}

/* ==========================================================================
   AI-ERAN & WPKIT (/ai/ — .mny-ai-metrics & .mny-ai-prompt-card)
   ========================================================================== */

/* ==========================================================================
   BLOCKSY BLOGGARKIV (/blogg/) & ENSKILDA INLÄGG (UNBLOCK + GUTENBERG)
   ========================================================================== */
body.wk2.blog .site-main,
body.wk2.archive .site-main,
body.wk2.single-post .site-main {
  padding-bottom: 64px !important;
}

body.wk2.blog .hero-section[data-type="type-1"],
body.wk2.archive .hero-section[data-type="type-1"] {
  max-width: 1140px;
  margin: 36px auto 18px !important;
  padding: 0 24px;
  text-align: left !important;
}

body.wk2.blog .hero-section .page-title,
body.wk2.archive .hero-section .page-title {
  font-family: "Inter Tight", "Inter", sans-serif !important;
  font-size: clamp(2.1rem, 3.3vw, 2.85rem) !important;
  font-weight: 500 !important;
  letter-spacing: -0.03em !important;
  line-height: 1.08 !important;
  color: #141413 !important;
  margin-bottom: 12px !important;
}

body.wk2.blog .hero-section .page-description,
body.wk2.archive .hero-section .page-description {
  font-family: "Inter", sans-serif !important;
  font-size: 16.5px !important;
  line-height: 1.58 !important;
  color: #54514B !important;
  max-width: 68ch !important;
  margin: 0 !important;
}

body.wk2.blog .hero-section .page-description p,
body.wk2.archive .hero-section .page-description p {
  margin: 0 !important;
}

body.wk2.blog .ct-container,
body.wk2.archive .ct-container {
  max-width: 1140px !important;
}

body.wk2.blog .entries,
body.wk2.archive .entries {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 26px !important;
}

@media (max-width: 820px) {
  body.wk2.blog .entries,
  body.wk2.archive .entries {
    grid-template-columns: 1fr !important;
  }
}

body.wk2.blog .entries .entry-card,
body.wk2.archive .entries .entry-card {
  background: #FFFFFF !important;
  border: 1px solid rgba(20, 20, 19, 0.1) !important;
  border-radius: 18px !important;
  overflow: hidden !important;
  box-shadow: 0 4px 18px rgba(20, 20, 19, 0.04) !important;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease !important;
}

body.wk2.blog .entries .entry-card:hover,
body.wk2.archive .entries .entry-card:hover {
  transform: translateY(-2px);
  border-color: rgba(20, 20, 19, 0.22) !important;
  box-shadow: 0 12px 30px rgba(20, 20, 19, 0.08) !important;
}

body.wk2.blog .entries .entry-card .entry-title,
body.wk2.archive .entries .entry-card .entry-title {
  font-family: "Inter Tight", "Inter", sans-serif !important;
  font-size: 22px !important;
  font-weight: 500 !important;
  line-height: 1.22 !important;
  letter-spacing: -0.022em !important;
  margin: 6px 0 10px !important;
}

body.wk2.blog .entries .entry-card .entry-title a,
body.wk2.archive .entries .entry-card .entry-title a {
  color: #141413 !important;
  text-decoration: none !important;
}

body.wk2.blog .entries .entry-card .entry-excerpt,
body.wk2.archive .entries .entry-card .entry-excerpt {
  font-family: "Inter", sans-serif !important;
  font-size: 14.5px !important;
  line-height: 1.58 !important;
  color: #54514B !important;
}

body.wk2.blog .entries .entry-card .entry-meta,
body.wk2.archive .entries .entry-card .entry-meta {
  font-family: "Inter", sans-serif !important;
  font-size: 12px !important;
  font-weight: 600 !important;
}

/* Single Blog Post (Blocksy + Unblock + Gutenberg) */
body.wk2.single-post .hero-section[data-type="type-1"] {
  max-width: 820px;
  margin: 36px auto 24px !important;
  padding: 0 20px;
  text-align: left !important;
}

body.wk2.single-post .hero-section .page-title {
  font-family: "Inter Tight", "Inter", sans-serif !important;
  font-size: clamp(1.95rem, 3vw, 2.65rem) !important;
  font-weight: 500 !important;
  letter-spacing: -0.03em !important;
  line-height: 1.1 !important;
  color: #141413 !important;
}

body.wk2.single-post .ct-featured-image {
  max-width: 960px;
  margin: 0 auto 32px !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
}

body.wk2.single-post .ct-featured-image .ct-media-container {
  border-radius: 18px !important;
  overflow: hidden !important;
  border: 1px solid rgba(20, 20, 19, 0.1) !important;
  padding: 0 !important;
  margin: 0 !important;
}

body.wk2.single-post .ct-featured-image img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  margin: 0 !important;
}

body.wk2.single-post .entry-content > p,
body.wk2.single-post .entry-content > ul,
body.wk2.single-post .entry-content > ol,
body.wk2.single-post .entry-content > h2,
body.wk2.single-post .entry-content > h3,
body.wk2.single-post .entry-content > blockquote {
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}

body.wk2.single-post .entry-content p.is-style-lead {
  font-size: 18px !important;
  line-height: 1.62 !important;
  color: #262522 !important;
  margin-bottom: 28px !important;
}

body.wk2.single-post .entry-content > h2 {
  font-family: "Inter Tight", "Inter", sans-serif !important;
  font-size: clamp(1.45rem, 2.1vw, 1.8rem) !important;
  font-weight: 500 !important;
  letter-spacing: -0.016em !important;
  color: #141413 !important;
  margin-top: 36px !important;
  margin-bottom: 12px !important;
}

body.wk2.single-post .entry-content > p,
body.wk2.single-post .entry-content > ul li {
  font-family: "Inter", sans-serif !important;
  font-size: 16.5px !important;
  line-height: 1.68 !important;
  color: #35332F !important;
}

body.wk2.single-post .entry-content > ul {
  margin-bottom: 24px !important;
  padding-left: 22px !important;
}

body.wk2.single-post .entry-content > ul li {
  margin-bottom: 8px !important;
}

body.wk2.single-post .entry-content blockquote.wp-block-quote {
  background: #F4EFE6;
  border-left: 4px solid #141413;
  border-radius: 0 14px 14px 0;
  padding: 20px 24px;
  margin-top: 28px;
  margin-bottom: 28px;
}

body.wk2.single-post .entry-content blockquote.wp-block-quote p {
  font-family: "Inter Tight", "Inter", sans-serif !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  line-height: 1.45 !important;
  color: #141413 !important;
  margin: 0 0 6px !important;
}

/* Unblock-komponenter inne i blogginlägg */

/* ==========================================================================
   IKEA GLOBAL STORIES HUB (/blogg/) & MAGAZINE ARTICLES (/blogg/<slug>/)
   Inspo: https://www.ikea.com/global/en/stories/ + Mobbin IKEA Story Modules
   ========================================================================== */

body.wk2-ikea-stories-hub,
body.wk2-ikea-story-single {
  background: #FFFFFF !important;
  color: #111111 !important;
}

body.wk2-ikea-stories-hub .site-main,
body.wk2-ikea-story-single .site-main,
body.wk2-ikea-stories-hub .ct-container,
body.wk2-ikea-story-single .ct-container,
body.wk2-ikea-stories-hub .ct-container-narrow,
body.wk2-ikea-story-single .ct-container-narrow,
body.wk2-ikea-stories-hub article.page,
body.wk2-ikea-story-single article.post,
body.wk2-ikea-stories-hub .entry-content,
body.wk2-ikea-story-single .entry-content {
  max-width: 100% !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Dölj Blocksys vanliga singel-krom när vi visar IKEA Story-artiklar */
body.wk2-ikea-story-single .hero-section,
body.wk2-ikea-story-single .ct-featured-image,
body.wk2-ikea-story-single .post-navigation,
body.wk2-ikea-story-single .ct-share-box,
body.wk2-ikea-story-single .ct-author-box,
body.wk2-ikea-story-single .ct-related-posts,
body.wk2-ikea-story-single .ct-comments {
  display: none !important;
}

/* ---------- GEMENSAMMA IKEA-KNAPPAR & CIRKELPILAR ---------- */
.wk2 .ik-stories-hub {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  color: #111111;
  background: #FFFFFF;
}

.wk2 .ik-stories-hub * {
  box-sizing: border-box;
}

/* ==========================================================================
   DEL A: IKEA GLOBAL STORIES HUB (/blogg/)
   ========================================================================== */

.wk2 .ik-stories-hub {
  padding: 44px 0 96px !important;
}

/* Underline Category Tabs (IKEA Global Stories) */

/* ---------- ROW 1: "IKEA PS 2026" STUDIO COLLAGE + COBALT BOX ---------- */

/* Overlaid IKEA Cobalt Box (#0058A3) */

/* ---------- ROW 2: 2-COLUMN EDITORIAL DUO ---------- */

.wk2 .ik-open-story {
  display: flex;
  flex-direction: column;
}

.wk2 .ik-open-media {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  border-radius: 12px;
  overflow: hidden;
  background: #F5F5F3;
  margin-bottom: 18px;
}

.wk2 .ik-open-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.wk2 .ik-open-story:hover .ik-open-media img {
  transform: scale(1.03);
}

.wk2 .ik-open-meta {
  font: 600 12.5px/1.3 "Inter", sans-serif;
  color: #595959;
  margin-bottom: 8px;
}

.wk2 .ik-open-body h3 {
  font-family: "Inter Tight", "Inter", sans-serif !important;
  font-size: clamp(1.4rem, 2vw, 1.82rem) !important;
  font-weight: 500 !important;
  line-height: 1.18 !important;
  letter-spacing: -0.016em !important;
  color: #111111 !important;
  margin: 0 0 10px !important;
}

.wk2 .ik-open-body h3 a {
  color: #111111 !important;
  text-decoration: none !important;
}

.wk2 .ik-open-body h3 a:hover {
  text-decoration: underline !important;
  text-underline-offset: 4px;
}

.wk2 .ik-open-body p {
  font: 400 15px/1.55 "Inter", sans-serif !important;
  color: #484848 !important;
  margin: 0 !important;
}

/* ---------- ROW 3: 21:9 PANORAMIC TIME CAPSULE BANNER ---------- */

/* ---------- ROW 4: 3-COLUMN COLOR-BLOCKED TRIPTYCH (MOBBIN IKEA) ---------- */

/* ---------- ROW 5: DESIGNER PULL-QUOTE INTERLUDE ---------- */

/* ---------- ROW 6: 60/40 BEHIND-THE-SCENES SPLIT CARD ---------- */

/* ==========================================================================
   DEL B: IKEA GLOBAL STORY MAGAZINE ARTICLE (/blogg/<slug>/)
   Inspo: make-space-for-what-you-love + 2016-time-capsule + nytillverkad
   ========================================================================== */

/* 1. FULL-BLEED PASTEL/COLOR POSTER HERO + POP-IN IMAGE PILLS */

/* Inline Pop-In Rounded Image Pill removed (clean typography only) */

/* 2. CHAPTER 1: .ik-introduce-design (35% LEFT / 65% RIGHT + PORTRAIT CARD) */

/* 3. CHAPTER 2: 50/50 SPLIT + 1:1 SQUARE DIPTYCH */

/* 4. CHAPTER 3: WARM SAND BAND (#F6EBE3) WITH 30/70 ROWS */

/* 5. CHAPTER 4: STICKY SPLIT-SCROLL TIMELINE (2016-time-capsule) */

.wk2 .ik-ss-sticky {
  position: sticky;
  top: 108px;
}

.wk2 .ik-ss-sticky h2 {
  font-family: "Inter Tight", "Inter", sans-serif !important;
  font-size: clamp(1.75rem, 2.6vw, 2.35rem) !important;
  font-weight: 500 !important;
  line-height: 1.15 !important;
  letter-spacing: -0.03em !important;
  color: #111111 !important;
  margin: 0 0 14px !important;
}

.wk2 .ik-ss-sticky p {
  font: 400 16px/1.58 "Inter", sans-serif !important;
  color: #484848 !important;
  margin: 0 0 24px !important;
}

/* 6. FOOTER: FLER STORIES ATT UTFORSKA */

/* ---------- RESPONSIVITET ---------- */
@media (max-width: 1040px) {
  .wk2 .ik-ss-sticky {
    position: static;
  }
}

/* ==========================================================================
   /wpkit/ — NYA FORMEN (.mny-page + .mny-eko-*)
   ========================================================================== */

.wk2 .mny-eko-open-link {
  font-size: 13.5px;
  font-weight: 700;
  color: #141413 !important;
  text-decoration: none !important;
}

.wk2 .mny-eko-open-link:hover {
  text-decoration: underline !important;
}

/* ==========================================================================
   ENSKILD VERKTYGSSIDA (/wpkit/{slug}/) — NYA FORMEN (.mny-wpkit-tool-page)
   ========================================================================== */

.wk2 .mny-wpkit-tool-page .apl-pane[data-apl-pane="oversikt"] {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
}

/* === SANA LABS READABILITY & MONOCHROME OVERRIDE === */
body.wk2 {
  --wk2-display: "Inter Tight", "Inter", -apple-system, BlinkMacSystemFont, sans-serif !important;
  --wk2-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  --c1: #141413 !important;
  --c2: #141413 !important;
  --c3: #2A2A28 !important;
  --c4: #F5F4F0 !important;
  --c5: #FFFFFF !important;
  --c6: #F5F4F0 !important;
  --c7: #FFFFFF !important;
  --c8: #52514E !important;
  font-family: var(--wk2-sans) !important;
  color: #141413 !important;
  background: #FFFFFF !important;
  -webkit-font-smoothing: antialiased !important;
}

/* === SANA LABS MEGAMENU & LOGO POLISH === */

/* === SANA SIMPLE DROPDOWN (.has-sana-simple-sub) === */
body.wk2 #header-menu-1 > ul.menu > li.has-sana-simple-sub {
  position: relative !important;
}

/* === CENTERED DESKTOP NAVIGATION WITH RIGHT CTA === */
body.wk2 header.ct-header [data-device="desktop"] [data-row*="middle"] > .ct-container {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}
body.wk2 header.ct-header [data-device="desktop"] [data-row*="middle"] [data-column="start"] {
  flex: 0 0 auto !important;
}
body.wk2 header.ct-header [data-device="desktop"] [data-row*="middle"] [data-column="end"],
body.wk2 header.ct-header [data-device="desktop"] [data-row*="middle"] [data-column="end"] > [data-items="primary"] {
  flex: 1 1 auto !important;
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
}
body.wk2 header.ct-header [data-device="desktop"] #header-menu-1 {
  margin-left: auto !important;
  margin-right: auto !important;
}
body.wk2 header.ct-header [data-device="desktop"] .ct-header-cta {
  margin-left: 0 !important;
  flex: 0 0 auto !important;
}


/* ==========================================================================
   WEBBPLATTFORMEN — REN SKANDINAVISK FORM + BEATUSHÖHLEN HELSIDES-POPUP (.fard-*)
   1. Centrerad menykapsel (.fard-nav-pill) med 4 val – öppnas på KLICK (ej hover)
   2. Helsides-popup (100vw × 100vh) med fullskärmsfotografi + 950px dubbelmeny-kort
   3. Visuell Sök-popup (<dialog id="fard-search-dialog">) med live-sök + 2 bildkort
   4. "Pris & Fakta" Roadmap-vy (.fard-roadmap-layout) med klistrad vänstermeny
   ========================================================================== */

/* --- 1. Global bas & Sidhuvud --- */
body.wk2 {
  background-color: #FFFFFF !important;
  color: #141413 !important;
  --fard-display: "Inter Tight", "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  --fard-sans: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
}

body.wk2.fard-fullscreen-open {
  overflow: hidden !important;
}

body.wk2 header#header.ct-header {
  position: sticky !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  z-index: 100050 !important;
  background: rgba(255, 255, 255, 0.96) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  border-bottom: 1px solid #E6E4DF !important;
  transition: background 0.2s ease, border-color 0.2s ease !important;
}

body.wk2 header#header.ct-header [data-row*="middle"] {
  background: transparent !important;
  border-bottom: 0 !important;
  transition: background 0.2s ease, border-color 0.2s ease !important;
}

/* När helsides-popupen är öppen ligger toppnavigationen alltid fast (fixed) högst upp i popupen
   (z-index: 100050 ovanför .fard-fs-stage som har 100005) så att toppmenyn och popupen hänger ihop */
body.wk2.fard-fullscreen-open header#header.ct-header {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  z-index: 100050 !important;
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-bottom-color: transparent !important;
  box-shadow: none !important;
}

body.wk2.fard-fullscreen-open header#header.ct-header [data-row*="middle"] {
  background: transparent !important;
  border-bottom-color: transparent !important;
  box-shadow: none !important;
}

body.wk2.fard-fullscreen-open header#header.ct-header .wp-logo-lines {
  background: rgba(255, 255, 255, 0.96);
  padding: 8px 14px;
  border-radius: 10px;
  box-shadow: 0 6px 20px rgba(20, 20, 19, 0.14);
}

/* Generös, luftig höjd (92px) i sidhuvudet så kapseln svävar fritt med 23px luft över och under */
body.wk2 header.ct-header [data-row*="middle"],
body.wk2 header.ct-header [data-row*="middle"] > .ct-container,
body.wk2 header.ct-header [data-row*="middle"] [data-column],
body.wk2 header.ct-header [data-row*="middle"] [data-items] {
  --height: 92px !important;
  min-height: 92px !important;
  height: 92px !important;
}

body.wk2 header.ct-header #header-menu-1 {
  height: auto !important;
  min-height: 0 !important;
  display: flex !important;
  align-items: center !important;
}

/* Centrerad Menykapsel (.fard-nav-pill) med 4 val – slank (46px hög) med gott om luft runt om */

/* Höger verktygsrad i sidhuvudet (Sök 🔍 + Översikt 🗺️ + Primärknapp) */

/* --- 1B. BEATUSHÖHLEN HELSIDES-POPUP (100vw × 100vh)
        Ligger direkt efter </header> som fristående fullskärmsscen (z-index: 100005)
        medan header.ct-header ligger ovanpå i z-index: 100020.
        Öppnas ENDAST vid klick (.fard-fs-stage.is-open), aldrig vid hover, och stängs ALDRIG av mouseleave --- */

body.wk2 header#header,
body.wk2 header#header.ct-header {
  z-index: 100050 !important;
}

/* Direkt växling mellan Lösningar ▾ och Plattformen & AI ▾ utan blinkning */

/* Fullskärmsfotografiet i bakgrunden (precis som .megamenu__bgimg på Beatushöhlen) */

/* Det centrala 950px dubbelmeny-kortet mitt på helsides-scenen */

/* 46×46px rund ✕-knapp som roterar 90 grader vid hover */

body.wk2 .fard-popup-kicker {
  display: block !important;
  font: 600 12px/1.3 var(--fard-sans) !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: #006496 !important;
  margin-bottom: 16px !important;
}

/* 3 handlingspiller längst ned i kortet */

/* --- 1C. Beatushöhlen Sök-popup (<dialog id="fard-search-dialog">) --- */
.fard-search-dialog {
  width: min(1040px, calc(100vw - 32px));
  max-width: 1040px;
  margin: clamp(32px, 6vh, 64px) auto auto;
  padding: 0;
  border: 1px solid #DFDDD6;
  border-radius: 12px;
  background: #FFFFFF;
  color: #141413;
  box-shadow: 0 32px 80px rgba(20, 20, 19, 0.18);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
}
.fard-search-dialog::backdrop {
  background: rgba(20, 20, 19, 0.36);
  backdrop-filter: blur(4px);
}

.fard-sd-results {
  padding-top: 4px;
}
.fard-sd-hitlist {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.fard-sd-hit {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 14px 16px;
  background: #F6F5F2;
  border: 1px solid #E6E4DF;
  border-radius: 12px;
  text-decoration: none !important;
  transition: border-color 0.14s ease, background 0.14s ease;
}
.fard-sd-hit:hover {
  background: #FFFFFF;
  border-color: #006496;
}
.fard-sd-hit strong {
  font: 500 15px/1.3 var(--fard-sans);
  color: #141413;
}
.fard-sd-hit span {
  font: 400 13px/1.35 var(--fard-sans);
  color: #006496;
}
.fard-sd-empty {
  padding: 20px;
  background: #F6F5F2;
  border-radius: 12px;
  font-size: 15px;
  color: #3D3C3A;
}
.fard-sd-empty a {
  color: #006496 !important;
  font-weight: 500;
}

/* Mobilmeny (#offcanvas) */
body.wk2 #offcanvas.ct-panel {
  background: #FFFFFF !important;
}

/* Sekundär modulmeny på /funktioner/<slug>/ (.apl-subnav) */

/* --- 2. Grundvariabler, Ytor & Typografi (.fard-root) --- */

/* --- 3. Hero --- */

/* --- 4. Redaktionella kort (.fard-doors-grid, .fard-news-grid, .fard-cases-grid) --- */

/* --- 5. Växlande 50/50 bild- och textrader (.fard-story-row) --- */

/* --- 6. Trekolumns fotokort --- */

/* --- 7. Kvartalskollen-sektion & Referenslogotyper --- */

/* --- 8. PRIS & FAKTA ROADMAP-VY (/pris/ enligt Beatushöhlen "Visitor Info") --- */

/* --- 9. Beställ & Kontakt (/bestall/) --- */

/* --- 10. Blogghubb (/blogg/) & Enspaltig Artikelsida (.fard-prose) --- */

/* --- 11. Kvartalsprompt-byggare (/kvartalskoll/) --- */

/* --- 12. Global Sidfot (.fard-global-footer) --- */

/* --- 13. Enhetlig form för /funktioner/ (.mny-page, .sana-hero, .wkx) & /exempel/ --- */

/* --- 14. Responsivitet --- */
@media (max-width: 1024px) {
  
  .fard-sd-hitlist {
    grid-template-columns: 1fr !important;
  }
}


/* ==========================================================================
   BEATUSHÖHLEN SIDRYTM & KOMPONENTER (Ljus skandinavisk skala)
   1. .fard-bh-hero: Ren text-hero (brödsmula, H1, indragen ingress med streck)
      + 3 asymmetriskt placerade bilder (.fard-bh-trio) under
   2. .fard-sectionnav: Fri centrerad horisontell sidnavigation med nedåtpilar (↓)
   3. .fard-skew-sec: Svagt lutande sektionsövergång som separerar avsnitt lugnt
   4. .fard-split-58-42: Asymmetrisk lässektion (58% bild / 42% sammanhängande text)
   5. .fard-color-cards: 3 färgseparerade kort med naturlig asymmetri i höjd
   ========================================================================== */

/* Beatushöhlen .hero__images:
   Full sidbredd (1380px, i linje med logotypen till vänster och CTA-knappen till höger),
   utan skuggor. Ytterbilderna ligger i våg med varandra och mittbilden ligger försänkt i mitten
   så att den ramar in ingressen ovanför och leder blicken rakt ner till sidnavigationen. */

/* Enkel, centrerad horisontell sidnavigation (.fard-sectionnav) med nedåtpilar (↓) */

/* Sektion med svagt lutande överkant (som .skewed-top på Beatushöhlen) */

/* Asymmetrisk 58/42-lässektion (Bild 2 & 3 på Beatushöhlen:
   Stor bild i vänsterkolumnen + mindre förskjuten bild överst i högerkolumnen ovanför texten) */

/* 3 Färgseparerade kort med naturlig asymmetri i höjd (Bild 4 på Beatushöhlen) */

/* Färg 1: Varm sand/ockra */

/* Färg 2: Nordisk salvia/tall – naturligt längre asymmetriskt mittkort */

/* Färg 3: Djup marinblå (från logotypen) med vit text */

/* Fyra-frågor-matris för Kvartalsreflektion */


/* ==========================================================================
   BALANSERAD SIDBREDD (1380px / 28px) & SÄLJANDE HERO (.fard-sell-hero)
   Exakt samma vänster- och högermarginal som logotypen och CTA-knappen i sidhuvudet
   ========================================================================== */

/* ==========================================================================
   LANSERINGSFIXAR: MOBILHUVUD (< 1000px / 360px), MEGAMENY-BYTE,
   AI->WP-ÖVERSIKT (#oversikt) & 2x4 LOGOTYPRAD (.fard-logos-bar)
   ========================================================================== */

/* 1. Säkerställ att sidhuvudet alltid ligger överst så att klick mellan Lösningar / Plattform / Cowork byter panel direkt */
body.wk2 header#header,
body.wk2 header#header.ct-header,
body.wk2 header#header [data-row*="middle"] {
  position: sticky !important;
  top: 0;
  z-index: 100080 !important;
  pointer-events: auto !important;
}

/* 2. Mobilhuvud: Dölj den breda textknappen i mobilraden (visas istället som tydlig knapp i mobilmenyn #offcanvas)
      så att logotyp, sökikon och menyknapp aldrig krockar på 360px skärmar */
body.wk2 header#header [data-device="mobile"] a.fard-header-cta {
  display: none !important;
}

@media (max-width: 999.98px) {
  body.wk2 header#header [data-device="mobile"] [data-row*="middle"] > .ct-container,
  body.wk2 header#header [data-device="mobile"] [data-row*="middle"] > .ct-container-fluid {
    padding-left: 16px !important;
    padding-right: 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
  }
  body.wk2 header#header [data-device="mobile"] .site-branding {
    margin-right: auto !important;
    flex-shrink: 0 !important;
  }
  body.wk2 header#header [data-device="mobile"] .fard-hdr-tools {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
  }
}

/* Tydlig CTA-knapp längst ned i mobilmenyn (#menu-wpkit-2-mobilmeny) */
#offcanvas #menu-wpkit-2-mobilmeny > li:last-child > a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  margin-top: 12px !important;
  padding: 13px 18px !important;
  border-radius: 8px !important;
  background: #141413 !important;
  color: #FFFFFF !important;
  font-weight: 600 !important;
  text-align: center !important;
  text-decoration: none !important;
}

/* 3. Balanserad #oversikt utan tomt vertikalt gap: AI-chatt -> WordPress-vy + funktionskort */

/* 4. Logorad: 2 rader x 4 kolumner på desktop (inga ensamma loggor på rad 2) och tydligare storlek */