/*
Theme Name: Sassa Child
Theme URI: https://wordpress.themeholy.com/sassa
Template: sassa
Author: Themeholy
Author URI: https://themeforest.net/user/themeholy
Description: Sassa - Saas Startup Multipurpose WordPress Theme
Tags: one-column,flexible-header,accessibility-ready,custom-colors,custom-menu,custom-logo,editor-style,featured-images,footer-widgets,rtl-language-support,sticky-post,threaded-comments,translation-ready
Version: 2.0.0.1781700000
Updated: 2026-06-13 22:00:42

*/

/* ============================================================================
   SPIS TRESCI / MAP — sassa-child/style.css
   ----------------------------------------------------------------------------
   Nawiguj przez Cmd-F po TYTULE sekcji (bez numerow linii — te i tak driftuja
   przy kazdej edycji; tytuly bannerow sa stabilna kotwica). Grupy odpowiadaja
   z grubsza polozeniu: FOUNDATION/HEADER/HERO na gorze, STRONY/UTIL na dole.

   ZASADA: plik laczy porzadek komponentowy (gora) z poprawkami doklejanymi
   nizej. Kolejnosc zrodla jest LOAD-BEARING (1834 !important, nadpisywanie
   Sassa + Elementor) — NIE przenos regul w gore bez retestu na zywo. Dodajac
   reguly do komponentu rozproszonego (np. BLOG), wstaw je pod istniejacym
   bannerem albo nadaj nowemu bannerowi tytul z tym samym slowem kluczowym.
   ============================================================================

   FOUNDATION ....... ROOT TOKENS · GLOBALS · SASSA PSEUDO CLEANUP
   HEADER ........... HEADER — Positioning / Menu area / CTA / Drawer CTA /
                      Hamburger toggle / Mobile drawer / Sticky state
   HERO ............. HERO — sassabanner widget · HERO SUB
   NAWIGACJA ........ DESKTOP MEGA MENU · MOBILE DRAWER — Mega Menu ·
                      WPML — LANGUAGE SWITCHER (.mg-lang, dropdown + drawer)

   KOMPONENTY (.mg-*)
     SPLIT TEXT + IMAGE · CARD FLAT ROW · FEATURE GRID (shadow cards) ·
     FEATURE LIST · FEATURE GRID — 4-COL MODIFIER ·
     ICON BADGE STYLING (system ikon + per-strona nth-child) ·
     SPLIT CARDS · SECTION CONTENT · FAQ · "Trusted by" client logo strip

   BLOG  [ROZPROSZONY — szukaj "blog" / "single-post"]
     BLOG — sekcja na stronie glownej ·  BLOG ARCHIVE (grid + scoping) ·
     Blog hero (.breadcumb-wrapper) ·  Single-post content typography ·
     Single-post sidebar widgets ·  Pagination (.th-pagination) ·
     BLOG SINGLE-POST — fixes (round 1) ·  share + author bio + comments ·
     BLOG — fixes (round 2) ·  Categories widget ·  Single-post fixes ·
     Breadcrumb: kill double separator

   FOOTER ........... FOOTER WRAPPER · CTA BAND · FOOTER MAIN · FOOTER COPYRIGHT ·
                      FOOTER — LEGAL LINKS

   STRONY (page-scoped) ... 404 (body.error404) · Videos (/videos/) ·
     FAQ page (/faq/) · Contact (/contact/) · About us page (/about/) ·
     Print examples (/prints/) · LEGAL PAGES (.mg-legal)

   UTIL ............. primary CTA hook (.mg-btn-primary) · BACK-TO-TOP ·
                      Preloader spinner
   ============================================================================ */

/* ============================================================================
   WAVE CHANGELOG — numery dawniej w naglowkach sekcji; pelna historia: git log.
   (mapuje wave -> sekcja; drobne poprawki bez wlasnego bannera sa w git.)
   ----------------------------------------------------------------------------
   120      Blog hero (.breadcumb-wrapper) on archive + single.
   121      Single-post content typography.
   122      Single-post sidebar widgets as MG cards.
   123      Pagination (.th-pagination) as round MG chips.
   124      BLOG SINGLE-POST — meta / sidebar / card fixes (round 1)
   125      Single-post bottom: share + author bio + comments.
   126      BLOG — search / cards / categories / pagination fixes (round 2)
   127      BLOG ARCHIVE — grid, cards + :is() archive scoping
   128      Categories widget: kill Sassa link ornaments.
   129      Single-post fixes (hero, avatar, comments-closed)
   130      Breadcrumb: kill double separator.
   131      404 page (body.error404).
   132      Videos page (/videos/) custom block.
   133      Videos page integration fixes (after paste).
   135      FAQ page (/faq/): hide redundant hero + section title.
   137      Contact / "Book a demo" page (/contact/, page-id-4225).
   139      primary CTA hook (#mg-book-demo / .mg-btn-primary).
   140      About us page (/about/, page-id-4260).
   141      FAQ accordion: MG-colour the +/- toggle + keep wrapped
   143      Print examples (/prints/): proof page, custom block
   150      FOOTER - LEGAL LINKS (EULA / Privacy policy)
   151      LEGAL PAGES (.mg-legal)
   164      Preloader spinner color.
   165 / 166 Home "Trusted by" client logo strip (.mg-clients).
   169      WPML — LANGUAGE SWITCHER (header dropdown + mobile drawer, .mg-lang)
   ============================================================================ */

/* ============================================================
   ROOT TOKENS
   ============================================================ */
:root {
  --mg-blue:       #1468b2;
  --mg-navy:       #3c56a3;
  --mg-navy-deep:  #2a3a6b;
  --mg-steel:      #4e7599;
  --mg-orange:     #f29c2b;
  --mg-orange-d:   #d9851a;

  --mg-ink:        #1b2531;
  --mg-muted:      #586475;
  --mg-line:       #dfe4ea;
  --mg-bg:         #ffffff;
  --mg-bg-alt:     #f3f6f9;
  --mg-bg-soft:    #eef2f6;

  --mg-radius:     6px;
  --mg-shadow:     0 1px 2px rgba(20,40,80,.06), 0 8px 24px rgba(20,40,80,.06);

  --mg-font-headline: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mg-font-body:     "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* --- LUCIDE ICON LIBRARY (stroke 1.5, brand blue #1468b2, 24x24 viewBox) ---
     Used by per-page nth-child(N) assignments — see end of file.
     Add new icons here as new Platform sub-pages need them. */
  --mg-icon-clipboard-list:    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231468b2' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><rect width='8' height='4' x='8' y='2' rx='1' ry='1'/><path d='M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2'/><path d='M12 11h4'/><path d='M12 16h4'/><path d='M8 11h.01'/><path d='M8 16h.01'/></svg>");
  --mg-icon-git-branch:        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231468b2' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><line x1='6' x2='6' y1='3' y2='15'/><circle cx='18' cy='6' r='3'/><circle cx='6' cy='18' r='3'/><path d='M18 9a9 9 0 0 1-9 9'/></svg>");
  --mg-icon-calculator:        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231468b2' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><rect width='16' height='20' x='4' y='2' rx='2'/><line x1='8' x2='16' y1='6' y2='6'/><line x1='16' x2='16' y1='14' y2='18'/><path d='M16 10h.01'/><path d='M12 10h.01'/><path d='M8 10h.01'/><path d='M12 14h.01'/><path d='M8 14h.01'/><path d='M12 18h.01'/><path d='M8 18h.01'/></svg>");
  --mg-icon-file-text:         url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231468b2' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z'/><path d='M14 2v4a2 2 0 0 0 2 2h4'/><path d='M10 9H8'/><path d='M16 13H8'/><path d='M16 17H8'/></svg>");
  --mg-icon-layers:            url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231468b2' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.08a1 1 0 0 0 0 1.83l8.58 3.91a2 2 0 0 0 1.66 0l8.58-3.9a1 1 0 0 0 0-1.83z'/><path d='M2 12a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 12'/><path d='M2 17a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 17'/></svg>");
  --mg-icon-filter:            url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231468b2' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><polygon points='22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3'/></svg>");
  --mg-icon-file-spreadsheet:  url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231468b2' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z'/><path d='M14 2v4a2 2 0 0 0 2 2h4'/><path d='M8 13h2'/><path d='M14 13h2'/><path d='M8 17h2'/><path d='M14 17h2'/></svg>");
  --mg-icon-receipt:           url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231468b2' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M4 2v20l2-1 2 1 2-1 2 1 2-1 2 1 2-1 2 1V2l-2 1-2-1-2 1-2-1-2 1-2-1-2 1Z'/><path d='M16 8h-6a2 2 0 1 0 0 4h4a2 2 0 1 1 0 4H8'/><path d='M12 17.5v-11'/></svg>");
  --mg-icon-package:           url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231468b2' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='m7.5 4.27 9 5.15'/><path d='M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z'/><path d='m3.3 7 8.7 5 8.7-5'/><path d='M12 22V12'/></svg>");
  --mg-icon-calendar-clock:    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231468b2' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M21 7.5V6a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h3.5'/><path d='M16 2v4'/><path d='M8 2v4'/><path d='M3 10h5'/><path d='M17.5 17.5 16 16.3V14'/><circle cx='16' cy='16' r='6'/></svg>");
  --mg-icon-truck:             url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231468b2' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M14 18V6a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v11a1 1 0 0 0 1 1h2'/><path d='M15 18H9'/><path d='M19 18h2a1 1 0 0 0 1-1v-3.65a1 1 0 0 0-.22-.624l-3.48-4.35A1 1 0 0 0 17.52 8H14'/><circle cx='17' cy='18' r='2'/><circle cx='7' cy='18' r='2'/></svg>");
  /* Wave 101 — added for /quoting-documents/ */
  --mg-icon-file-check:        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231468b2' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z'/><path d='M14 2v4a2 2 0 0 0 2 2h4'/><path d='m9 15 2 2 4-4'/></svg>");
  --mg-icon-stamp:             url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231468b2' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M5 22h14'/><path d='M19.27 13.73A2.5 2.5 0 0 0 17.5 13h-11A2.5 2.5 0 0 0 4 15.5V17a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1v-1.5c0-.66-.26-1.3-.73-1.77Z'/><path d='M14 13V8.5C14 7 15 7 15 5a3 3 0 0 0-3-3c-1.66 0-3 1-3 3s1 2 1 3.5V13'/></svg>");
  --mg-icon-move-right:        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231468b2' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M18 8L22 12L18 16'/><path d='M2 12H22'/></svg>");
  --mg-icon-file-stack:        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231468b2' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M21 7h-3a2 2 0 0 1-2-2V2'/><path d='M21 6v6.5c0 .8-.7 1.5-1.5 1.5h-7c-.8 0-1.5-.7-1.5-1.5v-9c0-.8.7-1.5 1.5-1.5H17Z'/><path d='M7 8v8.8c0 .3.2.6.4.8.2.2.5.4.8.4H15'/><path d='M3 12v8.8c0 .3.2.6.4.8.2.2.5.4.8.4H11'/></svg>");
  --mg-icon-users:             url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231468b2' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/><circle cx='9' cy='7' r='4'/><path d='M22 21v-2a4 4 0 0 0-3-3.87'/><path d='M16 3.13a4 4 0 0 1 0 7.75'/></svg>");
  /* Wave 102 — added for /customer-management/ */
  --mg-icon-search-check:      url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231468b2' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='m8 11 2 2 4-4'/><circle cx='11' cy='11' r='8'/><path d='m21 21-4.3-4.3'/></svg>");
  --mg-icon-layout-dashboard:  url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231468b2' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><rect width='7' height='9' x='3' y='3' rx='1'/><rect width='7' height='5' x='14' y='3' rx='1'/><rect width='7' height='9' x='14' y='12' rx='1'/><rect width='7' height='5' x='3' y='14' rx='1'/></svg>");
  /* Wave 103 — added for /materials-pricing/ */
  --mg-icon-gem:               url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231468b2' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M6 3h12l4 6-10 13L2 9Z'/><path d='M11 3 8 9l4 13 4-13-3-6'/><path d='M2 9h20'/></svg>");
  --mg-icon-hammer:            url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231468b2' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='m15 12-8.373 8.373a1 1 0 1 1-3-3L12 9'/><path d='m18 15 4-4'/><path d='m21.5 11.5-1.914-1.914A2 2 0 0 1 19 8.172V7l-2.26-2.26a6 6 0 0 0-4.202-1.756L9 2.96l.92.82A6.18 6.18 0 0 1 12 8.4V10l2 2h1.172a2 2 0 0 1 1.414.586L18.5 14.5'/></svg>");
  --mg-icon-list-tree:         url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231468b2' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M21 12h-8'/><path d='M21 6H8'/><path d='M21 18h-8'/><path d='M3 6v4c0 1.1.9 2 2 2h3'/><path d='M3 10v6c0 1.1.9 2 2 2h3'/></svg>");
  --mg-icon-puzzle:            url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231468b2' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M19.439 7.85c-.049.322.059.648.289.878l1.568 1.568c.47.47.706 1.087.706 1.704s-.235 1.233-.706 1.704l-1.611 1.611a.98.98 0 0 1-.837.276c-.47-.07-.802-.48-.968-.925a2.501 2.501 0 1 0-3.214 3.214c.446.166.855.498.925.968a.979.979 0 0 1-.276.837l-1.61 1.61a2.404 2.404 0 0 1-1.705.707 2.402 2.402 0 0 1-1.704-.706l-1.568-1.568a1.026 1.026 0 0 0-.877-.29c-.493.074-.84.504-1.02.968a2.5 2.5 0 1 1-3.237-3.237c.464-.18.894-.527.967-1.02a1.026 1.026 0 0 0-.289-.877l-1.568-1.568A2.402 2.402 0 0 1 1.998 12c0-.617.236-1.234.706-1.704L4.314 8.69c.23-.23.556-.338.877-.29.493.074.84.504 1.02.968a2.5 2.5 0 1 0 3.237-3.237c-.464-.18-.894-.527-.967-1.02a1.026 1.026 0 0 1 .289-.877l1.568-1.568A2.402 2.402 0 0 1 12 1.998c.617 0 1.234.236 1.704.706l1.611 1.611c.23.23.338.556.29.877-.071.469-.479.802-.924.968a2.501 2.501 0 1 0 3.214 3.214c.166-.445.499-.854.968-.925.32-.046.647.06.877.29l1.568 1.568'/></svg>");
  --mg-icon-columns-3:         url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231468b2' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><rect width='18' height='18' x='3' y='3' rx='2'/><path d='M9 3v18'/><path d='M15 3v18'/></svg>");
  --mg-icon-tag:               url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231468b2' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M12.586 2.586A2 2 0 0 0 11.172 2H4a2 2 0 0 0-2 2v7.172a2 2 0 0 0 .586 1.414l8.704 8.704a2.426 2.426 0 0 0 3.42 0l6.58-6.58a2.426 2.426 0 0 0 0-3.42z'/><circle cx='7.5' cy='7.5' r='.5' fill='%231468b2'/></svg>");
  --mg-icon-square-stack:      url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231468b2' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M4 10c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h4c1.1 0 2 .9 2 2'/><path d='M10 16c-1.1 0-2-.9-2-2v-4c0-1.1.9-2 2-2h4c1.1 0 2 .9 2 2'/><rect width='8' height='8' x='14' y='14' rx='2'/></svg>");
  /* Wave 104 — added for /xls-machine-integration/ */
  --mg-icon-box-select:        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231468b2' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M5 3a2 2 0 0 0-2 2'/><path d='M19 3a2 2 0 0 1 2 2'/><path d='M21 19a2 2 0 0 1-2 2'/><path d='M5 21a2 2 0 0 1-2-2'/><path d='M9 3h1'/><path d='M9 21h1'/><path d='M14 3h1'/><path d='M14 21h1'/><path d='M3 9v1'/><path d='M21 9v1'/><path d='M3 14v1'/><path d='M21 14v1'/></svg>");
  --mg-icon-scissors:          url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231468b2' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><circle cx='6' cy='6' r='3'/><path d='M8.12 8.12 12 12'/><path d='M20 4 8.12 15.88'/><circle cx='6' cy='18' r='3'/><path d='M14.8 14.8 20 20'/></svg>");
  --mg-icon-frame:             url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231468b2' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><line x1='22' x2='2' y1='6' y2='6'/><line x1='22' x2='2' y1='18' y2='18'/><line x1='6' x2='6' y1='2' y2='22'/><line x1='18' x2='18' y1='2' y2='22'/></svg>");
  --mg-icon-qr-code:           url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231468b2' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><rect width='5' height='5' x='3' y='3' rx='1'/><rect width='5' height='5' x='16' y='3' rx='1'/><rect width='5' height='5' x='3' y='16' rx='1'/><path d='M21 16h-3a2 2 0 0 0-2 2v3'/><path d='M21 21v.01'/><path d='M12 7v3a2 2 0 0 1-2 2H7'/><path d='M3 12h.01'/><path d='M12 3h.01'/><path d='M12 16v.01'/><path d='M16 12h1'/><path d='M21 12v.01'/><path d='M12 21v-1'/></svg>");
  --mg-icon-bar-chart-3:       url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231468b2' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M3 3v18h18'/><path d='M18 17V9'/><path d='M13 17V5'/><path d='M8 17v-3'/></svg>");
  /* Wave 105 — added for /work-schedule/ */
  --mg-icon-gantt:             url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231468b2' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M8 6h10'/><path d='M6 12h9'/><path d='M11 18h7'/></svg>");
  --mg-icon-printer:           url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231468b2' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2'/><path d='M6 9V2h12v7'/><path d='M6 14h12v8H6z'/></svg>");
  --mg-icon-factory:           url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231468b2' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M2 20a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V8l-7 5V8l-7 5V4a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2Z'/><path d='M17 18h1'/><path d='M12 18h1'/><path d='M7 18h1'/></svg>");
  /* Wave 106 — added for /shop-floor-tracking/ */
  --mg-icon-clipboard-check:   url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231468b2' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><rect width='8' height='4' x='8' y='2' rx='1' ry='1'/><path d='M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2'/><path d='m9 14 2 2 4-4'/></svg>");
  --mg-icon-gauge:             url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231468b2' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='m12 14 4-4'/><path d='M3.34 19a10 10 0 1 1 17.32 0'/></svg>");
  --mg-icon-refresh-cw:        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231468b2' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8'/><path d='M21 3v5h-5'/><path d='M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16'/><path d='M8 16H3v5'/></svg>");
  --mg-icon-smartphone:        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231468b2' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><rect width='14' height='20' x='5' y='2' rx='2' ry='2'/><path d='M12 18h.01'/></svg>");
  /* Wave 108 — added for /qr-labels/ */
  --mg-icon-scan-line:         url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231468b2' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M3 7V5a2 2 0 0 1 2-2h2'/><path d='M17 3h2a2 2 0 0 1 2 2v2'/><path d='M21 17v2a2 2 0 0 1-2 2h-2'/><path d='M7 21H5a2 2 0 0 1-2-2v-2'/><path d='M7 12h10'/></svg>");
  /* Wave 110 — added for /logistics-delivery/ */
  --mg-icon-map-pin:           url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231468b2' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0'/><circle cx='12' cy='10' r='3'/></svg>");
  --mg-icon-container:         url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231468b2' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M22 7.7c0-.6-.4-1.2-.8-1.5l-6.3-3.9a1.72 1.72 0 0 0-1.7 0l-10.3 6c-.5.2-.9.8-.9 1.4v6.6c0 .5.4 1.2.8 1.5l6.3 3.9a1.72 1.72 0 0 0 1.7 0l10.3-6c.5-.3.9-1 .9-1.5Z'/><path d='M10 21.9V14L2.1 9.1'/><path d='m10 14 11.9-6.9'/><path d='M14 19.8v-8.1'/><path d='M18 17.5V9.4'/></svg>");
  --mg-icon-boxes:             url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231468b2' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M2.97 12.92A2 2 0 0 0 2 14.63v3.24a2 2 0 0 0 .97 1.71l3 1.8a2 2 0 0 0 2.06 0L12 19v-5.5l-5-3-4.03 2.42Z'/><path d='m7 16.5-4.74-2.85'/><path d='m7 16.5 5-3'/><path d='M7 16.5v5.17'/><path d='M12 13.5V19l3.97 2.38a2 2 0 0 0 2.06 0l3-1.8a2 2 0 0 0 .97-1.71v-3.24a2 2 0 0 0-.97-1.71L17 10.5l-5 3Z'/><path d='m17 16.5-5-3'/><path d='m17 16.5 4.74-2.85'/><path d='M17 16.5v5.17'/><path d='M7.97 4.42A2 2 0 0 0 7 6.13v4.37l5 3 5-3V6.13a2 2 0 0 0-.97-1.71l-3-1.8a2 2 0 0 0-2.06 0l-3 1.8Z'/><path d='M12 8 7.26 5.15'/><path d='m12 8 4.74-2.85'/><path d='M12 13.5V8'/></svg>");
  --mg-icon-link-2:            url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231468b2' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M9 17H7A5 5 0 0 1 7 7h2'/><path d='M15 7h2a5 5 0 1 1 0 10h-2'/><line x1='8' x2='16' y1='12' y2='12'/></svg>");
  --mg-icon-package-check:     url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231468b2' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='m16 16 2 2 4-4'/><path d='M21 10V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l2-1.14'/><path d='M16.5 9.4 7.55 4.24'/><path d='M3.29 7 12 12l8.71-5'/><path d='M12 22V12'/></svg>");
}


/* ============================================================
   GLOBALS
   ============================================================ */
input, textarea, select, button, .btn, .th-btn {
  font-family: var(--mg-font-body) !important;
}

pre, code, kbd, samp, .mono, .price-amount {
  font-family: "JetBrains Mono", "SF Mono", "Consolas", "Liberation Mono", monospace !important;
}

.container {
  max-width: 1600px !important;
}

html,
body {
  overflow-x: hidden !important;
  position: relative !important;
  width: 100% !important;
  max-width: 100% !important;
}


/* ============================================================
   HEADER — Positioning
   ============================================================ */
.th-header.header-absolute {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  z-index: 999 !important;
  margin: 0 !important;
}
body.admin-bar .th-header.header-absolute {
  top: 32px !important;
}
@media screen and (max-width: 782px) {
  body.admin-bar .th-header.header-absolute {
    top: 46px !important;
  }
}

.sticky-wrapper,
.sticky-wrapper.sticky,
.sticky-wrapper.sticky-active,
.sticky-wrapper.fixed-active {
  animation: none !important;
  -webkit-animation: none !important;
  transform: none !important;
  -webkit-transform: none !important;
  transition: none !important;
}


/* ============================================================
   HEADER — Menu area + nav links
   ============================================================ */
.menu-area {
  background-color: var(--mg-bg) !important;
  background-image: none !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  border-bottom: none !important;
  box-shadow:
    0 1px 0 rgba(20, 40, 80, 0.10),
    0 8px 24px -8px rgba(20, 40, 80, 0.10) !important;
  border-radius: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  max-width: none !important;
  position: relative;
}

.menu-area::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(20, 104, 178, 0.28) 25%,
    rgba(20, 104, 178, 0.28) 75%,
    transparent 100%
  );
  pointer-events: none;
  z-index: 1;
}

.menu-area .container-fluid {
  max-width: 1344px !important;
  margin: 0 auto !important;
  padding-left: 12px !important;
  padding-right: 12px !important;
}

.menu-area .row.align-items-center {
  height: 72px !important;
}

@media (min-width: 1200px) {
  .menu-area .row.align-items-center.justify-content-between {
    justify-content: flex-start !important;
    gap: 32px !important;
  }
  .menu-area .row.align-items-center > .col-auto:last-child {
    margin-left: auto !important;
  }
}

.menu-area .logo img,
.menu-area [class*="logo"] img {
  max-height: 42px;
  width: auto;
}

/* ============================================================
   HEADER — CTA (Book a demo)
   ============================================================ */
.menu-area .header-button .th-btn,
.menu-area .header-button .th-btn.style1 {
  background-color: var(--mg-orange) !important;
  background-image: none !important;
  color: #1a1a2e !important;
  border: 1px solid var(--mg-orange) !important;
  border-radius: var(--mg-radius) !important;
  font-family: var(--mg-font-body) !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  padding: 12px 24px !important;
  box-shadow: none !important;
  transition: background-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease !important;
  overflow: visible !important;
  position: relative;
  width: auto !important;
  height: auto !important;
}
.menu-area .header-button .th-btn:hover,
.menu-area .header-button .th-btn.style1:hover {
  background-color: var(--mg-orange-d) !important;
  border-color: var(--mg-orange-d) !important;
  color: #1a1a2e !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(242, 156, 43, 0.28) !important;
}

@media (max-width: 1199px) {
  .menu-area .col-auto.d-none.d-lg-inline-block {
    display: inline-flex !important;
    align-items: center;
  }
  .menu-area .header-button,
  .menu-area .header-button .th-btn,
  .menu-area .header-button .th-btn.style1 {
    display: inline-block !important;
  }
  .menu-area .header-button .th-btn,
  .menu-area .header-button .th-btn.style1 {
    padding: 8px 14px !important;
    font-size: 0.85rem !important;
  }

  .menu-area .row.align-items-center.justify-content-between {
    flex-wrap: nowrap;
  }
  .menu-area .row > .col-auto:first-child {
    margin-right: auto !important;
  }
  .menu-area .row > .col-auto.d-none.d-lg-inline-block {
    order: 2 !important;
  }
  .menu-area .row > .col-auto:has(.th-menu-toggle),
  .menu-area .row > .col-auto:nth-of-type(2) {
    order: 3 !important;
  }
}

@media (max-width: 414px) {
  .menu-area .header-button .th-btn,
  .menu-area .header-button .th-btn.style1 {
    padding: 7px 12px !important;
    font-size: 0.8rem !important;
  }
  .menu-area .logo img,
  .menu-area [class*="logo"] img {
    max-height: 36px !important;
  }
}


/* ============================================================
   HEADER — Drawer CTA (injected via functions.php)
   ============================================================ */
.mg-drawer-cta-injected {
  display: block !important;
  max-width: 200px !important;
  margin: 20px auto 24px !important;
  padding: 10px 16px !important;
  background-color: var(--mg-orange) !important;
  color: #1a1a2e !important;
  text-align: center !important;
  font-family: var(--mg-font-body) !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  letter-spacing: 0.01em !important;
  text-decoration: none !important;
  border: 1px solid var(--mg-orange) !important;
  border-radius: var(--mg-radius) !important;
  box-shadow: 0 2px 8px rgba(242, 156, 43, 0.20) !important;
  transition: background-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease !important;
}
.mg-drawer-cta-injected:hover,
.mg-drawer-cta-injected:focus {
  background-color: var(--mg-orange-d) !important;
  border-color: var(--mg-orange-d) !important;
  color: #1a1a2e !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 14px rgba(242, 156, 43, 0.28) !important;
}


/* ============================================================
   HEADER — Hamburger toggle
   ============================================================ */
.menu-area .th-menu-toggle,
.menu-area button.th-menu-toggle {
  background-color: var(--mg-bg) !important;
  color: var(--mg-navy-deep) !important;
  border: 1px solid var(--mg-line) !important;
  border-radius: var(--mg-radius) !important;
  width: 44px !important;
  height: 44px !important;
  line-height: 42px !important;
  font-size: 18px !important;
  padding: 0 !important;
  box-shadow: none !important;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease !important;
}
.menu-area .th-menu-toggle:hover,
.menu-area .th-menu-toggle:focus {
  background-color: var(--mg-bg-soft) !important;
  border-color: var(--mg-steel) !important;
  color: var(--mg-navy-deep) !important;
}
.menu-area .th-menu-toggle i,
.menu-area .th-menu-toggle svg {
  color: var(--mg-navy-deep) !important;
}

.sticky-wrapper.sticky .menu-area .th-menu-toggle,
.sticky-wrapper.sticky-active .menu-area .th-menu-toggle {
  background-color: rgba(255, 255, 255, 0.92) !important;
}


/* ============================================================
   HEADER — Mobile drawer (offcanvas)
   ============================================================ */
.th-menu-wrapper {
  display: flex !important;
  justify-content: flex-end !important;
}
.th-menu-wrapper .th-menu-area {
  border-right: none !important;
  border-left: 3px solid var(--mg-navy-deep) !important;
  transform: translateX(110%) !important;
  transition: transform 0.4s ease, opacity 0.3s ease !important;
}
.th-menu-wrapper.th-body-visible .th-menu-area {
  transform: translateX(0) !important;
}

.th-menu-wrapper .th-menu-area .th-menu-toggle {
  right: auto !important;
  left: -22px !important;
  top: 22px !important;
  width: 44px !important;
  height: 44px !important;
  line-height: 42px !important;
  font-size: 18px !important;
  background-color: var(--mg-bg) !important;
  color: var(--mg-navy-deep) !important;
  border: 1px solid var(--mg-line) !important;
  border-radius: var(--mg-radius) !important;
  box-shadow: 0 2px 8px rgba(20, 40, 80, 0.12) !important;
  transition: background-color 0.15s ease, border-color 0.15s ease !important;
}
.th-menu-wrapper .th-menu-area .th-menu-toggle:hover,
.th-menu-wrapper .th-menu-area .th-menu-toggle:focus {
  background-color: var(--mg-bg-soft) !important;
  border-color: var(--mg-steel) !important;
  color: var(--mg-navy-deep) !important;
}
.th-menu-wrapper .th-menu-area .th-menu-toggle i {
  color: var(--mg-navy-deep) !important;
}

.th-menu-wrapper .mobile-logo {
  background-color: var(--mg-bg) !important;
  padding: 32px 0 20px !important;
  border-bottom: 1px solid var(--mg-line) !important;
}

.th-menu-wrapper .th-mobile-menu {
  margin-top: 0 !important;
  padding-top: 8px !important;
}

.th-menu-wrapper .th-mobile-menu ul li {
  border-bottom: 1px solid var(--mg-line) !important;
}
.th-menu-wrapper .th-mobile-menu > ul > li:last-child {
  border-bottom: none !important;
}
.th-menu-wrapper .th-mobile-menu ul li a {
  color: var(--mg-ink) !important;
  font-family: var(--mg-font-body) !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  padding: 14px 18px !important;
  display: block !important;
  transition: color 0.15s ease, background-color 0.15s ease !important;
}
.th-menu-wrapper .th-mobile-menu ul li a:hover,
.th-menu-wrapper .th-mobile-menu ul li a:focus {
  color: var(--mg-navy-deep) !important;
  background-color: var(--mg-bg-soft) !important;
}

.th-menu-wrapper .th-mobile-menu ul li.current-menu-item > a,
.th-menu-wrapper .th-mobile-menu ul li.current-menu-ancestor > a {
  color: var(--mg-navy-deep) !important;
  font-weight: 600 !important;
  border-left: 3px solid var(--mg-orange) !important;
  padding-left: 15px !important;
  background-color: rgba(242, 156, 43, 0.06) !important;
}

.th-menu-wrapper .th-mobile-menu ul ul li a {
  font-weight: 400 !important;
  font-size: 15px !important;
  color: var(--mg-muted) !important;
  padding-left: 34px !important;
}
.th-menu-wrapper .th-mobile-menu ul ul {
  background-color: var(--mg-bg-soft) !important;
}

.th-menu-wrapper .th-mobile-menu ul li a::before,
.th-menu-wrapper .th-mobile-menu ul li a::after {
  display: none !important;
  content: none !important;
}

