/* ── Ensure Bootstrap Icons font doesn't block rendering ── */
@font-face {
    font-family: "bootstrap-icons";
    src: url("/wp-content/themes/pro/static/vendor/bootstrap/icons/fonts/bootstrap-icons.woff2") format("woff2");
    font-display: swap;
}

:root {
    --te-bg: #f6f4f3;
    --te-border: #d0cdcb;
    --te-ink: #1e1e1e;
    --te-green: #21827F;
    --te-green-hover: #1a6e6b;

    /* ── Header colour + interaction tokens ── */
    --hair:              #d0cdcb;
    --paper-warm:        #f4f1e9;
    --brand:             #1187D4;
    --brand-hover:       #0d6dab;
    --header-hover-bg:   var(--paper-warm);
    --header-pressed-bg: #ece8db;
    --header-focus-ring:   2px solid var(--brand);
    --header-focus-offset: 2px;
}

/* Always reserve scrollbar space so removing it (e.g. when mobile menu opens)
   never causes a viewport-width change and layout shift. */
html {
    overflow-y: scroll;
}

/* ── Custom header breakpoint: 1150px ── */
@media (min-width: 1150px) {
    .hdr-desk-block  { display: block !important; }
    .hdr-desk-iflex  { display: inline-flex !important; }
    .hdr-mob-only    { display: none !important; }
}

/* ── Desktop dropdowns: open on click ── */
@media (min-width: 1150px) {
    .main-header-nav .navbar-nav > .dropdown > .dropdown-menu {
        display: block;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity 0.15s ease, visibility 0.15s ease;
    }

    .main-header-nav .navbar-nav > .dropdown.is-open > .dropdown-menu {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }
}

/* ── Right-side action items ── */
.header-right {
    gap: 4px;
    align-self: stretch;
    display: flex;
    align-items: center;
}

.header-action {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0.5rem 0.75rem;
    color: #1e1e1e;
    font-size: inherit;
    font-weight: 500;
    text-decoration: none;
    background: none;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    white-space: nowrap;
    line-height: 1.4;
    transition: color 120ms ease, background 120ms ease;
}

.header-action i {
    font-size: 1rem;
}

.header-action:hover {
    color: var(--brand);
    background: var(--header-hover-bg);
    text-decoration: none;
}

.header-action:active {
    background: var(--header-pressed-bg);
}

.header-action:focus-visible {
    outline: var(--header-focus-ring);
    outline-offset: var(--header-focus-offset);
}

/* ── Cart counter badge ── */
.cart-icon-wrap {
    position: relative;
    display: inline-flex;
}

#pro-cart-counter {
    display: none;
    position: absolute;
    top: -6px;
    right: -8px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    background: var(--brand);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 18px;
    border-radius: 9px;
    text-align: center;
    pointer-events: none;
}

/* ── Active nav item ── */
.main-header-nav .navbar-nav > li.active > a {
    color: var(--te-green);
}

/* ── Desktop search bar below header ── */
.te-searchbar {
    background: #fff;
    border-bottom: 0 solid var(--te-border);
    overflow: hidden;
    max-height: 0;
    transition: max-height .28s ease;
}

.te-searchbar .search-wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: .65rem 1rem;
}

html.search-open .te-searchbar {
    max-height: 110px;
}

.dgwt-wcas-focused .te-searchbar {
    border-bottom: 1px solid #d0cdcb !important;
}

/* ── Country / flag dropdown ── */
.flag-dropdown {
    position: relative;
}

.flag-dropdown .dropdown-menu {
    right: 0;
    left: auto;
}

.flag {
    width: 20px;
    height: auto;
    border-radius: 2px;
}

.flag-toggle-arrow {
    cursor: pointer;
    user-select: none;
}

/* ── Mobile drilldown overlay ── */
.mm-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .45);
    opacity: 0;
    transition: opacity .2s ease;
    z-index: 1040;
}

html.mm-open .mm-overlay {
    opacity: 1;
}

html.mm-open .mm-overlay[hidden] {
    display: block !important;
}

html.mm-open body {
    overflow: hidden;
    touch-action: none;
}

/* ── Mobile panel ── */
.mm-panel {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 85vw;
    background: #fff;
    box-shadow: 0 0 24px rgba(0, 0, 0, .18);
    transform: translateX(-100%);
    transition: transform .38s ease;
    z-index: 1050;
    display: flex;
    flex-direction: column;
}

