/**
 * Printworx Megamenu - richting 3a "Lichte index" (Claude Design handoff 09-2026)
 *
 * Licht, zakelijk en strak: witte panelen binnen de contentbreedte van de
 * header. "Alle producten" = zijbalk met categorieen + productgroepen met
 * derde niveau + vaste "Uitgelicht"-kolom (340x340 beeld) + USP-marquee.
 * "Diensten" = drie kolommen met tegels + previewkolom die gevuld start en
 * blijft staan. Account/Service/Admin = lichte dropdowns met inschuivend
 * lime pijltje (Divi's eigen submenu's, herstyled).
 *
 * Divi-lessen (niet weghalen):
 * - :not(#_):not(#_) telt als TWEE id's: Divi levert de header-CSS soms met
 *   voorvoegsel `.et-db #et-boc .et-l` (1 id + 5 klassen), en die versie
 *   versloeg onze enkele :not(#_) (koppen werden 20px grijs, links 200px
 *   breed en over elkaar - gemeld 09-11-2026). Daarom ook !important op
 *   alle declaraties in die regels.
 * - Linkkleuren hebben !important nodig (Divi zet `ul li a { color !important }`).
 * - visibility/pointer-events op kinderen van panelen ALTIJD via inherit,
 *   nooit forceren: anders vangt een verborgen paneel de muis af.
 * - Balk- en dropdownstijlen gelden ENKEL voor ul.et-menu.pwx-hoofdmenu
 *   (klasse gezet via wp_nav_menu_args). Andere Divi-menumodules (footer,
 *   accountmenu) houden hun eigen Divi-opmaak (Roel, 09-11-2026).
 */