.th-menu-wrapper .th-mobile-menu ul .th-item-has-children > a .th-mean-expand {
  background-color: transparent !important;
  background-image: none !important;
  border: 1px solid var(--mg-line) !important;
  border-radius: 4px !important;
  color: var(--mg-muted) !important;
  width: 28px !important;
  height: 28px !important;
  line-height: 26px !important;
  /* margin-top: 0 (not -14px) — transform: translateY(-50%) handles centering */
  margin-top: 0 !important;
  right: 18px !important;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease !important;
}
.th-menu-wrapper .th-mobile-menu ul .th-item-has-children > a:hover .th-mean-expand {
  background-color: var(--mg-bg-soft) !important;
  border-color: var(--mg-steel) !important;
  color: var(--mg-navy-deep) !important;
}
.th-menu-wrapper .th-mobile-menu ul .th-item-has-children.th-active > a .th-mean-expand {
  background-color: var(--mg-navy-deep) !important;
  border-color: var(--mg-navy-deep) !important;
  color: var(--mg-bg) !important;
}


/* ============================================================
   HEADER — Sticky state
   ============================================================ */
.sticky-wrapper.sticky .menu-area,
.sticky-wrapper.sticky-active .menu-area,
.sticky-wrapper.fixed-active .menu-area,
.sticky-active.menu-area {
  background-color: rgba(255, 255, 255, 0.82) !important;
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: none !important;
  box-shadow:
    0 1px 0 rgba(20, 40, 80, 0.10),
    0 12px 28px -6px rgba(20, 40, 80, 0.12) !important;
  transition:
    background-color 0.2s ease,
    box-shadow 0.2s ease;
  border-radius: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  max-width: none !important;
}

.sticky-wrapper.sticky .menu-area::after,
.sticky-wrapper.sticky-active .menu-area::after {
  opacity: 0.5;
}

@supports not (backdrop-filter: blur(1px)) {
  .sticky-wrapper.sticky .menu-area,
  .sticky-wrapper.sticky-active .menu-area {
    background-color: var(--mg-bg) !important;
  }
}

body.admin-bar .sticky-wrapper.sticky {
  top: 32px !important;
}
@media screen and (max-width: 782px) {
  body.admin-bar .sticky-wrapper.sticky {
    top: 46px !important;
  }
}


/* ============================================================
   HERO — sassabanner widget (#hero.hero-9)
   ============================================================ */
#hero.th-hero-wrapper,
#hero.hero-9,
#hero.background-image {
  background-color: var(--mg-bg) !important;
  background-image:
    radial-gradient(900px 420px at 12% -8%, rgba(20, 104, 178, 0.14), transparent 60%),
    radial-gradient(720px 360px at 100% 0%, rgba(60, 86, 163, 0.12), transparent 60%) !important;
  background-repeat: no-repeat !important;
  background-position: 0 0, 100% 0 !important;
  background-size: auto, auto !important;
  min-height: 0 !important;
  height: auto !important;
  padding-top: 152px !important;
}

@media (min-width: 1200px) {
  #hero.th-hero-wrapper,
  #hero.hero-9,
  #hero.background-image {
    padding-bottom: 48px !important;
  }
}
@media (max-width: 1199px) and (min-width: 481px) {
  #hero.th-hero-wrapper,
  #hero.hero-9,
  #hero.background-image {
    padding-bottom: 32px !important;
  }
}
@media (max-width: 480px) {
  #hero.th-hero-wrapper,
  #hero.hero-9,
  #hero.background-image {
    padding-bottom: 24px !important;
  }
}

#hero.hero-9 .row.align-items-end {
  align-items: center !important;
}

.hero-style9 {
  font-family: var(--mg-font-body);
  padding: 0 !important;
}

#hero.hero-9 .container,
.hero-style9 .container {
  max-width: 1344px !important;
}

.hero-style9 .sub-title {
  display: inline-block;
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--mg-blue) !important;
  margin-bottom: 0.7rem;
  background: none !important;
  background-color: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
}

.hero-style9 h1.hero-title,
.hero-style9 .hero-title,
.hero-9 .hero-style9 .hero-title {
  color: var(--mg-navy-deep) !important;
  font-family: var(--mg-font-headline) !important;
  font-weight: 700 !important;
  line-height: 1.12 !important;
  letter-spacing: -0.015em !important;
}

.hero-style9 .hero-text {
  color: var(--mg-muted) !important;
  font-size: 1.08rem;
  line-height: 1.6;
  max-width: 38ch;
}

.hero-style9 .btn-group {
  margin-top: 1.4rem;
  gap: 12px;
}

.hero-style9 .th-btn.style11 {
  background-color: var(--mg-orange) !important;
  background-image: none !important;
  color: #1a1a2e !important;
  border: 1px solid var(--mg-orange) !important;
  border-radius: var(--mg-radius) !important;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-transform: none !important;
  box-shadow: var(--mg-shadow);
  transition: background-color 0.15s ease, transform 0.15s ease !important;
  overflow: visible !important;
  position: relative;
}
.hero-style9 .th-btn.style11:hover,
.hero-style9 .th-btn.style11:focus {
  background-color: var(--mg-orange-d) !important;
  color: #1a1a2e !important;
  transform: translateY(-1px);
}

.hero-style9 .th-btn.style6 {
  background-color: transparent !important;
  background-image: none !important;
  color: var(--mg-navy-deep) !important;
  border: 1.5px solid var(--mg-navy-deep) !important;
  border-radius: var(--mg-radius) !important;
  font-family: var(--mg-font-body) !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  letter-spacing: 0.01em !important;
  text-transform: none !important;
  padding: 19.5px 40px !important;
  box-shadow: none !important;
  transition: background-color 0.15s ease, color 0.15s ease, transform 0.15s ease !important;
  overflow: visible !important;
  position: relative;
}
.hero-style9 .th-btn.style6:hover,
.hero-style9 .th-btn.style6:focus {
  background-color: var(--mg-navy-deep) !important;
  border-color: var(--mg-navy-deep) !important;
  color: var(--mg-bg) !important;
  transform: translateY(-1px);
}

.hero-style9 .client-box {
  display: none !important;
}

@media (max-width: 1199px) {
  .hero-style9 .th-hero-img,
  .hero-9 .th-hero-img {
    margin-top: 48px !important;
  }
}

/* Hero parent container — subtle gradient + bottom line */
.mg-home-hero,
.mg-home-hero.e-con,
.mg-home-hero.e-con-full {
  background:
    radial-gradient(900px 380px at 12% -10%, rgba(20, 104, 178, 0.06), transparent 60%),
    radial-gradient(700px 320px at 100% 0%, rgba(60, 86, 163, 0.05), transparent 60%) !important;
  border-bottom: 1px solid var(--mg-line) !important;
}

@media (max-width: 768px) {
  .mg-home-hero .hero-style9,
  .mg-home-hero .hero-title,
  .mg-home-hero .hero-text,
  .mg-home-hero .hero-style9 p,
  .mg-home-hero .hero-style9 .col-xl-6 {
    text-align: left !important;
  }
  /* Hero CTA: uniform full-width stacked buttons on mobile across ALL languages.
     Theme default is flex-row + wrap, so short EN ("Book a demo") sat side-by-side
     while long translated CTAs ("Umów się na prezentację", DE/FR/...) wrapped to a
     ragged stack. Force column + full width so every language looks identical. */
  .mg-home-hero .btn-group,
  .mg-home-hero .btn-group.justify-content-center {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start !important;
  }
  .mg-home-hero .btn-group .th-btn {
    width: 100%;
    justify-content: center;
    text-align: center;
  }
}


/* ============================================================
   SASSA PSEUDO CLEANUP — kill decorative ::before/::after
   ============================================================ */
.th-btn::before,
.th-btn::after,
.hero-style9 .th-btn::before,
.hero-style9 .th-btn::after,
.hero-style9 .th-btn.style11::before,
.hero-style9 .th-btn.style11::after,
.hero-style9 .th-btn.style6::before,
.hero-style9 .th-btn.style6::after,
.menu-area .header-button .th-btn::before,
.menu-area .header-button .th-btn::after,
.menu-area .header-button .th-btn.style1::before,
.menu-area .header-button .th-btn.style1::after,
.hero-style9 .sub-title::before,
.hero-style9 .sub-title::after,
.mg-split-text-image .sub-title::before,
.mg-split-text-image .sub-title::after,
.mg-card-flat-row .sub-title::before,
.mg-card-flat-row .sub-title::after,
.mg-feature-grid .sub-title::before,
.mg-feature-grid .sub-title::after,
.mg-feature-list .sub-title::before,
.mg-feature-list .sub-title::after,
.mg-split-cards .sub-title::before,
.mg-split-cards .sub-title::after,
.mg-home-blog .sub-title::before,
.mg-home-blog .sub-title::after {
  display: none !important;
  content: none !important;
  background: none !important;
  background-color: transparent !important;
  width: 0 !important;
  height: 0 !important;
  opacity: 0 !important;
  transform: none !important;
  animation: none !important;
  transition: none !important;
}


/* ============================================================
   SPLIT TEXT + IMAGE — .mg-split-text-image
   (home WHAT IS MONITGLASS + order-management Complaints; outer eid f460190)

   How to use:
     Add CSS Class `mg-split-text-image` to the e-con section in Elementor.
     Pattern: left text + features + button column, right image column.
     Targets Sassa widgets by structural classes (sassaimage_2,
     about-feature, th-btn) — works on every page that uses the layout.

   :where() wraps old eid + new class with specificity 0 so the rest of
   each selector keeps its weight. Dual selectors stay until wave 100
   (cleanup once Custom CSS Classes are confirmed in Elementor).
   ============================================================ */
.mg-split-text-image,
.mg-split-text-image.e-con,
.mg-split-text-image.e-con-full {
  background-color: var(--mg-bg) !important;
  border-bottom: 1px solid var(--mg-line) !important;
  padding-left: clamp(24px, 4vw, 48px) !important;
  padding-right: clamp(24px, 4vw, 48px) !important;
}

@media (min-width: 1200px) {
  .mg-split-text-image.e-con,
  .mg-split-text-image.e-con-full {
    padding-top: 32px !important;
    padding-bottom: 32px !important;
  }
}
@media (max-width: 1199px) and (min-width: 481px) {
  .mg-split-text-image.e-con,
  .mg-split-text-image.e-con-full {
    padding-top: 28px !important;
    padding-bottom: 28px !important;
  }
}
@media (max-width: 480px) {
  .mg-split-text-image.e-con,
  .mg-split-text-image.e-con-full {
    padding-top: 20px !important;
    padding-bottom: 20px !important;
  }
}

.mg-split-text-image .e-con-inner {
  gap: clamp(48px, 5vw, 80px) !important;
}

.mg-split-text-image .sub-title {
  display: inline-block !important;
  color: var(--mg-blue) !important;
  font-family: var(--mg-font-body) !important;
  font-size: 0.8rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.12em !important;
  line-height: 1.3 !important;
  margin: 0 0 0.6rem 0 !important;
  padding: 0 !important;
  background: transparent !important;
}
.mg-split-text-image .sec-title,
.mg-split-text-image .sec-title2,
.mg-split-text-image h2.sec-title,
.mg-split-text-image h2.sec-title2,
.mg-split-text-image h3.sec-title,
.mg-split-text-image h3.sec-title2 {
  color: var(--mg-navy-deep) !important;
  font-weight: 700 !important;
  font-size: clamp(2rem, 3.4vw, 2.85rem) !important;
  line-height: 1.2 !important;
  margin: 0 0 1.2rem 0 !important;
  letter-spacing: -0.01em !important;
  text-transform: none !important;
}

.mg-split-text-image .elementor-widget-text-editor p {
  color: var(--mg-ink) !important;
  font-size: 1.05rem !important;
  line-height: 1.6 !important;
  max-width: 60ch !important;
  margin: 0 0 1.5rem 0 !important;
}

.mg-split-text-image .about-feature-wrap {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.7rem !important;
  margin: 1.2rem 0 1.8rem !important;
  padding: 0 !important;
}
.mg-split-text-image .about-feature,
.mg-split-text-image .about-feature.style4 {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  padding: 0 0 0 1.6rem !important;
  margin: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  position: relative !important;
  gap: 0 !important;
  min-height: 0 !important;
}
.mg-split-text-image .about-feature::before,
.mg-split-text-image .about-feature.style4::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  top: 0.55em !important;
  width: 8px !important;
  height: 8px !important;
  background-color: var(--mg-orange) !important;
  border-radius: 2px !important;
  flex: none !important;
  display: block !important;
}
.mg-split-text-image .about-feature .box-icon {
  display: none !important;
}
.mg-split-text-image .about-feature .media-body {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.15rem !important;
  flex: 1 !important;
  padding: 0 !important;
  margin: 0 !important;
}
.mg-split-text-image .about-feature .box-title,
.mg-split-text-image .about-feature h3,
.mg-split-text-image .about-feature h3.box-title {
  color: var(--mg-ink) !important;
  font-size: 1.02rem !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
  margin: 0 !important;
  padding: 0 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}
.mg-split-text-image .about-feature p,
.mg-split-text-image .about-feature .media-body p {
  color: var(--mg-muted) !important;
  font-size: 0.93rem !important;
  line-height: 1.5 !important;
  margin: 0 !important;
  padding: 0 !important;
}

.mg-split-text-image .elementor-widget-sassabutton {
  margin-top: 0.2rem !important;
}
.mg-split-text-image .th-btn,
.mg-split-text-image .th-btn.style1,
.mg-split-text-image .th-btn.style3,
.mg-split-text-image a.th-btn {
  display: inline-flex !important;
  align-items: center !important;
  background: transparent !important;
  background-color: transparent !important;
  color: var(--mg-blue) !important;
  font-weight: 700 !important;
  font-size: 0.95rem !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  height: auto !important;
  min-height: 0 !important;
  line-height: 1.4 !important;
  transition: color 0.15s ease !important;
  overflow: visible !important;
}
.mg-split-text-image .th-btn::after {
  content: " →" !important;
  display: inline !important;
  margin-left: 0.4em !important;
  background: none !important;
  width: auto !important;
  height: auto !important;
  position: static !important;
  border: none !important;
  border-radius: 0 !important;
  transition: transform 0.15s ease !important;
}
.mg-split-text-image .th-btn:hover {
  color: var(--mg-navy-deep) !important;
  background: transparent !important;
}
.mg-split-text-image .th-btn:hover::after {
  transform: translateX(3px) !important;
}
.mg-split-text-image .th-btn .btn-border,
.mg-split-text-image .th-btn > .icon,
.mg-split-text-image .th-btn > span:not(:first-child) {
  display: none !important;
}

/* Image — frame + display:contents wrapper unblock */
.mg-split-text-image .elementor-widget-sassaimage_2 img,
.mg-split-text-image .img-box13 img,
.mg-split-text-image .elementor-widget-sassaimage_2 img {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  border-radius: 8px !important;
  border: 1px solid rgba(20, 104, 178, 0.08) !important;
  box-shadow:
    0 2px 4px rgba(20, 104, 178, 0.04),
    0 20px 40px -12px rgba(20, 104, 178, 0.15) !important;
}
.mg-split-text-image .elementor-widget-sassaimage_2 .custom_css_handelar,
.mg-split-text-image .elementor-widget-sassaimage_2 .img1,
.mg-split-text-image .elementor-widget-sassaimage_2 [class*="custom_css"],
.mg-split-text-image .img-box13 .custom_css_handelar,
.mg-split-text-image .img-box13 .img1 {
  display: contents !important;
  margin: 0 !important;
  width: auto !important;
  max-width: none !important;
}
.mg-split-text-image .elementor-widget-sassaimage_2,
.mg-split-text-image .elementor-widget-sassaimage_2 .elementor-widget-container {
  overflow: visible !important;
  max-width: 100% !important;
}
.mg-split-text-image .elementor-widget-sassaimage_2 {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 0 !important;
}

/* Desktop column proportions */
@media (min-width: 1200px) {
  .mg-split-text-image .e-con:has(.elementor-widget-sassaimage_2) {
    flex: 1.15 1 0 !important;
  }
  .mg-split-text-image .e-con:has(.elementor-widget-text-editor) {
    flex: 0.85 1 0 !important;
  }
}

/* Mobile — text first, image second */
@media (max-width: 1199px) {
  .mg-split-text-image .elementor-widget-text-editor p {
    font-size: 1rem !important;
  }
  .mg-split-text-image .e-con-inner {
    display: flex !important;
    flex-direction: column !important;
  }
  .mg-split-text-image .e-con:has(.elementor-widget-sassaimage_2) {
    order: 2 !important;
    margin-top: 32px !important;
  }
  .mg-split-text-image .e-con:has(.elementor-widget-text-editor) {
    order: 1 !important;
  }
}

@media (max-width: 768px) {
  .mg-split-text-image.e-con,
  .mg-split-text-image.e-con-full {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  .mg-split-text-image .e-con-inner {
    gap: 32px !important;
  }
}


/* ============================================================
   CARD FLAT ROW — .mg-card-flat-row
   (home PRODUCTION TYPES + order-management Related modules; outer eid 8f05705)

   How to use:
     Add CSS Class `mg-card-flat-row` to the e-con section in Elementor.
     Pattern: 3-col grid of feature-card.style2 with icon badge + Read more.
     Card icons live in the icon library at end of file (use mg-icon-*).
   ============================================================ */
@media (min-width: 1200px) {
  .mg-card-flat-row.e-con,
  .mg-card-flat-row.e-con-full {
    padding-top: 72px !important;
    padding-bottom: 72px !important;
    background-color: var(--mg-bg-alt) !important;
  }
}
@media (max-width: 1199px) and (min-width: 481px) {
  .mg-card-flat-row.e-con,
  .mg-card-flat-row.e-con-full {
    padding-top: 64px !important;
    padding-bottom: 64px !important;
    padding-left: 32px !important;
    padding-right: 32px !important;
    background-color: var(--mg-bg-alt) !important;
  }
}
@media (max-width: 480px) {
  .mg-card-flat-row.e-con,
  .mg-card-flat-row.e-con-full {
    padding-top: 48px !important;
    padding-bottom: 48px !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
    background-color: var(--mg-bg-alt) !important;
  }
}

.mg-card-flat-row {
  border-bottom: 1px solid var(--mg-line) !important;
}

.mg-card-flat-row .e-con-inner {
  max-width: min(100%, 1344px) !important;
}

/* Grid sizing */
@media (min-width: 1200px) {
  .mg-card-flat-row .row .col-xl-3 {
    flex: 0 0 33.333% !important;
    max-width: 33.333% !important;
  }
}
@media (max-width: 1199px) {
  .mg-card-flat-row .row .col-md-6,
  .mg-card-flat-row .row .col-xl-3 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
}

/* Wave 112 — second-row card alignment.
   Sassa sassafeatures widget hard-codes `row gy-4 justify-content-center`,
   so when a card grid has 5 items (3+2), the bottom row is centred between
   columns. PoC pins the trailing cards to the LEFT (auto grid fill from
   start), giving an empty trailing slot. Match that. */
.mg-card-flat-row .row.justify-content-center {
  justify-content: flex-start !important;
}

/* Eyebrow */
.mg-card-flat-row .sub-title {
  text-transform: uppercase !important;
  letter-spacing: 1.536px !important;
  color: var(--mg-blue) !important;
  font-weight: 700 !important;
  font-size: 0.8rem !important;
  padding: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  background-color: transparent !important;
  box-shadow: none !important;
  border: none !important;
  display: inline-block !important;
  margin-bottom: 0.6rem !important;
}
.mg-card-flat-row .title-area,
.mg-card-flat-row .title-area.text-center,
.mg-card-flat-row .title-area.text-center,
.mg-card-flat-row .sub-title,
.mg-card-flat-row .sec-title,
.mg-card-flat-row .sec-title2 {
  text-align: left !important;
}

.mg-card-flat-row h2.sec-title,
.mg-card-flat-row h2.sec-title2 {
  text-transform: none !important;
  font-size: 2.85rem !important;
  font-weight: 700 !important;
  color: var(--mg-navy-deep) !important;
  letter-spacing: -0.01em !important;
  line-height: 1.2 !important;
  margin-top: 0 !important;
  margin-block-start: 0 !important;
}

/* Cards */
.mg-card-flat-row .feature-card.style2,
.mg-card-flat-row .feature-card.style2 .box-title,
.mg-card-flat-row .feature-card.style2 .box-text {
  text-align: left !important;
}

.mg-card-flat-row .feature-card.style2 .box-title {
  font-weight: 700 !important;
}

.mg-card-flat-row .feature-card.style2 {
  border-radius: var(--mg-radius) !important;
  border: 1px solid var(--mg-line) !important;
  box-shadow: 0 1px 2px rgba(20, 104, 178, 0.04) !important;
  transition: transform 200ms ease, border-color 200ms ease, box-shadow 200ms ease !important;
  position: relative !important;
  cursor: pointer;
  /* Equal heights — shortest copy gets bottom whitespace instead of a
     visibly shorter card. Wrapper already stretches via Bootstrap row. */
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
}
.mg-card-flat-row .feature-card.style2:hover {
  transform: translateY(-2px) !important;
  border-color: var(--mg-blue) !important;
  box-shadow: 0 4px 12px rgba(20, 104, 178, 0.08) !important;
}

/* Icon badges — text-based via ::before on card */
.mg-card-flat-row .feature-card.style2::before {
  content: "" !important;
  display: block !important;
  width: 80px !important;
  height: 80px !important;
  background-color: rgba(20, 104, 178, 0.10) !important;
  border-radius: var(--mg-radius) !important;
  background-size: 48px 48px !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  margin: 0 0 24px 0 !important;
}

/* Wave 160: card1 Monolith = single pane, card3 IGU = double pane (icons były zamienione). */
body.mg-front .mg-card-flat-row .row > .col-xl-3:nth-child(1) .feature-card.style2::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%231468b2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='14' y='6' width='20' height='36' rx='1'/><path d='M 10 8 L 14 8 M 34 8 L 38 8 M 10 40 L 14 40 M 34 40 L 38 40'/></svg>") !important;
}
body.mg-front .mg-card-flat-row .row > .col-xl-3:nth-child(2) .feature-card.style2::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%231468b2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='6' y='10' width='36' height='8' rx='1'/><line x1='6' y1='24' x2='42' y2='24' stroke-dasharray='3 3'/><rect x='6' y='30' width='36' height='8' rx='1'/></svg>") !important;
}
body.mg-front .mg-card-flat-row .row > .col-xl-3:nth-child(3) .feature-card.style2::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%231468b2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='10' y='6' width='8' height='36' rx='1'/><rect x='30' y='6' width='8' height='36' rx='1'/><line x1='18' y1='8' x2='30' y2='8'/><line x1='18' y1='40' x2='30' y2='40'/></svg>") !important;
}

/* Card H3 hover */
.mg-card-flat-row .feature-card .box-title a:hover,
.mg-card-flat-row .feature-card h3 a:hover {
  color: var(--mg-blue) !important;
}

/* Card "Read more" CTA label is a CSS ::after content (not in the DOM), so it
   can't be translated by WPML. Make it language-aware via a custom property set
   on <html lang="xx-XX">. Default (EN) keeps "Read more →". Add new languages here. */
html[lang^="de"] { --mg-readmore: "Weiterlesen →"; }
html[lang^="pl"] { --mg-readmore: "Dowiedz się więcej →"; }
html[lang^="fr"] { --mg-readmore: "En savoir plus →"; }
html[lang^="pt"] { --mg-readmore: "Saiba mais →"; }
html[lang^="es"] { --mg-readmore: "Leer más →"; }
html[lang^="cs"] { --mg-readmore: "Zjistit více →"; }
html[lang^="tr"] { --mg-readmore: "Daha fazla bilgi →"; }

/* Long compound/inflected words (de "Isolierglasherstellung", pl "Oprogramowanie",
   "rozmieszczenie") overflow narrow mobile headings. Hyphenate via hyphens:auto for
   ALL languages — the html[lang] attribute (WPML) drives the correct dictionary, so
   each language breaks at proper syllable points WITH a hyphen. overflow-wrap stays
   as last-resort for truly unbreakable strings (URLs). NOTE: do NOT use
   word-break:break-word here — it breaks mid-word without a hyphen (pl "Oprogramowani|e").
   Hyphenation only acts when a word would overflow, so desktop/short-word langs unaffected. */
body { overflow-wrap: break-word; }        /* break overlong words anywhere they'd overflow */
h1, h2, h3, h4, h5, h6,
.sec-title, .sec-title2, .box-title, .title-area, .hero-title {
  overflow-wrap: break-word;
  -webkit-hyphens: auto;
  hyphens: auto;
}

/* CF7 consent checkbox (RODO/GDPR acceptance) — [acceptance] wrapped in .mg-consent.
   Scoped to .contact-form2 (the form wrapper), styled across all 8 language forms. */
.contact-form2 .mg-consent { margin: 2px 0 18px; }
.contact-form2 .mg-consent .wpcf7-acceptance .wpcf7-list-item { margin: 0; }
.contact-form2 .mg-consent .wpcf7-list-item label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.5;
  font-weight: 400;
  color: var(--mg-muted, #5a6473);
  cursor: pointer;
}
/* The Sassa theme HIDES every native checkbox (input[type=checkbox]{visibility:hidden;
   opacity:0;width:0;height:0;display:none}) and draws a custom one via `input ~ label:before`.
   That sibling pattern needs <input> ~ <label>, but CF7 renders <label><input><span> — input
   INSIDE the label — so no custom box renders and NOTHING shows (consent looked like plain text,
   clicking toggled an invisible box). Fix: force the native checkbox fully visible. */
.contact-form2 .mg-consent input[type="checkbox"] {
  -webkit-appearance: checkbox !important;
  appearance: checkbox !important;
  display: inline-block !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: static !important;
  flex: 0 0 18px !important;
  width: 18px !important;
  min-width: 18px !important;
  max-width: 18px !important;
  height: 18px !important;
  min-height: 18px !important;
  margin: 2px 0 0 !important;
  padding: 0 !important;
  border: 1px solid var(--mg-line, #c9ced6) !important;
  border-radius: 3px !important;
  background: #fff !important;
  box-shadow: none !important;
  accent-color: var(--mg-orange, #e8821e);
  cursor: pointer !important;
  vertical-align: top;
}
/* Neutralise the theme's custom-checkbox pseudo-element + its label padding on our consent
   (we use the native checkbox instead, so the phantom ::before box must not show). */
.contact-form2 .mg-consent .wpcf7-list-item label { padding-left: 0 !important; }
.contact-form2 .mg-consent .wpcf7-list-item-label::before { display: none !important; content: none !important; }
.contact-form2 .mg-consent a { color: var(--mg-orange, #e8821e); text-decoration: underline; }
.contact-form2 .mg-consent .req { color: var(--mg-muted, #8a93a0); white-space: nowrap; }
.contact-form2 .mg-consent .wpcf7-not-valid-tip { font-size: 0.78rem; margin-top: 4px; }
/* Consent "required" error state (toggled by functions.php JS on submit while unchecked). */
.contact-form2 .mg-consent--error input[type="checkbox"] {
  border-color: #d33 !important;
  outline: 2px solid rgba(211, 51, 51, 0.25);
  outline-offset: 1px;
}
.contact-form2 .mg-consent--error .wpcf7-list-item label { color: #c0392b; }
.contact-form2 .mg-consent--error .req { color: #d33; font-weight: 600; }
.contact-form2 .mg-consent--error::after {
  content: var(--mg-consent-required, "You must accept the Privacy Policy.");
  display: block;
  margin-top: 6px;
  color: #d33;
  font-size: 0.78rem;
  font-weight: 600;
}
html[lang^="pl"] .contact-form2 .mg-consent--error { --mg-consent-required: "Zaznaczenie zgody jest wymagane."; }
html[lang^="de"] .contact-form2 .mg-consent--error { --mg-consent-required: "Bitte stimmen Sie der Datenschutzerklärung zu."; }
html[lang^="fr"] .contact-form2 .mg-consent--error { --mg-consent-required: "Vous devez accepter la politique de confidentialité."; }
html[lang^="pt"] .contact-form2 .mg-consent--error { --mg-consent-required: "Tem de aceitar a Política de Privacidade."; }
html[lang^="es"] .contact-form2 .mg-consent--error { --mg-consent-required: "Debe aceptar la Política de privacidad."; }
html[lang^="cs"] .contact-form2 .mg-consent--error { --mg-consent-required: "Musíte souhlasit se zásadami ochrany osobních údajů."; }
html[lang^="tr"] .contact-form2 .mg-consent--error { --mg-consent-required: "Gizlilik Politikasını kabul etmelisiniz."; }

/* Card "Read more" CTA + click overlay */
.mg-card-flat-row .feature-card .box-text::after {
  content: var(--mg-readmore, "Read more →");
  display: block;
  margin-top: 16px;
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--mg-blue);
  letter-spacing: 0.01em;
  transition: transform 0.2s ease, color 0.2s ease;
}
.mg-card-flat-row .feature-card.style2:hover .box-text::after {
  color: #0d4d8a;
  transform: translateX(4px);
}
.mg-card-flat-row .feature-card.style2 .box-title a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}


/* ============================================================
   FEATURE GRID (shadow cards) — .mg-feature-grid
   (home FQD + order-management Key capabilities; outer eid 3122c7d)

   How to use:
     Add CSS Class `mg-feature-grid` to the e-con section in Elementor.
     Default: 3-col grid (FQD layout).
     Add `mg-feature-grid--4col` modifier for 4-col grid (8-cards layout
     used on order-management Key capabilities).
     Cards (service-grid) get icon via mg-icon-* class — see icon library.
   ============================================================ */
.mg-feature-grid {
  border-bottom: 1px solid var(--mg-line) !important;
}

/* Title widget */
.mg-feature-grid .sub-title {
  font-size: 0.8rem !important;
  font-weight: 700 !important;
  color: var(--mg-blue) !important;
  letter-spacing: 1.536px !important;
  text-transform: uppercase !important;
  line-height: 1.3 !important;
  margin-bottom: 0.6rem !important;
  display: inline-block !important;
  background: none !important;
  background-color: transparent !important;
  padding: 0 !important;
}
.mg-feature-grid .title-area {
  text-align: left !important;
}

.mg-feature-grid h2.sec-title,
.mg-feature-grid h2.sec-title2 {
  text-transform: none !important;
  font-size: 2.85rem !important;
  font-weight: 700 !important;
  color: var(--mg-navy-deep) !important;
  letter-spacing: -0.01em !important;
  line-height: 1.2 !important;
  margin-top: 0 !important;
  margin-block-start: 0 !important;
}

/* Cards */
.mg-feature-grid .service-grid {
  border-radius: var(--mg-radius) !important;
  box-shadow: 0 4px 16px rgba(42, 58, 107, 0.08) !important;
  padding: 32px !important;
  text-align: left !important;
  transition: transform 0.18s ease, box-shadow 0.18s ease !important;
  height: 100% !important;
  margin-top: 0 !important;
  position: relative !important;
  cursor: pointer;
}
.mg-feature-grid .service-grid:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(42, 58, 107, 0.12) !important;
}

.mg-feature-grid .service-grid .box-title,
.mg-feature-grid .service-grid h3,
.mg-feature-grid .service-grid h4 {
  font-weight: 700 !important;
  color: var(--mg-navy-deep) !important;
  text-transform: none !important;
  margin-bottom: 12px !important;
}

.mg-feature-grid .service-grid .box-text,
.mg-feature-grid .service-grid p {
  color: #5c6574 !important;
  line-height: 1.6 !important;
  margin-bottom: 0 !important;
}

/* Icon tiles + brand Lucide SVGs — per-page icon assignments below.
   Base .box-icon badge styling lives once under banner "ICON BADGE STYLING"
   / "LAYER 1A" (Cmd-F it); the duplicate that used to sit here was removed. */

.mg-feature-grid .row > .col-xl-4:nth-child(1) .service-grid .box-icon::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231468b2' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z'/><path d='M14 2v5a1 1 0 0 0 1 1h5'/><path d='M10 9H8'/><path d='M16 13H8'/><path d='M16 17H8'/></svg>") !important;
}
.mg-feature-grid .row > .col-xl-4:nth-child(2) .service-grid .box-icon::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231468b2' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M10 6h8'/><path d='M12 16h6'/><path d='M3 3v16a2 2 0 0 0 2 2h16'/><path d='M8 11h7'/></svg>") !important;
}
.mg-feature-grid .row > .col-xl-4:nth-child(3) .service-grid .box-icon::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231468b2' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><rect width='5' height='5' x='3' y='3' rx='1'/><rect width='5' height='5' x='16' y='3' rx='1'/><rect width='5' height='5' x='3' y='16' rx='1'/><path d='M21 16h-3a2 2 0 0 0-2 2v3'/><path d='M21 21v.01'/><path d='M12 7v3a2 2 0 0 1-2 2H7'/><path d='M3 12h.01'/><path d='M12 3h.01'/><path d='M12 16v.01'/><path d='M16 12h1'/><path d='M21 12v.01'/><path d='M12 21v-1'/></svg>") !important;
}
.mg-feature-grid .row > .col-xl-4:nth-child(4) .service-grid .box-icon::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231468b2' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M14 18V6a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v11a1 1 0 0 0 1 1h2'/><path d='M15 18H9'/><path d='M19 18h2a1 1 0 0 0 1-1v-3.65a1 1 0 0 0-.22-.624l-3.48-4.35A1 1 0 0 0 17.52 8H14'/><circle cx='17' cy='18' r='2'/><circle cx='7' cy='18' r='2'/></svg>") !important;
}
.mg-feature-grid .row > .col-xl-4:nth-child(5) .service-grid .box-icon::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231468b2' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M13 17V9'/><path d='M18 17V5'/><path d='M3 3v16a2 2 0 0 0 2 2h16'/><path d='M8 17v-3'/></svg>") !important;
}
.mg-feature-grid .row > .col-xl-4:nth-child(6) .service-grid .box-icon::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%231468b2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='8' y='6' width='6' height='36' rx='1'/><rect x='34' y='6' width='6' height='36' rx='1'/><rect x='14' y='10' width='20' height='4' fill='%231468b2' stroke='none' opacity='0.7'/><rect x='14' y='34' width='20' height='4' fill='%231468b2' stroke='none' opacity='0.7'/><line x1='14' y1='18' x2='34' y2='18' stroke-dasharray='2 2'/><line x1='14' y1='30' x2='34' y2='30' stroke-dasharray='2 2'/></svg>") !important;
}