html.mm-open .mm-panel[hidden] {
    display: block !important;
}

html.mm-open .mm-panel.is-open {
    transform: translateX(0);
}

.mm-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--te-border);
}

.mm-btn {
    height: 40px;
    min-width: 40px;
    border: 1px solid var(--te-border);
    background: #fff;
    border-radius: 10px;
    display: inline-grid;
    place-items: center;
    cursor: pointer;
}

.mm-title {
    flex: 1;
    text-align: center;
    font-weight: 600;
    color: var(--te-ink);
    font-family: 'JetBrains Mono', monospace;
}

.mm-search {
    padding: 12px 14px;
    border-bottom: 0 solid var(--te-border);
    background: var(--te-bg);
}

.mm-search form {
    display: flex;
    gap: 8px;
}

.mm-search input {
    flex: 1;
    height: 44px;
    border: 1px solid var(--te-border);
    border-radius: 10px;
    padding: 0 12px;
}

.mm-search input:focus {
    outline: none;
    border-color: #4db6ac;
    box-shadow: 0 0 0 3px rgba(77, 182, 172, .15);
}

.mm-search button {
    height: 44px;
    border: 1px solid var(--te-border);
    border-radius: 10px;
    background: #fff;
    padding: 0 12px;
    color: var(--te-green);
}

.mm-search button:hover {
    color: var(--te-green-hover);
}

.mm-viewport {
    position: relative;
    flex: 1 1 auto;
    overflow: hidden;
}

.mm-track {
    position: absolute;
    inset: 0;
    display: flex;
    width: 100%;
    height: 100%;
    transition: transform .38s ease;
}

.mm-page {
    min-width: 100%;
    height: 100%;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    padding: 8px 8px 16px;
}

.mm-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.mm-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 2px 4px;
}

.mm-link {
    flex: 1;
    padding: 12px 12px;
    text-decoration: none;
    color: var(--te-green);
    border-radius: 10px;
    font-family: 'JetBrains Mono', monospace;
    font-size: .9rem;
    background: transparent;
    text-align: left;
}

button.mm-link {
    border: 0;
    cursor: pointer;
}

.mm-link:hover {
    color: var(--te-green-hover);
    background: #f8f8f8;
}

.mm-link:focus-visible {
    outline: 2px solid var(--te-green);
    outline-offset: 2px;
}

.mm-next {
    height: 36px;
    min-width: 36px;
    border: 1px solid var(--te-border);
    background: #fff;
    border-radius: 10px;
    display: inline-grid;
    place-items: center;
    cursor: pointer;
    margin-left: auto;
    color: #0C63AD; /* brand blue */
}

.mm-next:hover {
    color: #0C63AD;
    background: #f8f8f8;
}

/* Visual divider (menu items with class "mega-divider") — thin hairline.
   Mirrors the desktop mega panel's `pro-mega-divider`. */
.mm-divider {
    list-style: none;
    height: 2rem;
    margin: 0;
    padding: 0;
    background: #FAFAF8;
}

.mm-next svg {
    width: 18px;
    height: 18px;
    display: block;
}

@media (prefers-reduced-motion: reduce) {
    .mm-panel,
    .mm-track {
        transition: none !important;
    }
}

/* ── Body padding (set by ResizeObserver in header.js) ──
   !important is deliberate: Cookiebot's banner script (cc.js, toggleEdgeDetails)
   writes an inline `padding-top: 0px` on <body> while its consent banner is
   open (first visit, no consent stored), which would otherwise pull the whole
   page up under the fixed header and hide #te-searchbar. Inline styles lose
   to !important stylesheet rules. 2026-09-23. */
body {
    padding-top: var(--header-h, 64px) !important;
}

/* ── header-new layout ── */
.header-new {
    padding: 0 50px;
    border-bottom: 1px solid #E4E5E8;
    border-top: none;
    background-color: #ffffff;
    transition: box-shadow 0.2s ease;
}

