/* CM Klara navigation v15 — desktop portal isolation for Visual Composer headers. */ @media (min-width: 1025px) { /* * On desktop the whole navigation node is portalled directly under . * The placeholder keeps the exact layout slot inside Visual Composer, while * the live navigation no longer inherits width/overflow/flex rules from VC. */ .cmk-nav-placeholder.cmk-nav-placeholder--desktop-portal { display: block !important; width: 100% !important; min-height: 54px !important; margin: 0 !important; padding: 0 !important; border: 0 !important; } body > .cmk-nav.cmk-nav--desktop-portal:not(.cmk-nav--fixed) { position: absolute !important; top: var(--cmk-nav-portal-top, 0px) !important; left: 0 !important; right: 0 !important; width: 100vw !important; max-width: none !important; margin: 0 !important; padding: 0 !important; transform: none !important; z-index: 2147481000 !important; overflow: visible !important; } body > .cmk-nav.cmk-nav--desktop-portal > .cmk-nav__desktop { position: relative !important; width: 100vw !important; max-width: none !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; background: #fff !important; } body > .cmk-nav.cmk-nav--desktop-portal .cmk-nav__root { position: relative !important; width: min(1240px, calc(100vw - 32px)) !important; max-width: 1240px !important; min-width: 0 !important; min-height: 54px !important; height: auto !important; margin: 0 auto !important; padding: 0 !important; display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: stretch !important; justify-content: center !important; float: none !important; clear: both !important; overflow: visible !important; list-style: none !important; } body > .cmk-nav.cmk-nav--desktop-portal .cmk-nav__root > li.cmk-nav__root-item { position: relative !important; display: block !important; width: auto !important; max-width: none !important; min-width: 0 !important; height: auto !important; min-height: 54px !important; margin: 0 !important; padding: 0 !important; float: none !important; clear: none !important; flex: 0 0 auto !important; align-self: stretch !important; overflow: visible !important; } body > .cmk-nav.cmk-nav--desktop-portal .cmk-nav__root > li.cmk-nav__root-item.is-mega { position: static !important; } body > .cmk-nav.cmk-nav--desktop-portal .cmk-nav__root-link { position: relative !important; display: flex !important; width: auto !important; max-width: none !important; min-width: 0 !important; min-height: 54px !important; height: 54px !important; margin: 0 !important; padding: 0 21px !important; float: none !important; align-items: center !important; justify-content: center !important; white-space: nowrap !important; overflow: visible !important; } body > .cmk-nav.cmk-nav--desktop-portal .cmk-nav__root-item.is-search { width: 96px !important; min-width: 96px !important; flex: 0 0 96px !important; } body > .cmk-nav.cmk-nav--desktop-portal .cmk-nav__root-item.is-search-open { width: 320px !important; min-width: 320px !important; flex: 0 0 320px !important; } /* Full mega panel is now positioned inside a body-level 100vw strip. */ body > .cmk-nav.cmk-nav--desktop-portal .cmk-nav__mega { position: absolute !important; top: 100% !important; left: 50% !important; right: auto !important; width: min(1280px, calc(100vw - 32px)) !important; max-width: calc(100vw - 32px) !important; min-width: 0 !important; height: auto !important; min-height: 0 !important; max-height: calc(100vh - 90px) !important; margin: 0 !important; padding: 0 !important; transform: translate(-50%, 4px) !important; overflow: auto !important; overscroll-behavior: contain !important; } body > .cmk-nav.cmk-nav--desktop-portal .cmk-nav__root-item:hover > .cmk-nav__mega, body > .cmk-nav.cmk-nav--desktop-portal .cmk-nav__root-item:focus-within > .cmk-nav__mega, body > .cmk-nav.cmk-nav--desktop-portal .cmk-nav__root-item.is-open > .cmk-nav__mega { transform: translate(-50%, 0) !important; } body > .cmk-nav.cmk-nav--desktop-portal .cmk-nav__mega-content, body > .cmk-nav.cmk-nav--desktop-portal .cmk-nav__mega-categories { min-height: 0 !important; height: auto !important; } body > .cmk-nav.cmk-nav--desktop-portal .cmk-nav__root-item:not(.is-mega) > .cmk-nav__submenu { top: 100% !important; left: 0 !important; right: auto !important; width: auto !important; min-width: 285px !important; max-width: min(420px, calc(100vw - 32px)) !important; height: auto !important; min-height: 0 !important; } /* Official horizontal Klara logo in sticky navigation. */ body > .cmk-nav .cmk-nav__sticky-brand img, body > .cmk-nav .cmk-nav__sticky-brand .cmk-nav-mobile__brand-image { display: block !important; width: auto !important; height: 34px !important; max-width: 178px !important; object-fit: contain !important; } }