/* Card H3 hover */
.mg-feature-grid .service-grid .box-title a:hover,
.mg-feature-grid .service-grid h3 a:hover {
  color: var(--mg-blue) !important;
}

/* Card "Read more" CTA + click overlay */
.mg-feature-grid .service-grid .box-text::after {
  content: var(--mg-readmore, "Read more →");
  display: block;
  margin-top: 16px;
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--mg-blue);
  letter-spacing: 0.01em;
  transition: transform 0.2s ease, color 0.2s ease;
}
.mg-feature-grid .service-grid:hover .box-text::after {
  color: #0d4d8a;
  transform: translateX(4px);
}
.mg-feature-grid .service-grid .box-title a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* Row gap between two card rows */
.mg-feature-grid .row {
  row-gap: 24px !important;
}

/* Responsive grid */
@media (max-width: 991px) and (min-width: 576px) {
  .mg-feature-grid .row .col-xl-4.col-md-6 {
    flex: 0 0 50% !important;
    max-width: 50% !important;
  }
}
@media (max-width: 575px) {
  .mg-feature-grid .row .col-xl-4.col-md-6 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
}

@media (max-width: 768px) {
  .mg-feature-grid {
    padding-left: 32px !important;
    padding-right: 32px !important;
  }
}


/* ============================================================
   FEATURE LIST (flat, 32x32 icons, no shadow) — .mg-feature-list
   (home WHY MONITGLASS; outer eid 21759dc)

   How to use:
     Add CSS Class `mg-feature-list` to the e-con section in Elementor.
     Pattern: 2-col flat list of service-grid widgets with 32x32 icons,
     no shadow, top border separators. Used for "facts/advantages" rather
     than "clickable feature cards".

   NOTE: section eid 21759dc also exists on /order-management/ (Key
   capabilities) where it gets `mg-feature-grid` class instead. Section
   BG (bg-alt) is shared — neutral. Cards-specific styling stays inside
   the same eid scope (former 0c8f5fc was specific to WHY) so it does
   not leak into order-management Key capabilities cards.
   ============================================================ */
.mg-feature-list {
  background-color: var(--mg-bg-alt) !important;
  padding-top: 64px !important;
  padding-bottom: 64px !important;
  border-bottom: 1px solid var(--mg-line) !important;
  /* Wave 106i — force display so Sassa/Elementor v4 default
     (display:inline on e-con-full) doesn't break the section layout */
  display: flex !important;
  flex-direction: column !important;
}
.mg-card-flat-row {
  display: flex !important;
  flex-direction: column !important;
}
/* Wave 106j — force display on .e-con-inner too, otherwise max-width
   on the inner wrapper is ignored (inline elements ignore max-width)
   and content fills the full viewport instead of the 1344px container.
   Note: not always direct child — Elementor v4 may wrap in a
   .e-con-boxed Container — use descendant selector. */
.mg-feature-list .e-con-inner,
.mg-feature-list .e-con-boxed,
.mg-card-flat-row .e-con-inner,
.mg-card-flat-row .e-con-boxed {
  display: flex !important;
  flex-direction: column !important;
}

/* Title widget */
.mg-feature-list .sub-title,
.mg-feature-list .subtitle,
.mg-feature-list .sec-subtitle {
  text-transform: uppercase !important;
  font-size: 0.78rem !important;
  letter-spacing: 0.08em !important;
  font-weight: 700 !important;
  color: var(--mg-blue) !important;
  font-family: var(--mg-font-body) !important;
  background: transparent !important;
  padding: 0 !important;
  border-radius: 0 !important;
  margin-bottom: 0.6rem !important;
}
.mg-feature-list h2,
.mg-feature-list h2.sec-title,
.mg-feature-list h2.sec-title2,
.mg-feature-list .sec-title,
.mg-feature-list .sec-title2 {
  font-family: var(--mg-font-body) !important;
  font-weight: 700 !important;
  font-size: 2.85rem !important;
  line-height: 1.2 !important;
  color: var(--mg-navy-deep) !important;
  letter-spacing: -0.01em !important;
  margin-top: 0 !important;
  text-transform: none !important;
}

.mg-feature-list .pill,
.mg-feature-list .tag,
.mg-feature-list .label-tag {
  display: none !important;
}

.mg-feature-list .title-area {
  margin-bottom: 28px !important;
}

/* Service grid — flat 2-col text list (anti-twin vs FQD) */
.mg-feature-list .row > .col-xl-4 {
  flex: 0 0 50% !important;
  max-width: 50% !important;
}

.mg-feature-list .service-grid {
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 20px 20px 20px 0 !important;
  cursor: default !important;
  transform: none !important;
  transition: none !important;
  border-top: 1px solid rgba(20, 104, 178, 0.18) !important;
  text-align: left !important;
  position: relative !important;
  margin-top: 0 !important;
}
.mg-feature-list .service-grid:hover {
  transform: none !important;
  box-shadow: none !important;
  background: transparent !important;
}

.mg-feature-list .service-grid .box-title,
.mg-feature-list .service-grid h3,
.mg-feature-list .service-grid h4 {
  font-family: var(--mg-font-body) !important;
  font-weight: 700 !important;
  font-size: 1.06rem !important;
  line-height: 1.3 !important;
  color: var(--mg-navy-deep) !important;
  margin-top: 0 !important;
  margin-bottom: 12px !important;
}

.mg-feature-list .service-grid .box-text,
.mg-feature-list .service-grid p {
  font-family: var(--mg-font-body) !important;
  font-size: 0.93rem !important;
  line-height: 1.55 !important;
  color: #4a5568 !important;
}

.mg-feature-list .service-grid .box-title a:hover,
.mg-feature-list .service-grid h3 a:hover {
  color: var(--mg-blue) !important;
}

/* Disable CTA + click overlay (these are facts, not clickable topics) */
.mg-feature-list .service-grid .box-text::after {
  content: none !important;
  display: none !important;
}
.mg-feature-list .service-grid .box-title a::after {
  content: none !important;
  display: none !important;
}
.mg-feature-list .service-grid .box-title a,
.mg-feature-list .service-grid .box-title a:hover,
.mg-feature-list .service-grid .box-title a:focus,
.mg-feature-list .service-grid .box-title a:active {
  cursor: default !important;
  pointer-events: none !important;
  color: var(--mg-navy-deep) !important;
  text-decoration: none !important;
  border-bottom: 0 !important;
}

/* Icons: 32x32 inline, no tile bg */
.mg-feature-list .service-grid .box-icon img {
  display: none !important;
}
.mg-feature-list .service-grid .box-icon {
  display: block !important;
  width: 32px !important;
  height: 32px !important;
  background-color: transparent !important;
  border-radius: 0 !important;
  margin: 0 0 12px 0 !important;
  position: relative !important;
  transform: none !important;
}
.mg-feature-list .service-grid .box-icon::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  width: 32px !important;
  height: 32px !important;
  transform: translate(-50%, -50%) !important;
  background-size: 32px 32px !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
}

body.mg-front .mg-feature-list .row > .col-xl-4:nth-child(1) .service-grid .box-icon::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231468b2' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.08a1 1 0 0 0 0 1.83l8.58 3.91a2 2 0 0 0 1.66 0l8.58-3.9a1 1 0 0 0 0-1.83z'/><path d='M2 12a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 12'/><path d='M2 17a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 17'/></svg>") !important;
}
body.mg-front .mg-feature-list .row > .col-xl-4:nth-child(2) .service-grid .box-icon::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231468b2' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z'/></svg>") !important;
}
body.mg-front .mg-feature-list .row > .col-xl-4:nth-child(3) .service-grid .box-icon::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231468b2' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='m10.852 14.772-.383.923'/><path d='M13.148 14.772a3 3 0 1 0-2.296-5.544l-.383-.923'/><path d='m13.148 9.228.383-.923'/><path d='m13.53 15.696-.382-.924a3 3 0 1 1-2.296-5.544'/><path d='m14.772 10.852.923-.383'/><path d='m14.772 13.148.923.383'/><path d='M4.5 10H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v4a2 2 0 0 1-2 2h-.5'/><path d='M4.5 14H4a2 2 0 0 0-2 2v4a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-4a2 2 0 0 0-2-2h-.5'/><path d='M6 18h.01'/><path d='M6 6h.01'/><path d='m9.228 10.852-.923-.383'/><path d='m9.228 13.148-.923.383'/></svg>") !important;
}
body.mg-front .mg-feature-list .row > .col-xl-4:nth-child(4) .service-grid .box-icon::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231468b2' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><path d='M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20'/><path d='M2 12h20'/></svg>") !important;
}
body.mg-front .mg-feature-list .row > .col-xl-4:nth-child(5) .service-grid .box-icon::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231468b2' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='m5 8 6 6'/><path d='m4 14 6-6 2-3'/><path d='M2 5h12'/><path d='M7 2h1'/><path d='m22 22-5-10-5 10'/><path d='M14 18h6'/></svg>") !important;
}
body.mg-front .mg-feature-list .row > .col-xl-4:nth-child(6) .service-grid .box-icon::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231468b2' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M15 6a9 9 0 0 0-9 9V3'/><circle cx='18' cy='6' r='3'/><circle cx='6' cy='18' r='3'/></svg>") !important;
}

@media (max-width: 575px) {
  .mg-feature-list .row > .col-xl-4 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
}

@media (max-width: 768px) {
  .mg-feature-list .title-area,
  .mg-feature-list .title-area.text-center,
  .mg-feature-list .sec-title,
  .mg-feature-list .sub-title {
    text-align: left !important;
  }
  .mg-feature-list {
    padding-left: 32px !important;
    padding-right: 32px !important;
  }
}


/* ============================================================
   FEATURE GRID — 4-COL MODIFIER  (.mg-feature-grid--4col)
   Used on order-management Key capabilities (8 cards → 4 col × 2 rows).
   Default .mg-feature-grid is 3-col (FQD home).
   Cards (service-grid) use icon library — apply mg-icon-* per card.
   ============================================================ */
@media (min-width: 1200px) {
  .mg-feature-grid--4col .row .col-xl-3,
  .mg-feature-grid--4col .row .col-xl-4,
  .mg-feature-grid--4col .row .col-xl-6,
  .mg-feature-grid--4col .row .col-md-6 {
    flex: 0 0 25% !important;
    max-width: 25% !important;
  }
}
@media (max-width: 1199px) and (min-width: 768px) {
  .mg-feature-grid--4col .row .col-xl-3,
  .mg-feature-grid--4col .row .col-xl-4,
  .mg-feature-grid--4col .row .col-xl-6,
  .mg-feature-grid--4col .row .col-md-6 {
    flex: 0 0 50% !important;
    max-width: 50% !important;
  }
}
@media (max-width: 767px) {
  .mg-feature-grid--4col .row .col-xl-3,
  .mg-feature-grid--4col .row .col-xl-4,
  .mg-feature-grid--4col .row .col-xl-6,
  .mg-feature-grid--4col .row .col-md-6 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
}
.mg-feature-grid--4col .row {
  row-gap: 24px !important;
}


/* ============================================================
   ICON BADGE STYLING + PER-PAGE NTH-CHILD ASSIGNMENTS

   Sassa renders multi-card widgets (sassaservice, sassafeatures) as a
   single Elementor widget with no per-card class hooks. So we can't tag
   each card from the editor UI. Two-layer mechanism instead:

     LAYER 1 — Badge box on every card inside a known section pattern
       (handled per-pattern: .mg-feature-grid .service-grid .box-icon,
        .mg-card-flat-row .feature-card.style2::before).

     LAYER 2 — Per-page icon assignments by position
       (body.mg-page-{slug} .mg-feature-grid--4col .service-grid:nth-child(N)
        .box-icon::before { background-image: var(--mg-icon-NAME); }).

   PER-PAGE HOOK — `body.mg-page-{slug}` / `body.mg-front` (Wave 158).
   These classes are injected by the body_class filter in functions.php,
   derived from the page SLUG (and is_front_page() for home), NOT the
   WordPress post ID. Reason: post IDs (page-id-NNNN) change on a
   staging→live migration / re-import and WPML reassigns them — slug-based
   classes survive both. NEVER reintroduce body.page-id-NNNN here.
   (functions.php + style.css must deploy together — see the filter note.)

   Icon SVGs live as custom properties (--mg-icon-*) in :root at top of
   this file. Add new icons there; reuse them on any sub-page below.

   For a new Platform sub-page:
     1) In Elementor, give the section its pattern class
        (mg-feature-grid + mg-feature-grid--4col if 8 cards, etc.).
     2) Keep the cards in the order you want — order = nth-child index.
     3) Below, add a `body.mg-page-{slug} { ... }` block (use the page's
        URL slug, e.g. /work-schedule/ → body.mg-page-work-schedule) that
        maps card positions to icons. No wp-admin step — the slug class is
        emitted automatically by the body_class filter.

   ============================================================ */

/* --- LAYER 1A: badge for service-grid inside .mg-feature-grid sections --- */
.mg-feature-grid .service-grid .box-icon img {
  display: none !important;
}
.mg-feature-grid .service-grid .box-icon {
  display: block !important;
  width: 80px !important;
  height: 80px !important;
  background-color: rgba(20, 104, 178, 0.10) !important;
  border-radius: var(--mg-radius) !important;
  margin: 0 0 24px 0 !important;
  position: relative !important;
  transform: none !important;
}
.mg-feature-grid .service-grid .box-icon::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  width: 48px !important;
  height: 48px !important;
  transform: translate(-50%, -50%) !important;
  background-size: 48px 48px !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
}

/* --- LAYER 1B: NOTE — feature-card.style2 has no .box-icon child.
   The badge is painted directly via .feature-card.style2::before in the
   CARD FLAT ROW section above (~ line 1098). Per-page icon assignments
   point the background-image to that ::before. */


/* --- LAYER 2: per-page icon assignments ------------------------------- */

/* Sassa renders each card inside a column wrapper:
     service-grid → .row > .col-xl-4.col-md-6.service-grid_wrapp > .service-grid
     feature-card → .row > .col-md-6.col-xl-3.feature-card_wrapp > .feature-card.style2
   So nth-child() must target the wrapper (which is the actual sibling),
   not .service-grid / .feature-card directly (each is a single child
   of its own wrapper and would always match :nth-child(1)).             */

/* /order-management/  (post 3643)
   Cards must stay in this order in the sassaservice/sassafeatures widget.
   Key capabilities — 8 cards in .mg-feature-grid--4col
     1. Order wizard               → clipboard-list
     2. Lifecycle status           → git-branch
     3. Automatic pricing          → calculator
     4. Document generation        → file-text
     5. Order types                → layers
     6. Search & filter            → filter
     7. Per-customer XLS templates → file-spreadsheet
     8. Settlement summary XLS     → receipt
   Related modules — 3 cards in .mg-card-flat-row
     1. Materials & pricing  → package
     2. Work schedule        → calendar-clock
     3. Logistics & delivery → truck                                    */
body.mg-page-order-management .mg-feature-list .row > .col-xl-4:nth-child(1) .service-grid .box-icon::before { background-image: var(--mg-icon-clipboard-list) !important; }
body.mg-page-order-management .mg-feature-list .row > .col-xl-4:nth-child(2) .service-grid .box-icon::before { background-image: var(--mg-icon-git-branch) !important; }
body.mg-page-order-management .mg-feature-list .row > .col-xl-4:nth-child(3) .service-grid .box-icon::before { background-image: var(--mg-icon-calculator) !important; }
body.mg-page-order-management .mg-feature-list .row > .col-xl-4:nth-child(4) .service-grid .box-icon::before { background-image: var(--mg-icon-file-text) !important; }
body.mg-page-order-management .mg-feature-list .row > .col-xl-4:nth-child(5) .service-grid .box-icon::before { background-image: var(--mg-icon-layers) !important; }
body.mg-page-order-management .mg-feature-list .row > .col-xl-4:nth-child(6) .service-grid .box-icon::before { background-image: var(--mg-icon-filter) !important; }
body.mg-page-order-management .mg-feature-list .row > .col-xl-4:nth-child(7) .service-grid .box-icon::before { background-image: var(--mg-icon-file-spreadsheet) !important; }
body.mg-page-order-management .mg-feature-list .row > .col-xl-4:nth-child(8) .service-grid .box-icon::before { background-image: var(--mg-icon-receipt) !important; }

body.mg-page-order-management .mg-card-flat-row .row > .feature-card_wrapp:nth-child(1) .feature-card.style2::before { background-image: var(--mg-icon-package) !important; }
body.mg-page-order-management .mg-card-flat-row .row > .feature-card_wrapp:nth-child(2) .feature-card.style2::before { background-image: var(--mg-icon-calendar-clock) !important; }
body.mg-page-order-management .mg-card-flat-row .row > .feature-card_wrapp:nth-child(3) .feature-card.style2::before { background-image: var(--mg-icon-truck) !important; }

/* /accounting-export/ (mg-page-accounting-export) — Wave 163b
   REFOCUSED onto the accounting axis (was a documents hub that duplicated
   /prints/ + /quoting-documents/). Now 6 export cards; the document backbone
   is handed to those pages via the cross-links below, not re-listed.
   Key capabilities — 6 cards in .mg-feature-list
     1. Priced settlement export      → file-spreadsheet
     2. Your accounting codes         → tag
     3. Customer VAT / Tax ID         → receipt
     4. Import-ready, not retyped     → calculator
     5. Configured for your system    → puzzle
     6. We build the export you need  → link-2
   Related modules — 3 cards in .mg-card-flat-row.
   LIVE = still order-management's cross-links (Materials / Work schedule /
   Logistics) → package / calendar-clock / truck (site convention). If you
   switch them to the refocus set (Quoting & documents / Print examples /
   Materials & pricing), change icons to file-text / frame / package.
     1. Materials & pricing           → package
     2. Work schedule                 → calendar-clock
     3. Logistics & delivery          → truck
   NOTE: slug must be 'accounting-export' for these to match (body_class
   filter injects body.mg-page-{slug}); if you pick another slug, swap it in
   all selectors below. Each .mg-feature-list card MUST have its Box Icon
   field set (any icon) so .box-icon exists — the CSS only re-skins it.
   (Flat-row icons are ::before, no Box Icon needed.) */
body.mg-page-accounting-export .mg-feature-list .row > .col-xl-4:nth-child(1) .service-grid .box-icon::before { background-image: var(--mg-icon-file-spreadsheet) !important; }
body.mg-page-accounting-export .mg-feature-list .row > .col-xl-4:nth-child(2) .service-grid .box-icon::before { background-image: var(--mg-icon-tag) !important; }
body.mg-page-accounting-export .mg-feature-list .row > .col-xl-4:nth-child(3) .service-grid .box-icon::before { background-image: var(--mg-icon-receipt) !important; }
body.mg-page-accounting-export .mg-feature-list .row > .col-xl-4:nth-child(4) .service-grid .box-icon::before { background-image: var(--mg-icon-calculator) !important; }
body.mg-page-accounting-export .mg-feature-list .row > .col-xl-4:nth-child(5) .service-grid .box-icon::before { background-image: var(--mg-icon-puzzle) !important; }
body.mg-page-accounting-export .mg-feature-list .row > .col-xl-4:nth-child(6) .service-grid .box-icon::before { background-image: var(--mg-icon-link-2) !important; }

body.mg-page-accounting-export .mg-card-flat-row .row > .feature-card_wrapp:nth-child(1) .feature-card.style2::before { background-image: var(--mg-icon-package) !important; }
body.mg-page-accounting-export .mg-card-flat-row .row > .feature-card_wrapp:nth-child(2) .feature-card.style2::before { background-image: var(--mg-icon-calendar-clock) !important; }
body.mg-page-accounting-export .mg-card-flat-row .row > .feature-card_wrapp:nth-child(3) .feature-card.style2::before { background-image: var(--mg-icon-truck) !important; }

/* /quoting-documents/ (mg-page-quoting-documents)
   Key capabilities — 6 cards in .mg-feature-list
     1. Quote builder with auto-pricing → calculator
     2. Materials & treatments          → layers
     3. Offer document generation       → file-text
     4. Order document generation       → file-check
     5. Clauses & T&C, branding         → stamp
     6. Quote → order conversion        → move-right
   Related modules — 3 cards in .mg-card-flat-row
     1. Order management     → file-stack
     2. Materials & pricing  → package
     3. Customer management  → users                                    */
body.mg-page-quoting-documents .mg-feature-list .row > .col-xl-4:nth-child(1) .service-grid .box-icon::before { background-image: var(--mg-icon-calculator) !important; }
body.mg-page-quoting-documents .mg-feature-list .row > .col-xl-4:nth-child(2) .service-grid .box-icon::before { background-image: var(--mg-icon-layers) !important; }
body.mg-page-quoting-documents .mg-feature-list .row > .col-xl-4:nth-child(3) .service-grid .box-icon::before { background-image: var(--mg-icon-file-text) !important; }
body.mg-page-quoting-documents .mg-feature-list .row > .col-xl-4:nth-child(4) .service-grid .box-icon::before { background-image: var(--mg-icon-file-check) !important; }
body.mg-page-quoting-documents .mg-feature-list .row > .col-xl-4:nth-child(5) .service-grid .box-icon::before { background-image: var(--mg-icon-stamp) !important; }
body.mg-page-quoting-documents .mg-feature-list .row > .col-xl-4:nth-child(6) .service-grid .box-icon::before { background-image: var(--mg-icon-move-right) !important; }

body.mg-page-quoting-documents .mg-card-flat-row .row > .feature-card_wrapp:nth-child(1) .feature-card.style2::before { background-image: var(--mg-icon-file-stack) !important; }
body.mg-page-quoting-documents .mg-card-flat-row .row > .feature-card_wrapp:nth-child(2) .feature-card.style2::before { background-image: var(--mg-icon-package) !important; }
body.mg-page-quoting-documents .mg-card-flat-row .row > .feature-card_wrapp:nth-child(3) .feature-card.style2::before { background-image: var(--mg-icon-users) !important; }

/* /customer-management/ (mg-page-customer-management)
   Key capabilities — 4 cards in .mg-feature-list
     1. Add, edit & search customers          → users
     2. Customer-level filtering              → filter
     3. Auto-fill from VAT / business registry → search-check
     4. Part of the office module             → layout-dashboard
   Related modules — 3 cards in .mg-card-flat-row
     1. Order management     → file-stack
     2. Quoting & documents  → file-text
     3. Logistics & delivery → truck                                    */
body.mg-page-customer-management .mg-feature-list .row > .col-xl-4:nth-child(1) .service-grid .box-icon::before { background-image: var(--mg-icon-users) !important; }
body.mg-page-customer-management .mg-feature-list .row > .col-xl-4:nth-child(2) .service-grid .box-icon::before { background-image: var(--mg-icon-filter) !important; }
body.mg-page-customer-management .mg-feature-list .row > .col-xl-4:nth-child(3) .service-grid .box-icon::before { background-image: var(--mg-icon-search-check) !important; }
body.mg-page-customer-management .mg-feature-list .row > .col-xl-4:nth-child(4) .service-grid .box-icon::before { background-image: var(--mg-icon-layout-dashboard) !important; }

body.mg-page-customer-management .mg-card-flat-row .row > .feature-card_wrapp:nth-child(1) .feature-card.style2::before { background-image: var(--mg-icon-file-stack) !important; }
body.mg-page-customer-management .mg-card-flat-row .row > .feature-card_wrapp:nth-child(2) .feature-card.style2::before { background-image: var(--mg-icon-file-text) !important; }
body.mg-page-customer-management .mg-card-flat-row .row > .feature-card_wrapp:nth-child(3) .feature-card.style2::before { background-image: var(--mg-icon-truck) !important; }

/* /materials-pricing/ (mg-page-materials-pricing)
   Key capabilities — 8 cards in .mg-feature-list
     1. Raw glass material library            → gem
     2. Laminated-glass variants              → layers
     3. Processing & treatment costs          → hammer
     4. Group-level & single-item config      → list-tree
     5. IGU components                        → puzzle
     6. IGU schemas (unit structures)         → columns-3
     7. Reference names                       → tag
     8. Drives quoting & order pricing        → calculator
   Related modules — 3 cards in .mg-card-flat-row
     1. Quoting & documents     → file-text
     2. Order management        → file-stack
     3. Insulated glass (IGU)   → square-stack                          */
body.mg-page-materials-pricing .mg-feature-list .row > .col-xl-4:nth-child(1) .service-grid .box-icon::before { background-image: var(--mg-icon-gem) !important; }
body.mg-page-materials-pricing .mg-feature-list .row > .col-xl-4:nth-child(2) .service-grid .box-icon::before { background-image: var(--mg-icon-layers) !important; }
body.mg-page-materials-pricing .mg-feature-list .row > .col-xl-4:nth-child(3) .service-grid .box-icon::before { background-image: var(--mg-icon-hammer) !important; }
body.mg-page-materials-pricing .mg-feature-list .row > .col-xl-4:nth-child(4) .service-grid .box-icon::before { background-image: var(--mg-icon-list-tree) !important; }
body.mg-page-materials-pricing .mg-feature-list .row > .col-xl-4:nth-child(5) .service-grid .box-icon::before { background-image: var(--mg-icon-puzzle) !important; }
body.mg-page-materials-pricing .mg-feature-list .row > .col-xl-4:nth-child(6) .service-grid .box-icon::before { background-image: var(--mg-icon-columns-3) !important; }
body.mg-page-materials-pricing .mg-feature-list .row > .col-xl-4:nth-child(7) .service-grid .box-icon::before { background-image: var(--mg-icon-tag) !important; }
body.mg-page-materials-pricing .mg-feature-list .row > .col-xl-4:nth-child(8) .service-grid .box-icon::before { background-image: var(--mg-icon-calculator) !important; }

body.mg-page-materials-pricing .mg-card-flat-row .row > .feature-card_wrapp:nth-child(1) .feature-card.style2::before { background-image: var(--mg-icon-file-text) !important; }
body.mg-page-materials-pricing .mg-card-flat-row .row > .feature-card_wrapp:nth-child(2) .feature-card.style2::before { background-image: var(--mg-icon-file-stack) !important; }
body.mg-page-materials-pricing .mg-card-flat-row .row > .feature-card_wrapp:nth-child(3) .feature-card.style2::before { background-image: var(--mg-icon-square-stack) !important; }

/* /xls-machine-integration/ (mg-page-xls-machine-integration)
   XLS import (21759dc) — 3 cards in .mg-feature-list (2-col flat)
     1. Column mapping per customer       → list-tree
     2. Validation before commit          → search-check
     3. Bulk order creation               → file-spreadsheet
   Machine XLS exports (acaa937) — 3 cards in .mg-feature-list
     wide-rows layout override + white bg + icon left, content right
     1. Optima OptyWay integration        → box-select
     2. Intermac PerfectCut integration   → scissors
     3. Boza frame bender integration     → frame
   Related modules (8748e1d) — 3 cards in .mg-card-flat-row
     1. Order management                  → file-stack
     2. QR labels & prints                → qr-code
     3. Operational reports & exports     → bar-chart-3                  */

/* XLS import — icon mapping (uses default mg-feature-list 2-col layout) */
body.mg-page-xls-machine-integration .elementor-element-21759dc .row > .col-xl-4:nth-child(1) .service-grid .box-icon::before { background-image: var(--mg-icon-list-tree) !important; }
body.mg-page-xls-machine-integration .elementor-element-21759dc .row > .col-xl-4:nth-child(2) .service-grid .box-icon::before { background-image: var(--mg-icon-search-check) !important; }
body.mg-page-xls-machine-integration .elementor-element-21759dc .row > .col-xl-4:nth-child(3) .service-grid .box-icon::before { background-image: var(--mg-icon-file-spreadsheet) !important; }