.header-new.header-scrolled {
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

.header-inner {
    width: 100%;
    min-height: 72px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.left-group img {
    height: 40px;
}

.left-group .logo {
    flex-shrink: 0;
}

/* ── Nav stretches full header height so dropdowns sit flush at bottom ── */
.main-header-nav {
    align-self: stretch;
    display: flex;
    align-items: stretch;
}

.main-header-nav > div,
.main-header-nav .navbar-collapse {
    display: flex !important;
    align-items: stretch;
    height: 100%;
}

/* ── Prevent nav wrapping ── */
.main-header-nav .navbar-nav {
    flex-wrap: nowrap;
    align-items: stretch;
    height: 100%;
}

.left-group {
    min-width: 0;
    flex-shrink: 1;
    align-self: stretch;
    display: flex;
    align-items: stretch;
}

/* ── Top-level nav items ── */
.header-new li.nav-item {
    list-style: none;
    display: flex;
    align-items: center;
    padding: 0 8px;
}

.header-new li.nav-item > a {
    display: flex;
    align-items: center;
    padding: 0 0.75rem;
    padding-bottom: 6px;
    color: #1e1e1e;
    font-weight: 500;
    white-space: nowrap;
    text-decoration: underline;
    text-decoration-color: transparent;
    text-underline-offset: 10px;
    text-decoration-thickness: 2px;
    transition: color 0.15s ease, text-decoration-color 0.15s ease;
}

/* ── Tighter nav spacing at intermediate widths ── */
@media (min-width: 1150px) and (max-width: 1600px) {
    .header-new li.nav-item {
        padding: 0 4px;
    }
    .header-new li.nav-item > a {
        padding: 0 0.4rem;
        padding-bottom: 2px;
    }
}

.header-new .navbar-nav > li.nav-item:hover > a {
    color: var(--brand);
    text-decoration-color: var(--brand);
}

/* The top-level toggles (Products/Solutions) have href="#" and preventDefault
   their click to open a mega panel, so the <a> keeps :focus after a mouse
   click and never blurs. Bootstrap's `.navbar-light .navbar-nav .nav-link:focus`
   paints that focused link teal (#8ac4bb), which then lingers after the panel
   closes — and stays green even while a different item is hovered. Drive the
   highlight off hover/open state instead of raw focus: neutralise the stray
   teal on plain focus, keep the open/hovered toggle brand-blue, and give
   keyboard users a real focus ring (they had only the teal colour before). */
.main-header-nav .navbar-nav > li.nav-item > a:focus {
    color: #0f0d1d;
}
.main-header-nav .navbar-nav > li.nav-item:hover > a,
.main-header-nav .navbar-nav > li.nav-item.is-open > a {
    color: var(--brand);
}
.main-header-nav .navbar-nav > li.nav-item > a:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}


/* Hide Bootstrap's default dropdown caret on top-level items */
.header-new .navbar-nav > li.dropdown > a.dropdown-toggle::after {
    display: none;
}

/* ── Dropdown menus ── */
.header-new ul.dropdown-menu {
    border: 1px solid #d0cdcb;
    border-top: none;
    border-radius: 0;
    padding: 0;
    min-width: 250px;
    margin-top: 0;
}

/* Each dropdown item: simple bottom separator, no box */
.header-new ul.dropdown-menu > li {
    border: none;
    border-bottom: 1px solid #d0cdcb;
    padding: 0;
}

.header-new ul.dropdown-menu > li:last-child {
    border-bottom: none;
}

/* Dropdown links */
.header-new ul.dropdown-menu > li > a {
    display: block;
    width: 100%;
    padding: 0.65rem 1rem;
    color: #1e1e1e;
    text-align: left;
    border: none;
    line-height: 1.4;
    white-space: nowrap;
    box-sizing: border-box;
}

.header-new ul.dropdown-menu > li > a:hover,
.header-new ul.dropdown-menu > li > a.nav-link:hover {
    color: var(--brand);
    background-color: #FAFAF8;
}

/* Chevron right for items with submenus — pure CSS, no icon font needed */
.header-new ul.dropdown-menu > li.dropdown > a::after {
    content: "";
    display: inline-block;
    width: 0.35em;
    height: 0.35em;
    border-right: 0.12em solid currentColor;
    border-top: 0.12em solid currentColor;
    transform: rotate(45deg);
    float: right;
    margin-left: 0.75rem;
    margin-top: 0.45em;
    flex-shrink: 0;
}

/* ── Submenu flyout ── */
.header-new ul.dropdown-menu ul.dropdown-menu {
    position: absolute;
    top: -1px;
    left: 100%;
    background-color: #ffffff;
    border: 1px solid #d0cdcb;
    border-radius: 0;
    min-width: 220px;
    display: none;
}

.header-new ul.dropdown-menu > li.dropdown.is-open > ul.dropdown-menu {
    display: block;
}

/* Cart counter position */
.header-new #pro-cart-counter {
    top: -8px !important;
    right: -15px !important;
}