:root {
    --pwx-mm-lime: #b3c731;
    --pwx-mm-lime-donker: #8a9b23;
    --pwx-mm-inkt: #1d1d1b;
    --pwx-mm-grijs: #55584a;
    --pwx-mm-zacht: #8a8d80;
    --pwx-mm-vlak: #fbfbf8;
    --pwx-mm-tegel: #f5f6ef;
    --pwx-mm-rand: #e8eadf;
    --pwx-mm-rand-licht: #eef0e7;
    --pwx-mm-radius: 14px;
    --pwx-mm-veer: cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes pwxWipe      { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes pwxIn        { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes pwxInLeft    { from { opacity: 0; transform: translateX(-22px); } to { opacity: 1; transform: none; } }
@keyframes pwxPop       { from { opacity: 0; transform: scale(0.72) rotate(-12deg); } to { opacity: 1; transform: none; } }
@keyframes pwxFadeBeeld { from { opacity: 0; transform: scale(1.04); } to { opacity: 1; transform: none; } }
@keyframes pwxMarquee   { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ── Desktop ───────────────────────────────────────────────────────────── */
@media (min-width: 981px) {

    .et_pb_menu {
        position: relative;
    }

    /* Menubalk: 15px / 500. */
    .et_pb_menu .et-menu.pwx-hoofdmenu > li > a {
        position: relative;
        font-size: 15px !important;
        font-weight: 500 !important;
        color: #55584a !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
    .et_pb_menu .et-menu.pwx-hoofdmenu > li:hover > a,
    .et_pb_menu .et-menu.pwx-hoofdmenu > li.pwx-mm-open > a,
    .et_pb_menu .et-menu.pwx-hoofdmenu > li.current-menu-item > a {
        color: var(--pwx-mm-inkt) !important;
    }

    /* Inkt-streep: lime streep tekent zich vanuit het midden onder het label. */
    .et_pb_menu .et-menu.pwx-hoofdmenu > li > a::before {
        content: "";
        position: absolute;
        left: 12px;
        right: 12px;
        bottom: 20px;
        height: 3px;
        border-radius: 999px;
        background: var(--pwx-mm-lime);
        transform: scaleX(0);
        transform-origin: center;
        transition: transform 0.18s var(--pwx-mm-veer);
    }
    .et_pb_menu .et-menu.pwx-hoofdmenu > li.current-menu-item > a::before,
    .et_pb_menu .et-menu.pwx-hoofdmenu > li.current-menu-ancestor > a::before {
        transform: scaleX(1);
    }
    @media (hover: hover) and (pointer: fine) {
        .et_pb_menu .et-menu.pwx-hoofdmenu > li:hover > a::before,
        .et_pb_menu .et-menu.pwx-hoofdmenu > li.et-hover > a::before,
        .et_pb_menu .et-menu.pwx-hoofdmenu > li.pwx-mm-open > a::before,
        .et_pb_menu .et-menu.pwx-hoofdmenu > li > a:focus-visible::before {
            transform: scaleX(1);
        }
    }

    /* Divi's eigen dropdown-pijl uit op megamenu-items (wij tonen de chevron). */
    .et_pb_menu li.pwx-mega > a:first-child::after {
        content: none !important;
    }
    .et_pb_menu li.pwx-mega > a .pwx-mm-chevron {
        width: 14px;
        height: 14px;
        margin-left: 5px;
        vertical-align: -2px;
        transition: transform 0.18s ease-out;
    }
    .et_pb_menu li.pwx-mega:hover > a .pwx-mm-chevron,
    .et_pb_menu li.pwx-mega.et-hover > a .pwx-mm-chevron,
    .et_pb_menu li.pwx-mega.pwx-mm-open > a .pwx-mm-chevron {
        transform: rotate(180deg);
    }

    /* ── Paneel-schil: wit, contentbreedte, wipe ──────────────────────── */
    .et_pb_menu li.pwx-mega > .pwx-mm-allepaneel,
    .et_pb_menu li.pwx-mega > .pwx-mm-dienstenpaneel {
        position: absolute;
        left: 0;
        top: 100%;
        width: 100%;
        background: #fff;
        border: 1px solid var(--pwx-mm-rand);
        border-radius: var(--pwx-mm-radius);
        box-shadow: 0 24px 48px -18px rgba(29, 29, 27, 0.18);
        overflow: hidden;
        z-index: 9999;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity 0.16s ease-out, visibility 0s linear 0.16s;
    }
    .et_pb_menu li.pwx-mega:hover > .pwx-mm-allepaneel,
    .et_pb_menu li.pwx-mega.et-hover > .pwx-mm-allepaneel,
    .et_pb_menu li.pwx-mega:focus-within > .pwx-mm-allepaneel,
    .et_pb_menu li.pwx-mega.pwx-mm-open > .pwx-mm-allepaneel,
    .et_pb_menu li.pwx-mega:hover > .pwx-mm-dienstenpaneel,
    .et_pb_menu li.pwx-mega.et-hover > .pwx-mm-dienstenpaneel,
    .et_pb_menu li.pwx-mega:focus-within > .pwx-mm-dienstenpaneel,
    .et_pb_menu li.pwx-mega.pwx-mm-open > .pwx-mm-dienstenpaneel {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transition: opacity 0.16s ease-out;
        animation: pwxWipe 0.32s cubic-bezier(0.22, 0.9, 0.3, 1) both;
    }
    /* Onzichtbare hoverbrug tussen balk en paneel. */
    .et_pb_menu li.pwx-mega > .pwx-mm-allepaneel::before,
    .et_pb_menu li.pwx-mega > .pwx-mm-dienstenpaneel::before {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        top: -16px;
        height: 16px;
    }

    /* Divi's generieke li/ul-opmaak neutraliseren binnen de panelen. */
    .et_pb_menu .pwx-mm-allepaneel ul:not(#_):not(#_),
    .et_pb_menu .pwx-mm-dienstenpaneel ul:not(#_):not(#_) {
        position: static !important;
        display: block !important;
        opacity: 1 !important;
        visibility: inherit !important;
        transform: none !important;
        pointer-events: inherit !important;
        width: auto !important;
        min-width: 0 !important;
        background: transparent !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        padding: 0 !important;
        margin: 0 !important;
        list-style: none !important;
    }
    .et_pb_menu .pwx-mm-allepaneel li:not(#_):not(#_),
    .et_pb_menu .pwx-mm-dienstenpaneel li:not(#_):not(#_) {
        display: block !important;
        float: none !important;
        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        list-style: none !important;
    }
    .et_pb_menu .pwx-mm-allepaneel a:not(#_):not(#_),
    .et_pb_menu .pwx-mm-dienstenpaneel a:not(#_):not(#_) {
        display: block !important;
        padding: 0 !important;
        width: auto !important;
        min-width: 0 !important;
        white-space: normal !important;
        font-size: 14px !important;
        line-height: 1.4 !important;
        text-align: left !important;
    }

    /* Gedeelde bouwstenen. */
    .pwx-mm-label {
        display: block;
        font: 700 11px 'Space Grotesk', sans-serif;
        letter-spacing: 0.16em;
        text-transform: uppercase;
        color: var(--pwx-mm-zacht);
    }
    .et_pb_menu .pwx-mm-allepaneel a.pwx-mm-alle-link:not(#_):not(#_) {
        font: 400 13px 'Atkinson Hyperlegible', sans-serif !important;
        color: var(--pwx-mm-lime) !important;
        text-decoration: underline !important;
        text-underline-offset: 3px !important;
    }
    .et_pb_menu .pwx-mm-allepaneel a.pwx-mm-pil:not(#_):not(#_),
    .et_pb_menu .pwx-mm-dienstenpaneel a.pwx-mm-pil:not(#_):not(#_) {
        display: inline-block !important;
        align-self: flex-start !important;
        padding: 10px 18px !important;
        background: var(--pwx-mm-lime) !important;
        border-radius: 999px !important;
        font: 600 13.5px 'Space Grotesk', sans-serif !important;
        color: var(--pwx-mm-inkt) !important;
        transition: transform 0.18s var(--pwx-mm-veer) !important;
    }
    .et_pb_menu .pwx-mm-allepaneel a.pwx-mm-pil:not(#_):not(#_):hover,
    .et_pb_menu .pwx-mm-dienstenpaneel a.pwx-mm-pil:not(#_):not(#_):hover {
        transform: translateY(-2px) !important;
    }
    .pwx-mm-cat-pijl {
        margin-left: auto;
        flex: 0 0 15px;
        opacity: 0;
        transform: translateX(-5px);
        transition: opacity 0.16s ease-out, transform 0.2s var(--pwx-mm-veer);
    }

    /* ── Paneel "Alle producten" ──────────────────────────────────────── */
    .et_pb_menu li.pwx-mega > .pwx-mm-allepaneel {
        display: flex;
        flex-direction: column;
    }
    .pwx-mm-alle {
        display: flex;
        align-items: stretch;
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto; /* alleen als het paneel hoger zou worden dan het venster */
        overscroll-behavior: contain;
    }
    .pwx-mm-usp { flex: 0 0 auto; }

    .et_pb_menu .pwx-mm-allepaneel ul.pwx-mm-alle-zijbalk:not(#_):not(#_) {
        width: 250px !important;
        flex: 0 0 250px !important;
        background: var(--pwx-mm-vlak) !important;
        border-right: 1px solid var(--pwx-mm-rand) !important;
        padding: 16px 0 !important;
        display: block !important;
    }
    .pwx-mm-alle-zijbalk .pwx-mm-label {
        margin: 0 22px 10px;
        animation: pwxInLeft 0.3s ease-out both;
    }
    .pwx-mm-alle-zijbalk li { animation: pwxInLeft 0.4s ease-out both; }
    .pwx-mm-alle-zijbalk li:nth-child(2)  { animation-delay: 0.06s; }
    .pwx-mm-alle-zijbalk li:nth-child(3)  { animation-delay: 0.10s; }
    .pwx-mm-alle-zijbalk li:nth-child(4)  { animation-delay: 0.14s; }
    .pwx-mm-alle-zijbalk li:nth-child(5)  { animation-delay: 0.18s; }
    .pwx-mm-alle-zijbalk li:nth-child(6)  { animation-delay: 0.22s; }
    .pwx-mm-alle-zijbalk li:nth-child(7)  { animation-delay: 0.26s; }
    .pwx-mm-alle-zijbalk li:nth-child(8)  { animation-delay: 0.30s; }
    .pwx-mm-alle-zijbalk li:nth-child(9)  { animation-delay: 0.34s; }
    .pwx-mm-alle-zijbalk li:nth-child(10) { animation-delay: 0.38s; }

    .et_pb_menu .pwx-mm-allepaneel a.pwx-mm-alle-cat:not(#_):not(#_) {
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
        padding: 11px 22px !important;
        font: 400 14.5px 'Atkinson Hyperlegible', sans-serif !important;
        color: var(--pwx-mm-inkt) !important;
        background: transparent !important;
        transition: background 0.18s ease-out !important;
    }
    .et_pb_menu .pwx-mm-allepaneel a.pwx-mm-alle-cat.actief:not(#_):not(#_) {
        background: #fff !important;
        font-weight: 700 !important;
    }
    .pwx-mm-alle-cat.actief .pwx-mm-cat-pijl {
        opacity: 1;
        transform: none;
    }
    .pwx-mm-alle-zijbalk a.pwx-mm-alle-link {
        display: inline-block;
        margin: 12px 22px 2px;
    }

    .pwx-mm-alle-mid {
        flex: 1 1 auto;
        min-width: 0;
        padding: 22px 26px 18px;
    }
    .pwx-mm-alle-pane { display: none; }
    .pwx-mm-alle-pane.actief { display: block; }
    .pwx-mm-pane-titelrij {
        display: flex;
        align-items: baseline;
        gap: 12px;
        flex-wrap: wrap;
        animation: pwxIn 0.3s ease-out both;
    }
    .pwx-mm-pane-titel {
        font: 700 22px 'Space Grotesk', sans-serif;
        letter-spacing: -0.01em;
        color: var(--pwx-mm-inkt);
    }

    .et_pb_menu .pwx-mm-allepaneel ul.pwx-mm-groepen:not(#_):not(#_) {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 22px 24px !important;
        align-content: start !important;
        margin-top: 18px !important;
    }
    .et_pb_menu .pwx-mm-allepaneel ul.pwx-mm-groepen.pwx-mm-groepen--4:not(#_):not(#_) {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        gap: 20px 18px !important;
    }
    .pwx-mm-groepen > li { animation: pwxIn 0.44s var(--pwx-mm-veer) both; }
    .pwx-mm-groepen > li:nth-child(1) { animation-delay: 0.05s; }
    .pwx-mm-groepen > li:nth-child(2) { animation-delay: 0.105s; }
    .pwx-mm-groepen > li:nth-child(3) { animation-delay: 0.16s; }
    .pwx-mm-groepen > li:nth-child(4) { animation-delay: 0.215s; }
    .pwx-mm-groepen > li:nth-child(5) { animation-delay: 0.27s; }
    .pwx-mm-groepen > li:nth-child(6) { animation-delay: 0.325s; }
    .pwx-mm-groepen > li:nth-child(7) { animation-delay: 0.38s; }
    .pwx-mm-groepen > li:nth-child(n+8) { animation-delay: 0.435s; }
    .pwx-mm-groep {
        display: flex;
        flex-direction: column;
        gap: 5px;
        min-width: 0;
    }
    .et_pb_menu .pwx-mm-allepaneel a.pwx-mm-groep-kop:not(#_):not(#_) {
        font: 600 14.5px/1.3 'Space Grotesk', sans-serif !important;
        color: var(--pwx-mm-inkt) !important;
        padding-bottom: 7px !important;
        border-bottom: 1px solid var(--pwx-mm-rand-licht) !important;
        transition: color 0.16s ease-out, border-color 0.16s ease-out !important;
    }
    .et_pb_menu .pwx-mm-allepaneel a.pwx-mm-groep-kop:not(#_):not(#_):hover {
        color: var(--pwx-mm-lime) !important;
        border-color: var(--pwx-mm-lime) !important;
    }
    .et_pb_menu .pwx-mm-allepaneel a.pwx-mm-sub:not(#_):not(#_) {
        font: 400 13px/1.55 'Atkinson Hyperlegible', sans-serif !important;
        color: var(--pwx-mm-grijs) !important;
        transition: color 0.14s ease-out, transform 0.18s var(--pwx-mm-veer) !important;
    }
    .et_pb_menu .pwx-mm-allepaneel a.pwx-mm-sub:not(#_):not(#_):hover {
        color: var(--pwx-mm-inkt) !important;
        transform: translateX(3px) !important;
    }

    /* Uitgelicht-kolom. */
    .pwx-mm-uit {
        width: 388px;
        flex: 0 0 388px;
        border-left: 1px solid var(--pwx-mm-rand);
        padding: 22px 24px;
        background: var(--pwx-mm-vlak);
        display: flex;
        flex-direction: column;
        gap: 14px;
    }
    .pwx-mm-uit-pane { display: none; }
    .pwx-mm-uit-pane.actief {
        display: flex;
        flex-direction: column;
        gap: 14px;
        flex: 1 1 auto;
    }
    .et_pb_menu .pwx-mm-allepaneel a.pwx-mm-uit-beeld:not(#_):not(#_),
    .pwx-mm-uit-beeld {
        display: flex !important;
        width: 340px !important;
        height: 340px !important;
        align-items: center !important;
        justify-content: center !important;
        background: #fff !important;
        border: 1px solid var(--pwx-mm-rand-licht) !important;
        border-radius: 12px !important;
        overflow: hidden !important;
        transition: box-shadow 0.22s ease-out, transform 0.24s var(--pwx-mm-veer) !important;
    }
    .et_pb_menu .pwx-mm-allepaneel a.pwx-mm-uit-beeld:not(#_):not(#_):hover {
        box-shadow: 0 18px 34px -18px rgba(29, 29, 27, 0.28) !important;
        transform: translateY(-4px) !important;
    }
    /* Productfoto's zijn (of worden) vierkant: cover vult het 1:1-kader. */
    .pwx-mm-uit-beeld img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        animation: pwxFadeBeeld 0.5s ease-out both;
    }
    .pwx-mm-uit-beeld--leeg {
        align-items: flex-end;
        justify-content: flex-start;
        padding: 14px;
        background: repeating-linear-gradient(135deg, #fff 0 9px, #f2f3ea 9px 18px);
        font: 400 11px ui-monospace, monospace;
        color: var(--pwx-mm-zacht);
    }
    .pwx-mm-uit-naam {
        font: 600 17px/1.25 'Space Grotesk', sans-serif;
        color: var(--pwx-mm-inkt);
    }
    .pwx-mm-uit-pane .pwx-mm-pil { margin-top: auto; }

    /* USP-marquee. */
    .pwx-mm-usp {
        border-top: 1px solid var(--pwx-mm-rand-licht);
        background: var(--pwx-mm-vlak);
        overflow: hidden;
        padding: 11px 0;
    }
    .pwx-mm-usp-spoor {
        display: flex;
        width: max-content;
        gap: 44px;
        animation: pwxMarquee 84s linear infinite;
        font: 400 12.5px 'Atkinson Hyperlegible', sans-serif;
        color: #6b6f60;
    }
    .pwx-mm-usp-spoor > span {
        display: flex;
        gap: 44px;
        white-space: nowrap;
        padding-left: 26px;
    }

    /* ── Paneel "Diensten" ────────────────────────────────────────────── */
    /* Het echte submenu (voor de mobiele accordeon) op desktop verbergen. */
    .et_pb_menu li.pwx-mega--lijst > ul.sub-menu {
        display: none !important;
    }
    .pwx-mm-dienstenpaneel-inner {
        padding: 24px 26px;
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr)) 388px;
        gap: 26px;
    }
    .pwx-mm-svc-kop {
        display: block;
        font: 700 11px 'Space Grotesk', sans-serif;
        letter-spacing: 0.16em;
        text-transform: uppercase;
        color: var(--pwx-mm-zacht);
        margin-bottom: 8px;
    }
    .pwx-mm-svc-kolom li { animation: pwxInLeft 0.36s ease-out both; }
    .pwx-mm-svc-kolom li:nth-child(2) { animation-delay: 0.06s; }
    .pwx-mm-svc-kolom li:nth-child(3) { animation-delay: 0.10s; }
    .pwx-mm-svc-kolom li:nth-child(4) { animation-delay: 0.14s; }
    .pwx-mm-svc-kolom li:nth-child(5) { animation-delay: 0.18s; }
    .pwx-mm-svc-kolom li:nth-child(6) { animation-delay: 0.22s; }

    .et_pb_menu .pwx-mm-dienstenpaneel a.pwx-mm-dienst:not(#_):not(#_) {
        display: flex !important;
        align-items: center !important;
        gap: 12px !important;
        padding: 9px 10px !important;
        border-radius: 10px !important;
        font: 500 15px 'Atkinson Hyperlegible', sans-serif !important;
        color: var(--pwx-mm-inkt) !important;
        transition: background 0.16s ease-out, transform 0.2s var(--pwx-mm-veer) !important;
    }
    .et_pb_menu .pwx-mm-dienstenpaneel a.pwx-mm-dienst:not(#_):not(#_):hover {
        background: var(--pwx-mm-tegel) !important;
        transform: translateX(4px) !important;
    }
    /* Dienst-illustraties zijn groen lijnwerk: altijd op een lichte tegel. */
    .pwx-mm-dienst-tegel {
        flex: 0 0 40px;
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--pwx-mm-tegel);
        border-radius: 9px;
    }
    .pwx-mm-dienst-tegel img {
        width: 30px;
        height: 30px;
        object-fit: contain;
    }

    .et_pb_menu .pwx-mm-dienstenpaneel div.pwx-mm-opmaat {
        display: flex;
        flex-direction: column;
        gap: 2px;
        margin-top: 12px;
        padding: 14px;
        background: var(--pwx-mm-vlak);
        border: 1px solid var(--pwx-mm-rand);
        border-radius: 12px;
    }
    .pwx-mm-opmaat-kop {
        display: block;
        font: 600 14.5px 'Space Grotesk', sans-serif;
        color: var(--pwx-mm-inkt);
        margin-bottom: 5px;
    }
    .et_pb_menu .pwx-mm-dienstenpaneel .pwx-mm-opmaat a.pwx-mm-dienst:not(#_):not(#_) {
        padding: 5px 0 !important;
        border-radius: 0 !important;
        font: 400 13.5px 'Atkinson Hyperlegible', sans-serif !important;
        color: var(--pwx-mm-grijs) !important;
    }
    .et_pb_menu .pwx-mm-dienstenpaneel .pwx-mm-opmaat a.pwx-mm-dienst:not(#_):not(#_):hover {
        background: none !important;
        transform: none !important;
        color: var(--pwx-mm-lime) !important;
    }
    .pwx-mm-opmaat .pwx-mm-dienst-tegel {
        flex-basis: 28px;
        width: 28px;
        height: 28px;
        border-radius: 7px;
        background: #fff;
    }
    .pwx-mm-opmaat .pwx-mm-dienst-tegel img {
        width: 22px;
        height: 22px;
    }

    /* Previewkolom: gevuld bij openen, blijft staan. */
    .pwx-mm-preview {
        border-left: 1px solid var(--pwx-mm-rand);
        padding-left: 26px;
        display: flex;
        flex-direction: column;
        gap: 14px;
        justify-content: center;
    }
    .pwx-mm-preview-beeld {
        display: flex;
        width: 340px;
        height: 340px;
        align-items: center;
        justify-content: center;
        background: var(--pwx-mm-tegel);
        border: 1px solid var(--pwx-mm-rand-licht);
        border-radius: 12px;
        overflow: hidden;
        animation: pwxPop 0.4s var(--pwx-mm-veer) both;
    }
    .pwx-mm-preview-beeld img {
        width: 70%;
        height: 70%;
        object-fit: contain;
        animation: pwxFadeBeeld 0.45s ease-out both;
    }
    .pwx-mm-preview-inhoud {
        display: flex;
        flex-direction: column;
        gap: 7px;
        animation: pwxIn 0.3s ease-out 0.06s both;
    }
    .pwx-mm-preview-titel {
        font: 700 24px 'Space Grotesk', sans-serif;
        letter-spacing: -0.01em;
        color: var(--pwx-mm-inkt);
    }
    .pwx-mm-preview-tekst {
        font: 400 13.5px/1.5 'Atkinson Hyperlegible', sans-serif;
        color: var(--pwx-mm-grijs);
    }
    .pwx-mm-preview .pwx-mm-pil { margin-top: 4px; padding: 9px 18px; font-size: 13px; }

    /* Divi-pijl staat absoluut op right:0; onze 12px padding zette hem tegen
       het woord (Roel 09-11-2026). Pijl op 12px, padding rechts 32px. */
    .et_pb_menu .et-menu.pwx-hoofdmenu > li.menu-item-has-children:not(.pwx-mega) > a:not(#_):not(#_) {
        padding-right: 32px !important;
    }
    .et_pb_menu .et-menu.pwx-hoofdmenu > li.menu-item-has-children:not(.pwx-mega) > a:first-child::after {
        right: 12px !important;
    }

    /* ── Dropdowns Account / Service / Admin (Divi-submenu, licht) ────── */
    .et_pb_menu .et-menu.pwx-hoofdmenu > li.menu-item-has-children:not(.pwx-mega) > ul.sub-menu {
        min-width: 244px !important;
        width: auto !important;
        padding: 8px !important;
        background: #fff !important;
        border: 1px solid var(--pwx-mm-rand) !important;
        border-radius: 12px;
        box-shadow: 0 20px 40px -16px rgba(29, 29, 27, 0.22);
        animation: pwxIn 0.2s ease-out both;
    }
    .et_pb_menu .et-menu.pwx-hoofdmenu > li.menu-item-has-children:not(.pwx-mega) ul.sub-menu li {
        display: block !important;
        float: none !important;
        width: 100% !important;
        padding: 0 !important;
        margin: 0;
        animation: pwxInLeft 0.26s ease-out both;
    }
    .et_pb_menu .et-menu.pwx-hoofdmenu > li.menu-item-has-children:not(.pwx-mega) ul.sub-menu li:nth-child(2) { animation-delay: 0.035s; }
    .et_pb_menu .et-menu.pwx-hoofdmenu > li.menu-item-has-children:not(.pwx-mega) ul.sub-menu li:nth-child(3) { animation-delay: 0.07s; }
    .et_pb_menu .et-menu.pwx-hoofdmenu > li.menu-item-has-children:not(.pwx-mega) ul.sub-menu li:nth-child(4) { animation-delay: 0.105s; }
    .et_pb_menu .et-menu.pwx-hoofdmenu > li.menu-item-has-children:not(.pwx-mega) ul.sub-menu li:nth-child(5) { animation-delay: 0.14s; }
    .et_pb_menu .et-menu.pwx-hoofdmenu > li.menu-item-has-children:not(.pwx-mega) ul.sub-menu li:nth-child(n+6) { animation-delay: 0.175s; }
    .et_pb_menu .et-menu.pwx-hoofdmenu > li.menu-item-has-children:not(.pwx-mega) ul.sub-menu li a {
        display: flex !important;
        align-items: center;
        gap: 10px;
        width: auto !important;
        padding: 10px 12px !important;
        border-radius: 8px;
        font: 500 14.5px 'Atkinson Hyperlegible', sans-serif !important;
        color: var(--pwx-mm-inkt) !important;
        opacity: 1 !important;
        transition: background 0.16s ease-out;
    }
    .et_pb_menu .et-menu.pwx-hoofdmenu > li.menu-item-has-children:not(.pwx-mega) ul.sub-menu li a:hover {
        background: var(--pwx-mm-tegel);
    }
    /* Lime pijltje dat rechts inschuift bij hover. */
    .et_pb_menu .et-menu.pwx-hoofdmenu > li.menu-item-has-children:not(.pwx-mega) ul.sub-menu li a::after {
        content: "" !important;
        margin-left: auto;
        width: 15px;
        height: 15px;
        flex: 0 0 15px;
        background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b3c731' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9.5 6 15.5 12 9.5 18'/%3E%3C/svg%3E") center / contain no-repeat;
        border: 0 !important;
        opacity: 0;
        transform: translateX(-5px);
        transition: opacity 0.16s ease-out, transform 0.2s var(--pwx-mm-veer);
    }
    .et_pb_menu .et-menu.pwx-hoofdmenu > li.menu-item-has-children:not(.pwx-mega) ul.sub-menu li a:hover::after {
        opacity: 1;
        transform: none;
    }

    /* Reduced motion: alles verschijnt zonder beweging. */
    @media (prefers-reduced-motion: reduce) {
        .et_pb_menu [class*="pwx-mm"],
        .et_pb_menu [class*="pwx-mm"]::before,
        .et_pb_menu [class*="pwx-mm"]::after,
        .et_pb_menu .pwx-mm-allepaneel *,
        .et_pb_menu .pwx-mm-dienstenpaneel * {
            animation: none !important;
            transition: none !important;
        }
    }
}

/* ── Mobiel (< 981px): Divi-accordeon + categorielade ─────────────────── */
@media (max-width: 980px) {
    .pwx-mm-allepaneel,
    .pwx-mm-dienstenpaneel,
    .pwx-mm-chevron {
        display: none !important;
    }

    /* Rij "Alle producten" in het hamburgermenu: lime pijltje rechts. */
    .et_mobile_menu li.pwx-mega--alle > a {
        position: relative;
        padding-right: 40px !important;
    }
    .et_mobile_menu li.pwx-mega--alle > a::after {
        content: "";
        position: absolute;
        right: 5%;
        top: 50%;
        width: 16px;
        height: 16px;
        margin-top: -8px;
        background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b3c731' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9.5 6 15.5 12 9.5 18'/%3E%3C/svg%3E") center / contain no-repeat;
    }

    html.pwx-lade-actief { overflow: hidden; }

    /* Lade: volledig scherm, schuift van rechts in. */
    .pwx-lade {
        position: fixed;
        inset: 0;
        z-index: 100000;
        background: #fff;
        color: var(--pwx-mm-inkt);
        font-family: 'Atkinson Hyperlegible', sans-serif;
        overflow: hidden;
        opacity: 0;
        transform: translateX(100%);
        transition: transform 0.28s cubic-bezier(0.22, 0.9, 0.3, 1), opacity 0.2s ease-out;
    }
    .pwx-lade.pwx-lade--open { opacity: 1; transform: none; }
    .pwx-lade-scherm {
        position: absolute;
        inset: 0;
        display: flex;
        flex-direction: column;
        background: #fff;
        transform: translateX(100%);
        visibility: hidden;
        transition: transform 0.28s cubic-bezier(0.22, 0.9, 0.3, 1), visibility 0s linear 0.28s;
    }
    .pwx-lade-scherm.is-actief {
        transform: none;
        visibility: visible;
        transition: transform 0.28s cubic-bezier(0.22, 0.9, 0.3, 1);
    }
    .pwx-lade-scherm--cats.is-achter { transform: translateX(-18%); }

    .pwx-lade-kop {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: calc(10px + env(safe-area-inset-top, 0px)) 14px 10px;
        border-bottom: 1px solid var(--pwx-mm-rand);
        flex: 0 0 auto;
    }
    .pwx-lade-terug {
        width: 36px;
        height: 36px;
        border: 0;
        border-radius: 999px;
        background: var(--pwx-mm-tegel);
        color: var(--pwx-mm-inkt);
        display: grid;
        place-items: center;
        padding: 0;
        cursor: pointer;
        flex: 0 0 36px;
    }
    .pwx-lade-terug:focus-visible { outline: 2px solid var(--pwx-mm-lime); outline-offset: 2px; }
    .pwx-lade-titel {
        font: 700 17px 'Space Grotesk', sans-serif;
        letter-spacing: -0.01em;
        color: var(--pwx-mm-inkt);
    }
    .pwx-lade-body {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }
    .pwx-lade-voet {
        flex: 0 0 auto;
        display: grid;
        gap: 8px;
        padding: 12px 18px calc(18px + env(safe-area-inset-bottom, 0px));
        border-top: 1px solid var(--pwx-mm-rand);
        background: var(--pwx-mm-vlak);
    }

    /* Scherm 1: categorieen met lime cijferbadge. */
    .pwx-lade ul.pwx-lade-cats,
    .pwx-lade ul.pwx-lade-groepen {
        list-style: none;
        margin: 0;
        padding: 6px 0;
    }
    .pwx-lade-cat {
        width: 100%;
        display: flex;
        align-items: center;
        gap: 10px;
        background: none;
        border: 0;
        border-bottom: 1px solid var(--pwx-mm-rand-licht);
        padding: 14px 18px;
        font: 500 16px 'Atkinson Hyperlegible', sans-serif;
        color: var(--pwx-mm-inkt);
        text-align: left;
        cursor: pointer;
    }
    .pwx-lade-cat:focus-visible { outline: 2px solid var(--pwx-mm-lime); outline-offset: -2px; }
    .pwx-lade-cat-naam { flex: 1 1 auto; min-width: 0; }
    .pwx-lade-badge {
        font: 600 12px 'Space Grotesk', sans-serif;
        color: var(--pwx-mm-lime-donker, #8a9b23);
        background: var(--pwx-mm-tegel);
        border-radius: 999px;
        padding: 2px 9px;
        flex: 0 0 auto;
    }
    .pwx-lade-pijl { color: var(--pwx-mm-lime); display: inline-flex; flex: 0 0 auto; }

    /* Scherm 2: groepen. */
    .pwx-lade-groepen-kop { padding: 16px 18px 6px; display: grid; gap: 4px; }
    .pwx-lade h3.pwx-lade-cat-titel {
        margin: 0;
        padding: 0;
        font: 700 22px 'Space Grotesk', sans-serif;
        letter-spacing: -0.01em;
        color: var(--pwx-mm-inkt);
    }
    .pwx-lade ul.pwx-lade-groepen { padding: 4px 18px 10px; display: grid; gap: 6px; }
    .pwx-lade-groep {
        background: var(--pwx-mm-vlak);
        border: 1px solid var(--pwx-mm-rand-licht);
        border-radius: 10px;
        padding: 11px 14px;
        display: grid;
        gap: 6px;
    }
    .pwx-lade-subs { display: flex; flex-wrap: wrap; gap: 6px 14px; }

    /* Uitgelicht-kaart. */
    .pwx-lade-uit {
        margin: 6px 18px 18px;
        display: grid !important;
        grid-template-columns: 84px 1fr;
        gap: 12px;
        align-items: center;
        background: #fff;
        border: 1px solid var(--pwx-mm-rand-licht);
        border-radius: 12px;
        padding: 10px;
    }
    .pwx-lade-uit-beeld {
        width: 84px;
        height: 84px;
        border-radius: 8px;
        overflow: hidden;
        background: #fff;
        border: 1px solid var(--pwx-mm-rand-licht);
        display: block;
    }
    .pwx-lade-uit-beeld img { width: 100%; height: 100%; object-fit: cover; display: block; }
    .pwx-lade-uit-tekst { display: grid; gap: 2px; min-width: 0; }
    .pwx-lade-label {
        font: 700 10px 'Space Grotesk', sans-serif;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: var(--pwx-mm-zacht);
    }

    /* Links in de lade: eigen kleuren, los van Divi's linkkleur. */
    .pwx-lade a:not(#_):not(#_) { text-decoration: none; color: var(--pwx-mm-inkt); }
    .pwx-lade a.pwx-lade-alles:not(#_):not(#_) {
        font: 400 13.5px 'Atkinson Hyperlegible', sans-serif;
        color: var(--pwx-mm-lime-donker, #8a9b23);
        text-decoration: underline;
        text-underline-offset: 3px;
    }
    .pwx-lade a.pwx-lade-groep-kop:not(#_):not(#_) {
        display: block;
        font: 600 15px 'Space Grotesk', sans-serif;
        color: var(--pwx-mm-inkt);
    }
    .pwx-lade a.pwx-lade-sub:not(#_):not(#_) {
        font: 400 13.5px 'Atkinson Hyperlegible', sans-serif;
        color: var(--pwx-mm-grijs);
        text-decoration: underline;
        text-decoration-color: var(--pwx-mm-rand);
        text-underline-offset: 3px;
    }
    .pwx-lade .pwx-lade-uit-naam { font: 600 14.5px 'Space Grotesk', sans-serif; color: var(--pwx-mm-inkt); }
    .pwx-lade .pwx-lade-uit-pil {
        justify-self: start;
        margin-top: 4px;
        font: 600 12.5px 'Space Grotesk', sans-serif;
        color: var(--pwx-mm-inkt);
        background: var(--pwx-mm-lime);
        border-radius: 999px;
        padding: 5px 12px;
    }
    .pwx-lade a.pwx-lade-knop:not(#_):not(#_) {
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 44px;
        padding: 10px 18px;
        border-radius: 999px;
        background: var(--pwx-mm-lime);
        color: var(--pwx-mm-inkt);
        font: 600 14.5px 'Space Grotesk', sans-serif;
    }
    .pwx-lade a.pwx-lade-knop--stil:not(#_):not(#_) {
        background: transparent;
        border: 1px solid var(--pwx-mm-rand);
    }
    .pwx-lade-usp {
        text-align: center;
        font: 400 12px 'Atkinson Hyperlegible', sans-serif;
        color: var(--pwx-mm-zacht);
    }
    @media (prefers-reduced-motion: reduce) {
        .pwx-lade, .pwx-lade-scherm { transition: none !important; }
    }
}