/* Machine integrations — full-width rows, white bg, icon left + content right */
body.mg-page-xls-machine-integration .elementor-element-acaa937 {
  background-color: #ffffff !important;
}
body.mg-page-xls-machine-integration .elementor-element-acaa937 .row > .col-xl-4 {
  flex: 0 0 100% !important;
  max-width: 100% !important;
}
body.mg-page-xls-machine-integration .elementor-element-acaa937 .service-grid {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  gap: clamp(24px, 3vw, 40px) !important;
  padding: 28px 0 !important;
  border-top: 1px solid var(--mg-bg-soft) !important;
}
body.mg-page-xls-machine-integration .elementor-element-acaa937 .service-grid .box-icon {
  flex: 0 0 64px !important;
  width: 64px !important;
  height: 64px !important;
  margin: 0 !important;
}
body.mg-page-xls-machine-integration .elementor-element-acaa937 .service-grid .box-icon::before {
  width: 64px !important;
  height: 64px !important;
  background-size: 48px 48px !important;
}
body.mg-page-xls-machine-integration .elementor-element-acaa937 .service-grid .box-title,
body.mg-page-xls-machine-integration .elementor-element-acaa937 .service-grid h3,
body.mg-page-xls-machine-integration .elementor-element-acaa937 .service-grid h4,
body.mg-page-xls-machine-integration .elementor-element-acaa937 .service-grid .box-text,
body.mg-page-xls-machine-integration .elementor-element-acaa937 .service-grid p,
body.mg-page-xls-machine-integration .elementor-element-acaa937 .service-grid .box-content {
  flex: 1 1 auto !important;
  width: auto !important;
}
body.mg-page-xls-machine-integration .elementor-element-acaa937 .service-grid .box-title,
body.mg-page-xls-machine-integration .elementor-element-acaa937 .service-grid h3 {
  font-size: 1.2rem !important;
}
/* Icon mapping per card */
body.mg-page-xls-machine-integration .elementor-element-acaa937 .row > .col-xl-4:nth-child(1) .service-grid .box-icon::before { background-image: var(--mg-icon-box-select) !important; }
body.mg-page-xls-machine-integration .elementor-element-acaa937 .row > .col-xl-4:nth-child(2) .service-grid .box-icon::before { background-image: var(--mg-icon-scissors) !important; }
body.mg-page-xls-machine-integration .elementor-element-acaa937 .row > .col-xl-4:nth-child(3) .service-grid .box-icon::before { background-image: var(--mg-icon-frame) !important; }

/* Related modules — icon mapping */
body.mg-page-xls-machine-integration .elementor-element-8748e1d .row > .feature-card_wrapp:nth-child(1) .feature-card.style2::before { background-image: var(--mg-icon-file-stack) !important; }
body.mg-page-xls-machine-integration .elementor-element-8748e1d .row > .feature-card_wrapp:nth-child(2) .feature-card.style2::before { background-image: var(--mg-icon-qr-code) !important; }
body.mg-page-xls-machine-integration .elementor-element-8748e1d .row > .feature-card_wrapp:nth-child(3) .feature-card.style2::before { background-image: var(--mg-icon-bar-chart-3) !important; }

/* /work-schedule/ (mg-page-work-schedule)
   Key capabilities — 3 cards in .mg-feature-list (default 2-col flat)
     1. Gantt timeline view              → gantt
     2. Only in-production orders show   → filter
     3. Print order sets & QR labels     → printer
   Related modules — 3 cards in .mg-card-flat-row
     1. Order management     → file-stack
     2. Shop-floor tracking  → factory
     3. QR labels & prints   → qr-code                                  */
body.mg-page-work-schedule .mg-feature-list .row > .col-xl-4:nth-child(1) .service-grid .box-icon::before { background-image: var(--mg-icon-gantt) !important; }
body.mg-page-work-schedule .mg-feature-list .row > .col-xl-4:nth-child(2) .service-grid .box-icon::before { background-image: var(--mg-icon-filter) !important; }
body.mg-page-work-schedule .mg-feature-list .row > .col-xl-4:nth-child(3) .service-grid .box-icon::before { background-image: var(--mg-icon-printer) !important; }

body.mg-page-work-schedule .mg-card-flat-row .row > .feature-card_wrapp:nth-child(1) .feature-card.style2::before { background-image: var(--mg-icon-file-stack) !important; }
body.mg-page-work-schedule .mg-card-flat-row .row > .feature-card_wrapp:nth-child(2) .feature-card.style2::before { background-image: var(--mg-icon-factory) !important; }
body.mg-page-work-schedule .mg-card-flat-row .row > .feature-card_wrapp:nth-child(3) .feature-card.style2::before { background-image: var(--mg-icon-qr-code) !important; }

/* ============================================================
   SPLIT CARDS (USP dual-view) — .mg-split-cards
   (shop-floor-tracking "Two views, one system" + reusable for any
   2-column side-by-side feature comparison)

   Structure expected: section title + 2 columns, each containing
   a sassafeatures widget (title + paragraph) + text-editor widget
   with <ul class="checks">.

   How to use:
     Add CSS Class `mg-split-cards` to the e-con section in Elementor.
     Set inside it: 2 columns (col-md-6 each), each with sassafeatures
     widget for heading/paragraph and text-editor widget for the
     checks list (use Elementor's bulleted list, add HTML <ul class="checks">
     if needed, or rely on default — :where(.checks) covers both).
   ============================================================ */
.mg-split-cards,
.mg-split-cards.e-con,
.mg-split-cards.e-con-full {
  background-color: #ffffff !important;
  border-bottom: 1px solid var(--mg-line) !important;
  padding-top: clamp(40px, 5vw, 64px) !important;
  padding-bottom: clamp(40px, 5vw, 64px) !important;
  padding-left: clamp(24px, 4vw, 48px) !important;
  padding-right: clamp(24px, 4vw, 48px) !important;
}

/* Section title styling (matches mg-feature-list) */
.mg-split-cards .sub-title,
.mg-split-cards .subtitle,
.mg-split-cards .sec-subtitle {
  text-transform: uppercase !important;
  font-size: 0.78rem !important;
  letter-spacing: 0.08em !important;
  font-weight: 700 !important;
  color: var(--mg-blue) !important;
  font-family: var(--mg-font-body) !important;
  background: transparent !important;
  padding: 0 !important;
  border-radius: 0 !important;
  margin-bottom: 0.6rem !important;
}
.mg-split-cards h2,
.mg-split-cards h2.sec-title,
.mg-split-cards .sec-title,
.mg-split-cards .sec-title2 {
  font-family: var(--mg-font-body) !important;
  font-weight: 700 !important;
  font-size: 2.85rem !important;
  line-height: 1.2 !important;
  color: var(--mg-navy-deep) !important;
  letter-spacing: -0.01em !important;
  margin-top: 0 !important;
  text-transform: none !important;
}
.mg-split-cards .title-area {
  margin-bottom: 32px !important;
}

/* PoC-style cards: 2-col grid of white tiles with light border,
   Lucide icon corner badge, heading, paragraph, orange square bullet list.
   All selectors scoped under .mg-split-cards .grid.cols-2 — won't leak
   onto .mg-feature-list / .mg-card-flat-row elsewhere on the page.

   Expected HTML inside ONE text-editor widget:
     <div class="grid cols-2">
       <div class="card">
         <span class="ic ic-floor"></span>
         <h3>...</h3><p>...</p>
         <ul class="checks"><li>...</li></ul>
       </div>
       <div class="card">
         <span class="ic ic-office"></span>
         ...
       </div>
     </div>
*/
.mg-split-cards .grid.cols-2 {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: clamp(20px, 2.5vw, 32px) !important;
  margin-top: 8px !important;
}
@media (max-width: 768px) {
  .mg-split-cards .grid.cols-2 {
    grid-template-columns: 1fr !important;
  }
}

.mg-split-cards .grid.cols-2 > .card {
  background: #ffffff !important;
  border: 1px solid var(--mg-line) !important;
  border-radius: var(--mg-radius) !important;
  padding: clamp(28px, 3vw, 36px) !important;
  box-shadow: none !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  height: 100% !important;
}

/* Icon corner badge — via ::before pseudo because Elementor's Text Editor
   sanitizer strips empty <span class="ic"> elements. Pseudo can't be stripped.
   Position by :nth-child of the card: 1st = Floor (smartphone),
   2nd = Office (layout-dashboard). */
.mg-split-cards .grid.cols-2 > .card::before {
  content: '' !important;
  display: block !important;
  width: 44px !important;
  height: 44px !important;
  border-radius: 8px !important;
  background-color: #eef4fb !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 22px 22px !important;
  margin: 0 0 8px !important;
  flex: 0 0 auto !important;
}
.mg-split-cards .grid.cols-2 > .card:nth-child(1)::before {
  background-image: var(--mg-icon-smartphone) !important;
}
.mg-split-cards .grid.cols-2 > .card:nth-child(2)::before {
  background-image: var(--mg-icon-layout-dashboard) !important;
}

/* Heading + paragraph */
.mg-split-cards .grid.cols-2 > .card > h3 {
  font-family: var(--mg-font-body) !important;
  font-weight: 700 !important;
  font-size: 1.18rem !important;
  line-height: 1.3 !important;
  color: var(--mg-navy-deep) !important;
  margin: 0 !important;
  text-transform: none !important;
}
.mg-split-cards .grid.cols-2 > .card > p {
  font-family: var(--mg-font-body) !important;
  font-size: 0.95rem !important;
  line-height: 1.6 !important;
  color: #4a5568 !important;
  margin: 0 !important;
}

/* Checks list — orange filled square bullets, tight spacing (no separators) */
.mg-split-cards .grid.cols-2 > .card > ul.checks {
  list-style: none !important;
  padding-left: 0 !important;
  margin: 4px 0 0 !important;
}
.mg-split-cards .grid.cols-2 > .card > ul.checks li {
  position: relative !important;
  padding-left: 22px !important;
  font-family: var(--mg-font-body) !important;
  font-size: 0.95rem !important;
  line-height: 1.55 !important;
  color: var(--mg-navy-deep) !important;
  margin-bottom: 10px !important;
}
.mg-split-cards .grid.cols-2 > .card > ul.checks li:last-child {
  margin-bottom: 0 !important;
}
.mg-split-cards .grid.cols-2 > .card > ul.checks li::marker {
  content: '' !important;
}
.mg-split-cards .grid.cols-2 > .card > ul.checks li::before {
  content: '' !important;
  position: absolute !important;
  left: 0 !important;
  top: 9px !important;
  width: 8px !important;
  height: 8px !important;
  background: var(--mg-orange, #f59e0b) !important;
  border-radius: 0 !important;
}

/* /shop-floor-tracking/ (mg-page-shop-floor-tracking)
   Key capabilities — 5 cards on live in .mg-feature-list (4648312)
     1. Production task list         → clipboard-list
     2. Search & filter active orders → filter
     3. Per-stage confirmation       → clipboard-check
     4. Task counts at the head      → gauge
     5. Order status flows back      → refresh-cw
   (When 6th + 7th cards added — Monolith VSG to-do + IGU assembly:
     6. → square-stack
     7. → puzzle  )
   Related modules — 3 cards in .mg-card-flat-row
     1. Order management   → file-stack
     2. Mobile app         → smartphone
     3. QR labels & prints → qr-code                                  */
body.mg-page-shop-floor-tracking .elementor-element-4648312 .row > .col-xl-4:nth-child(1) .service-grid .box-icon::before { background-image: var(--mg-icon-clipboard-list) !important; }
body.mg-page-shop-floor-tracking .elementor-element-4648312 .row > .col-xl-4:nth-child(2) .service-grid .box-icon::before { background-image: var(--mg-icon-filter) !important; }
body.mg-page-shop-floor-tracking .elementor-element-4648312 .row > .col-xl-4:nth-child(3) .service-grid .box-icon::before { background-image: var(--mg-icon-clipboard-check) !important; }
body.mg-page-shop-floor-tracking .elementor-element-4648312 .row > .col-xl-4:nth-child(4) .service-grid .box-icon::before { background-image: var(--mg-icon-gauge) !important; }
body.mg-page-shop-floor-tracking .elementor-element-4648312 .row > .col-xl-4:nth-child(5) .service-grid .box-icon::before { background-image: var(--mg-icon-refresh-cw) !important; }
/* Reservations for cards 6 + 7 when user adds them in Elementor */
body.mg-page-shop-floor-tracking .elementor-element-4648312 .row > .col-xl-4:nth-child(6) .service-grid .box-icon::before { background-image: var(--mg-icon-square-stack) !important; }
body.mg-page-shop-floor-tracking .elementor-element-4648312 .row > .col-xl-4:nth-child(7) .service-grid .box-icon::before { background-image: var(--mg-icon-puzzle) !important; }

body.mg-page-shop-floor-tracking .mg-card-flat-row .row > .feature-card_wrapp:nth-child(1) .feature-card.style2::before { background-image: var(--mg-icon-file-stack) !important; }
body.mg-page-shop-floor-tracking .mg-card-flat-row .row > .feature-card_wrapp:nth-child(2) .feature-card.style2::before { background-image: var(--mg-icon-smartphone) !important; }
body.mg-page-shop-floor-tracking .mg-card-flat-row .row > .feature-card_wrapp:nth-child(3) .feature-card.style2::before { background-image: var(--mg-icon-qr-code) !important; }

/* /qr-labels/ (mg-page-qr-labels)
   Key capabilities — 6 cards:
     1. QR label printing per element / pane  → qr-code
     2. Production-order prints                → printer
     3. Boza output (frame bending)            → frame
     4. Opty-Way output (cutting optimization) → scissors
     5. Scan-to-confirm                        → scan-line
     6. Flows into shop-floor tracking         → bar-chart-3
   Related modules — 3 cards:
     1. Work schedule        → gantt
     2. Shop-floor tracking  → layout-dashboard
     3. Mobile app           → smartphone                                  */
body.mg-page-qr-labels .mg-feature-list .row > .col-xl-4:nth-child(1) .service-grid .box-icon::before { background-image: var(--mg-icon-qr-code) !important; }
body.mg-page-qr-labels .mg-feature-list .row > .col-xl-4:nth-child(2) .service-grid .box-icon::before { background-image: var(--mg-icon-printer) !important; }
body.mg-page-qr-labels .mg-feature-list .row > .col-xl-4:nth-child(3) .service-grid .box-icon::before { background-image: var(--mg-icon-frame) !important; }
body.mg-page-qr-labels .mg-feature-list .row > .col-xl-4:nth-child(4) .service-grid .box-icon::before { background-image: var(--mg-icon-scissors) !important; }
body.mg-page-qr-labels .mg-feature-list .row > .col-xl-4:nth-child(5) .service-grid .box-icon::before { background-image: var(--mg-icon-scan-line) !important; }
body.mg-page-qr-labels .mg-feature-list .row > .col-xl-4:nth-child(6) .service-grid .box-icon::before { background-image: var(--mg-icon-bar-chart-3) !important; }

body.mg-page-qr-labels .mg-card-flat-row .row > .feature-card_wrapp:nth-child(1) .feature-card.style2::before { background-image: var(--mg-icon-gantt) !important; }
body.mg-page-qr-labels .mg-card-flat-row .row > .feature-card_wrapp:nth-child(2) .feature-card.style2::before { background-image: var(--mg-icon-layout-dashboard) !important; }
body.mg-page-qr-labels .mg-card-flat-row .row > .feature-card_wrapp:nth-child(3) .feature-card.style2::before { background-image: var(--mg-icon-smartphone) !important; }

/* /insulated-glass/ (mg-page-insulated-glass)
   Key capabilities — 6 cards:
     1. IGU schemas                          → layers
     2. IGU components                       → puzzle
     3. Per-pane / per-element confirmation  → clipboard-check
     4. Structure dialog                     → square-stack
     5. Component costing                    → calculator
     6. QR labels per pane                   → qr-code
   Related modules — 3 cards:
     1. Materials & pricing                  → tag
     2. Shop-floor tracking                  → layout-dashboard
     3. IGU manufacturers                    → factory                              */
body.mg-page-insulated-glass .mg-feature-list .row > .col-xl-4:nth-child(1) .service-grid .box-icon::before { background-image: var(--mg-icon-layers) !important; }
body.mg-page-insulated-glass .mg-feature-list .row > .col-xl-4:nth-child(2) .service-grid .box-icon::before { background-image: var(--mg-icon-puzzle) !important; }
body.mg-page-insulated-glass .mg-feature-list .row > .col-xl-4:nth-child(3) .service-grid .box-icon::before { background-image: var(--mg-icon-clipboard-check) !important; }
body.mg-page-insulated-glass .mg-feature-list .row > .col-xl-4:nth-child(4) .service-grid .box-icon::before { background-image: var(--mg-icon-square-stack) !important; }
body.mg-page-insulated-glass .mg-feature-list .row > .col-xl-4:nth-child(5) .service-grid .box-icon::before { background-image: var(--mg-icon-calculator) !important; }
body.mg-page-insulated-glass .mg-feature-list .row > .col-xl-4:nth-child(6) .service-grid .box-icon::before { background-image: var(--mg-icon-qr-code) !important; }

body.mg-page-insulated-glass .mg-card-flat-row .row > .feature-card_wrapp:nth-child(1) .feature-card.style2::before { background-image: var(--mg-icon-tag) !important; }
body.mg-page-insulated-glass .mg-card-flat-row .row > .feature-card_wrapp:nth-child(2) .feature-card.style2::before { background-image: var(--mg-icon-layout-dashboard) !important; }
body.mg-page-insulated-glass .mg-card-flat-row .row > .feature-card_wrapp:nth-child(3) .feature-card.style2::before { background-image: var(--mg-icon-factory) !important; }

/* /logistics-delivery/ (mg-page-logistics-delivery)
   Key capabilities — 8 cards:
     1. Shipment management         → truck
     2. Address management          → map-pin
     3. Rack management             → container
     4. Load management             → boxes
     5. Order-to-load assignment    → move-right
     6. Goods-issue documents       → receipt
     7. Linked to orders            → link-2
     8. Ready-to-ship visibility    → package-check
   Related modules — 3 cards:
     1. Order management            → clipboard-list
     2. Reports & exports           → file-spreadsheet
     3. Customer management         → users                                  */
body.mg-page-logistics-delivery .mg-feature-list .row > .col-xl-4:nth-child(1) .service-grid .box-icon::before { background-image: var(--mg-icon-truck) !important; }
body.mg-page-logistics-delivery .mg-feature-list .row > .col-xl-4:nth-child(2) .service-grid .box-icon::before { background-image: var(--mg-icon-map-pin) !important; }
body.mg-page-logistics-delivery .mg-feature-list .row > .col-xl-4:nth-child(3) .service-grid .box-icon::before { background-image: var(--mg-icon-container) !important; }
body.mg-page-logistics-delivery .mg-feature-list .row > .col-xl-4:nth-child(4) .service-grid .box-icon::before { background-image: var(--mg-icon-boxes) !important; }
body.mg-page-logistics-delivery .mg-feature-list .row > .col-xl-4:nth-child(5) .service-grid .box-icon::before { background-image: var(--mg-icon-move-right) !important; }
body.mg-page-logistics-delivery .mg-feature-list .row > .col-xl-4:nth-child(6) .service-grid .box-icon::before { background-image: var(--mg-icon-receipt) !important; }
body.mg-page-logistics-delivery .mg-feature-list .row > .col-xl-4:nth-child(7) .service-grid .box-icon::before { background-image: var(--mg-icon-link-2) !important; }
body.mg-page-logistics-delivery .mg-feature-list .row > .col-xl-4:nth-child(8) .service-grid .box-icon::before { background-image: var(--mg-icon-package-check) !important; }

body.mg-page-logistics-delivery .mg-card-flat-row .row > .feature-card_wrapp:nth-child(1) .feature-card.style2::before { background-image: var(--mg-icon-clipboard-list) !important; }
body.mg-page-logistics-delivery .mg-card-flat-row .row > .feature-card_wrapp:nth-child(2) .feature-card.style2::before { background-image: var(--mg-icon-file-spreadsheet) !important; }
body.mg-page-logistics-delivery .mg-card-flat-row .row > .feature-card_wrapp:nth-child(3) .feature-card.style2::before { background-image: var(--mg-icon-users) !important; }

/* /mobile-app/ (mg-page-mobile-app)
   Key capabilities — 5 cards (live WP version, trimmed from 8 in source-of-truth):
     1. QR-code scanning            → qr-code
     2. Setup by sync QR            → scan-line
     3. Processing confirmation     → clipboard-check
     4. Task list                   → list-tree
     5. BYOD — Android & iOS        → smartphone
   Related modules — 3 cards (live WP version):
     1. Order management            → clipboard-list
     2. Shop-floor tracking         → factory
     3. Customer management         → users
   No new icons needed — all 8 already defined in :root.                  */
body.mg-page-mobile-app .mg-feature-list .row > .col-xl-4:nth-child(1) .service-grid .box-icon::before { background-image: var(--mg-icon-qr-code) !important; }
body.mg-page-mobile-app .mg-feature-list .row > .col-xl-4:nth-child(2) .service-grid .box-icon::before { background-image: var(--mg-icon-scan-line) !important; }
body.mg-page-mobile-app .mg-feature-list .row > .col-xl-4:nth-child(3) .service-grid .box-icon::before { background-image: var(--mg-icon-clipboard-check) !important; }
body.mg-page-mobile-app .mg-feature-list .row > .col-xl-4:nth-child(4) .service-grid .box-icon::before { background-image: var(--mg-icon-list-tree) !important; }
body.mg-page-mobile-app .mg-feature-list .row > .col-xl-4:nth-child(5) .service-grid .box-icon::before { background-image: var(--mg-icon-smartphone) !important; }

body.mg-page-mobile-app .mg-card-flat-row .row > .feature-card_wrapp:nth-child(1) .feature-card.style2::before { background-image: var(--mg-icon-clipboard-list) !important; }
body.mg-page-mobile-app .mg-card-flat-row .row > .feature-card_wrapp:nth-child(2) .feature-card.style2::before { background-image: var(--mg-icon-factory) !important; }
body.mg-page-mobile-app .mg-card-flat-row .row > .feature-card_wrapp:nth-child(3) .feature-card.style2::before { background-image: var(--mg-icon-users) !important; }

/* /igu-manufacturers/ (mg-page-igu-manufacturers) — Solutions sub-page.
   "How MonitGlass fits" — 5 cards in mg-card-flat-row (3+2 layout,
   second row pinned left via wave 112 override). Order matches the
   trimmed wp-pages/igu-manufacturers.html grid. */
body.mg-page-igu-manufacturers .mg-card-flat-row .row > .feature-card_wrapp:nth-child(1) .feature-card.style2::before { background-image: var(--mg-icon-layers) !important; }
body.mg-page-igu-manufacturers .mg-card-flat-row .row > .feature-card_wrapp:nth-child(2) .feature-card.style2::before { background-image: var(--mg-icon-calculator) !important; }
body.mg-page-igu-manufacturers .mg-card-flat-row .row > .feature-card_wrapp:nth-child(3) .feature-card.style2::before { background-image: var(--mg-icon-gantt) !important; }
body.mg-page-igu-manufacturers .mg-card-flat-row .row > .feature-card_wrapp:nth-child(4) .feature-card.style2::before { background-image: var(--mg-icon-factory) !important; }
body.mg-page-igu-manufacturers .mg-card-flat-row .row > .feature-card_wrapp:nth-child(5) .feature-card.style2::before { background-image: var(--mg-icon-clipboard-list) !important; }

/* /laminated-glass/ (mg-page-laminated-glass) — Solutions sub-page.
   "How MonitGlass fits" — 4 cards in mg-card-flat-row (3+1 layout).
   Order matches the trimmed wp-pages/laminated-glass.html grid. */
body.mg-page-laminated-glass .mg-card-flat-row .row > .feature-card_wrapp:nth-child(1) .feature-card.style2::before { background-image: var(--mg-icon-factory) !important; }
body.mg-page-laminated-glass .mg-card-flat-row .row > .feature-card_wrapp:nth-child(2) .feature-card.style2::before { background-image: var(--mg-icon-calculator) !important; }
body.mg-page-laminated-glass .mg-card-flat-row .row > .feature-card_wrapp:nth-child(3) .feature-card.style2::before { background-image: var(--mg-icon-qr-code) !important; }
body.mg-page-laminated-glass .mg-card-flat-row .row > .feature-card_wrapp:nth-child(4) .feature-card.style2::before { background-image: var(--mg-icon-clipboard-list) !important; }

/* /monolith-glass/ (mg-page-monolith-glass) — Solutions sub-page.
   "How MonitGlass fits" — 4 cards in mg-card-flat-row (3+1 layout).
   Order matches the trimmed wp-pages/monolith-glass.html grid. */
body.mg-page-monolith-glass .mg-card-flat-row .row > .feature-card_wrapp:nth-child(1) .feature-card.style2::before { background-image: var(--mg-icon-factory) !important; }
body.mg-page-monolith-glass .mg-card-flat-row .row > .feature-card_wrapp:nth-child(2) .feature-card.style2::before { background-image: var(--mg-icon-qr-code) !important; }
body.mg-page-monolith-glass .mg-card-flat-row .row > .feature-card_wrapp:nth-child(3) .feature-card.style2::before { background-image: var(--mg-icon-gantt) !important; }
body.mg-page-monolith-glass .mg-card-flat-row .row > .feature-card_wrapp:nth-child(4) .feature-card.style2::before { background-image: var(--mg-icon-clipboard-list) !important; }

/* /windows-doors/ (mg-page-windows-doors) — Solutions sub-page.
   "How MonitGlass fits" — 4 cards in mg-card-flat-row (3+1 layout).
   Order matches the trimmed wp-pages/windows-doors.html grid. */
body.mg-page-windows-doors .mg-card-flat-row .row > .feature-card_wrapp:nth-child(1) .feature-card.style2::before { background-image: var(--mg-icon-layers) !important; }
body.mg-page-windows-doors .mg-card-flat-row .row > .feature-card_wrapp:nth-child(2) .feature-card.style2::before { background-image: var(--mg-icon-gantt) !important; }
body.mg-page-windows-doors .mg-card-flat-row .row > .feature-card_wrapp:nth-child(3) .feature-card.style2::before { background-image: var(--mg-icon-truck) !important; }
body.mg-page-windows-doors .mg-card-flat-row .row > .feature-card_wrapp:nth-child(4) .feature-card.style2::before { background-image: var(--mg-icon-clipboard-list) !important; }

/* Wave 115 — section content rail (.mg-section-content).
   Custom CSS Class added in Elementor to any inner container that should
   align its content to the page content rail (left-edge at 270px on
   1860px viewport: 258px outer margin + 12px Bootstrap gutter). Replaces
   the brittle Wave 114 body.mg-page-igu-manufacturers .e-con:has(.elementor-widget-text-editor) fix.

   Use case: split-layout left columns where Elementor's default
   padding-left (52px) pushes the content past the rail. Add the class
   in Elementor → Edit Container → Advanced → CSS Classes. */
.mg-section-content {
  padding-left: 12px !important;
}

/* When more Platform sub-pages land:
   body.page-id-XXXX .mg-feature-grid--4col .service-grid:nth-child(N) .box-icon::before {
     background-image: var(--mg-icon-NAME) !important;
   }
   Add new icons to :root if needed.                                    */


/* ============================================================
   FAQ — .mg-faq (Sassa sassafaq widget = Bootstrap accordion)
   Used on order-management. Stub styling — refine in wave 99.

   See functions.php (wave 96e) — JS dedupes the parent ID per widget so
   Bootstrap collapse can both open and close cards. Without that fix
   multiple sassafaq widgets share #faqAccordionArray and the second
   click on an open card has no effect.
   ============================================================ */
.mg-faq.e-con,
.mg-faq.e-con-full {
  padding-left: clamp(24px, 4vw, 48px) !important;
  padding-right: clamp(24px, 4vw, 48px) !important;
  padding-top: 64px !important;
  padding-bottom: 80px !important;
}
@media (max-width: 768px) {
  .mg-faq.e-con,
  .mg-faq.e-con-full {
    padding-top: 48px !important;
    padding-bottom: 56px !important;
  }
}
.mg-faq .accordion {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}
.mg-faq .accordion-card {
  border: 1px solid var(--mg-line) !important;
  border-radius: var(--mg-radius) !important;
  background-color: var(--mg-bg) !important;
  overflow: hidden !important;
  box-shadow: none !important;
  margin: 0 !important;
}
.mg-faq .accordion-header {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}
.mg-faq .accordion-button {
  font-family: var(--mg-font-body) !important;
  font-weight: 700 !important;
  font-size: 1.02rem !important;
  color: var(--mg-navy-deep) !important;
  background: transparent !important;
  padding: 18px 22px !important;
  border: 0 !important;
  box-shadow: none !important;
  text-align: left !important;
  line-height: 1.4 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}
.mg-faq .accordion-button:not(.collapsed) {
  color: var(--mg-blue) !important;
  background: rgba(20, 104, 178, 0.04) !important;
}
.mg-faq .accordion-button:hover {
  color: var(--mg-blue) !important;
}
.mg-faq .accordion-button:focus {
  box-shadow: none !important;
  outline: none !important;
}
.mg-faq .accordion-body,
.mg-faq .faq-text {
  font-family: var(--mg-font-body) !important;
  font-size: 0.96rem !important;
  line-height: 1.6 !important;
  color: var(--mg-muted) !important;
  padding: 4px 22px 20px !important;
}
.mg-faq .accordion-body p,
.mg-faq .faq-text p {
  margin: 0 0 0.7em !important;
  color: var(--mg-muted) !important;
}
.mg-faq .accordion-body p:last-child,
.mg-faq .faq-text p:last-child {
  margin-bottom: 0 !important;
}

/* Title — user used a sassafeatures widget (not sassasectiontitle), which
   renders as <h3 class="box-title">FAQ</h3> + <p class="box-text desc">…</p>
   inside .choose-card and a Bootstrap row.justify-content-center.col-xl-4.
   Override that container layout and restyle to match other section
   titles: eyebrow (small blue uppercase) + H2 (large navy). */
.mg-faq .elementor-widget-sassafeatures .row {
  justify-content: flex-start !important;
  margin: 0 !important;
}
.mg-faq .elementor-widget-sassafeatures .row > .col-md-6,
.mg-faq .elementor-widget-sassafeatures .row > .col-xl-4 {
  flex: 0 0 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
}
.mg-faq .elementor-widget-sassafeatures .choose-card {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 0 24px 0 !important;
  text-align: left !important;
  border: 0 !important;
}
.mg-faq .elementor-widget-sassafeatures .choose-card .box-title,
.mg-faq .elementor-widget-sassafeatures .choose-card h3,
.mg-faq .elementor-widget-sassafeatures .choose-card h3.box-title {
  font-family: var(--mg-font-body) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  color: var(--mg-blue) !important;
  line-height: 1.3 !important;
  margin: 0 0 0.6rem 0 !important;
  padding: 0 !important;
}
.mg-faq .elementor-widget-sassafeatures .choose-card .box-text,
.mg-faq .elementor-widget-sassafeatures .choose-card p.box-text,
.mg-faq .elementor-widget-sassafeatures .choose-card .desc {
  font-family: var(--mg-font-body) !important;
  font-size: 2.85rem !important;
  font-weight: 700 !important;
  color: var(--mg-navy-deep) !important;
  line-height: 1.2 !important;
  letter-spacing: -0.01em !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Two separate sassafaq widgets — Elementor's e-con-inner is a grid
   with auto rows that pad each widget cell to ~162px. Force the inner
   container to flex with tight gap so cards sit right under each other. */
.mg-faq .e-con-inner {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  grid-template-rows: none !important;
  grid-auto-rows: auto !important;
}
.mg-faq .elementor-widget-sassafaq,
.mg-faq .elementor-widget-sassafaq > .elementor-widget-container {
  min-height: 0 !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
}


/* ============================================================
   HERO SUB — .mg-hero-sub
   Sub-hero for Platform sub-pages. Lighter variant of home hero-9.
   Reuses Sassa sassabanner markup (#hero.hero-9 .hero-style9) — most
   home HERO rules already apply; this block tightens paddings, scales
   typography down, and dims the radial gradient so sub-pages don't
   compete with the home hero.

   Layout: section is a single sassabanner widget. Sassa renders text
   on the left column and image on the right via Bootstrap grid.
   ============================================================ */

/* Section frame */
.mg-hero-sub.e-con,
.mg-hero-sub.e-con-full {
  background-color: var(--mg-bg) !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  border-bottom: 1px solid var(--mg-line) !important;
}

/* Inner hero wrapper — dim the gradient, tighten padding vs home */
.mg-hero-sub #hero.th-hero-wrapper,
.mg-hero-sub #hero.hero-9,
.mg-hero-sub #hero.background-image {
  background-image:
    radial-gradient(700px 320px at 100% 100%, rgba(20, 104, 178, 0.07), transparent 60%),
    radial-gradient(520px 280px at 0% 0%, rgba(60, 86, 163, 0.05), transparent 60%) !important;
  padding-top: 152px !important;
  padding-bottom: 80px !important;
  min-height: 0 !important;
}
@media (max-width: 1199px) {
  .mg-hero-sub #hero.th-hero-wrapper,
  .mg-hero-sub #hero.hero-9,
  .mg-hero-sub #hero.background-image {
    padding-top: 120px !important;
    padding-bottom: 64px !important;
  }
}
@media (max-width: 767px) {
  .mg-hero-sub #hero.th-hero-wrapper,
  .mg-hero-sub #hero.hero-9,
  .mg-hero-sub #hero.background-image {
    padding-top: 104px !important;
    padding-bottom: 48px !important;
  }
}