/* FiboSearch */
.header-new input#dgwt-wcas-search-input-1 {
    background-color: #ffffff;
    border: 1px solid #d0cdcb;
}

#te-searchbar .te-searchbar {
    border-bottom: 0 solid var(--te-border) !important;
}

.new-menu ul.navbar-nav li a::after {
    content: '' !important;
}

/* Flag dropdown */
.flag-dropdown {
    position: relative;
    align-self: center;
    display: inline-flex;
    align-items: center;
}

.flag-dropdown .flag-link,
.flag-dropdown .flag-toggle-arrow {
    color: #1e1e1e;
    text-decoration: none;
}

.flag-dropdown:hover .flag-link,
.flag-dropdown:hover .flag-toggle-arrow {
    color: var(--brand);
}

.flag-dropdown .dropdown-menu {
    top: 100% !important;
    margin-top: 0 !important;
    left: 0 !important;
    right: auto !important;
}

/* ── Mobile drilldown item styles ── */
.mm-viewport .mm-link {
    color: #1e1e1e;
}

.mm-viewport li.mm-item {
    padding: 0;
    border-top: 1px solid #d0cdcb;
    border-left: none;
    border-right: none;
    border-bottom: none;
}

.mm-viewport li.mm-item:last-child {
    border-bottom: 1px solid #d0cdcb;
}

.mm-viewport button.mm-next {
    border: 0;
    color: #0C63AD; /* brand blue */
}

.mm-viewport section.mm-page {
    padding: 0;
}

/* ── Hide action text labels below 1600px ── */
@media (max-width: 1599px) {
    .header-action-label {
        display: none;
    }
}

/* ── Mobile panel footer (contact + CTA) ── */
.mm-footer {
    padding: 14px 14px;
    border-top: 1px solid var(--te-border);
    background: var(--te-bg);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.mm-footer-contact {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.mm-footer-detail {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 10px 12px;
    color: var(--te-ink);
    font-size: 0.9rem;
    text-decoration: none;
    background: #FAFAF8;
    border: 1px solid #F2F3F5;
    border-radius: 0;
}

.mm-footer-detail i {
    color: #1187D4;
    font-size: 1rem;
    flex-shrink: 0;
}

.mm-footer-detail:hover {
    color: #0C63AD;
    text-decoration: none;
}

.mm-footer-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px;
    color: #fff;
    font-weight: 600;
    font-size: 0.95rem;
    text-decoration: none;
    background: #1187D4;
    border: none;
    border-radius: 0;
}

.mm-footer-cta i {
    font-size: 1rem;
}

.mm-footer-cta:hover {
    background: #0C63AD;
    color: #fff;
    text-decoration: none;
}

/* ── Partner mega menu ── */

/* Always hidden by default — prevents position:fixed leaking on mobile */
.partner-mega-panel {
    display: none;
}

@media (min-width: 1150px) {
    .has-partner-mega {
        position: static !important;
    }

    .partner-mega-panel {
        display: block;
        position: fixed;
        top: var(--header-h, 64px);
        left: 0;
        width: 100vw;
        background: #fff;
        border-top: 1px solid var(--te-border);
        border-bottom: 1px solid var(--te-border);
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.10);
        z-index: 1050;
        padding: 1.5rem 2rem;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity 0.15s ease, visibility 0.15s ease;
    }

    .has-partner-mega.is-open .partner-mega-panel {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    .partner-mega-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
        gap: 1rem;
        max-width: 1400px;
        margin: 0 auto;
    }

    .partner-logo-tile {
        display: block;
        border: 1px solid var(--te-border);
        text-decoration: none;
        transition: border-color 0.15s ease, box-shadow 0.15s ease;
        background: #fff;
        aspect-ratio: 1 / 1;
        overflow: hidden;
    }

    .partner-logo-tile:hover {
        border-color: #0C63AD;
        box-shadow: 0 0 0 3px rgba(12, 99, 173, 0.15);
        text-decoration: none;
    }

    .partner-logo-tile img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: contain;
        object-position: center;
    }
}