/* H1 — scaled down vs home (home is brand-heavy, sub-hero is functional) */
.mg-hero-sub .hero-style9 h1.hero-title,
.mg-hero-sub .hero-style9 .hero-title {
  font-size: clamp(2rem, 4vw, 3rem) !important;
  margin-bottom: 1rem !important;
  max-width: 18ch !important;
}

/* Eyebrow tightens slightly */
.mg-hero-sub .hero-style9 .sub-title {
  font-size: 0.78rem !important;
  letter-spacing: 0.14em !important;
  margin-bottom: 0.6rem !important;
}

/* Lead paragraph */
.mg-hero-sub .hero-style9 .hero-text {
  font-size: 1.05rem !important;
  line-height: 1.6 !important;
  max-width: 56ch !important;
  margin-bottom: 1.4rem !important;
}

/* Vertical centering between text + visual on desktop */
@media (min-width: 992px) {
  .mg-hero-sub #hero.hero-9 .row,
  .mg-hero-sub #hero.hero-9 .row.align-items-end {
    align-items: center !important;
  }
}

/* Right visual — frame it like a screenshot, not a hero illustration.
   Image lives in .th-hero-img (sibling of .hero-style9 text column,
   inside the same .row), so selectors don't need .hero-style9 ancestor.
   NOTE: Sassa sets `min-width: 924px` on .th-hero-img by default —
   must zero it out or max-width never wins. */
.mg-hero-sub .th-hero-img {
  min-width: 0 !important;
  width: auto !important;
  max-width: 600px !important;
  margin-left: auto !important;
}
.mg-hero-sub .th-hero-img img {
  border-radius: 12px !important;
  border: 1px solid rgba(20, 104, 178, 0.10) !important;
  box-shadow:
    0 2px 4px rgba(20, 104, 178, 0.04),
    0 20px 40px -12px rgba(20, 104, 178, 0.15) !important;
  max-width: 100% !important;
  width: 100% !important;
  height: auto !important;
  display: block !important;
}
@media (max-width: 991px) {
  .mg-hero-sub .th-hero-img {
    max-width: 100% !important;
    margin: 32px 0 0 0 !important;
  }
}

/* Mobile — single column, text first, image second, tighter spacing */
@media (max-width: 991px) {
  .mg-hero-sub #hero.hero-9 .row {
    flex-direction: column !important;
  }
  .mg-hero-sub .hero-style9 h1.hero-title {
    max-width: none !important;
  }
}


/* ============================================================
   BLOG — sekcja "blog/aktualności" na stronie głównej.
   Scope: .mg-home-blog (klasa na sekcji, Wave 159). Tytuł, swiper i karty
   to descendant-rules pod tą klasą; kontener tytułu izolowany przez
   :has(.title-area):not(:has(.blog-grid)). Było: page-only element-id.
   ============================================================ */
.mg-home-blog {
  background-color: var(--mg-bg) !important;
  padding-top: 32px !important;
  padding-bottom: 64px !important;
  border-bottom: 1px solid var(--mg-line) !important;
}

/* Title widget */
.mg-home-blog .e-con:has(.title-area):not(:has(.blog-grid)) > .e-con-inner,
.mg-home-blog .e-con:has(.title-area):not(:has(.blog-grid)) .e-con-inner {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  max-width: 1344px !important;
}

.mg-home-blog .sub-title,
.mg-home-blog .subtitle,
.mg-home-blog .sec-subtitle {
  text-transform: uppercase !important;
  font-size: 0.78rem !important;
  letter-spacing: 0.08em !important;
  font-weight: 700 !important;
  color: var(--mg-blue) !important;
  font-family: var(--mg-font-body) !important;
  background: transparent !important;
  padding: 0 !important;
  border-radius: 0 !important;
  margin-bottom: 0.6rem !important;
}
.mg-home-blog h2,
.mg-home-blog h2.sec-title,
.mg-home-blog h2.sec-title2,
.mg-home-blog .sec-title,
.mg-home-blog .sec-title2 {
  font-family: var(--mg-font-body) !important;
  font-weight: 700 !important;
  font-size: 2.85rem !important;
  line-height: 1.2 !important;
  color: var(--mg-navy-deep) !important;
  letter-spacing: -0.01em !important;
  margin-top: 0 !important;
  text-transform: none !important;
}

.mg-home-blog .title-area,
.mg-home-blog .title-area.text-center,
.mg-home-blog .title-area h2,
.mg-home-blog .title-area .sub-title,
.mg-home-blog .title-area .sec-title,
.mg-home-blog .title-area .sec-title2 {
  text-align: left !important;
}
.mg-home-blog.elementor-widget .title-area,
.mg-home-blog.elementor-widget .title-area.text-center,
.mg-home-blog .elementor-widget-container .title-area,
.mg-home-blog .elementor-widget-container .title-area.text-center {
  text-align: left !important;
}
.mg-home-blog .title-area > *,
.mg-home-blog .title-area.text-center > * {
  text-align: left !important;
}
.mg-home-blog .title-area {
  margin-bottom: 32px !important;
}

.mg-home-blog .pill,
.mg-home-blog .tag,
.mg-home-blog .label-tag {
  display: none !important;
}

/* Swiper → CSS grid neutralization */
.mg-home-blog .swiper-wrapper {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 24px !important;
  transform: none !important;
  width: 100% !important;
}

.mg-home-blog .swiper-slide {
  width: auto !important;
  height: auto !important;
  margin-right: 0 !important;
  flex-shrink: 1 !important;
}

.mg-home-blog .swiper-button-next,
.mg-home-blog .swiper-button-prev,
.mg-home-blog .swiper-pagination,
.mg-home-blog .swiper-scrollbar,
.mg-home-blog .slider-arrow,
.mg-home-blog .slider-prev,
.mg-home-blog .slider-next,
.mg-home-blog button.slider-arrow,
.mg-home-blog .slider-arrow.style3,
.mg-home-blog [class*="slider-arrow"],
.mg-home-blog [class*="slider-prev"],
.mg-home-blog [class*="slider-next"] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Blog card (.blog-grid is the live class) */
.mg-home-blog .blog-grid {
  background: var(--mg-bg) !important;
  border-radius: var(--mg-radius) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.06) !important;
  overflow: hidden !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
}
.mg-home-blog .blog-grid:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 12px rgba(20, 104, 178, 0.08), 0 2px 4px rgba(0, 0, 0, 0.04) !important;
}

/* Image wrapper */
.mg-home-blog .box-img,
.mg-home-blog .box-img.global-img {
  aspect-ratio: 16 / 9 !important;
  overflow: hidden !important;
  position: relative !important;
  display: block !important;
  border-radius: 0 !important;
  margin: 0 !important;
}
.mg-home-blog .box-img img,
.mg-home-blog .box-img.global-img img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  transition: none !important;
  transform: none !important;
  filter: none !important;
  opacity: 1 !important;
  border-radius: 0 !important;
}
.mg-home-blog .blog-grid:hover .box-img img,
.mg-home-blog .blog-grid:hover .box-img.global-img img,
.mg-home-blog .box-img:hover img,
.mg-home-blog .box-img.global-img:hover img,
.mg-home-blog .blog-grid:hover img {
  transform: none !important;
  filter: none !important;
  opacity: 1 !important;
}
.mg-home-blog .box-img::before,
.mg-home-blog .box-img::after,
.mg-home-blog .box-img.global-img::before,
.mg-home-blog .box-img.global-img::after {
  display: none !important;
  content: none !important;
}

/* Box content */
.mg-home-blog .blog-grid .box-content,
.mg-home-blog .box-content {
  padding: 24px !important;
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
}

/* Meta */
.mg-home-blog .blog-meta {
  text-transform: uppercase !important;
  font-size: 0.74rem !important;
  letter-spacing: 0.06em !important;
  font-weight: 600 !important;
  color: var(--mg-blue) !important;
  font-family: var(--mg-font-body) !important;
  margin-top: 0 !important;
  margin-bottom: 12px !important;
  display: flex !important;
  gap: 8px !important;
  align-items: center !important;
}
.mg-home-blog .blog-meta a {
  color: inherit !important;
  text-decoration: none !important;
}
.mg-home-blog .blog-meta a + a::before {
  content: "·" !important;
  margin-right: 8px !important;
  color: #8b95a8 !important;
}

/* Title */
.mg-home-blog .box-title {
  font-family: var(--mg-font-body) !important;
  font-weight: 700 !important;
  font-size: 1.08rem !important;
  line-height: 1.35 !important;
  color: var(--mg-navy-deep) !important;
  margin: 0 0 16px 0 !important;
}
.mg-home-blog .box-title a {
  color: inherit !important;
  text-decoration: none !important;
}
.mg-home-blog .box-title a:hover {
  color: var(--mg-blue) !important;
}

/* Read more */
.mg-home-blog .line-btn {
  font-family: var(--mg-font-body) !important;
  font-weight: 700 !important;
  font-size: 0.86rem !important;
  color: var(--mg-blue) !important;
  text-decoration: none !important;
  display: inline-block !important;
  align-items: center !important;
  transition: transform 0.2s ease, color 0.2s ease !important;
  border-bottom: 0 !important;
  margin-top: auto !important;
  align-self: flex-start !important;
  text-transform: lowercase !important;
}
.mg-home-blog .line-btn::first-letter {
  text-transform: uppercase !important;
}
.mg-home-blog .line-btn i {
  display: none !important;
}
.mg-home-blog .line-btn::after {
  content: "→" !important;
  margin-left: 6px !important;
  display: inline-block !important;
  transition: transform 0.2s ease !important;
}
.mg-home-blog .line-btn::before,
.mg-home-blog .line-btn:hover::before,
.mg-home-blog .line-btn:focus::before,
.mg-home-blog .line-btn:active::before {
  display: none !important;
  content: none !important;
  background: transparent !important;
  background-color: transparent !important;
  width: 0 !important;
  height: 0 !important;
  border: 0 !important;
}
.mg-home-blog .blog-grid:hover .line-btn {
  color: #0d4d8a !important;
}
.mg-home-blog .blog-grid:hover .line-btn::after {
  transform: translateX(4px) !important;
}

/* Responsive grid */
@media (max-width: 991px) and (min-width: 576px) {
  .mg-home-blog .swiper-wrapper {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
@media (max-width: 575px) {
  .mg-home-blog .swiper-wrapper {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 768px) {
  .mg-home-blog {
    padding-left: 32px !important;
    padding-right: 32px !important;
  }
  .mg-home-blog .swiper-slide,
  .mg-home-blog .swiper-wrapper > * {
    width: auto !important;
    max-width: 100% !important;
  }
}


/* ============================================================
   FOOTER WRAPPER — ciemne tło całej stopki (Wave 159 fix).
   Zewn. kontener stopki (element-id 10b9523) NIE dostał klasy mg-* w
   Elementorze (klasowaliśmy bandę gradientu, nie wrapper) — stracił regułę
   #0f1f3d i stopka zrobiła się jasna. Pinujemy go przez STABILNĄ klasę Sassy
   `.footer-layout1` (klasa motywu na wrapperze footera, nie id/post-id —
   migration-safe). !important pokonuje wygenerowane #f8f8f8 Elementora
   (bez !important) — tak samo jak działał oryginalny element-id.
   ============================================================ */
.footer-layout1 {
  background-color: #0f1f3d !important;
}

/* ============================================================
   CTA BAND — "Book a demo" na górze stopki (Wave 159).
   .mg-foot-cta = banda gradientu (poprawnie zaklasowana w Elementorze).
   .mg-foot-cta .e-con = realny wiersz (7103cf4, bez klasy → derive).
   .mg-foot-cta-row = widget newslettera (tu Adam wstawił klasę; trzyma
   hasło + flex:1, nie layout wiersza). Hasło: .footer-newsletter-content.
   ============================================================ */
.mg-foot-cta {
  background: linear-gradient(135deg, var(--mg-navy-deep) 0%, var(--mg-blue) 100%) !important;
  border-radius: 0 !important;
  margin: 0 !important;
  max-width: none !important;
  width: 100% !important;
  padding: 0 !important;
  box-shadow: none !important;
}

.mg-foot-cta > .e-con-inner {
  padding: 0 !important;
  max-width: none !important;
}

.mg-foot-cta .e-con {
  display: flex !important;
  flex-direction: row !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 64px !important;
  padding: 64px 0 !important;
  max-width: 1344px !important;
  margin: 0 auto !important;
}

.mg-foot-cta-row {
  flex: 1 1 auto !important;
}

.mg-foot-cta-row .footer-newsletter-content h2,
.mg-foot-cta-row h2 {
  font-family: var(--mg-font-body) !important;
  font-size: 2.2rem !important;
  font-weight: 700 !important;
  line-height: 1.18 !important;
  letter-spacing: -0.01em !important;
  color: var(--mg-bg) !important;
  margin: 0 !important;
  text-transform: none !important;
}

.mg-foot-cta-row .footer-newsletter-content > div {
  margin-top: 16px !important;
}

.mg-foot-cta-row .footer-newsletter-content > div > div {
  font-family: var(--mg-font-body) !important;
  font-size: 1rem !important;
  line-height: 1.55 !important;
  color: rgba(255, 255, 255, 0.82) !important;
  max-width: 580px !important;
}

.mg-foot-cta button.e-button-base {
  flex: 0 0 auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: var(--mg-orange) !important;
  color: #1f1f1f !important;
  font-family: var(--mg-font-body) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em !important;
  padding: 16px 36px !important;
  border: none !important;
  border-radius: var(--mg-radius) !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  text-decoration: none !important;
  transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease !important;
  box-shadow: 0 4px 12px rgba(242, 156, 43, 0.25) !important;
}
.mg-foot-cta button.e-button-base:hover,
.mg-foot-cta button.e-button-base:focus {
  background: #d98519 !important;
  color: #1f1f1f !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 20px rgba(242, 156, 43, 0.35) !important;
}

@media (max-width: 768px) {
  .mg-foot-cta {
    margin: 0 !important;
    border-radius: 0 !important;
  }
  .mg-foot-cta .e-con {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 28px !important;
    padding: 40px 32px !important;
  }
  .mg-foot-cta-row .footer-newsletter-content h2,
  .mg-foot-cta-row h2,
  .mg-foot-cta-row .footer-newsletter-content,
  .mg-foot-cta-row .footer-newsletter-content > div,
  .mg-foot-cta-row .footer-newsletter-content > div > div {
    font-size: 1.7rem !important;
    line-height: 1.22 !important;
    text-align: left !important;
  }
  .mg-foot-cta-row .footer-newsletter-content > div > div {
    font-size: 0.95rem !important;
  }
  .mg-foot-cta button.e-button-base {
    width: auto !important;
    padding: 14px 30px !important;
  }
}


/* ============================================================
   FOOTER MAIN — 4 kolumny + brand (Wave 159).
   .mg-foot-main = kontener kolumn, .mg-foot-col = każda z 4 kolumn menu,
   .mg-foot-divider = linia. Kolumna brand NIE dostała klasy w Elementorze —
   pinowana przez .mg-foot-main .elementor-widget:has(.th-social) (social-ikony są
   wyłącznie w niej; równie migration-safe). Jeśli kiedyś dodasz jawną klasę
   mg-foot-brand, podmień ten jeden selektor.
   ============================================================ */
.mg-foot-main {
  padding: 56px 0 32px !important;
}

.mg-foot-main > .e-con-inner {
  max-width: 1344px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  justify-content: space-between !important;
  align-items: flex-start !important;
  gap: 48px !important;
}

/* Brand logo */
.mg-foot-main .elementor-widget:has(.th-social) img,
.mg-foot-main .elementor-widget:has(.th-social) .footer-logo img,
.mg-foot-main .elementor-widget:has(.th-social) .logo img {
  max-width: 180px !important;
  height: auto !important;
  width: auto !important;
}

/* Brand column */
.mg-foot-main .elementor-widget:has(.th-social) {
  flex: 0 0 28% !important;
  max-width: 28% !important;
  width: 28% !important;
}
.mg-foot-main .elementor-widget:has(.th-social),
.mg-foot-main .elementor-widget:has(.th-social) p,
.mg-foot-main .elementor-widget:has(.th-social) div {
  color: rgba(255, 255, 255, 0.78) !important;
  font-family: var(--mg-font-body) !important;
  font-size: 14px !important;
  line-height: 1.7 !important;
}
.mg-foot-main .elementor-widget:has(.th-social) a {
  color: rgba(255, 255, 255, 0.78) !important;
  text-decoration: none !important;
  transition: color 0.18s ease !important;
}
.mg-foot-main .elementor-widget:has(.th-social) a:hover {
  color: var(--mg-bg) !important;
}

/* Menu columns */
.mg-foot-col {
  flex: 0 0 16% !important;
  max-width: 18% !important;
}

/* H3 menu titles */
.mg-foot-main h3,
.mg-foot-main .footer-title,
.mg-foot-main .widget-title {
  color: var(--mg-bg) !important;
  font-family: var(--mg-font-body) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  margin: 0 0 20px 0 !important;
  padding: 0 !important;
  line-height: 1.3 !important;
}
.mg-foot-main h3::before,
.mg-foot-main h3::after,
.mg-foot-main .widget_title::before,
.mg-foot-main .widget_title::after,
.mg-foot-main .footer-title::before,
.mg-foot-main .footer-title::after {
  display: none !important;
  content: none !important;
  background: transparent !important;
  width: 0 !important;
  height: 0 !important;
}

/* Menu links */
.mg-foot-main ul,
.mg-foot-main ol {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
.mg-foot-main li {
  margin: 0 !important;
  padding: 0 !important;
  line-height: 2 !important;
}
.mg-foot-main a {
  color: rgba(255, 255, 255, 0.65) !important;
  font-family: var(--mg-font-body) !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  text-decoration: none !important;
  transition: color 0.18s ease !important;
}
.mg-foot-main a:hover,
.mg-foot-main a:focus {
  color: var(--mg-bg) !important;
  text-decoration: none !important;
}

/* Divider */
.mg-foot-divider {
  margin: 0 auto !important;
  padding: 0 24px !important;
  max-width: 1344px !important;
}
.mg-foot-divider .elementor-divider,
.mg-foot-divider .elementor-divider-separator {
  border-top-color: rgba(255, 255, 255, 0.08) !important;
  border-top-width: 1px !important;
  border-top-style: solid !important;
}

/* Social icons */
.mg-foot-main .elementor-widget:has(.th-social) .th-social {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  margin-top: 24px !important;
}
.mg-foot-main .elementor-widget:has(.th-social) .th-social a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 38px !important;
  height: 38px !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  color: rgba(255, 255, 255, 0.75) !important;
  text-decoration: none !important;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease, transform 0.18s ease !important;
}
.mg-foot-main .elementor-widget:has(.th-social) .th-social a:hover,
.mg-foot-main .elementor-widget:has(.th-social) .th-social a:focus {
  background: var(--mg-orange) !important;
  border-color: var(--mg-orange) !important;
  color: #1f1f1f !important;
  transform: translateY(-2px) !important;
}
.mg-foot-main .elementor-widget:has(.th-social) .th-social a i {
  font-size: 14px !important;
  line-height: 1 !important;
  color: inherit !important;
}

@media (max-width: 768px) {
  .mg-foot-main {
    padding: 56px 24px 32px !important;
  }
  .mg-foot-main > .e-con-inner {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 32px 16px !important;
    padding: 0 !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
  }
  .mg-foot-main .elementor-widget:has(.th-social) {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
  }
  .mg-foot-col {
    flex: 0 0 calc(50% - 8px) !important;
    max-width: calc(50% - 8px) !important;
    width: calc(50% - 8px) !important;
  }
  .mg-foot-main h3 {
    margin-bottom: 14px !important;
  }
}


/* ============================================================
   FOOTER COPYRIGHT — dolna banda "© 2026" (Wave 159 fix).
   Banda © (80e8415) NIE dostała klasy — derive: .e-con który zawiera
   .mg-foot-legal, ale NIE .mg-foot-main (to wyklucza wrapper, który też
   :has legal). Zweryfikowane na żywym DOM: 1 trafienie (80e8415).
   .mg-foot-copyright (klasa Adama) siedzi na stronie z © TEKSTEM (43ed854),
   nie na bandzie — więc tu = lewy człon. .mg-foot-legal = grupa EULA/Privacy.
   ============================================================ */
.e-con:has(.mg-foot-legal):not(:has(.mg-foot-main)) {
  background-color: #0a1428 !important;
  padding: 16px 24px !important;
}

.e-con:has(.mg-foot-legal):not(:has(.mg-foot-main)) > .e-con-inner {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 24px !important;
  max-width: 1344px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  flex-wrap: wrap !important;
}

.mg-foot-copyright,
.mg-foot-legal {
  flex: 0 1 auto !important;
  width: auto !important;
  max-width: none !important;
}

.mg-foot-legal {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 24px !important;
}

.mg-foot-copyright,
.mg-foot-copyright p,
.mg-foot-copyright div {
  margin: 0 !important;
  color: rgba(255, 255, 255, 0.5) !important;
  font-family: var(--mg-font-body) !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
}

.e-con:has(.mg-foot-legal):not(:has(.mg-foot-main)) button.e-button-base,
.mg-foot-legal button.e-button-base {
  background: transparent !important;
  background-color: transparent !important;
  color: rgba(255, 255, 255, 0.65) !important;
  font-family: var(--mg-font-body) !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  width: auto !important;
  min-width: 0 !important;
  cursor: pointer !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  box-shadow: none !important;
  transition: color 0.18s ease !important;
}
.e-con:has(.mg-foot-legal):not(:has(.mg-foot-main)) button.e-button-base:hover,
.e-con:has(.mg-foot-legal):not(:has(.mg-foot-main)) button.e-button-base:focus,
.mg-foot-legal button.e-button-base:hover,
.mg-foot-legal button.e-button-base:focus {
  background: transparent !important;
  color: var(--mg-bg) !important;
  transform: none !important;
  box-shadow: none !important;
}

@media (max-width: 768px) {
  .e-con:has(.mg-foot-legal):not(:has(.mg-foot-main)) {
    padding: 16px 24px !important;
  }
  .e-con:has(.mg-foot-legal):not(:has(.mg-foot-main)) > .e-con-inner {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
  }
  .mg-foot-legal {
    gap: 18px !important;
  }
}


/* ============================================================
   BACK-TO-TOP (.scroll-top)
   ============================================================ */
.scroll-top {
  background: var(--mg-orange) !important;
  box-shadow: 0 6px 16px rgba(242, 156, 43, 0.35) !important;
  border: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.scroll-top .progress-circle,
.scroll-top svg {
  display: none !important;
}

.scroll-top::after {
  display: none !important;
  content: none !important;
}

.scroll-top::before {
  content: "\f062" !important;
  font-family: "Font Awesome 6 Pro", "Font Awesome 5 Pro", "Font Awesome 6 Free", "Font Awesome 5 Free", FontAwesome !important;
  font-weight: 900 !important;
  font-size: 20px !important;
  color: #1f1f1f !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  display: block !important;
  width: auto !important;
  height: auto !important;
  background: transparent !important;
  line-height: 1 !important;
}

.scroll-top:hover {
  background: #d98519 !important;
  transform: translateY(-2px) !important;
}

.scroll-top:hover::before {
  color: #1f1f1f !important;
}

/* ============================================================
   DESKTOP MEGA MENU (Max Mega Menu)
   ============================================================ */
@media (min-width: 1200px) {
  /* Override Sassa parent's .main-menu ul.mega-menu rule (z-index:-1,
     opacity:0, scaleY(0)) — would push MMM nav behind its own wrapper
     and break hover entirely. */
  nav.main-menu ul.mega-menu.max-mega-menu {
    position: static !important;
    z-index: auto !important;
    visibility: visible !important;
    opacity: 1 !important;
    transform: none !important;
    background: transparent !important;
    padding: 0 !important;
    min-width: 0 !important;
    width: auto !important;
    border-top: none !important;
    box-shadow: none !important;
    left: auto !important;
    top: auto !important;
    border-radius: 0 !important;
  }

  #mega-menu-wrap-primary-menu,
  #mega-menu-wrap-primary-menu .mega-menu.mega-menu-horizontal {
    background: transparent !important;
    visibility: visible !important;
  }

  /* Top-level links */
  #mega-menu-primary-menu > li.mega-menu-item > a.mega-menu-link {
    color: #101828 !important;
    font-family: Inter, -apple-system, "system-ui", sans-serif !important;
    font-weight: 500 !important;
    font-size: 15px !important;
    text-transform: none !important;
    padding: 0 18px !important;
    line-height: 72px !important;
    height: auto !important;
    background: transparent !important;
  }
  #mega-menu-primary-menu > li.mega-menu-item > a.mega-menu-link:hover,
  #mega-menu-primary-menu > li.mega-menu-item.mega-menu-item-current_item > a.mega-menu-link {
    color: #1468b2 !important;
    background: transparent !important;
  }

  /* Hide "Book a demo" menu item — the right-slot Sassa CTA serves
     that purpose (Linear/Stripe pattern). */
  #mega-menu-item-3613 {
    display: none !important;
  }

  /* Sub-menu hide/show — triggered via :hover/:focus-within only.
     MMM's .mega-toggle-on class is sticky for ~150ms after mouseleave
     (hover_intent), which would cause panel overlap when sweeping
     Platform → Solutions. */
  #mega-menu-primary-menu > li.mega-menu-item > ul.mega-sub-menu {
    transition: none !important;
    transform: translateY(-6px) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
  #mega-menu-primary-menu > li.mega-menu-item:hover > ul.mega-sub-menu,
  #mega-menu-primary-menu > li.mega-menu-item:focus-within > ul.mega-sub-menu {
    visibility: visible !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    transition: opacity 0.15s ease, transform 0.15s ease !important;
    pointer-events: auto !important;
  }

  /* Mega panel — Platform (3-column grid) */
  #mega-menu-primary-menu > li.mega-menu-megamenu > ul.mega-sub-menu {
    background: #ffffff !important;
    border: 1px solid #eef2f6 !important;
    border-radius: 6px !important;
    box-shadow: 0 12px 32px rgba(20, 104, 178, 0.10) !important;
    padding: 28px 32px !important;
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 32px !important;
    width: 720px !important;
    max-width: calc(100vw - 32px) !important;
  }
  /* Reset MMM's default float layout on columns. */
  #mega-menu-primary-menu > li.mega-menu-megamenu > ul.mega-sub-menu > li.mega-menu-item {
    float: none !important;
    width: auto !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* Column headers (Office & sales, Production, Logistics) — labels,
     not links: pointer-events:none disables click. */
  #mega-menu-primary-menu > li.mega-menu-megamenu > ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link {
    color: #2a3a6b !important;
    font-weight: 700 !important;
    font-size: 12px !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    padding: 0 0 10px 0 !important;
    margin: 0 0 8px 0 !important;
    border-bottom: 1px solid #eef2f6 !important;
    background: transparent !important;
    height: auto !important;
    line-height: 1.3 !important;
    pointer-events: none !important;
  }

  /* Column items (3rd-level under headers) */
  #mega-menu-primary-menu > li.mega-menu-megamenu .mega-sub-menu .mega-sub-menu {
    background: transparent !important;
    padding: 0 !important;
    box-shadow: none !important;
    border: none !important;
  }
  #mega-menu-primary-menu > li.mega-menu-megamenu .mega-sub-menu .mega-sub-menu > li > a.mega-menu-link {
    color: #4e7599 !important;
    font-weight: 400 !important;
    font-size: 14px !important;
    text-transform: none !important;
    padding: 7px 0 !important;
    line-height: 1.4 !important;
    background: transparent !important;
    height: auto !important;
    border: none !important;
  }
  #mega-menu-primary-menu > li.mega-menu-megamenu .mega-sub-menu .mega-sub-menu > li > a.mega-menu-link:hover {
    color: #1468b2 !important;
    background: transparent !important;
  }

  /* Flyout dropdowns — Solutions, Resources, Company */
  #mega-menu-primary-menu > li.mega-menu-flyout > ul.mega-sub-menu {
    background: #ffffff !important;
    border: 1px solid #eef2f6 !important;
    border-radius: 6px !important;
    box-shadow: 0 12px 32px rgba(20, 104, 178, 0.10) !important;
    padding: 12px 0 !important;
    min-width: 240px !important;
  }
  #mega-menu-primary-menu > li.mega-menu-flyout > ul.mega-sub-menu > li > a.mega-menu-link {
    color: #4e7599 !important;
    font-weight: 400 !important;
    font-size: 14px !important;
    text-transform: none !important;
    padding: 10px 24px !important;
    line-height: 1.4 !important;
    background: transparent !important;
    height: auto !important;
  }
  #mega-menu-primary-menu > li.mega-menu-flyout > ul.mega-sub-menu > li > a.mega-menu-link:hover {
    color: #1468b2 !important;
    background: #f3f6f9 !important;
  }

  #mega-menu-primary-menu .mega-indicator {
    color: inherit !important;
  }
}


/* ============================================================
   MOBILE DRAWER — Mega Menu
   ============================================================ */
/* Force MMM UL visible inside the Sassa drawer (MMM's
   responsive_breakpoint=991px hides it by default, expecting its own
   toggle — we use Sassa's hamburger instead). */
@media (max-width: 1199px) {
  .th-mobile-menu #mega-menu-wrap-primary-menu,
  .th-mobile-menu .mega-menu.max-mega-menu {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: static !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    width: 100% !important;
  }

  /* Hide MMM's own mobile toggle (Sassa hamburger opens the drawer instead). */
  .th-mobile-menu .mega-menu-toggle {
    display: none !important;
  }

  .th-mobile-menu .mega-menu > .mega-menu-item {
    display: block !important;
    width: 100% !important;
    float: none !important;
    border-bottom: 1px solid #eef2f6 !important;
    background: transparent !important;
  }
  .th-mobile-menu .mega-menu > .mega-menu-item > a.mega-menu-link {
    display: block !important;
    padding: 16px 24px !important;
    font-family: Inter, -apple-system, "system-ui", sans-serif !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    color: #1a1a2e !important;
    line-height: 1.4 !important;
    background: transparent !important;
    height: auto !important;
    border: none !important;
    text-transform: none !important;
  }
  .th-mobile-menu .mega-menu > .mega-menu-item > a.mega-menu-link:hover,
  .th-mobile-menu .mega-menu > .mega-menu-item > a.mega-menu-link:focus {
    color: #1468b2 !important;
    background: #f8fafc !important;
  }

  /* Sub-menu: collapsed by default. `display: none` is NOT marked
     !important so the JS toggle (functions.php) can flip to block on tap.
     Trigger via Sassa's .th-active only — MMM's .mega-toggle-on is sticky
     through hover_intent and would prevent collapse. */
  .th-mobile-menu .mega-sub-menu {
    background: #f8fafc !important;
    padding: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    border: none !important;
    grid-template-columns: none !important;
    width: 100% !important;
    display: none;
    position: static !important;
    visibility: visible !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .th-mobile-menu .mega-menu-item.th-active > .mega-sub-menu {
    display: block !important;
  }
  .th-mobile-menu .mega-sub-menu > .mega-menu-item {
    display: block !important;
    width: 100% !important;
    float: none !important;
    border-top: 1px solid #eef2f6 !important;
  }
  .th-mobile-menu .mega-sub-menu > .mega-menu-item > a.mega-menu-link {
    display: block !important;
    padding: 12px 24px 12px 40px !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    color: #4e7599 !important;
    background: transparent !important;
    text-transform: none !important;
    height: auto !important;
    line-height: 1.4 !important;
    border: none !important;
    pointer-events: auto !important;
  }
  .th-mobile-menu .mega-sub-menu .mega-sub-menu > .mega-menu-item > a.mega-menu-link {
    padding-left: 56px !important;
    font-size: 14px !important;
  }

  /* Hide the menu-injected Book a demo (Sassa CTA in mobile header serves
     this purpose; the drawer also gets an injected CTA via functions.php). */
  .th-mobile-menu #mega-menu-item-3613 {
    display: none !important;
  }

  /* Hide MMM's caret — Sassa's .th-mean-expand is the accordion toggle. */
  .th-mobile-menu .mega-indicator {
    display: none !important;
  }

  .th-mobile-menu .mega-menu .mega-menu-link {
    position: relative !important;
    padding-right: 56px !important;
  }
  .th-mobile-menu .mega-menu > .mega-menu-item {
    position: relative !important;
  }

  .th-mobile-menu .th-mean-expand {
    position: absolute !important;
    right: 12px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    width: 32px !important;
    height: 32px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    color: #4e7599 !important;
    z-index: 2 !important;
    background: transparent !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 4px !important;
    line-height: 1 !important;
    font-size: 0 !important;
    box-shadow: none !important;
  }
  .th-mobile-menu .th-mean-expand::before {
    content: "+" !important;
    font-family: Inter, -apple-system, "system-ui", sans-serif !important;
    font-size: 22px !important;
    font-weight: 300 !important;
    color: #4e7599 !important;
    line-height: 1 !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    /* Pixel-perfect glyph centering (font baseline–independent). */
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: auto !important;
    height: auto !important;
  }
  /* Sassa parent renders a duplicate "+" icon via a::after (Font Awesome
     \f067) — suppress it. */
  .th-mobile-menu .mega-menu .mega-menu-link::after {
    content: none !important;
    display: none !important;
  }
  /* Expanded state: filled blue box with white minus glyph (no rotation —
     rotating a square border produces a diamond). */
  .th-mobile-menu .mega-menu-item.th-active > a > .th-mean-expand {
    transform: translateY(-50%) !important;
    border-color: #1468b2 !important;
    background: #1468b2 !important;
  }
  .th-mobile-menu .mega-menu-item.th-active > a > .th-mean-expand::before {
    content: "−" !important;
    font-family: Inter, -apple-system, "system-ui", sans-serif !important;
    color: #ffffff !important;
    font-size: 22px !important;
    font-weight: 300 !important;
    line-height: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
    /* Pixel-perfect glyph centering — see plus rule above. */
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
  }
}

/* ============================================================
   BLOG ARCHIVE — grid, cards + :is() archive scoping

   Waves 119-126 were scoped to `body.blog`, which WordPress only
   sets on the posts-page (/blog/). Category, tag, author, date
   archives get `body.archive` (+ a taxonomy class) and search
   results get `body.search` — none carry `body.blog`, so those
   pages fell back to raw Sassa default (dark hero, radius-30
   cards, 74 px centred title).

   All these archives render the SAME markup as /blog/ (breadcumb
   hero + content col of .col-lg-12 cards + sidebar + th-pagination
   — verified live on /blog/category/bez-kategorii/), so every
   `body.blog X` selector below was widened to
   `:is(body.blog, body.archive, body.search) X`.

   :is() takes the highest specificity among its args — each arg is
   (0,1,1), identical to the old `body.blog` — so cascade order and
   all later !important overrides are preserved unchanged.

   Single posts stay on their own `body.single-post` selectors.
   ------------------------------------------------------------
   Wave 119 — Blog archive: featured + 2-col grid (magazine).
   Sassa default renders every post as col-lg-12 (full-width
   pancake stack — 10 posts × ~1000 px = endless page).
   Convert to "featured first, 2-col rest" layout with MG card
   chrome (white bg, --mg-line border, --mg-radius corners,
   --mg-shadow on hover).
   ============================================================ */

/* Grid: first post stays full-width (featured), rest collapse to 50%. */
:is(body.blog, body.archive, body.search) .row > .col-lg-12 + .col-lg-12 {
  flex: 0 0 50%;
  max-width: 50%;
}

/* Card chrome. */
:is(body.blog, body.archive, body.search) .th-blog.blog-single {
  background: var(--mg-bg);
  border: 1px solid var(--mg-line);
  border-radius: var(--mg-radius);
  overflow: hidden;
  padding: 0 0 24px;
  margin-bottom: 28px;
  box-shadow: 0 1px 2px rgba(20, 104, 178, .04);
  transition: box-shadow .25s ease, transform .25s ease;
  height: calc(100% - 28px);
  display: flex;
  flex-direction: column;
}
:is(body.blog, body.archive, body.search) .th-blog.blog-single:hover {
  box-shadow: var(--mg-shadow);
  transform: translateY(-2px);
}

/* Featured (first) card — larger title, wider image ratio. */
:is(body.blog, body.archive, body.search) .row > .col-lg-12:first-child .th-blog.blog-single .blog-img {
  aspect-ratio: 21 / 9;
}
:is(body.blog, body.archive, body.search) .row > .col-lg-12:first-child .th-blog.blog-single .blog-title {
  font-size: 32px;
  line-height: 1.25;
}
:is(body.blog, body.archive, body.search) .row > .col-lg-12:first-child .th-blog.blog-single .blog-text {
  font-size: 16px;
  -webkit-line-clamp: 4;
  line-clamp: 4;
}

/* Image — fixed aspect ratio + zoom on hover. */
:is(body.blog, body.archive, body.search) .th-blog.blog-single .blog-img {
  margin-bottom: 0;
  border-radius: 0;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  flex-shrink: 0;
}
:is(body.blog, body.archive, body.search) .th-blog.blog-single .blog-img a,
:is(body.blog, body.archive, body.search) .th-blog.blog-single .blog-img .post-thumbnail {
  display: block;
  width: 100%;
  height: 100%;
}
:is(body.blog, body.archive, body.search) .th-blog.blog-single .blog-img img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  transition: transform .4s ease;
}
:is(body.blog, body.archive, body.search) .th-blog.blog-single:hover .blog-img img {
  transform: scale(1.04);
}

/* Content padding. */
:is(body.blog, body.archive, body.search) .th-blog.blog-single .blog-content {
  padding: 24px 28px 0;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}

/* Title — MG navy, sized down from 30 → 22. */
:is(body.blog, body.archive, body.search) .th-blog.blog-single .blog-title {
  font-family: var(--mg-font-headline);
  font-size: 22px;
  line-height: 1.35;
  font-weight: 600;
  margin: 8px 0 12px;
}
:is(body.blog, body.archive, body.search) .th-blog.blog-single .blog-title a {
  color: var(--mg-navy-deep);
  transition: color .2s ease;
}
:is(body.blog, body.archive, body.search) .th-blog.blog-single .blog-title a:hover {
  color: var(--mg-blue);
}

/* Meta — hide author (1st link) and comments (3rd link), keep date only.
   FA icons removed for cleaner row. Date stays as muted text (not link). */
:is(body.blog, body.archive, body.search) .th-blog.blog-single .blog-meta {
  order: -1;
  font-size: 13px;
  color: var(--mg-muted);
  margin: 0;
  gap: 0;
}
:is(body.blog, body.archive, body.search) .th-blog.blog-single .blog-meta a:nth-child(1),
:is(body.blog, body.archive, body.search) .th-blog.blog-single .blog-meta a:nth-child(3) {
  display: none;
}
:is(body.blog, body.archive, body.search) .th-blog.blog-single .blog-meta a i {
  display: none;
}
:is(body.blog, body.archive, body.search) .th-blog.blog-single .blog-meta a {
  color: var(--mg-muted);
  text-decoration: none;
  pointer-events: none;
  font-weight: 500;
  letter-spacing: .02em;
  text-transform: uppercase;
  font-size: 12px;
}

/* Excerpt — clamped to 3 lines so all cards stay same height. */
:is(body.blog, body.archive, body.search) .th-blog.blog-single .blog-text {
  font-size: 14px;
  line-height: 1.6;
  color: var(--mg-muted);
  margin: 4px 0 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Equal-height row so 2-col cards align bottoms. */
:is(body.blog, body.archive, body.search) .row { align-items: stretch; }
:is(body.blog, body.archive, body.search) .row > .col-lg-12 { display: flex; }

/* Mobile fallback — collapse 2-col back to 1-col under 768. */
@media (max-width: 767px) {
  :is(body.blog, body.archive, body.search) .row > .col-lg-12 + .col-lg-12 {
    flex: 0 0 100%;
    max-width: 100%;
  }
  :is(body.blog, body.archive, body.search) .row > .col-lg-12:first-child .th-blog.blog-single .blog-title {
    font-size: 24px;
  }
}

/* ============================================================
   Blog hero (.breadcumb-wrapper) on archive + single.
   Default Sassa hero is dark #1f1f1f with stock bg-image, 177px
   padding both sides (537 px tall) and centred 74 px H1 — visually
   too heavy, especially on single posts where the H1 is a full
   article title.

   Repaint as MG navy magazine hero: --mg-navy-deep bg, no image,
   left-aligned, slimmer padding. Title sized down + clamped on
   single posts so long titles don't blow up to 4 lines × 74 px.
   ============================================================ */

:is(body.blog, body.archive, body.search) .breadcumb-wrapper,
body.single-post .breadcumb-wrapper {
  background-color: var(--mg-navy-deep) !important;
  background-image: none !important;
  min-height: 0 !important;
  text-align: left;
}
:is(body.blog, body.archive, body.search) .breadcumb-wrapper { padding: 80px 0 60px !important; }
body.single-post .breadcumb-wrapper { padding: 64px 0 56px !important; }

:is(body.blog, body.archive, body.search) .breadcumb-wrapper .container,
body.single-post .breadcumb-wrapper .container {
  padding-left: 12px;
  padding-right: 12px;
  max-width: 1344px;
}
:is(body.blog, body.archive, body.search) .breadcumb-wrapper .breadcumb-content,
body.single-post .breadcumb-wrapper .breadcumb-content {
  text-align: left;
}

:is(body.blog, body.archive, body.search) .breadcumb-title {
  font-family: var(--mg-font-headline);
  font-size: 48px;
  line-height: 1.1;
  font-weight: 700;
  color: #ffffff;
  margin: 0 0 16px;
}
body.single-post .breadcumb-title {
  font-family: var(--mg-font-headline);
  font-size: clamp(28px, 3.6vw, 42px);
  line-height: 1.2;
  font-weight: 700;
  color: #ffffff;
  margin: 0 0 16px;
  max-width: 920px;
}

/* Breadcrumb menu — Home / Blog / [active] with thin separators. */
:is(body.blog, body.archive, body.search) .breadcumb-menu,
body.single-post .breadcumb-menu {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 14px;
  color: rgba(255, 255, 255, .7);
}
:is(body.blog, body.archive, body.search) .breadcumb-menu li,
body.single-post .breadcumb-menu li {
  display: inline-flex;
  align-items: center;
}
:is(body.blog, body.archive, body.search) .breadcumb-menu li:not(:first-child)::before,
body.single-post .breadcumb-menu li:not(:first-child)::before {
  content: '/';
  margin-right: 12px;
  color: rgba(255, 255, 255, .35);
}
:is(body.blog, body.archive, body.search) .breadcumb-menu a,
body.single-post .breadcumb-menu a {
  color: rgba(255, 255, 255, .7);
  text-decoration: none;
  transition: color .2s ease;
}
:is(body.blog, body.archive, body.search) .breadcumb-menu a:hover,
body.single-post .breadcumb-menu a:hover { color: #ffffff; }
:is(body.blog, body.archive, body.search) .breadcumb-menu li.active,
body.single-post .breadcumb-menu li.active {
  color: #ffffff;
  font-weight: 500;
}

/* Mobile: smaller archive H1, even tighter padding. */
@media (max-width: 767px) {
  :is(body.blog, body.archive, body.search) .breadcumb-wrapper { padding: 48px 0 36px !important; }
  body.single-post .breadcumb-wrapper { padding: 40px 0 32px !important; }
  :is(body.blog, body.archive, body.search) .breadcumb-title { font-size: 32px; }
}

/* ============================================================
   Single-post content typography.
   Default Sassa body copy is Inter 16/26 #5c6574 — readable but
   bland. Lift to 17/1.7 with MG ink, restyle headings as navy
   sub-titles, and add blockquote/list/link styles that match the
   solutions pages.
   ============================================================ */

body.single-post .blog-single .blog-content {
  font-family: var(--mg-font-body);
  font-size: 17px;
  line-height: 1.7;
  color: var(--mg-ink);
}
body.single-post .blog-single .blog-content > * + * {
  margin-top: 18px;
}
body.single-post .blog-single .blog-content h2 {
  font-family: var(--mg-font-headline);
  font-size: 28px;
  line-height: 1.3;
  font-weight: 700;
  color: var(--mg-navy-deep);
  margin: 40px 0 16px;
}
body.single-post .blog-single .blog-content h3 {
  font-family: var(--mg-font-headline);
  font-size: 22px;
  line-height: 1.35;
  font-weight: 600;
  color: var(--mg-navy-deep);
  margin: 32px 0 12px;
}
body.single-post .blog-single .blog-content h4 {
  font-family: var(--mg-font-headline);
  font-size: 18px;
  font-weight: 600;
  color: var(--mg-navy-deep);
  margin: 24px 0 10px;
}
body.single-post .blog-single .blog-content p {
  margin: 0 0 18px;
}
body.single-post .blog-single .blog-content a:not(.th-btn):not(.btn) {
  color: var(--mg-blue);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
  transition: color .2s ease;
}
body.single-post .blog-single .blog-content a:not(.th-btn):not(.btn):hover {
  color: var(--mg-navy-deep);
}
body.single-post .blog-single .blog-content ul,
body.single-post .blog-single .blog-content ol {
  margin: 0 0 18px;
  padding-left: 24px;
}
body.single-post .blog-single .blog-content li {
  margin-bottom: 8px;
}
body.single-post .blog-single .blog-content blockquote {
  border-left: 4px solid var(--mg-blue);
  background: var(--mg-bg-soft);
  padding: 20px 24px;
  margin: 24px 0;
  font-style: italic;
  color: var(--mg-ink);
  border-radius: 0 var(--mg-radius) var(--mg-radius) 0;
}
body.single-post .blog-single .blog-content blockquote p:last-child {
  margin-bottom: 0;
}
body.single-post .blog-single .blog-content strong,
body.single-post .blog-single .blog-content b {
  color: var(--mg-navy-deep);
  font-weight: 600;
}
body.single-post .blog-single .blog-content img {
  border-radius: var(--mg-radius);
  max-width: 100%;
  height: auto;
  margin: 24px 0;
}
body.single-post .blog-single .blog-content hr {
  border: 0;
  border-top: 1px solid var(--mg-line);
  margin: 32px 0;
}

/* Single-post featured image — match card radius (was 10px). */
body.single-post .blog-single > .blog-img {
  border-radius: var(--mg-radius);
  overflow: hidden;
  margin-bottom: 32px;
}
body.single-post .blog-single > .blog-img img {
  border-radius: 0;
}

/* Post meta row above the article body — same uppercase micro style
   as the archive cards (date only, no FA icons, no clickable links). */
body.single-post .blog-single > .blog-content > .blog-meta,
body.single-post .blog-single .blog-meta {
  font-size: 12px;
  color: var(--mg-muted);
  margin: 0 0 16px;
  letter-spacing: .04em;
  text-transform: uppercase;
}
body.single-post .blog-single .blog-meta a {
  color: var(--mg-muted);
  text-decoration: none;
}
body.single-post .blog-single .blog-meta a i {
  margin-right: 6px;
  font-size: 11px;
}

/* ============================================================
   Single-post sidebar widgets as MG cards.
   Sassa renders 7 widgets (search, categories, recent posts, tag
   cloud, author box…) as bare panels with no chrome. Wrap each
   one as a white --mg-radius card with a thin --mg-line border
   and a navy widget title that mirrors solutions-page h3 sizing.
   ============================================================ */

body.single-post .sidebar-area .widget {
  background: var(--mg-bg);
  border: 1px solid var(--mg-line);
  border-radius: var(--mg-radius);
  padding: 24px;
  margin-bottom: 24px;
  box-shadow: 0 1px 2px rgba(20, 104, 178, .04);
}

body.single-post .sidebar-area .widget_title,
body.single-post .sidebar-area .widget-title,
body.single-post .sidebar-area .wp-block-heading {
  font-family: var(--mg-font-headline);
  font-size: 18px;
  font-weight: 600;
  color: var(--mg-navy-deep);
  margin: 0 0 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--mg-line);
  line-height: 1.3;
}

body.single-post .sidebar-area .widget a {
  color: var(--mg-ink);
  text-decoration: none;
  transition: color .2s ease;
}
body.single-post .sidebar-area .widget a:hover {
  color: var(--mg-blue);
}

/* Search widget — MG input + blue submit. */
body.single-post .sidebar-area .widget_search input[type="search"],
body.single-post .sidebar-area .wp-block-search input[type="search"] {
  border: 1px solid var(--mg-line);
  border-radius: var(--mg-radius);
  padding: 11px 14px;
  font-family: var(--mg-font-body);
  font-size: 14px;
  color: var(--mg-ink);
  width: 100%;
  background: var(--mg-bg);
  transition: border-color .2s ease, box-shadow .2s ease;
}
body.single-post .sidebar-area .widget_search input[type="search"]:focus,
body.single-post .sidebar-area .wp-block-search input[type="search"]:focus {
  outline: none;
  border-color: var(--mg-blue);
  box-shadow: 0 0 0 3px rgba(20, 104, 178, .12);
}
body.single-post .sidebar-area .widget_search input[type="submit"],
body.single-post .sidebar-area .wp-block-search button {
  background: var(--mg-blue);
  color: #ffffff;
  border: 0;
  border-radius: var(--mg-radius);
  padding: 11px 18px;
  font-family: var(--mg-font-body);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background .2s ease;
}
body.single-post .sidebar-area .widget_search input[type="submit"]:hover,
body.single-post .sidebar-area .wp-block-search button:hover {
  background: var(--mg-navy-deep);
}

/* Categories + recent posts — list with thin dividers. */
body.single-post .sidebar-area .wp-block-categories,
body.single-post .sidebar-area .wp-block-categories-list,
body.single-post .sidebar-area .widget_categories ul,
body.single-post .sidebar-area .widget_recent_entries ul,
body.single-post .sidebar-area .wp-block-latest-posts {
  list-style: none;
  margin: 0;
  padding: 0;
}
body.single-post .sidebar-area .wp-block-categories li,
body.single-post .sidebar-area .widget_categories ul li,
body.single-post .sidebar-area .widget_recent_entries ul li,
body.single-post .sidebar-area .wp-block-latest-posts li {
  padding: 10px 0;
  border-bottom: 1px solid var(--mg-line);
  font-size: 14px;
  line-height: 1.5;
}
body.single-post .sidebar-area .wp-block-categories li:last-child,
body.single-post .sidebar-area .widget_categories ul li:last-child,
body.single-post .sidebar-area .widget_recent_entries ul li:last-child,
body.single-post .sidebar-area .wp-block-latest-posts li:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}
body.single-post .sidebar-area .wp-block-categories li:first-child,
body.single-post .sidebar-area .widget_categories ul li:first-child,
body.single-post .sidebar-area .widget_recent_entries ul li:first-child,
body.single-post .sidebar-area .wp-block-latest-posts li:first-child {
  padding-top: 0;
}

/* Tag cloud — pill-style chips. */
body.single-post .sidebar-area .tagcloud,
body.single-post .sidebar-area .wp-block-tag-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
body.single-post .sidebar-area .tagcloud a,
body.single-post .sidebar-area .wp-block-tag-cloud a {
  display: inline-block;
  padding: 6px 14px;
  background: var(--mg-bg-soft);
  color: var(--mg-ink) !important;
  border-radius: 100px;
  font-size: 13px !important;
  font-weight: 500;
  text-decoration: none;
  transition: background .2s ease, color .2s ease;
  line-height: 1.4;
}
body.single-post .sidebar-area .tagcloud a:hover,
body.single-post .sidebar-area .wp-block-tag-cloud a:hover {
  background: var(--mg-blue);
  color: #ffffff !important;
}

/* Author widget — centred avatar + name. */
body.single-post .sidebar-area .widget-author {
  text-align: center;
}
body.single-post .sidebar-area .widget-author img,
body.single-post .sidebar-area .widget-author .avatar {
  border-radius: 50%;
  width: 80px;
  height: 80px;
  margin: 0 auto 16px;
}
body.single-post .sidebar-area .widget-author .author-name,
body.single-post .sidebar-area .widget-author h4,
body.single-post .sidebar-area .widget-author h5 {
  font-family: var(--mg-font-headline);
  color: var(--mg-navy-deep);
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 8px;
}

/* ============================================================
   Pagination (.th-pagination) as round MG chips.
   Sassa renders plain <ul><li><a>1</a></li>… — no styling, no
   gap, just stacked text. Restyle as 44 × 44 round chips with
   navy text + --mg-line border. Active = filled --mg-blue; hover
   lifts -1 px with blue border.
   ============================================================ */

.th-pagination {
  margin: 40px 0 0;
}
.th-pagination ul {
  display: flex;
  gap: 8px;
  justify-content: center;
  align-items: center;
  list-style: none;
  padding: 0;
  margin: 0;
}
.th-pagination li {
  display: inline-flex;
}
.th-pagination a {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--mg-bg);
  border: 1px solid var(--mg-line);
  color: var(--mg-navy-deep);
  font-family: var(--mg-font-body);
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  transition: background .2s ease, color .2s ease, border-color .2s ease, transform .15s ease;
}
.th-pagination a:hover {
  border-color: var(--mg-blue);
  color: var(--mg-blue);
  transform: translateY(-1px);
}
.th-pagination a.active {
  background: var(--mg-blue);
  color: #ffffff;
  border-color: var(--mg-blue);
}
.th-pagination a.active:hover {
  background: var(--mg-navy-deep);
  border-color: var(--mg-navy-deep);
  color: #ffffff;
}
.th-pagination i {
  font-size: 14px;
}

/* ============================================================
   BLOG SINGLE-POST — meta / sidebar / card fixes (round 1)

   Discoveries from DOM audit:
   - Blog archive HAS a sidebar too (col-xxl-4 / col-lg-5) — Wave
     122 only styled sidebar on body.single-post, so archive
     sidebar fell back to Sassa default chrome.
   - "Read more" links on archive cards use class .line-btn.
   - Single-post meta still showed author + comments (Wave 121
     styled the row but didn't hide the unwanted links).
   - Sassa renders a default content-card chrome on .blog-single
     (border + radius 30 + padding 40) — clashes with our hero +
     2-col-with-sidebar layout (creates a card-in-a-card look).
   ============================================================ */

/* (A) Sidebar styling — extend Wave 122 to ALL .sidebar-area
   (archive + single), not just single-post. Drop the prefix. */
.sidebar-area .widget {
  background: var(--mg-bg);
  border: 1px solid var(--mg-line);
  border-radius: var(--mg-radius);
  padding: 24px;
  margin-bottom: 24px;
  box-shadow: 0 1px 2px rgba(20, 104, 178, .04);
}
.sidebar-area .widget_title,
.sidebar-area .widget-title,
.sidebar-area .wp-block-heading {
  font-family: var(--mg-font-headline);
  font-size: 18px;
  font-weight: 600;
  color: var(--mg-navy-deep);
  margin: 0 0 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--mg-line);
  line-height: 1.3;
}
.sidebar-area .widget a {
  color: var(--mg-ink);
  text-decoration: none;
  transition: color .2s ease;
}
.sidebar-area .widget a:hover {
  color: var(--mg-blue);
}
.sidebar-area .widget_search input[type="search"],
.sidebar-area .wp-block-search input[type="search"] {
  border: 1px solid var(--mg-line);
  border-radius: var(--mg-radius);
  padding: 11px 14px;
  font-family: var(--mg-font-body);
  font-size: 14px;
  color: var(--mg-ink);
  width: 100%;
  background: var(--mg-bg);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.sidebar-area .widget_search input[type="search"]:focus,
.sidebar-area .wp-block-search input[type="search"]:focus {
  outline: none;
  border-color: var(--mg-blue);
  box-shadow: 0 0 0 3px rgba(20, 104, 178, .12);
}
.sidebar-area .widget_search input[type="submit"],
.sidebar-area .wp-block-search button {
  background: var(--mg-blue);
  color: #ffffff;
  border: 0;
  border-radius: var(--mg-radius);
  padding: 11px 18px;
  font-family: var(--mg-font-body);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background .2s ease;
}
.sidebar-area .widget_search input[type="submit"]:hover,
.sidebar-area .wp-block-search button:hover {
  background: var(--mg-navy-deep);
}
.sidebar-area .wp-block-categories li,
.sidebar-area .widget_categories ul li,
.sidebar-area .widget_recent_entries ul li,
.sidebar-area .wp-block-latest-posts li {
  padding: 10px 0;
  border-bottom: 1px solid var(--mg-line);
  font-size: 14px;
  line-height: 1.5;
  list-style: none;
}
.sidebar-area .wp-block-categories li:last-child,
.sidebar-area .widget_categories ul li:last-child,
.sidebar-area .widget_recent_entries ul li:last-child,
.sidebar-area .wp-block-latest-posts li:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}
.sidebar-area .wp-block-categories li:first-child,
.sidebar-area .widget_categories ul li:first-child,
.sidebar-area .widget_recent_entries ul li:first-child,
.sidebar-area .wp-block-latest-posts li:first-child {
  padding-top: 0;
}
.sidebar-area .tagcloud a,
.sidebar-area .wp-block-tag-cloud a {
  display: inline-block;
  padding: 6px 14px;
  background: var(--mg-bg-soft);
  color: var(--mg-ink) !important;
  border-radius: 100px;
  font-size: 13px !important;
  font-weight: 500;
  text-decoration: none;
  transition: background .2s ease, color .2s ease;
  line-height: 1.4;
  margin: 4px 4px 4px 0;
}
.sidebar-area .tagcloud a:hover,
.sidebar-area .wp-block-tag-cloud a:hover {
  background: var(--mg-blue);
  color: #ffffff !important;
}
/* Sassa appends a → / » glyph via ::after on category links — kill it. */
.sidebar-area .wp-block-categories a::after,
.sidebar-area .widget_categories a::after,
.sidebar-area li > a::after {
  content: none !important;
  display: none !important;
}

/* (B) Single-post meta — hide author (1st link) and comments (3rd link).
   Wave 121 styled the row uppercase muted, this removes the bits Adam
   wanted gone per "option 4B". */
body.single-post .blog-single .blog-meta a:nth-child(1),
body.single-post .blog-single .blog-meta a:nth-child(3) {
  display: none !important;
}
body.single-post .blog-single .blog-meta a i {
  display: none !important;
}

/* (C) Strip Sassa default content-card chrome on single posts.
   Default is border + radius 30 + padding 40 — collides with our
   hero + sidebar layout (card-in-a-card visual noise). */
body.single-post .th-blog.blog-single {
  border: 0 !important;
  background: transparent !important;
  border-radius: 0 !important;
  padding: 0 !important;
}

/* (D) "Read more" button on archive cards (Sassa class .line-btn).
   Default is a thin underline glyph link — restyle as MG uppercase
   micro-CTA in --mg-blue with arrow-grow on hover. */
:is(body.blog, body.archive, body.search) .th-blog.blog-single .line-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 16px;
  font-family: var(--mg-font-headline);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--mg-blue);
  text-decoration: none;
  border-bottom: 0;
  transition: color .2s ease, gap .2s ease;
}
:is(body.blog, body.archive, body.search) .th-blog.blog-single .line-btn::after {
  content: '→';
  font-size: 14px;
  transition: transform .2s ease;
}
:is(body.blog, body.archive, body.search) .th-blog.blog-single .line-btn:hover {
  color: var(--mg-navy-deep);
  gap: 10px;
}

/* ============================================================
   Single-post bottom: share + author bio + comments.

   DOM map (from live audit):
   - .share-links.clearfix
       > .row > .col-md-auto > .share-links_wrapp
         > span.share-links-title  ("Share:")
         > .social-links > a × 4 (FB, Twitter, LinkedIn, Pinterest)
           each with <i class="fab fa-..."></i>
   - .widget.widget-author
       > .author-widget-wrap
         > .avater > img
         > .avater-content
           > .author-info > h3.name > a.text-inherit > span.text
           > p.author-bio
           > .social-links
   ============================================================ */

/* ----- Share block ----- */
body.single-post .share-links {
  margin: 40px 0 0;
  padding: 24px 28px;
  background: var(--mg-bg-soft);
  border-radius: var(--mg-radius);
  border: 1px solid var(--mg-line);
}
body.single-post .share-links .share-links_wrapp {
  display: flex;
  align-items: center;
  gap: 16px;
}
body.single-post .share-links-title {
  font-family: var(--mg-font-headline);
  font-size: 14px;
  font-weight: 600;
  color: var(--mg-navy-deep);
  letter-spacing: .04em;
  text-transform: uppercase;
}
body.single-post .share-links .social-links {
  display: inline-flex;
  gap: 8px;
}
body.single-post .share-links .social-links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--mg-bg);
  border: 1px solid var(--mg-line);
  color: var(--mg-navy-deep);
  font-size: 14px;
  text-decoration: none;
  transition: background .2s ease, color .2s ease, border-color .2s ease, transform .15s ease;
}
body.single-post .share-links .social-links a:hover {
  background: var(--mg-blue);
  border-color: var(--mg-blue);
  color: #ffffff;
  transform: translateY(-1px);
}
body.single-post .share-links .social-links a i {
  font-size: 14px;
}

/* ----- Author bio widget (.widget-author at post bottom) -----
   This widget renders in the post body (not sidebar) — needs its
   own chrome distinct from the sidebar widgets above. */