/* ── Pro mega panel (curated, brand palette) ──────────────────────────────
   Brand tokens used (from design system):
     surface  #FFFFFF   tint    #F2F3F5   hair     #E4E5E8
     paper    #FAFAF8   tint-2  #ECEEF1   hair-2   #D4D6DA
     ink      #0C1220   body    #2A2F3A   muted    #6B7280
     brand    #1187D4   brand-dark #0C63AD                            */

.pro-mega-panel { display: none; }

@media (min-width: 1150px) {
    /* Translucent white wash over the page below the header while any mega
       panel is open. ::after on the nav escapes its parent via position:fixed
       and sits between the panel (z 1050) and page content. */
    .navbar-nav::after {
        content: '';
        position: fixed;
        top: var(--header-h, 64px);
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(255, 255, 255, .78);
        z-index: 1040;
        pointer-events: none;
        opacity: 0;
        visibility: hidden;
        transition: opacity .15s ease, visibility .15s ease;
    }
    .navbar-nav:has(li.is-open > .pro-mega-panel)::after {
        opacity: 1;
        visibility: visible;
    }
    /* Trigger LIs are detected by :has(.pro-mega-panel) — no class dependency */
    .navbar-nav > li:has(> .pro-mega-panel) { position: static !important; }

    /* Hide the standard nested dropdown on desktop — the panel takes over */
    .navbar-nav > li:has(> .pro-mega-panel) > .dropdown-menu { display: none !important; }

    .pro-mega-panel {
        display: block;
        position: fixed;
        top: var(--header-h, 64px);
        left: 0;
        width: 100vw;
        max-height: calc(100vh - var(--header-h, 64px));
        overflow-y: auto;
        overscroll-behavior: contain;                 /* don't scroll page once panel hits its end */
        background: #FFFFFF;                          /* surface */
        color: #2A2F3A;                               /* body    */
        border-top: 1px solid #E4E5E8;                /* hair  */
        box-shadow: 0 8px 24px rgba(12, 18, 32, .08); /* ink @ 8%a */
        font-family: 'JetBrains Mono', monospace;
        z-index: 1050;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity .15s ease, visibility .15s ease;
    }

    .navbar-nav > li.is-open > .pro-mega-panel {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    /* Inner content starts at the same x as the header logo (50px = .header-new
       horizontal padding) and extends to the right matching the header. */
    .pro-mega-panel__inner {
        padding: 1.75rem 50px;
        display: grid;
        grid-template-columns: minmax(240px, 1fr) minmax(0, 2.4fr) minmax(280px, 1fr);
        gap: 2rem;
    }

    /* Tier 1 — left rail (ink panel, white text)
       Bleeds to the panel's top, bottom and left edges so the rail has no
       visible border on those sides. Right edge meets the paper bg cleanly. */
    .pro-mega-tier1 {
        list-style: none;
        margin: -1.75rem 0 -1.75rem -50px;            /* cancel panel inner padding */
        padding: 1.75rem 0;                           /* keep vertical breathing room */
        background: #0C1220;                          /* ink     */
        border-radius: 0;
        align-self: stretch;
    }
    .pro-mega-tier1__item { margin: 0; }
    .pro-mega-tier1__link {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: .75rem;
        padding: .7rem .85rem .7rem 50px;             /* left aligns with logo */
        color: #FFFFFF;                               /* surface */
        text-decoration: none;
        border-radius: 0;
        font-weight: 600;
        font-size: .9rem;
        transition: background-color .12s ease, color .12s ease;
    }
    .pro-mega-tier1__arrow {
        opacity: 0;
        color: #1187D4;                               /* brand */
        transition: opacity .12s ease, transform .12s ease;
        font-size: .85rem;
    }
    .pro-mega-tier1__item:hover .pro-mega-tier1__link {
        background: rgba(255, 255, 255, .08);
        color: #FFFFFF;
        text-decoration: none;
    }
    .pro-mega-tier1__item.is-active .pro-mega-tier1__link {
        background: #0C63AD;                          /* brand-dark */
        color: #FFFFFF;
    }
    .pro-mega-tier1__item.is-active .pro-mega-tier1__arrow {
        opacity: 1;
        transform: translateX(2px);
        color: #FFFFFF;
    }
    /* Divider in the ink rail — thin hairline, low-opacity white. */
    .pro-mega-tier1__divider {
        list-style: none;
        height: 1.25rem;                              /* breathing space */
        margin: 0;
        background: transparent;
        pointer-events: none;
    }

    /* When the active Tier-1 row has no Tier-2 content, the panel reads as
       a full-width extension of the ink rail — middle area and promo blend
       into the ink so the row's link is the whole story. */
    .pro-mega-panel:has(.pro-mega-tier2.is-active.pro-mega-tier2--empty) {
        background: #0C1220;                          /* ink */
    }
    .pro-mega-panel:has(.pro-mega-tier2.is-active.pro-mega-tier2--empty:not(.pro-mega-tier2--promo)) .pro-mega-promo-wrap {
        display: none;   /* rows with their own promo (--promo) keep it visible, 2026-10-14 */
    }

    /* When the active row is the partner logo grid, the grid spans the full
       middle + right area — promo column isn't used. */
    .pro-mega-panel:has(.pro-mega-tier2.is-active.pro-mega-tier2--partners) .pro-mega-tier2-wrap {
        grid-column: 2 / 4;
    }
    .pro-mega-panel:has(.pro-mega-tier2.is-active.pro-mega-tier2--partners) .pro-mega-promo-wrap {
        display: none;
    }

    /* Tier 2 — middle area, swap on hover */
    .pro-mega-tier2-wrap { position: relative; min-height: 200px; }
    .pro-mega-tier2 { display: none; }
    .pro-mega-tier2.is-active { display: block; }
    .pro-mega-tier2__col { min-width: 0; }

    /* Cards laid out as a multi-column grid — short cards backfill gaps left
       by tall group cards via dense packing. */
    .pro-mega-links {
        padding: 0;
        margin: 0;
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
        grid-auto-flow: row;
        gap: .75rem;
        align-items: start;
    }
    .pro-mega-links__item {
        padding: 0;
        background: #FFFFFF;                          /* surface */
        border: 1px solid #E4E5E8;                    /* hair    */
        border-radius: 0;
        list-style: none;
        transition: border-color .12s ease, box-shadow .12s ease, transform .12s ease;
    }
    .pro-mega-links__item:hover {
        border-color: #1187D4;                        /* brand */
        box-shadow: 0 2px 8px rgba(12, 18, 32, .06);
    }

    .pro-mega-links__a {
        display: flex;
        flex-direction: column;
        gap: .1rem;
        padding: .6rem .85rem;
        text-decoration: none;
        color: #2A2F3A;                               /* body */
    }
    .pro-mega-links__title {
        font-weight: 600;
        font-size: .9rem;
        color: #0C1220;                               /* ink */
        transition: color .12s ease;
    }
    .pro-mega-links__tag {
        color: #6B7280;                               /* muted */
        font-size: .8rem;
        line-height: 1.4;
    }
    .pro-mega-links__a:hover .pro-mega-links__title {
        color: #1187D4;                               /* brand */
    }

    /* Tier-2 group card — the parent label sits in a tint-2 band at the top
       of the card, children stacked underneath inside the same border. */
    .pro-mega-links__group { padding: 0; }
    .pro-mega-links__a--group {
        background: #ECEEF1;                          /* tint-2 */
        padding: .55rem .85rem;
        margin: 0;
        border-bottom: 1px solid #E4E5E8;             /* hair */
    }
    .pro-mega-links__a--group .pro-mega-links__title {
        font-family: 'JetBrains Mono', monospace;
        color: #0C1220;                               /* ink */
        font-weight: 700;
        font-size: .72rem;
        text-transform: uppercase;
        letter-spacing: .06em;
    }
    /* When the group label is a non-clickable label (URL = #), no hover. */
    .pro-mega-links__a--label { cursor: default; }
    .pro-mega-links__a--label:hover .pro-mega-links__title { color: inherit; }
    /* When it IS clickable, keep a brand-blue hover signal */
    .pro-mega-links__a--group:not(.pro-mega-links__a--label):hover .pro-mega-links__title {
        color: #0C63AD;                               /* brand-dark */
    }
    .pro-mega-links--nested {
        display: block !important;
        gap: 0 !important;
        margin: 0 !important;
        padding: .35rem !important;
    }
    .pro-mega-links--nested .pro-mega-links__item {
        background: transparent;
        border: 0;
        border-radius: 0;
        padding: 0;
    }
    .pro-mega-links--nested .pro-mega-links__item:hover {
        border: 0;
        box-shadow: none;
    }

    /* Divider — non-clickable separator. In the Tier-2 grid it spans every
       column; inside a nested group card it's just a hairline. */
    .pro-mega-links > .pro-mega-divider {
        grid-column: 1 / -1;
        height: 1px;
        background: #E4E5E8;
        border: 0;
        padding: 0;
        margin: .25rem 0;
    }
    .pro-mega-links > .pro-mega-divider:hover {
        border: 0;
        box-shadow: none;
    }
    .pro-mega-links--nested .pro-mega-divider {
        height: 1px;
        background: #E4E5E8;
        margin: .35rem .5rem;
        padding: 0;
    }
    .pro-mega-links--nested .pro-mega-links__a {
        padding: .3rem .5rem;
        border-radius: 0;
    }
    .pro-mega-links--nested .pro-mega-links__title {
        font-weight: 500;
        font-size: .85rem;
        color: #2A2F3A;                               /* body */
    }
    .pro-mega-links--nested .pro-mega-links__a:hover .pro-mega-links__title {
        color: #1187D4;                               /* brand */
    }

    /* Promo column — whole card is the clickable link.
       Bleeds to the panel's top, bottom and right edges to match the left
       rail. Cancels the panel inner padding (1.75rem v / 50px h). */
    .pro-mega-promo-wrap {
        position: relative;
        min-height: 200px;
        margin: -1.75rem -50px -1.75rem 0;
    }
    .pro-mega-promo { display: none; height: 100%; }
    .pro-mega-promo.is-active { display: block; }

    .pro-mega-promo__card {
        display: flex;
        flex-direction: column;
        height: 100%;
        border: 0;
        border-left: 1px solid #E4E5E8;               /* hair separator from middle column */
        background: #FFFFFF;                          /* surface */
        text-decoration: none;
        transition: background-color .12s ease;
    }
    .pro-mega-promo__card:hover {
        text-decoration: none;
    }
    .pro-mega-promo__card:hover .pro-mega-promo__head {
        background: #DCE0E6;                          /* a touch deeper than tint-2 */
    }

    .pro-mega-promo__img {
        background: #F2F3F5;                          /* tint */
        overflow: hidden;
        aspect-ratio: 16 / 9;
        border-bottom: 1px solid #E4E5E8;             /* hair */
    }
    .pro-mega-promo__img img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    /* Logos (SVG / wide wordmarks) sit whole inside the 16:9 box instead of being cropped. */
    .pro-mega-promo__img--logo { background: #FFFFFF; }
    .pro-mega-promo__img--logo img { object-fit: contain; padding: 1.5rem 2.25rem; box-sizing: border-box; }

    /* Product cut-outs: whole product on the paper tint; white photo backgrounds melt into it. */
    .pro-mega-promo__img--product { background: #FAFAF8; }
    .pro-mega-promo__img--product img { object-fit: contain; padding: 0; mix-blend-mode: multiply; transform: scale(1.1); } /* product photos carry their own white margin */

    /* Header band — eyebrow + heading on tint-2 bg, JetBrains Mono, ink text */
    .pro-mega-promo__head {
        background: #ECEEF1;                          /* tint-2 */
        padding: .75rem 1rem;
        border-bottom: 1px solid #E4E5E8;             /* hair   */
        font-family: 'JetBrains Mono', monospace;
        color: #0C1220;                               /* ink    */
    }
    .pro-mega-promo__eyebrow {
        font-size: .7rem;
        font-weight: 600;
        letter-spacing: .08em;
        text-transform: uppercase;
        color: #0C1220;                               /* ink */
        margin: 0 0 .25rem;
    }
    .pro-mega-promo__heading {
        font-family: 'JetBrains Mono', monospace;
        font-size: .95rem;
        font-weight: 700;
        line-height: 1.3;
        color: #0C1220;                               /* ink */
        margin: 0;
    }

    /* Description band — sans, body color on tint bg */
    .pro-mega-promo__desc {
        background: #F2F3F5;                          /* tint */
        padding: .85rem 1rem 1rem;
        flex-grow: 1;
        font-family: "IBM Plex Sans", sans-serif;
    }
    .pro-mega-promo__body {
        font-size: .85rem;
        line-height: 1.5;
        color: #2A2F3A;                               /* body */
        margin: 0 0 .85rem 0;
    }
    .pro-mega-promo__cta {
        display: inline-flex;
        align-items: center;
        gap: .35rem;
        background: #1187D4;                          /* brand */
        color: #FFFFFF;
        padding: .55rem .85rem;
        font-family: 'JetBrains Mono', monospace;
        font-size: .8rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: .04em;
        text-decoration: none;
        transition: background-color .12s ease;
    }
    .pro-mega-promo__cta:hover {
        background: #0C63AD;                          /* brand-dark */
        color: #FFFFFF;
        text-decoration: none;
    }
    .pro-mega-promo__cta i {
        transition: transform .12s ease;
    }
    .pro-mega-promo__cta:hover i {
        transform: translateX(2px);
    }

    /* Text band hugs its content when articles follow, so the list sits right under it. */
    .pro-mega-promo__desc:has(+ .pro-mega-promo__articles) { flex-grow: 0; }
    .pro-mega-promo__desc + .pro-mega-promo__articles { padding-top: .25rem; }

    /* Tag-driven article list inside the promo card. */
    .pro-mega-promo__articles {
        background: #F2F3F5;                          /* tint */
        padding: 1rem;
        margin: 0;
        list-style: none;
        flex-grow: 1;
        display: flex;
        flex-direction: column;
        gap: .25rem;
    }
    .pro-mega-promo__article a {
        display: block;
        padding: .55rem .65rem;
        background: #FFFFFF;
        border: 1px solid #E4E5E8;
        text-decoration: none;
        transition: border-color .12s ease;
    }
    .pro-mega-promo__article a:hover {
        border-color: #1187D4;                        /* brand */
    }
    .pro-mega-promo__article-eyebrow {
        display: block;
        font-family: 'JetBrains Mono', monospace;
        font-size: .65rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .06em;
        color: #6B7280;                               /* muted */
        margin-bottom: .15rem;
    }
    .pro-mega-promo__article-title {
        display: block;
        font-size: .85rem;
        line-height: 1.35;
        color: #0C1220;                               /* ink */
        font-family: "IBM Plex Sans", sans-serif;
    }
    .pro-mega-promo__article a:hover .pro-mega-promo__article-title {
        color: #0C63AD;                               /* brand-dark */
    }
}

/* ── Mobile partner logo grid (drilldown sub-page) ── */
.mm-partner-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    padding: 12px;
}

.mm-partner-tile {
    display: block;
    border: 1px solid var(--te-border);
    background: #fff;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    text-decoration: none;
}

.mm-partner-tile img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}

/* ── Print ── */
@media print {
    .header-new {
        position: static;
        box-shadow: none;
        border-bottom: 1px solid #d0cdcb;
    }
    body {
        padding-top: 0 !important;
    }
    .mm-overlay,
    .mm-panel,
    #mm-source,
    #te-searchbar {
        display: none !important;
    }
}