body.single-post .widget.widget-author {
  margin: 32px 0 0;
  padding: 28px 32px;
  background: var(--mg-bg);
  border: 1px solid var(--mg-line);
  border-radius: var(--mg-radius);
  box-shadow: 0 1px 2px rgba(20, 104, 178, .04);
}
body.single-post .widget-author .author-widget-wrap {
  display: flex;
  align-items: flex-start;
  gap: 24px;
}
body.single-post .widget-author .avater {
  flex-shrink: 0;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--mg-bg-soft);
}
body.single-post .widget-author .avater img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}
body.single-post .widget-author .avater-content {
  flex: 1 1 auto;
  min-width: 0;
}
body.single-post .widget-author .author-info {
  margin-bottom: 8px;
}
body.single-post .widget-author .name,
body.single-post .widget-author h3.name {
  font-family: var(--mg-font-headline);
  font-size: 18px;
  font-weight: 600;
  color: var(--mg-navy-deep);
  margin: 0 0 4px;
  line-height: 1.3;
}
body.single-post .widget-author .name a {
  color: inherit;
  text-decoration: none;
  transition: color .2s ease;
}
body.single-post .widget-author .name a:hover {
  color: var(--mg-blue);
}
body.single-post .widget-author .author-info .text {
  font-size: 13px;
  color: var(--mg-muted);
  letter-spacing: .04em;
  text-transform: uppercase;
}
body.single-post .widget-author .author-bio {
  font-size: 14px;
  line-height: 1.6;
  color: var(--mg-ink);
  margin: 8px 0 12px;
}
body.single-post .widget-author .social-links {
  display: inline-flex;
  gap: 8px;
}
body.single-post .widget-author .social-links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--mg-bg-soft);
  color: var(--mg-navy-deep);
  font-size: 12px;
  text-decoration: none;
  transition: background .2s ease, color .2s ease;
}
body.single-post .widget-author .social-links a:hover {
  background: var(--mg-blue);
  color: #ffffff;
}

/* ----- "Comments are closed" plain text ----- */
body.single-post .no-comments,
body.single-post .comments-area .no-comments,
body.single-post .comments-area > p {
  margin: 32px 0 0;
  padding: 20px 24px;
  text-align: center;
  font-size: 13px;
  color: var(--mg-muted);
  background: var(--mg-bg-soft);
  border-radius: var(--mg-radius);
  letter-spacing: .04em;
  text-transform: uppercase;
}

/* Bare "Comments are closed" string sometimes renders outside any
   .comments-area wrapper — catch a heading-style stub too. */
body.single-post .comment-respond p.comments-closed,
body.single-post h2.comments-closed,
body.single-post p.comments-closed {
  margin: 32px 0 0;
  padding: 20px 24px;
  text-align: center;
  font-size: 13px;
  font-weight: 500;
  color: var(--mg-muted);
  background: var(--mg-bg-soft);
  border-radius: var(--mg-radius);
  letter-spacing: .04em;
  text-transform: uppercase;
}

/* ============================================================
   BLOG — search / cards / categories / pagination fixes (round 2)

   reason as Wave 124.

   Issues found:
   - Hero "Latest News" sits too tight under the navbar (80 px
     top padding isn't enough breathing room).
   - Sidebar search input + submit button are flush against each
     other (no gap between them).
   - "READ MORE" shows DOUBLE arrow: Sassa renders <i class=
     "fa-solid fa-angles-right"> (=">>") AND our ::after '→' both.
   - Card image hover triggers Sassa's native opacity overlay on
     top of our scale(1.04) — looks jittery.
   - Sidebar Categories "Bez kategorii" rendered as a giant purple
     pill button (Sassa default cat-item styling — padding 16 45
     19 25, border-radius 100px, --theme-color bg).
   - Recent Posts widget calendar icon coloured Sassa's primary
     purple (var(--theme-color) = #6B61FC).
   - Pagination active page rendered purple too — parent .th-
     pagination a.active rule applies var(--theme-color) and our
     Wave 123 selector has identical specificity so cascade order
     decides (parent loaded later wins).
   ============================================================ */

/* (A) Hero padding — give "Latest News" room above. */
:is(body.blog, body.archive, body.search) .breadcumb-wrapper {
  padding: 110px 0 80px !important;
}

/* (B) Sidebar search — gap between input and submit. */
.sidebar-area .widget_search form,
.sidebar-area .wp-block-search form,
.sidebar-area .wp-block-search__inside-wrapper {
  display: flex !important;
  gap: 10px;
  align-items: stretch;
}
.sidebar-area .widget_search input[type="search"],
.sidebar-area .wp-block-search input[type="search"] {
  flex: 1 1 auto;
  min-width: 0;
}

/* (C) READ MORE — kill the inline Sassa <i class="fa-angles-right">
   so only our ::after '→' shows. */
:is(body.blog, body.archive, body.search) .th-blog.blog-single .line-btn > i {
  display: none !important;
}

/* (D) Card image hover — disable Sassa's overlay/opacity hooks on
   the thumbnail anchor; keep only our clean scale(1.04). */
:is(body.blog, body.archive, body.search) .th-blog.blog-single .blog-img a::before,
:is(body.blog, body.archive, body.search) .th-blog.blog-single .blog-img a::after,
:is(body.blog, body.archive, body.search) .th-blog.blog-single .blog-img .post-thumbnail::before,
:is(body.blog, body.archive, body.search) .th-blog.blog-single .blog-img .post-thumbnail::after {
  content: none !important;
  display: none !important;
}
:is(body.blog, body.archive, body.search) .th-blog.blog-single .blog-img a:hover,
:is(body.blog, body.archive, body.search) .th-blog.blog-single .blog-img .post-thumbnail:hover {
  opacity: 1 !important;
  background: transparent !important;
}
:is(body.blog, body.archive, body.search) .th-blog.blog-single:hover .blog-img img {
  transform: scale(1.04) !important;
  opacity: 1 !important;
}

/* (E) Categories widget — Sassa default styles cat-item as a giant
   purple pill. Reset to plain padded link rows. */
.sidebar-area .wp-block-categories li.cat-item,
.sidebar-area .widget_categories li.cat-item {
  padding: 10px 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  display: block !important;
}
.sidebar-area .wp-block-categories li.cat-item a,
.sidebar-area .widget_categories li.cat-item a {
  padding: 0 !important;
  background: transparent !important;
  border-radius: 0 !important;
  color: var(--mg-ink) !important;
  display: inline !important;
  width: auto !important;
  font-weight: 500;
  font-size: 14px;
}
.sidebar-area .wp-block-categories li.cat-item a:hover,
.sidebar-area .widget_categories li.cat-item a:hover {
  color: var(--mg-blue) !important;
  background: transparent !important;
}
.sidebar-area .wp-block-categories li.cat-item .count,
.sidebar-area .widget_categories li.cat-item .count {
  color: var(--mg-muted);
  font-weight: 400;
  margin-left: 4px;
}

/* (F) FA icons inside sidebar widgets — Sassa colours them with
   var(--theme-color) (purple). Force them muted. */
.sidebar-area .widget i,
.sidebar-area .widget i.fa-regular,
.sidebar-area .widget i.fa-solid,
.sidebar-area .widget i.fa-light,
.sidebar-area .widget i[class*="fa-calendar"],
.sidebar-area .widget i[class*="fa-user"],
.sidebar-area .widget i[class*="fa-clock"] {
  color: var(--mg-muted) !important;
}

/* (G) Pagination — Sassa parent .th-pagination a.active applies
   var(--theme-color) (purple). Force our blue with !important +
   `body` prefix to win specificity tie. */
body .th-pagination a,
body .th-pagination span {
  background: var(--mg-bg) !important;
  color: var(--mg-navy-deep) !important;
  border: 1px solid var(--mg-line) !important;
}
body .th-pagination a:hover,
body .th-pagination span:hover {
  background: var(--mg-bg) !important;
  color: #1468b2 !important;
  border-color: #1468b2 !important;
}
body .th-pagination a.active,
body .th-pagination span.active {
  background: #1468b2 !important;
  color: #ffffff !important;
  border-color: #1468b2 !important;
}
body .th-pagination a.active:hover,
body .th-pagination span.active:hover {
  background: #2a3a6b !important;
  color: #ffffff !important;
  border-color: #2a3a6b !important;
}

/* ============================================================
   Categories widget: kill Sassa link ornaments.

   Sassa renders each .cat-item <a> with a 1 px border box AND an
   absolutely-positioned Font Awesome arrow (a::before, pinned
   right: 25px, coloured --theme-color = #6B61FC purple). On hover
   Sassa flips the arrow to white → invisible on the white card.

   In a plain category list both are noise (the whole row is
   already a link, and the rest of the sidebar — recent posts, tag
   cloud — has no such ornaments). Strip border + arrow so category
   rows match the other widgets.

   ============================================================ */
.sidebar-area .cat-item a {
  border: 0 !important;
  padding: 0 !important;
}
.sidebar-area .cat-item a::before,
.sidebar-area .cat-item a::after {
  content: none !important;
  display: none !important;
}

/* ============================================================
   Single-post fixes (hero space + author avatar +
   "Comments are closed" heading).

   Three issues from Adam's live single-post screenshots:

   (1) Hero title sat flush against the navbar — single-post
       breadcumb padding-top was 64 px (Wave 120), while the
       archive got bumped to 110 px in Wave 126. The single-post
       title is large + multi-line, so 64 px let the sticky navbar
       overlap it. Match the archive: 110/80.

   (2) Author-bio avatar rendered as a 189×84 rounded-rect (Sassa
       default radius 15 px). Wave 125 targeted it as
       `body.single-post .widget-author .avater` — specificity
       (0,3,1) — but Sassa's
       `.widget.widget-author .author-widget-wrap .avater` is
       (0,4,0) and won, so radius stayed 15 and flex-grow stretched
       the width to 189. Re-target with the SAME depth as Sassa +
       !important, and pin width with min/max + flex:0 0 to defeat
       the flex-grow.

   (3) "Comments are closed" rendered as h3.inner-title at 36 px
       inside .blog-comment-area — looked like a section heading.
       Wave 125 only matched .comments-closed / .no-comments, never
       .blog-comment-area .inner-title. Shrink to a 13 px uppercase
       muted end-of-post label.

   ============================================================ */

/* (1) Single hero — match archive breathing room. */
body.single-post .breadcumb-wrapper {
  padding-top: 110px !important;
  padding-bottom: 80px !important;
}

/* (2) Author avatar — force circular 84×84, defeat Sassa radius
   (0,4,0) and flex-grow stretch. */
body.single-post .widget.widget-author .author-widget-wrap {
  display: flex !important;
  align-items: center !important;
  gap: 20px !important;
}
body.single-post .widget.widget-author .author-widget-wrap .avater {
  width: 84px !important;
  height: 84px !important;
  min-width: 84px !important;
  max-width: 84px !important;
  flex: 0 0 84px !important;
  border-radius: 50% !important;
  overflow: hidden !important;
}
body.single-post .widget.widget-author .author-widget-wrap .avater img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 50% !important;
}

/* (3) "Comments are closed" — demote from 36 px heading to a quiet
   end-of-post label. */
body.single-post .blog-comment-area .inner-title {
  font-size: 13px !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  letter-spacing: .04em !important;
  color: var(--mg-muted) !important;
  margin: 24px 0 0 !important;
}

/* ============================================================
   Breadcrumb: kill double separator.

   Sassa injects a Font Awesome arrow "→" after every breadcrumb
   <li> (li::after), and our Wave 120 added a "/" before every li
   except the first (li::before). Result was an amateurish double
   separator: "Home →  /  Bez kategorii →  /  Title".

   Drop Sassa's arrow, keep the single "/" — the conventional,
   cleaner breadcrumb separator. Applies on archive + single.

   Note (not CSS): "Bez kategorii" in the trail is the default
   Uncategorized category (posts have no real category assigned)
   — fix by assigning categories in wp-admin.

   ============================================================ */
:is(body.blog, body.archive, body.search, body.single-post) .breadcumb-menu li::after {
  content: none !important;
  display: none !important;
}

/* ============================================================
   404 page (body.error404).

   Default Sassa 404 = near-black breadcumb hero (#1f1f1f + stock
   bg image, 177px padding) titled "Error Page", then a section
   with a huge PURPLE error-2.svg graphic (#6B61FC, off-brand),
   the title, text and a purple pill button. Three competing
   "error" signals + the wrong brand colour.

   Rebuild as one calm, centred MG screen:
   - Hide the redundant breadcumb hero ("Error Page" duplicated
     the message below anyway).
   - Hide the purple SVG graphic — it's an <img>, can't be
     recoloured via CSS — and replace it with a single navy "404"
     numeral via ::before on .error-content.
   - Navy headline, muted body, and a BLUE secondary button.
     Deliberately NOT orange: the site-wide pre-footer "Book a
     demo" CTA renders below this and owns the single orange
     primary CTA (brand rule: pomarańcz = TYLKO primary CTA).

   Note (NOT CSS — fix in wp-admin → Sassa Options → 404):
   the copy lives in Redux options, not the template:
     sassa_error_title       = "Sorry! Page did not found"  ← broken grammar
     sassa_error_description = "...Try using the search..."  ← no search here
     sassa_error_btn_text    = "Return To Home"
   Suggested: title "Page not found", btn "Back to homepage".

   ============================================================ */
body.error404 .breadcumb-wrapper.custom-error-class { display: none !important; }
body.error404 .error-img { display: none !important; }

body.error404 section.space { padding: clamp(72px, 11vh, 128px) 0 !important; }

body.error404 .error-content {
  max-width: 640px !important;
  margin: 0 auto !important;
  text-align: center !important;
}
body.error404 .error-content::before {
  content: "404";
  display: block;
  font-family: var(--mg-font-headline);
  font-weight: 800;
  font-size: clamp(72px, 13vw, 132px);
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--mg-navy-deep);
  margin-bottom: 6px;
}
body.error404 .error-title {
  font-family: var(--mg-font-headline) !important;
  font-size: clamp(24px, 3.2vw, 32px) !important;
  font-weight: 700 !important;
  color: var(--mg-navy-deep) !important;
  margin: 0 0 14px !important;
}
body.error404 .error-text {
  font-family: var(--mg-font-body) !important;
  font-size: 16px !important;
  line-height: 1.7 !important;
  color: var(--mg-muted) !important;
  max-width: 480px !important;
  margin: 0 auto 28px !important;
}
/* Secondary (blue) button — leaves orange to the pre-footer CTA. */
body.error404 .error-content .th-btn {
  background-color: var(--mg-blue) !important;
  background-image: none !important;
  color: #ffffff !important;
  border: 1px solid var(--mg-blue) !important;
  border-radius: var(--mg-radius) !important;
  font-family: var(--mg-font-body) !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  padding: 13px 26px !important;
  box-shadow: none !important;
  transition: background-color .15s ease, transform .15s ease, box-shadow .15s ease !important;
}
body.error404 .error-content .th-btn:hover {
  background-color: #0f5290 !important;
  border-color: #0f5290 !important;
  color: #ffffff !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 14px rgba(20, 104, 178, .28) !important;
}

/* ============================================================
   Videos page (/videos/) custom block.

   The /videos/ page (page-id-4167) was an unbuilt Sassa demo
   placeholder (a "Job Offers" widget). We rebuild it as a custom
   HTML block — see themes/sassa-child/page-blocks/videos.html —
   that mirrors the old monitglass.com/video: a navy magazine hero
   (matches the blog hero) + alternating feature rows, one per
   YouTube demo. Click-to-play facade (thumbnail + play button →
   youtube-nocookie iframe) keeps the page light; facade JS lives
   in functions.php (wp_footer).

   All selectors are scoped under .mg-videos and namespaced (BEM):
   self-contained, no page-id coupling, and the .mg-videos prefix
   raises specificity to (0,2,x) so Sassa's global element rules
   don't leak in — verified on the live page via getComputedStyle,
   no !important needed.

   Bleed: the host Elementor section is already full-width with
   zero padding, so the hero spans edge-to-edge without a 100vw
   trick. If dropped into a padded section, set that section to
   Full Width + 0 padding in Elementor.

   ============================================================ */
.mg-videos { font-family: var(--mg-font-body); color: var(--mg-ink); }

/* --- Hero (navy magazine band, matches blog hero) --- */
.mg-videos .mg-videos__hero {
  background: var(--mg-navy-deep);
  color: #fff;
  padding: 110px 0 80px;
}
.mg-videos .mg-videos__rail {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 24px;
}
.mg-videos .mg-videos__eyebrow {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #9fb3d8;
  margin: 0 0 14px;
}
.mg-videos .mg-videos__title {
  font-family: var(--mg-font-headline);
  font-weight: 700;
  font-size: clamp(30px, 4vw, 48px);
  line-height: 1.12;
  letter-spacing: -.01em;
  color: #fff;
  margin: 0;
}
.mg-videos .mg-videos__lede {
  font-size: 18px;
  line-height: 1.6;
  color: rgba(255, 255, 255, .82);
  margin: 18px 0 0;
  max-width: 62ch;
}

/* --- Video list + alternating rows --- */
.mg-videos .mg-videos__list {
  padding-top: 72px;
  padding-bottom: 96px;
  display: flex;
  flex-direction: column;
  gap: 64px;
}
.mg-videos .mg-vrow {
  display: flex;
  align-items: center;
  gap: 48px;
}
.mg-videos .mg-vrow:nth-child(even) { flex-direction: row-reverse; }
.mg-videos .mg-vrow__media { flex: 1 1 0; min-width: 0; }
.mg-videos .mg-vrow__body  { flex: 1 1 0; min-width: 0; }
.mg-videos .mg-vrow__title {
  font-family: var(--mg-font-headline);
  font-weight: 700;
  font-size: clamp(20px, 2.2vw, 26px);
  line-height: 1.25;
  color: var(--mg-navy-deep);
  margin: 0 0 14px;
}
.mg-videos .mg-vrow__text {
  font-size: 16px;
  line-height: 1.7;
  color: var(--mg-muted);
  margin: 0;
}

/* --- Click-to-play facade (thumbnail + play button) --- */
.mg-videos .mg-facade {
  display: block;
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  padding: 0;
  border: 1px solid var(--mg-line);
  border-radius: var(--mg-radius);
  overflow: hidden;
  cursor: pointer;
  background: #0b1220;
  box-shadow: var(--mg-shadow);
  transition: transform .25s ease, box-shadow .25s ease;
}
.mg-videos .mg-facade:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(20, 40, 80, .10), 0 16px 40px rgba(20, 40, 80, .12);
}
.mg-videos .mg-facade__thumb {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  transition: transform .4s ease;
}
.mg-videos .mg-facade:hover .mg-facade__thumb { transform: scale(1.04); }
/* dark scrim so the play button stays legible on bright thumbnails */
.mg-videos .mg-facade::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(8, 14, 28, .05), rgba(8, 14, 28, .30));
  pointer-events: none;
}
.mg-videos .mg-facade__btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  width: 72px;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(20, 104, 178, .92);
  color: #fff;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .35);
  transition: transform .2s ease, background .2s ease;
}
.mg-videos .mg-facade__btn svg { margin-left: 3px; } /* optical centering of play triangle */
.mg-videos .mg-facade:hover .mg-facade__btn {
  background: var(--mg-blue);
  transform: translate(-50%, -50%) scale(1.06);
}
/* the YouTube iframe swapped in on click (see functions.php) */
.mg-videos .mg-facade__iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  z-index: 3;
}
.mg-videos .mg-facade[data-loaded] .mg-facade__btn,
.mg-videos .mg-facade[data-loaded]::after { display: none; }

/* --- Mobile: stack every row (video on top), force column for ALL rows --- */
@media (max-width: 860px) {
  .mg-videos .mg-videos__hero { padding: 84px 0 60px; }
  .mg-videos .mg-videos__list { gap: 48px; padding-top: 56px; padding-bottom: 72px; }
  .mg-videos .mg-vrow,
  .mg-videos .mg-vrow:nth-child(even) {
    flex-direction: column;
    align-items: stretch;
    gap: 20px;
  }
}

/* ============================================================
   Videos page integration fixes (after paste).

   Once the block was pasted into an Elementor HTML widget on the
   live page, three things needed fixing:

   1. Sassa's default page-title banner (.breadcumb-wrapper) rendered
      ABOVE our hero — a purple (#6B61FC --theme-color) "Videos"
      breadcrumb band. Redundant + off-brand; our block has its own
      hero. Hidden wherever our block renders (see WPML note below).

   2. The HTML widget landed in a "Boxed" Elementor container
      (.e-con-inner width 1344px), so the navy hero sat as a centered
      box with white gutters instead of bleeding edge-to-edge. Force
      the container that wraps .mg-videos to full width. (:has() is
      well-supported; this matches only the container that actually
      holds our block, so nothing else is affected.)

   3. Align the content rail to the site header. The header uses
      .container-fluid { max-width: 1344px; padding: 0 12px }, so the
      logo sits at ~274px and "Book a demo" ends at ~1594px. Match it:
      rail max-width 1344 + 12px padding → hero text, video rows and
      descriptions line up flush with the nav. (Overrides the Wave 132
      rail; same selector, later in file wins — no !important needed.)

   WPML-readiness (Wave 134): these two rules are keyed off the
   presence of .mg-videos, NOT body.page-id-4167. WPML creates a
   separate page (new post ID) for each language translation, so a
   page-id selector would silently stop applying on the PL/DE copies
   (purple banner + boxed hero would come back). .mg-videos travels
   with the block into every translation, so the fixes hold. The
   .mg-videos design rules above were already block-scoped.

   ============================================================ */
body:has(.mg-videos) .breadcumb-wrapper { display: none !important; }

.e-con-inner:has(.mg-videos),
.elementor-element:has(> .mg-videos) {
  width: 100% !important;
  max-width: 100% !important;
}

.mg-videos .mg-videos__rail {
  max-width: 1344px;
  padding-left: 12px;
  padding-right: 12px;
}

/* ============================================================
   FAQ page (/faq/): hide redundant hero + section title.

   The FAQ page reuses the Sassa "sassafaq" Bootstrap accordion, which
   is already styled because the section container carries the "mg-faq"
   CSS class (see FAQ block ~L2256 + Wave 96 JS). Two things were raw:
   the breadcumb hero and the sassasectiontitle (purple pill sub-title
   + near-black H2).

   HERO (updated Wave 136): the "FAQ" breadcumb hero duplicated the
   section title below it, and its <h1>FAQ</h1> left the page with a
   hidden/weak H1 while the real heading was only an H2. Fixed at the
   SOURCE, not via CSS: the Sassa per-page Title Bar is turned off for
   /faq/ (removes the hero AND its H1 from the HTML), and the section
   title was promoted to the page's single visible H1. The earlier CSS
   hide — body:has(.mg-faq) .breadcumb-wrapper{display:none} — has been
   removed: no longer needed, and it risked hiding a breadcumb hero on
   other .mg-faq pages (e.g. order-management). Matches the no-hero look
   on /videos/ and /404/. Breadcrumb SEO value to be delivered via
   BreadcrumbList JSON-LD, not a visual band.

   WPML-RESILIENT SCOPING (see Wave 134): key off the content class
   (.mg-faq), never body.page-id-* — WPML gives each translation its own
   page id, so a page-id rule would silently stop applying on /de/, /pl/…
   The .mg-faq class travels into every translation with the block.
     - title → .mg-faq .sub-title / .sec-title / .sec-text  (title-area
               lives INSIDE .mg-faq; the .sec-title rule is tag-agnostic
               so it still styles the title now that it's an <h1>; other
               .mg-faq pages use a sassafeatures title — .box-title — so
               no bleed)

   ============================================================ */

/* Section title — kill the purple pill sub-title, make it the standard
   MG head: blue uppercase eyebrow + navy H2 + muted intro. */
.mg-faq .sub-title {
  display: inline-block !important;
  background: none !important;
  background-color: transparent !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  text-transform: uppercase !important;
  letter-spacing: .08em !important;
  font-size: .78rem !important;
  font-weight: 700 !important;
  color: var(--mg-blue) !important;
  margin: 0 0 .7rem !important;
}
.mg-faq .sub-title::before,
.mg-faq .sub-title::after { content: none !important; display: none !important; }
.mg-faq .sec-title {
  font-family: var(--mg-font-headline) !important;
  font-size: 2.6rem !important;
  font-weight: 700 !important;
  color: var(--mg-navy-deep) !important;
  line-height: 1.2 !important;
  letter-spacing: -.01em !important;
  margin: 0 0 14px !important;
}
.mg-faq .sec-text {
  font-size: 1.02rem !important;
  line-height: 1.6 !important;
  color: var(--mg-muted) !important;
  max-width: 640px !important;
  margin: 0 auto !important;
}

@media (max-width: 767px) {
  .mg-faq .sec-title { font-size: 2rem !important; }
}

/* ============================================================
   Contact / "Book a demo" page (/contact/, page-id-4225).

   Unlike /videos/ (empty placeholder → custom block), /contact/ ships
   with a LIVE Contact Form 7 form + Sassa widgets carrying demo
   content (info@sassa.com, a Berlin address, a "Web Development"
   dropdown, a purple "Send Message" button, no H1). So we RESTYLE in
   place like /faq/ — never rebuild: the CF7 form has working mail
   routing that a rebuild would destroy. The page is reframed from
   "Contact us" to "Book a demo" to match the header CTA.

   Two block-scoped hooks (no page-id → survives WPML's per-language
   page duplication; see [[project_monitglass_wpml_scoping]]):

   - .mg-contact-hero : navy hero HTML block pasted into a full-width
                        section at the top — supplies the missing H1.
   - .mg-contact      : a CSS class Adam adds (in Elementor) to the
                        section that wraps the form + the aside. It
                        (a) restyles the CF7 fields to the MG design
                        system and (b) remaps Sassa's --theme-color to
                        MG orange *within this section only*, so the
                        Sassa .th-btn submit goes orange without a
                        specificity war (verified live: the base
                        .th-btn paints from var(--theme-color), and
                        nothing else inside the section uses it).

   The CF7 fields needed !important: Sassa skins them via
   `.contact-form2 .form-control { border-radius:100px; background:
   var(--smoke-color2) }` (rounded pills, grey fill). All verified on
   the live page with getComputedStyle before commit.

   Markup + the wp-admin checklist (delete placeholders, paste blocks,
   edit CF7 Form+Mail tabs, repoint "Book a demo") live in
   themes/sassa-child/page-blocks/contact.html.

   ============================================================ */
.mg-contact-hero { background: var(--mg-navy-deep); color: #fff; padding: 96px 0 72px; }
.mg-contact-hero__rail { max-width: 1344px; margin: 0 auto; padding: 0 12px; }
.mg-contact-hero__eyebrow {
  font-size: 13px; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: #9fb3d8; margin: 0 0 14px;
}
.mg-contact-hero__title {
  font-family: var(--mg-font-headline); font-weight: 700;
  font-size: clamp(30px, 4vw, 48px); line-height: 1.12;
  letter-spacing: -.01em; color: #fff; margin: 0;
}
.mg-contact-hero__lede {
  font-size: 18px; line-height: 1.6; color: rgba(255, 255, 255, .82);
  margin: 18px 0 0; max-width: 60ch;
}
/* hero bleeds edge-to-edge even if dropped into a boxed Elementor container */
.e-con-inner:has(.mg-contact-hero),
.elementor-element:has(> .mg-contact-hero) { width: 100% !important; max-width: 100% !important; }
/* Wave 138 — the host Elementor section keeps its default ~120px nav padding,
   which showed as a white band ABOVE the navy hero. Zero the vertical padding
   so the hero sits flush under the header (the navy band keeps its own inner
   padding). Keyed on .mg-contact-hero, so WPML translations inherit it. */
.e-con:has(.mg-contact-hero) { padding-top: 0 !important; padding-bottom: 0 !important; }

/* --- Contact section: vertical rhythm + remap Sassa accent to MG orange --- */
.mg-contact { --theme-color: var(--mg-orange); padding: 64px 0 88px; }

/* --- CF7 fields → MG design system (override Sassa .contact-form2 pills) --- */
.mg-contact .wpcf7 input[type=text],
.mg-contact .wpcf7 input[type=email],
.mg-contact .wpcf7 input[type=tel],
.mg-contact .wpcf7 input[type=url],
.mg-contact .wpcf7 select,
.mg-contact .wpcf7 textarea {
  width: 100% !important;
  box-sizing: border-box !important;
  background: var(--mg-bg) !important;
  border: 1px solid var(--mg-line) !important;
  border-radius: var(--mg-radius) !important;
  padding: 13px 16px !important;
  font-family: var(--mg-font-body) !important;
  font-size: 15px !important;
  color: var(--mg-ink) !important;
  box-shadow: none !important;
}
.mg-contact .wpcf7 textarea { min-height: 150px !important; resize: vertical !important; }
.mg-contact .wpcf7 input:focus,
.mg-contact .wpcf7 select:focus,
.mg-contact .wpcf7 textarea:focus {
  border-color: var(--mg-navy) !important;
  box-shadow: 0 0 0 3px rgba(60, 86, 163, .12) !important;
}
.mg-contact .wpcf7 ::placeholder { color: var(--mg-muted) !important; opacity: 1; }

/* submit (Sassa .th-btn): square it off; colour comes from the --theme-color
   remap above, hover slide (.th-btn::before) is repainted to the dark orange */
.mg-contact .wpcf7 .th-btn {
  border-radius: var(--mg-radius) !important;
  width: auto !important;
  padding: 14px 32px !important;
  box-shadow: none !important;
  /* Wave 138 — dark label on orange, matching the header "Book a demo" CTA
     (header uses ~#101828; --mg-ink #1b2531 reads identically). */
  color: var(--mg-ink) !important;
}
.mg-contact .wpcf7 .th-btn::before { background: var(--mg-orange-d) !important; }

/* CF7 validation/response text */
.mg-contact .wpcf7 .wpcf7-not-valid-tip { font-size: 13px; color: #c0392b; margin-top: 6px; }
.mg-contact .wpcf7-response-output {
  border-radius: var(--mg-radius) !important;
  font-size: 14px !important;
  margin: 18px 0 0 !important;
}

/* --- "What happens next" aside (replaces the Sassa Contact Info card) --- */
.mg-contact-aside { font-family: var(--mg-font-body); }
.mg-contact-aside__title {
  font-family: var(--mg-font-headline); font-weight: 700;
  font-size: clamp(22px, 2.4vw, 28px); line-height: 1.2;
  color: var(--mg-navy-deep); margin: 0 0 24px;
}
.mg-contact-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 22px; }
.mg-contact-steps li { display: flex; gap: 14px; align-items: flex-start; }
.mg-contact-steps__n {
  flex: 0 0 30px; width: 30px; height: 30px; border-radius: 50%;
  background: var(--mg-bg-soft); color: var(--mg-navy-deep);
  font-weight: 700; font-size: 14px;
  display: flex; align-items: center; justify-content: center;
}
.mg-contact-steps li > div { font-size: 15px; line-height: 1.6; color: var(--mg-muted); }
.mg-contact-steps strong { color: var(--mg-ink); font-weight: 600; }
.mg-contact-aside__email { margin: 30px 0 0; font-size: 15px; color: var(--mg-muted); }
.mg-contact-aside__email a { color: var(--mg-blue); font-weight: 600; text-decoration: none; }
.mg-contact-aside__email a:hover { text-decoration: underline; }

@media (max-width: 860px) {
  .mg-contact-hero { padding: 72px 0 52px; }
  .mg-contact { padding: 48px 0 64px; }
  .mg-contact-aside { margin-bottom: 36px; }
}

/* Wave 138 — on phones (Elementor stacks the row at <768) put the FORM first
   and "What happens next" below it. Visitors arrive high-intent from the
   "Book a demo" CTA, so the form shouldn't sit below the explainer. Scoped to
   the form column (direct flex child of the row) so desktop side-by-side and
   the tablet range are untouched. Second opinion (Gemini) agreed: form-first. */
@media (max-width: 767px) {
  .mg-contact .e-con-inner > .e-con:has(.wpcf7) { order: -1; }
  .mg-contact-aside { margin-bottom: 0; margin-top: 40px; }
}

/* ============================================================
   primary CTA hook (#mg-book-demo / .mg-btn-primary).

   WHY: an Elementor button widget renders as <button> when it has NO
   link, but as <a> the moment you set a link. The footer "Book a demo"
   was painted orange by `.mg-foot-cta button.e-button-base`
   — an element-id selector qualified by the `button` tag. Linking it to
   /contact turned the element into <a>, so `button.e-button-base` stopped
   matching and it fell back to Elementor's `.elementor .e-button-base`
   blue (rgb(55,94,251), base-desktop.css).

   FIX: drive the CTA off a stable hook that's tag-agnostic, edit-safe and
   WPML-safe (survives relinking the widget and travels into translations;
   page-ids do not — see [[project_monitglass_wpml_scoping]]). This is an
   Elementor v4 "atomic" button whose Advanced panel exposes only a CSS
   *ID* field (no class box), so the live hook is the ID #mg-book-demo set
   on the footer button (Advanced → CSS ID). An ID (1,0,0) cleanly beats
   Elementor's `.elementor .e-button-base` (0,2,0) — verified live. The
   .mg-btn-primary class is kept as a reusable alias for any future button
   where a class IS available. Visual matches the old footer CTA exactly.

   ============================================================ */
#mg-book-demo,
#mg-btn-primary,
.mg-btn-primary,
a.mg-btn-primary,
button.mg-btn-primary,
.mg-btn-primary.e-button-base {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  /* LITERAL hex, not var(): inside this Elementor v4 "atomic" button a
     var() background substitution gets dropped (button stays blue) even
     though --mg-orange resolves fine elsewhere — a literal value wins.
     Longhand background-color (not the `background` shorthand) for the
     same reason. */
  background-color: #f29c2b !important;
  background-image: none !important;
  color: #1f1f1f !important;
  font-family: var(--mg-font-body) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em !important;
  text-transform: none !important;
  padding: 16px 36px !important;
  border: none !important;
  border-radius: 6px !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  box-shadow: 0 4px 12px rgba(242, 156, 43, 0.25) !important;
  transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease !important;
}
#mg-book-demo .elementor-button-content-wrapper,
#mg-book-demo .elementor-button-text,
#mg-btn-primary .elementor-button-content-wrapper,
#mg-btn-primary .elementor-button-text,
.mg-btn-primary .elementor-button-content-wrapper,
.mg-btn-primary .elementor-button-text {
  color: #1f1f1f !important;
}
#mg-book-demo:hover,
#mg-book-demo:focus,
#mg-btn-primary:hover,
#mg-btn-primary:focus,
.mg-btn-primary:hover,
.mg-btn-primary:focus,
a.mg-btn-primary:hover,
button.mg-btn-primary:hover {
  background-color: #d9851a !important;
  color: #1f1f1f !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 20px rgba(242, 156, 43, 0.35) !important;
}

/* ============================================================
   About us page (/about/, page-id-4260).

   Custom block (like /videos/), NOT a restyle (like /contact/): the
   page shipped as a generic Sassa SEO-agency demo with no live
   functionality, so we replace it wholesale with one HTML widget
   carrying the whole narrative. Markup + wp-admin checklist live in
   themes/sassa-child/page-blocks/about.html.

   Angle: "industry-first, not tech-first" — built by glass-plant
   people. 4 sections: navy manifest hero → origin (problem on the
   floor → built the fix, founder's 15 yrs as a branch manager) →
   focus/philosophy (only glass; talk to the people who build it;
   lean team = strength) → 3-person team. The site-wide footer CTA
   band follows in the template, so the block ENDS before it.

   All selectors scoped under .mg-about (BEM, specificity (0,2,x)) so
   Sassa globals don't leak — no !important needed except the two
   host-integration rules at the end (full-bleed + breadcrumb hide),
   which mirror /videos/ Wave 133-134.

   WPML-safe: keyed on the .mg-about class, never body.page-id-4260 —
   each translation gets a new post id (see [[wpml scoping]]).

   Section rhythm via full-bleed background bands: hero navy, origin
   white, focus light-grey (--mg-bg-alt), team white.

   Wave 162: stretch text to full rail.
   ============================================================ */
.mg-about { font-family: var(--mg-font-body); color: var(--mg-ink); }
.mg-about__rail { max-width: 1344px; margin: 0 auto; padding: 0 12px; }

/* --- Hero (navy manifest band, matches /videos/ + /contact/) --- */
.mg-about__hero { background: var(--mg-navy-deep); color: #fff; padding: 96px 0 84px; }
.mg-about__eyebrow {
  font-size: 13px; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: #9fb3d8; margin: 0 0 14px;
}
.mg-about__title {
  font-family: var(--mg-font-headline); font-weight: 700;
  font-size: clamp(30px, 4vw, 48px); line-height: 1.12;
  letter-spacing: -.01em; color: #fff; margin: 0;
}
.mg-about__lede {
  font-size: 18px; line-height: 1.6; color: rgba(255, 255, 255, .82);
  margin: 18px 0 0;
}

/* --- Generic content section (origin / focus / team) --- */
.mg-about__section { padding: 76px 0; }
.mg-about__focus { background: var(--mg-bg-alt); }
.mg-about__kicker {
  font-size: 13px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--mg-blue); margin: 0 0 12px;
}
.mg-about__h2 {
  font-family: var(--mg-font-headline); font-weight: 700;
  font-size: clamp(26px, 3vw, 38px); line-height: 1.18;
  letter-spacing: -.01em; color: var(--mg-navy-deep); margin: 0;
}
.mg-about__lead {
  font-size: 18px; line-height: 1.6; color: var(--mg-muted);
  margin: 18px 0 0;
}

/* --- Origin: editorial prose, left-aligned, stretched to the full 1344 rail
   (Wave 162: the per-element ch max-widths were removed so the text fills the
   width instead of hugging the left half on wide screens). --- */
.mg-about__prose { margin: 22px 0 0; }
.mg-about__prose p {
  font-size: 17px; line-height: 1.75; color: var(--mg-muted);
  margin: 0 0 18px;
}
.mg-about__prose p:last-child { margin-bottom: 0; }
.mg-about__prose strong { color: var(--mg-ink); font-weight: 600; }

/* --- Focus: 3 principle columns --- */
.mg-about__principles {
  margin: 40px 0 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px;
}
.mg-about-principle__t {
  font-family: var(--mg-font-headline); font-weight: 600;
  font-size: 18px; line-height: 1.3; color: var(--mg-navy-deep);
  margin: 0 0 10px; padding-top: 16px; border-top: 2px solid var(--mg-orange);
}
.mg-about-principle__d {
  font-size: 15px; line-height: 1.65; color: var(--mg-muted); margin: 0;
}

/* --- Team: 3 person cards --- */
.mg-about__team-grid {
  margin: 40px 0 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px;
}
.mg-about-person { text-align: left; }
/* Monogram is the INTENTIONAL shipping state (no photo session yet, 2026-05-29):
   a solid navy avatar with white initials reads as a deliberate brand element,
   not a missing-image placeholder. When headshots arrive, .mg-about-person__img
   covers the circle (object-fit:cover, z-index 1), so the navy bg never shows. */
.mg-about-person__photo {
  position: relative; width: 112px; height: 112px; margin: 0 0 18px;
  border-radius: 50%; overflow: hidden;
  background: var(--mg-navy);
  display: flex; align-items: center; justify-content: center;
}
.mg-about-person__initials {
  font-family: var(--mg-font-headline); font-weight: 700;
  font-size: 34px; color: #fff; letter-spacing: .01em;
}
.mg-about-person__img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 1;
}
.mg-about-person__name {
  font-family: var(--mg-font-headline); font-weight: 700;
  font-size: 19px; color: var(--mg-navy-deep); margin: 0 0 4px;
}
.mg-about-person__role {
  font-size: 12px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--mg-blue); margin: 0 0 12px;
}
.mg-about-person__bio {
  font-size: 15px; line-height: 1.65; color: var(--mg-muted); margin: 0;
}

/* --- Mobile --- */
@media (max-width: 860px) {
  .mg-about__hero { padding: 76px 0 60px; }
  .mg-about__section { padding: 56px 0; }
  .mg-about__principles { grid-template-columns: 1fr; gap: 28px; }
  .mg-about__team-grid { grid-template-columns: 1fr; gap: 32px; }
}

/* --- Host integration (mirrors /videos/ Wave 133-134) --- */
/* Hide Sassa's redundant purple "About us" breadcrumb band wherever our
   block renders (keyed on .mg-about, so WPML translations inherit it). */
body:has(.mg-about) .breadcumb-wrapper { display: none !important; }
/* The HTML widget may land in a boxed Elementor container (max-width 1344);
   force the wrapper full-width so the navy bands bleed edge-to-edge. */
.e-con-inner:has(.mg-about),
.elementor-element:has(> .mg-about) { width: 100% !important; max-width: 100% !important; }
/* Zero the host section's default nav padding so the hero sits flush under
   the header (no white gap above the navy band — same fix as /contact/). */
.e-con:has(.mg-about) { padding-top: 0 !important; padding-bottom: 0 !important; }

/* ============================================================
   FAQ accordion: MG-colour the +/- toggle + keep wrapped
   question text off the icon on mobile.

   Sassa draws the toggle as .accordion-button::after (Font Awesome)
   coloured with var(--theme-color) = #6B61FC (purple). The icon reads
   that variable, so remapping --theme-color inside the .mg-faq scope
   recolours it to MG blue — cleaner and more robust than fighting Sassa's
   ::after colour rule (the parent CSS is served cross-origin from the
   Hostinger CDN, so element-id/!important overrides are finicky; the var
   remap is the same trick .mg-contact uses). Verified live.

   The icon is position:absolute right:30px and the button's 22px right
   padding doesn't reserve room for it, so a wrapped question's last line
   slides under the + on narrow screens. Add right padding via a
   high-specificity selector (Sassa's .accordion-card chain outranks a
   plain `.mg-faq .accordion-button`). WPML-safe — keyed off .mg-faq.

   ============================================================ */
.mg-faq { --theme-color: #1468b2 !important; }
/* Belt-and-suspenders: also set the icon colour directly (high specificity)
   in case a closer ancestor pins --theme-color or Sassa hardcodes it. */
.mg-faq .accordion-card .accordion-header .accordion-button::after {
  color: #1468b2 !important;
}
.mg-faq .accordion-card .accordion-header .accordion-button {
  padding-right: 56px !important;
}

/* ============================================================
   Print examples (/prints/): proof page, custom block
   like /about/ + /videos/. Scoped under .mg-prints (BEM), WPML-safe
   (never body.page-id-*). Section rhythm via full-bleed bands:
   hero navy, then alternating white / --mg-bg-alt content bands.

   Media frames are RATIO-AGNOSTIC on purpose: the real artifacts are
   mixed orientation (portrait labels & A4 docs, landscape scanner /
   optimization shots). object-fit:contain on a neutral framed figure
   so any image swaps in without cropping or CSS rework. Until the real
   images land, .mg-prints__ph shows a loud dashed placeholder so the
   page is obviously not ready to publish (see prints.html checklist #3).

   ============================================================ */
.mg-prints { font-family: var(--mg-font-body); color: var(--mg-ink); }
.mg-prints__rail { max-width: 1344px; margin: 0 auto; padding: 0 12px; }

/* --- Hero (navy manifest band, matches /about/ + /videos/ + /contact/) --- */
.mg-prints__hero { background: var(--mg-navy-deep); color: #fff; padding: 96px 0 84px; }
.mg-prints__eyebrow {
  font-size: 13px; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: #9fb3d8; margin: 0 0 14px;
}
.mg-prints__title {
  font-family: var(--mg-font-headline); font-weight: 700;
  font-size: clamp(30px, 4vw, 46px); line-height: 1.14;
  letter-spacing: -.01em; color: #fff; margin: 0;
}
.mg-prints__lede {
  font-size: 18px; line-height: 1.6; color: rgba(255, 255, 255, .82);
  margin: 18px 0 0; max-width: 62ch;
}

/* --- Content sections: full-bleed bands, alternating bg --- */
.mg-prints__section { padding: 72px 0; }
.mg-prints__section--alt { background: var(--mg-bg-alt); }

/* --- Two-column media/copy row; reverse media to the right on --rev --- */
.mg-prints__row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center;
}
.mg-prints__row--rev .mg-prints__media { order: 2; }

/* --- Media frame: ratio-agnostic, holds any artifact orientation --- */
.mg-prints__media {
  margin: 0; padding: 18px; background: #fff;
  border: 1px solid var(--mg-line); border-radius: var(--mg-radius);
  box-shadow: var(--mg-shadow);
  display: flex; align-items: center; justify-content: center;
}
.mg-prints__media img {
  display: block; max-width: 100%; height: auto; max-height: 520px;
  object-fit: contain;
}
/* Loud placeholder until the real image is pasted in (checklist #3) */
.mg-prints__ph {
  width: 100%; min-height: 300px; padding: 28px;
  border: 2px dashed #c2ccd6; border-radius: var(--mg-radius);
  display: flex; align-items: center; justify-content: center; text-align: center;
  font-size: 14px; line-height: 1.5; color: var(--mg-muted);
  background: var(--mg-bg-soft);
}

/* --- Copy column --- */
.mg-prints__kicker {
  font-size: 13px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--mg-blue); margin: 0 0 12px;
}
.mg-prints__h2 {
  font-family: var(--mg-font-headline); font-weight: 700;
  font-size: clamp(24px, 2.6vw, 34px); line-height: 1.2;
  letter-spacing: -.01em; color: var(--mg-navy-deep); margin: 0;
}
.mg-prints__p {
  font-size: 17px; line-height: 1.7; color: var(--mg-muted);
  margin: 16px 0 0; max-width: 60ch;
}
.mg-prints__points { list-style: none; margin: 20px 0 0; padding: 0; }
.mg-prints__points li {
  position: relative; padding: 0 0 0 22px; margin: 0 0 10px;
  font-size: 15px; line-height: 1.55; color: var(--mg-muted);
}
.mg-prints__points li:last-child { margin-bottom: 0; }
.mg-prints__points li::before {
  content: ""; position: absolute; left: 0; top: 8px;
  width: 8px; height: 8px; border-radius: 2px; background: var(--mg-orange);
}
.mg-prints__points strong { color: var(--mg-ink); font-weight: 600; }
.mg-prints__points em { font-style: italic; }

/* --- Mobile --- */
@media (max-width: 860px) {
  .mg-prints__hero { padding: 76px 0 60px; }
  .mg-prints__section { padding: 52px 0; }
  .mg-prints__row { grid-template-columns: 1fr; gap: 30px; }
  /* media always on top on mobile, regardless of --rev */
  .mg-prints__row--rev .mg-prints__media { order: 0; }
  .mg-prints__media img { max-height: 420px; }
}

/* --- Host integration (mirrors /about/ + /videos/) --- */
body:has(.mg-prints) .breadcumb-wrapper { display: none !important; }
.e-con-inner:has(.mg-prints),
.elementor-element:has(> .mg-prints) { width: 100% !important; max-width: 100% !important; }
.e-con:has(.mg-prints) { padding-top: 0 !important; padding-bottom: 0 !important; }


/* ============================================================
   FOOTER - LEGAL LINKS (EULA / Privacy policy)
   ------------------------------------------------------------
   The bottom-bar legal links turned into button-shaped boxes after
   editing. Render them as plain text links again.

   Scoped to a CUSTOM CLASS (.mg-footer-legal), NOT an Elementor element
   ID: element IDs (.elementor-element-xxxx) regenerate when a widget is
   duplicated/recreated and are not WPML-stable; a class is stable and
   matches our .mg-* convention. Add the class in Elementor on the widget
   (or its container) holding EULA + Privacy: Advanced -> CSS Classes ->
   "mg-footer-legal".

   Works whether those links are Button widgets or plain links - it strips
   the button chrome either way. !important is needed to beat Elementor's
   per-widget button styles (justified host-integration override).
   ============================================================ */
.mg-footer-legal a,
.mg-footer-legal .elementor-button {
  display: inline;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  min-width: 0 !important;
  /* match the footer column links exactly: 14px / 400 / Inter / 0.65 white */
  font-family: inherit;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: normal;
  color: rgba(255, 255, 255, 0.65);
  text-decoration: none;
  fill: currentColor;
}
/* footer-style hover: brighten only, NO underline (reads as a footer item, not a link) */
.mg-footer-legal a:hover,
.mg-footer-legal .elementor-button:hover {
  background: transparent !important;
  color: #fff;
  text-decoration: none;
}


/* ============================================================
   LEGAL PAGES (.mg-legal)
   ------------------------------------------------------------
   Generic long-form legal layout: navy hero + readable prose rail.
   Built for /privacy-policy/ but reused by /eula/ and /sla/ (same
   Wix-import mess). BEM, scoped to .mg-legal, WPML-safe (never page-id).
   ============================================================ */
.mg-legal {
  font-family: var(--mg-font-body);
  color: var(--mg-ink);
  /* Full-bleed even on a BOXED page template. The theme wraps page content
     at ~1576px ABOVE Elementor, so the :has width:100% rules below can't
     escape it (100% of 1576 = 1576). These negative viewport margins break
     .mg-legal out to the full viewport width. Verified: no horizontal scroll.
     Harmless on a full-width template too (margins resolve to ~0). */
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}
.mg-legal__rail {
  max-width: 820px;
  margin: 0 auto;
  padding: 0 20px;
}

/* --- Hero --- */
.mg-legal__hero {
  background: var(--mg-navy-deep);
  color: #fff;
  /* padding-top clears the fixed header (~72px) + breathing room, matching
     prints/about - the hero bleeds up UNDER the header (see .space-top reset). */
  padding: 96px 0 56px;
}
.mg-legal__eyebrow {
  margin: 0 0 14px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #9fc0e6;
}
.mg-legal__title {
  margin: 0;
  color: #fff;
  font-family: var(--mg-font-headline);
  font-weight: 700;
  font-size: clamp(30px, 4vw, 44px);
  line-height: 1.15;
  letter-spacing: -0.01em;
}
.mg-legal__intro {
  margin: 20px 0 0;
  max-width: 68ch;
  font-size: 17px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.82);
}

/* --- Body --- */
.mg-legal__body {
  background: #fff;
  padding: 64px 0 84px;
}
.mg-legal__section {
  margin: 0 0 38px;
}
.mg-legal__section:last-of-type {
  margin-bottom: 0;
}
.mg-legal__section h2 {
  margin: 0 0 14px;
  color: var(--mg-navy-deep);
  font-family: var(--mg-font-headline);
  font-weight: 700;
  font-size: clamp(20px, 2.2vw, 26px);
  line-height: 1.3;
}
/* scoped to __body so it never touches the hero eyebrow/intro (both are <p>) */
.mg-legal__body p {
  margin: 0 0 14px;
  font-size: 16.5px;
  line-height: 1.75;
  color: var(--mg-muted);
}
.mg-legal__section p:last-child {
  margin-bottom: 0;
}
.mg-legal ul {
  margin: 0 0 18px;
  padding: 0;
  list-style: none;
}
.mg-legal li {
  position: relative;
  padding-left: 22px;
  margin-bottom: 9px;
  font-size: 16.5px;
  line-height: 1.7;
  color: var(--mg-muted);
}
.mg-legal li::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 11px;
  width: 6px;
  height: 6px;
  border-radius: 2px;
  background: var(--mg-orange);
}
.mg-legal strong {
  color: var(--mg-ink);
  font-weight: 600;
}
.mg-legal a {
  color: var(--mg-blue);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.mg-legal a:hover {
  color: var(--mg-navy);
}
.mg-legal__contact {
  line-height: 1.9;
}
.mg-legal__closing {
  margin-top: 36px;
  padding-top: 24px;
  border-top: 1px solid var(--mg-line);
  font-weight: 600;
  color: var(--mg-ink);
}

/* --- Mobile --- */
@media (max-width: 860px) {
  .mg-legal__hero { padding: 76px 0 44px; }
  .mg-legal__body { padding: 48px 0 64px; }
  .mg-legal__section { margin-bottom: 30px; }
}

/* --- Host integration (mirrors /about/ + /prints/) --- */
body:has(.mg-legal) .breadcumb-wrapper { display: none !important; }
.e-con-inner:has(.mg-legal),
.elementor-element:has(> .mg-legal) { width: 100% !important; max-width: 100% !important; }
.e-con:has(.mg-legal) { padding-top: 0 !important; padding-bottom: 0 !important; }
/* The default page template wraps content in section.space-top.space-extra-bottom
   (padding-top:120px to clear the fixed header). Kill it so the full-bleed hero
   rises right under the header - no white gap - like the builder-template pages. */
body:has(.mg-legal) .space-top { padding-top: 0 !important; }
body:has(.mg-legal) .space-extra-bottom { padding-bottom: 0 !important; }

/* --- Cookie Policy: Complianz document styled inside .mg-legal --- */
.mg-legal .cmplz-document h2 {
  margin: 40px 0 14px;
  color: var(--mg-navy-deep);
  font-size: clamp(20px, 2.2vw, 26px);
  line-height: 1.3;
}
.mg-legal .cmplz-document h3 {
  margin: 28px 0 10px;
  color: var(--mg-navy-deep);
  font-size: 19px;
  line-height: 1.35;
}
.mg-legal .cmplz-document h4 {
  margin: 22px 0 8px;
  color: var(--mg-ink);
  font-size: 16.5px;
}
.mg-legal .cmplz-document a { color: var(--mg-blue); }
.mg-legal .cmplz-document table {
  width: 100%;
  border-collapse: collapse;
  margin: 6px 0 26px;
  font-size: 14.5px;
}
.mg-legal .cmplz-document th,
.mg-legal .cmplz-document td {
  border: 1px solid var(--mg-line);
  padding: 9px 12px;
  text-align: left;
  vertical-align: top;
  color: var(--mg-ink);
}
.mg-legal .cmplz-document th { background: var(--mg-bg-soft); font-weight: 600; }


/* ============================================================
   Preloader spinner color.
   Sassa's rotating ring is .loading (parent style.css:2097), border-color
   transparent var(--theme-color) ... = the theme-blue2 accent, NOT on brand.
   Re-skin the ring to MonitGlass brand blue. (Swap var(--mg-blue) for
   var(--mg-orange) or var(--mg-navy-deep) to recolor.)
   ============================================================ */
.loading {
  border-color: transparent var(--mg-blue) transparent var(--mg-blue) !important;
}


/* ============================================================
   Home "Trusted by" client logo strip (.mg-clients).
   Custom HTML block dropped in a full-width section UNDER the home hero
   (page-blocks/clients.html). Self-scoped via .mg-clients — no body.page-id,
   so migration- + WPML-safe. Real client PNGs, cleaned to transparency, served
   root-relative from /wp-content/uploads/2026/06/ (domain-less = survives the
   staging->prod move with no search-replace and is identical across languages).

   Wave 166 — switched from a static flex-wrap grid to a continuous MARQUEE
   (auto-scroll, one line on every viewport — fixes the mobile multi-row stack
   and scales as the client roster grows). The block carries the logo set TWICE
   inside .mg-clients__track; the animation translates -50% (exactly one set) so
   the loop is seamless. Pauses on hover (so a logo can be read/clicked) and
   FREEZES to a static centered row under prefers-reduced-motion.
   Speed: --mg-marquee-speed (default 46s desktop / 34s mobile) — bigger = slower.

   Treatment: grayscale + dimmed by default, full colour on hover.
   To show full COLOUR always: delete the `filter`/`opacity` lines on
   `.mg-clients__logo`. Per-logo optical height lives in one `--h` per modifier.
   Wave 167 — added 5 client logos (galakor, rusin, glassini, miel-met,
   frontal); marquee now carries 12. Per-logo --h below + duplicated in both sets.
   ============================================================ */
.mg-clients {
  background: var(--mg-bg, #fff);
  border-bottom: 1px solid var(--mg-line);
  padding: 40px 0 44px;
  /* global size knob — multiplies every logo's --h at once. Bump this one
     number to make the whole strip bigger/smaller (relative balance kept). */
  --mg-logo-scale: 1.35;
}
.mg-clients__rail {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 24px;
  text-align: center;
}
.mg-clients__eyebrow {
  margin: 0 0 26px;
  font-family: var(--mg-font-body, "Inter"), sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mg-muted);
}
.mg-clients__marquee {
  position: relative;
  overflow: hidden;
  /* soft-fade both edges so logos scroll in and out, not cut hard */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
}
.mg-clients__track {
  display: flex;
  flex-wrap: nowrap;
  width: max-content;
  animation: mg-clients-scroll var(--mg-marquee-speed, 46s) linear infinite;
}
.mg-clients__marquee:hover .mg-clients__track {
  animation-play-state: paused;   /* pause so a visitor can read / click a logo */
}
.mg-clients__set {
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 0 0 auto;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
}
.mg-clients__item {
  flex: 0 0 auto;
  margin: 0;
  padding: 0 26px;        /* even gap, identical across the loop seam */
  display: flex;
  align-items: center;
}
.mg-clients__logo {
  display: block;
  /* !important beats Elementor frontend.min.css `.elementor img{height:auto}`
     (specificity 0,1,1) which otherwise forces every logo to its intrinsic
     height — e.g. glassini at height="200" rendered ~5x too big (Wave 167b). */
  width: auto !important;
  height: calc(var(--h, 44px) * var(--mg-logo-scale, 1)) !important;
  max-width: none !important;
  filter: grayscale(1);
  opacity: 0.62;
  transition: filter 0.25s ease, opacity 0.25s ease;
}
.mg-clients__logo:hover {
  filter: grayscale(0);
  opacity: 1;
}
/* per-logo optical height — tune these single values to balance the row */
.mg-clients__logo--cglass      { --h: 40px; }
.mg-clients__logo--kurek       { --h: 48px; }
.mg-clients__logo--glasscolor  { --h: 36px; }
.mg-clients__logo--norgpol     { --h: 40px; }
.mg-clients__logo--swiat-szkla { --h: 46px; }
.mg-clients__logo--lus-ar      { --h: 56px; }
.mg-clients__logo--szklarz     { --h: 60px; }
.mg-clients__logo--galakor     { --h: 44px; }   /* Wave 167 */
.mg-clients__logo--rusin       { --h: 46px; }
.mg-clients__logo--glassini    { --h: 38px; }
.mg-clients__logo--miel-met    { --h: 42px; }
.mg-clients__logo--frontal     { --h: 60px; }

/* the loop: .mg-clients__track holds the set TWICE; -50% == one full set */
@keyframes mg-clients-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@media (max-width: 767px) {
  .mg-clients { padding: 32px 0 34px; }
  .mg-clients__item { padding: 0 18px; }
  .mg-clients__logo { height: calc(var(--h, 44px) * var(--mg-logo-scale, 1) * 0.82) !important; }
  .mg-clients__track { --mg-marquee-speed: 34s; }
}

/* accessibility: no motion — freeze to a single static, centered, wrapped row */
@media (prefers-reduced-motion: reduce) {
  .mg-clients__marquee {
    -webkit-mask-image: none;
            mask-image: none;
  }
  .mg-clients__track {
    animation: none;
    width: auto;
    flex-wrap: wrap;
    justify-content: center;
  }
  .mg-clients__set {
    flex-wrap: wrap;
    justify-content: center;
    gap: 22px 40px;
  }
  .mg-clients__set[aria-hidden="true"] { display: none; }
  .mg-clients__logo { transition: none; }
}

/* ============================================================================
   WPML — LANGUAGE SWITCHER (header dropdown + mobile drawer)        [Wave 169]
   ----------------------------------------------------------------------------
   Custom switcher injected as <li class="mg-lang"> into ul.max-mega-menu by
   functions.php (Wave 169) — Max Mega Menu drops WPML's native menu-switcher,
   so we build our own. Words only, no flags. Desktop = dropdown panel; inside
   Sassa's .th-mobile-menu = inline expanded list. Scoped on .mg-lang (global,
   WPML-safe, never page-id). The toggle reuses .mega-menu-link so it inherits
   the Sassa nav link (Inter 15/500, #101828, 72px row). functions.php + this
   block deploy together.
   ============================================================================ */

.mg-lang { position: relative; }
.mg-lang__chev {
  width: 7px;
  height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  margin-top: -3px;
  opacity: .55;
  transition: transform .2s ease, opacity .2s ease;
}

/* ---------- Desktop: dropdown next to the "Book a demo" button ----------
   Injected into .header-button (already display:flex), before the orange
   .th-btn. Built as <div> + <a> children (no <ul>) so Sassa / Max Mega Menu
   never convert it into a submenu. Opens on hover / focus like a nav item. */
.header-button:has(> .mg-lang--desktop) { gap: 18px; }
.mg-lang--desktop {
  align-self: stretch;
  display: flex;
  align-items: center;
}
.mg-lang--desktop .mg-lang__toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: Inter, -apple-system, "system-ui", sans-serif;
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
  color: #101828;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
.mg-lang--desktop:hover .mg-lang__chev,
.mg-lang--desktop:focus-within .mg-lang__chev {
  opacity: 1;
  transform: rotate(-135deg);
  margin-top: 2px;
}
.mg-lang--desktop .mg-lang__menu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 152px;
  padding: 7px;
  background: #fff;
  border: 1px solid rgba(16, 24, 40, .08);
  border-radius: var(--mg-radius, 6px);
  box-shadow: 0 12px 34px rgba(16, 24, 40, .15);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
  z-index: 1001;
}
.mg-lang--desktop:hover > .mg-lang__menu,
.mg-lang--desktop:focus-within > .mg-lang__menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.mg-lang--desktop .mg-lang__link {
  display: block;
  padding: 9px 13px;
  border-radius: 4px;
  font-family: Inter, -apple-system, "system-ui", sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #101828 !important;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .15s ease, color .15s ease;
}
.mg-lang--desktop .mg-lang__link:hover,
.mg-lang--desktop .mg-lang__link:focus-visible {
  background: rgba(242, 156, 43, .12);
  color: var(--mg-orange, #f29c2b) !important;
}
.mg-lang--desktop .mg-lang__link.is-active {
  color: var(--mg-orange, #f29c2b) !important;
  font-weight: 600;
  cursor: default;
}
/* Below xl Sassa shows the compact/hamburger header; .header-button still
   renders the CTA there, so the injected desktop dropdown would sit next to
   "Book a demo" on mobile (unwanted — the language switch lives in the drawer).
   Hide the desktop variant on mobile/tablet; the drawer row covers it. */
@media (max-width: 1199.98px) {
  .mg-lang--desktop { display: none !important; }
}
/* NOTE: the mobile header keeps the CTA next to the hamburger (EN shows "Book a
   demo" there), so do NOT hide .header-button. Long localized CTAs push the
   hamburger off-screen — keep the header CTA label SHORT per language
   (DE = "Demo buchen" via String Translation, not the long hero label). */

/* ---------- Mobile drawer: compact row under the "Book a demo" CTA ---------- */
.mg-lang--drawer {
  margin-top: 6px;
  padding: 18px 20px 22px;
  border-top: 1px solid rgba(0, 0, 0, .08);
  text-align: center;
}
.mg-lang--drawer .mg-lang__label {
  display: block;
  margin-bottom: 9px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  opacity: .5;
}
.mg-lang--drawer .mg-lang__menu {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 10px;
}
.mg-lang--drawer .mg-lang__link {
  padding: 8px 12px;
  border-radius: 100px;
  font-size: 15px;
  font-weight: 500;
  color: inherit;
  text-decoration: none;
}
.mg-lang--drawer .mg-lang__link:hover,
.mg-lang--drawer .mg-lang__link.is-active {
  background: rgba(242, 156, 43, .10);
  color: var(--mg-orange, #f29c2b) !important;
}