/* ── Mobile overrides ── */
@media (max-width: 768px) {
    .header-new {
        padding: 0 16px;
    }
    body {
        padding-top: var(--header-h, 56px) !important; /* see body rule above (Cookiebot) */
    }

    /* Flag dropdown: don't stretch full height on mobile */
    .flag-dropdown {
        align-self: auto;
    }

    /* Flag dropdown menu: open above if near bottom, align left */
    .flag-dropdown .dropdown-menu {
        left: auto !important;
        right: 0 !important;
    }

    .header-new nav.navbar.navbar-expand {
        width: 100%;
        position: sticky;
        left: 0;
        display: contents;
    }

    aside button.mm-btn {
        border: 0;
        font-size: 30px;
        display: flex;
    }

    aside .mm-title {
        text-align: left;
        font-weight: 500;
    }

    .nav-link.menu-opener {
        color: #5a5b75;
        border-left: 1px solid #d0cdcb;
        padding-right: 0;
        margin-left: 8px;
    }

    .dgwt-wcas-search-wrapp .dgwt-wcas-sf-wrapp input[type=search].dgwt-wcas-search-input,
    .dgwt-wcas-search-wrapp .dgwt-wcas-sf-wrapp input[type=search].dgwt-wcas-search-input:hover,
    .dgwt-wcas-search-wrapp .dgwt-wcas-sf-wrapp input[type=search].dgwt-wcas-search-input:focus {
        font-size: 13px;
    }
}