/**
 * DGM Header Navigation – Critical CSS
 * Version: 1.7.2
 *
 * Diese Datei enthält bewusst nur den sofort sichtbaren Header
 * und die initial geschlossenen Zustände von Mega-Menü, Suche
 * und Offcanvas. Sie bleibt klein und render-blockierend, damit
 * beim ersten Paint kein ungestylter Header und kein CLS entsteht.
 */

/* =====================================================
         * BOXED NAVIGATION
         * ===================================================== */

        .dgm-navigation-inner {
            overflow: visible !important;
        }

        .dgm-navigation-inner > .e-con-inner {
            position: relative !important;
            overflow: visible !important;
        }


        /* =====================================================
         * KOMPLETTES MEGA-MENÜ
         * ===================================================== */

        .dgm-products-mega-menu {
            position: absolute !important;

            left: 0 !important;
            right: auto !important;
            top: 54px !important;

            width: 100% !important;
            max-width: none !important;

            margin: 0 !important;

            box-sizing: border-box !important;

            z-index: 99999 !important;
        }

        /* =====================================================
        * MEGA-MENÜ ÖFFNEN / SCHLIESSEN
        * =====================================================
        *
        * Im normalen Frontend ist das Menü standardmässig
        * geschlossen.
        *
        * Im Elementor-Editor bleibt es sichtbar, damit wir
        * weiterhin bequem daran arbeiten können.
        * ===================================================== */


        /* Normalzustand im Frontend: geschlossen */
        body:not(.elementor-editor-active)
        .dgm-products-mega-menu {
            opacity: 0;

            visibility: hidden;

            pointer-events: none;

            transform: translateY(-6px);

            transition:
                opacity 0.18s ease,
                visibility 0.18s ease,
                transform 0.18s ease;
        }


        /* Geöffnet */
        body:not(.elementor-editor-active)
        .dgm-products-mega-menu.is-open {
            opacity: 1;

            visibility: visible;

            pointer-events: auto;

            transform: translateY(0);
        }


        /* =====================================================
        * CHEVRON BEIM ÖFFNEN DREHEN
        * ===================================================== */

        .dgm-products-trigger.is-open
        .dgm-products-chevron .elementor-icon {
            transform: rotate(180deg);
        }
        /* =====================================================
         * TRIGGER
         * ===================================================== */

        .dgm-products-trigger {
            cursor: pointer;
            user-select: none;
        }


        .dgm-products-chevron .elementor-icon {
            transform: rotate(0deg);

            transition: transform 0.18s ease;
        }



    /* =====================================================
 * DGM HAUPTNAVIGATION – DESKTOP
 * ===================================================== */

/*
 * Der Hauptmenü-Bereich nutzt die komplette
 * Höhe der 54px Navigation.
 */
.dgm-navigation-main,
.dgm-main-menu,
.dgm-main-menu > .elementor-widget-container {
    height: 100%;
    min-height: 54px;
}


/*
 * Flex-Sicherheit:
 * Produkte und Service dürfen nicht ungewollt schrumpfen.
 * Das Hauptmenü übernimmt den verfügbaren Zwischenraum.
 */
.dgm-products-menu,
.dgm-navigation-service {
    flex-shrink: 0 !important;
}

.dgm-navigation-main {
    min-width: 0 !important;
    flex: 1 1 auto !important;
}


/*
 * WordPress-Menü horizontal über die ganze Höhe.
 */
.dgm-main-menu nav {
    width: 100%;
    height: 100%;
}


/*
 * Oberste Menüebene.
 */
.dgm-main-menu nav > ul {
    display: flex !important;

    align-items: stretch !important;

    width: 100%;
    height: 54px;

    margin: 0 !important;
    padding: 0 !important;

    gap: 0 !important;

    list-style: none;
}


/*
 * Einzelner Hauptmenüpunkt.
 */
.dgm-main-menu nav > ul > li {
    display: flex !important;

    align-items: stretch !important;

    margin: 0 !important;
    padding: 0 !important;
}


/*
 * Hauptmenü-Link.
 */
.dgm-main-menu nav > ul > li > a {
    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    min-height: 54px !important;

    padding:
        0
        18px !important;

    margin: 0 !important;

    background: transparent !important;

    border: 0 !important;

    color: var(--dgm-color-bg-white) !important;

    font-size: 15px !important;
    font-weight: 600 !important;

    line-height: 1 !important;

    text-decoration: none !important;
    text-transform: none !important;

    transition:
        background-color 0.16s ease,
        color 0.16s ease !important;
}


/* =====================================================
 * HOVER
 * ===================================================== */

.dgm-main-menu nav > ul > li > a:hover,
.dgm-main-menu nav > ul > li > a:focus {
    background: rgba(0, 0, 0, 0.10) !important;

    color: var(--dgm-color-bg-white) !important;

    outline: none !important;
}


/* =====================================================
 * AKTUELLE SEITE
 * ===================================================== */

.dgm-main-menu nav > ul > li.current-menu-item > a,
.dgm-main-menu nav > ul > li.current_page_item > a,
.dgm-main-menu nav > ul > li.current-menu-ancestor > a {
    background: rgba(0, 0, 0, 0.16) !important;

    color: var(--dgm-color-bg-white) !important;
}


/* =====================================================
 * ELEMENTOR-ZEIGER / UNTERSTRICHE ENTFERNEN
 * ===================================================== */

.dgm-main-menu .elementor-item::before,
.dgm-main-menu .elementor-item::after {
    display: none !important;
}


/* =====================================================
 * UNTERMENÜ-INDIKATOR
 * ===================================================== */

.dgm-main-menu
.elementor-nav-menu--main
.elementor-item
.sub-arrow {
    margin-left: 7px !important;

    color: var(--dgm-color-bg-white) !important;
}


/* =====================================================
 * SERVICE ANMELDEN – HEADER BUTTON
 * ===================================================== */

.dgm-navigation-service {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
}


/* Elementor Widget */
.dgm-service-button {
    width: 100%;
}


/* Eigentlicher Button */
.dgm-service-button .elementor-button {
    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    width: 100% !important;
    min-height: 40px !important;

    padding: 0 18px !important;
    margin: 0 !important;

    background: #111111 !important;

    border: 1px solid #111111 !important;
    border-radius: 3px !important;

    box-shadow: none !important;

    color: var(--dgm-color-bg-white) !important;

    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1 !important;

    text-decoration: none !important;
    text-transform: none !important;

    transition:
        background-color 0.16s ease,
        border-color 0.16s ease,
        color 0.16s ease !important;
}


/* Text sicher weiss */
.dgm-service-button .elementor-button-text {
    color: inherit !important;
}


/* Hover */
.dgm-service-button .elementor-button:hover,
.dgm-service-button .elementor-button:focus {
    background: var(--dgm-color-bg-white) !important;

    border-color: var(--dgm-color-bg-white) !important;

    color: var(--dgm-color-primary) !important;

    outline: none !important;
}


/* =====================================================
 * ACCESSIBILITY / FINALER DESIGN-FEINSCHLIFF
 * ===================================================== */

.dgm-products-trigger:focus-visible {
    outline: 2px solid var(--dgm-color-bg-white);
    outline-offset: -3px;
}

.dgm-mega-category-link:focus-visible,
.dgm-mega-header-link:focus-visible,
.dgm-mega-subcategory-heading:focus-visible,
.dgm-mega-child-link:focus-visible,
.dgm-mega-direct-link:focus-visible,
.dgm-mega-category-button:focus-visible,
.dgm-mega-visual-card:focus-visible {
    outline: 2px solid var(--dgm-color-primary);
    outline-offset: 2px;
}

.dgm-mega-visual-card:focus-visible .dgm-mega-visual-image img {
    transform: scale(1.025);
}


/* =====================================================
 * DESKTOP 1025–1300px
 * Hauptmenü und Service etwas kompakter.
 * ===================================================== */

@media (min-width: 1025px) and (max-width: 1300px) {
    .dgm-main-menu nav > ul > li > a {
        padding:
            0
            13px !important;

        font-size: 14px !important;
    }

    .dgm-service-button .elementor-button {
        padding: 0 12px !important;

        font-size: 13px !important;
    }
}


/* =====================================================
 * DGM NAVIGATION – KLEINE LAPTOPBREITE
 * 1025px bis 1100px
 * ===================================================== */

@media (min-width: 1025px) and (max-width: 1100px) {

    /* Alle-Produkte-Bereich etwas kompakter */
    .dgm-products-menu {
        width: 300px !important;
        flex: 0 0 300px !important;
    }


    /* Linke Mega-Spalte muss exakt mit Alle Produkte fluchten */
    .dgm-mega-categories {
        width: 300px !important;
        flex: 0 0 300px !important;
    }


    /* Hauptmenü nutzt den verbleibenden Platz */
    .dgm-navigation-main {
        min-width: 0 !important;
        flex: 1 1 auto !important;
    }


    /* Menüabstände etwas reduzieren */
    .dgm-main-menu nav > ul > li > a {
        padding-left: 10px !important;
        padding-right: 10px !important;

        font-size: 13.5px !important;
    }


    /* Service-Bereich etwas schmaler */
    .dgm-navigation-service {
        width: 185px !important;
        flex: 0 0 185px !important;
    }


    .dgm-service-button .elementor-button {
        padding-left: 12px !important;
        padding-right: 12px !important;

        font-size: 13px !important;
    }
}



/* -----------------------------------------------------
 * DESKTOP / LAPTOP
 * ----------------------------------------------------- */

@media (min-width: 1025px) {

    .dgm-desktop-topbar,
    .dgm-desktop-main-row,
    .dgm-desktop-navigation {
        display: flex !important;
    }

    .dgm-tablet-mobile-header {
        display: none !important;
    }
}

@media (max-width: 1024px) {
    .dgm-tablet-mobile-header {
        --dgm-orange: var(--dgm-color-primary);
        --dgm-orange-dark: var(--dgm-color-accent);
        --dgm-orange-soft: #FFF5EF;
        --dgm-text: #151515;
        --dgm-text-soft: #5F6368;
        --dgm-line: #E8EAED;
        --dgm-surface: var(--dgm-color-bg-white);
        --dgm-surface-soft: #F7F8F9;
        --dgm-surface-soft-2: #FBFBFC;
        --dgm-radius: 12px;
        --dgm-radius-small: 9px;
        --dgm-shadow:
            0 10px 30px rgba(17, 17, 17, 0.08);

        position: sticky !important;
        top: 0;
        z-index: 10000;

        /* Lokale Ebenen für Overlay + Offcanvas sauber trennen. */
        isolation: isolate;

        display: flex !important;
        flex-direction: column !important;

        width: 100% !important;

        background: var(--dgm-surface);
        color: var(--dgm-text);

        font-family:
            var(--dgm-type-elementor-text-family),
            Arial,
            sans-serif;
    }


    /* Alte Desktop-Bereiche verschwinden exakt bis 1024px. */
    .dgm-desktop-topbar,
    .dgm-desktop-main-row,
    .dgm-desktop-navigation {
        display: none !important;
    }


    /* Altes Desktop-Mega-Menü im Mobile-Bereich nie anzeigen. */
    .dgm-products-mega-menu {
        display: none !important;
    }


    .dgm-mobile-main-row {
        position: relative;

        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-start !important;
        flex-wrap: nowrap !important;

        width: 100% !important;
        min-height: 64px !important;

        gap: 10px !important;

        margin: 0 !important;
        padding: 0 16px !important;

        box-sizing: border-box !important;

        background: var(--dgm-color-bg-white) !important;

        border-top: 3px solid var(--dgm-orange);
        border-bottom: 1px solid var(--dgm-line);

        box-shadow:
            0 2px 10px rgba(17, 17, 17, 0.035);
    }


    .dgm-mobile-menu-area,
    .dgm-mobile-logo-area,
    .dgm-mobile-actions {
        width: auto !important;
        min-width: 0 !important;

        flex: 0 0 auto !important;

        margin: 0 !important;
        padding: 0 !important;
    }


    .dgm-mobile-logo-area {
        display: flex !important;
        align-items: center !important;
    }


    .dgm-mobile-logo-area .elementor-widget-image {
        width: auto !important;
        max-width: none !important;

        margin: 0 !important;
        padding: 0 !important;
    }


    .dgm-mobile-logo-area img {
        display: block !important;

        width: auto !important;
        max-height: 42px;

        margin: 8px 0 0 0 !important;
    }


    .dgm-mobile-actions {
        display: flex !important;
        align-items: center !important;

        gap: 2px !important;

        margin-left: auto !important;
    }


    /* Alle Aktions-Widgets nur so breit wie nötig. */
    .dgm-mobile-menu-trigger,
    .dgm-mobile-search-trigger,
    .dgm-mobile-account-trigger,
    .dgm-mobile-cart {
        width: auto !important;
        flex: 0 0 auto !important;

        margin: 0 !important;
        padding: 0 !important;
    }


    /*
     * Professionelle Touch-Ziele: sichtbar kompakt,
     * tatsächlich aber mindestens 40 x 40px anklickbar.
     */
    .dgm-mobile-menu-trigger .elementor-icon,
    .dgm-mobile-search-trigger .elementor-icon,
    .dgm-mobile-account-trigger .elementor-icon {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;

        width: 40px !important;
        height: 40px !important;

        padding: 8px !important;

        box-sizing: border-box !important;

        border-radius: 10px;

        color: #111111 !important;
        background: transparent;

        transition:
            background-color 0.16s ease,
            color 0.16s ease,
            transform 0.16s ease;
    }


    .dgm-mobile-menu-trigger:hover .elementor-icon,
    .dgm-mobile-search-trigger:hover .elementor-icon,
    .dgm-mobile-account-trigger:hover .elementor-icon,
    .dgm-mobile-menu-trigger:focus-visible .elementor-icon,
    .dgm-mobile-search-trigger:focus-visible .elementor-icon,
    .dgm-mobile-account-trigger:focus-visible .elementor-icon {
        color: var(--dgm-orange) !important;
        background: var(--dgm-orange-soft);
    }


    .dgm-mobile-menu-trigger,
    .dgm-mobile-search-trigger,
    .dgm-mobile-account-trigger {
        cursor: pointer;
        user-select: none;
        -webkit-tap-highlight-color: transparent;
    }


    /* -----------------------------------------------------
     * WARENKORB
     * ----------------------------------------------------- */

    .dgm-mobile-cart .elementor-widget-container,
    .dgm-mobile-cart .elementor-menu-cart__toggle {
        margin: 0 !important;
        padding: 0 !important;
    }


    .dgm-mobile-cart
    .elementor-menu-cart__toggle
    .elementor-button {
        position: relative;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        width: 40px !important;
        min-width: 40px !important;
        height: 40px !important;
        min-height: 40px !important;

        margin: 0 !important;
        padding: 7px !important;

        box-sizing: border-box !important;

        background: transparent !important;

        border: 0 !important;
        border-radius: 10px !important;

        box-shadow: none !important;

        transition:
            background-color 0.16s ease,
            transform 0.16s ease;
    }


    .dgm-mobile-cart
    .elementor-menu-cart__toggle
    .elementor-button:hover,
    .dgm-mobile-cart
    .elementor-menu-cart__toggle
    .elementor-button:focus-visible {
        background: var(--dgm-orange-soft) !important;
    }


    .dgm-mobile-cart .elementor-button-icon {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        color: var(--dgm-orange) !important;
    }


    /* Warenkorb-Zähler ruhiger und sauberer. */
    .dgm-mobile-cart
    .elementor-button-icon-qty {
        min-width: 17px !important;
        height: 17px !important;

        padding: 0 4px !important;

        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;

        border: 2px solid var(--dgm-color-bg-white) !important;
        border-radius: 999px !important;

        background: #E85B4A !important;
        color: var(--dgm-color-bg-white) !important;

        font-size: 10px !important;
        font-weight: 700 !important;
        line-height: 1 !important;
    }
    .dgm-mobile-search-panel {
        width: 100% !important;

        box-sizing: border-box !important;

        background: var(--dgm-color-bg-white) !important;

        border-bottom: 1px solid var(--dgm-line);

        box-shadow:
            0 8px 22px rgba(17, 17, 17, 0.055);
    }


    body:not(.elementor-editor-active)
    .dgm-mobile-search-panel {
        max-height: 0;

        padding-top: 0 !important;
        padding-bottom: 0 !important;

        overflow: hidden;

        opacity: 0;
        visibility: hidden;
        pointer-events: none;

        border-bottom-width: 0 !important;

        transition:
            max-height 0.24s ease,
            padding 0.24s ease,
            opacity 0.16s ease,
            visibility 0.16s ease;
    }


    body:not(.elementor-editor-active)
    .dgm-mobile-search-panel.is-open {
        max-height: 220px;

        padding: 16px 18px 18px !important;

        opacity: 1;
        visibility: visible;
        pointer-events: auto;

        border-bottom-width: 1px !important;
    }


    body:not(.elementor-editor-active)
    .dgm-mobile-offcanvas {
        position: fixed !important;

        top: 0 !important;
        left: 0 !important;

        /*
         * WICHTIG: Das Offcanvas ist bewusst KEIN Flex-Parent.
         * Elementor kann auf echten Mobilgeräten responsive
         * Flex-Werte an Kind-Containern setzen. Als Flex-Parent
         * kann dadurch z.B. der Hauptmenü-Container auf fast
         * 100vh wachsen und die Produktnavigation weit nach
         * unten schieben. Im normalen Block-Flow bleibt jeder
         * Bereich exakt so hoch wie sein Inhalt.
         */
        display: block !important;

        width: min(440px, 92vw) !important;
        max-width: 92vw !important;

        /*
         * Android-/Mobile-Viewport:
         * 100dvh passt sich der sichtbaren Browserhöhe an.
         * Ein zusätzliches min-height:100vh kann auf echten
         * Smartphones grösser als die sichtbare Fläche werden
         * und den letzten Menüpunkt unten abschneiden.
         */
        height: 100vh !important;
        height: 100dvh !important;
        min-height: 0 !important;
        max-height: 100dvh !important;

        margin: 0 !important;
        padding: 0 !important;

        /*
         * Genug Scroll-Luft für Browser-/Systemleisten.
         * So kann der letzte Eintrag immer vollständig
         * in den sichtbaren Bereich gescrollt werden.
         */
        scroll-padding-bottom:
            max(28px, env(safe-area-inset-bottom));

        overflow-x: hidden !important;
        overflow-y: auto !important;

        overscroll-behavior: contain;

        box-sizing: border-box !important;

        background: var(--dgm-color-bg-white) !important;

        border-right: 1px solid rgba(17, 17, 17, 0.08);
        border-radius: 0 16px 16px 0;

        z-index: 10002;

        transform: translate3d(-104%, 0, 0);

        opacity: 0;
        visibility: hidden;
        pointer-events: none;

        box-shadow:
            16px 0 45px rgba(17, 17, 17, 0.18);

        transition:
            transform 0.28s cubic-bezier(.22,.61,.36,1),
            opacity 0.18s ease,
            visibility 0.18s ease;

        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
        scrollbar-color: #C7C7C7 transparent;
    }


    /* -----------------------------------------------------
     * MOBILER NORMAL-FLOW – ELEMENTOR FLEX-GROW NEUTRALISIEREN
     * -----------------------------------------------------
     *
     * Auf echten Smartphones können Elementor-responsive
     * Containerwerte über CSS-Variablen wie --flex-grow oder
     * --min-height greifen. Das kann trotz identischem Breakpoint
     * anders auffallen als beim verkleinerten Desktop-Browser,
     * insbesondere durch die deutlich andere Viewport-Höhe.
     *
     * Deshalb erzwingen wir für die Inhaltsabschnitte einen
     * natürlichen Dokumentfluss ohne künstliche Bildschirmhöhe.
     */

    body:not(.elementor-editor-active)
    .dgm-mobile-offcanvas > .e-con-inner {
        display: block !important;

        width: 100% !important;
        max-width: none !important;

        height: auto !important;
        min-height: 0 !important;

        margin: 0 !important;
        padding: 0 !important;
    }


    body:not(.elementor-editor-active)
    .dgm-mobile-offcanvas-main,
    body:not(.elementor-editor-active)
    .dgm-mobile-products,
    body:not(.elementor-editor-active)
    .dgm-mobile-service,
    body:not(.elementor-editor-active)
    .dgm-mobile-contact {
        flex: 0 0 auto !important;
        flex-grow: 0 !important;
        flex-shrink: 0 !important;
        flex-basis: auto !important;

        width: 100% !important;

        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;

        align-self: auto !important;

        --flex-grow: 0 !important;
        --flex-shrink: 0 !important;
        --flex-basis: auto !important;
        --min-height: 0px !important;
    }


    body:not(.elementor-editor-active)
    .dgm-mobile-offcanvas-header {
        flex: 0 0 auto !important;
        flex-grow: 0 !important;
        flex-shrink: 0 !important;
        flex-basis: auto !important;

        --flex-grow: 0 !important;
        --flex-shrink: 0 !important;
        --flex-basis: auto !important;
    }


    body:not(.elementor-editor-active)
    .dgm-mobile-offcanvas::-webkit-scrollbar {
        width: 5px;
    }


    body:not(.elementor-editor-active)
    .dgm-mobile-offcanvas::-webkit-scrollbar-thumb {
        background: #C7C7C7;
        border-radius: 999px;
    }


    body.dgm-mobile-menu-open
    .dgm-mobile-offcanvas {
        transform: translate3d(0, 0, 0);

        z-index: 10002 !important;

        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }


    /*
     * Overlay gehört bewusst zum Mobile-Header selbst.
     *
     * WICHTIG:
     * Der Mobile-Header bildet durch position: sticky + z-index
     * einen eigenen Stacking-Context. Ein Overlay auf body::before
     * lag deshalb in manchen Browsern ÜBER dem Offcanvas. Dadurch
     * wirkte das Menü grau/verblasst und Klicks trafen den Overlay
     * statt die Navigation.
     *
     * Jetzt liegen Overlay und Offcanvas im gleichen Stacking-Context:
     * Overlay = 10001 / Offcanvas = 10002.
     */
    body.dgm-mobile-menu-open::before {
        content: none !important;
        display: none !important;
    }


    body.dgm-mobile-menu-open
    .dgm-tablet-mobile-header::before {
        content: "";

        position: fixed;
        inset: 0;

        z-index: 10001;

        background:
            rgba(14, 16, 18, 0.38);

        opacity: 1;

        /*
         * Kein Blur: Das Offcanvas bleibt gestochen scharf.
         * Der Seiteninhalt im Hintergrund wird nur ruhig abgedunkelt.
         */
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;

        pointer-events: auto;
    }


    body.dgm-mobile-menu-open {
        overflow: hidden !important;
    }
}

/* WordPress Admin-Bar berücksichtigen. */
@media (min-width: 783px) and (max-width: 1024px) {
    body.admin-bar .dgm-tablet-mobile-header {
        top: 32px;
    }
}


@media (max-width: 782px) {
    body.admin-bar .dgm-tablet-mobile-header {
        top: 46px;
    }
}

@media (max-width: 767px) {
    .dgm-mobile-main-row {
        min-height: 60px !important;
        gap: 6px !important;
        padding: 0 10px !important;
    }

    .dgm-mobile-logo-area img {
        max-height: 38px;
    }

    .dgm-mobile-menu-trigger .elementor-icon,
    .dgm-mobile-search-trigger .elementor-icon,
    .dgm-mobile-account-trigger .elementor-icon,
    .dgm-mobile-cart .elementor-menu-cart__toggle .elementor-button {
        width: 38px !important;
        min-width: 38px !important;
        height: 38px !important;
        min-height: 38px !important;
    }

    body:not(.elementor-editor-active) .dgm-mobile-offcanvas {
        width: 94vw !important;
        max-width: 420px !important;
        border-radius: 0 14px 14px 0;
    }
}

@media (max-width: 380px) {
    .dgm-mobile-main-row {
        padding: 0 8px !important;
        gap: 3px !important;
    }

    .dgm-mobile-menu-trigger .elementor-icon,
    .dgm-mobile-search-trigger .elementor-icon,
    .dgm-mobile-account-trigger .elementor-icon,
    .dgm-mobile-cart .elementor-menu-cart__toggle .elementor-button {
        width: 36px !important;
        min-width: 36px !important;
        height: 36px !important;
        min-height: 36px !important;
    }
}

/* ==========================================================
 * DGM HEADER – STICKY DESKTOP + MOBILE
 * ========================================================== */

:root {
    --dgm-sticky-top: 0px;
}


/* ----------------------------------------------------------
 * DESKTOP AB 1025 PX
 *
 * Topbar scrollt normal weg.
 * Hauptzeile + Navigation bleiben danach oben stehen.
 * ---------------------------------------------------------- */

@media (min-width: 1025px) {

    .dgm-sticky-desktop.is-dgm-sticky {
        position: fixed !important;

        top: var(--dgm-sticky-top) !important;
        left: 0 !important;
        right: 0 !important;

        width: 100% !important;

        z-index: 10000 !important;

        background: var(--dgm-color-bg-white) !important;

        box-shadow:
            0 4px 16px rgba(17, 17, 17, 0.10);
    }


    .dgm-desktop-sticky-placeholder {
        display: none;
        width: 100%;
        height: 0;
    }


    .dgm-desktop-sticky-placeholder.is-active {
        display: block;
    }
}


/* ----------------------------------------------------------
 * TABLET / MOBILE BIS 1024 PX
 *
 * Der komplette Mobile-Header bleibt oben.
 * ---------------------------------------------------------- */

@media (max-width: 1024px) {

    .dgm-tablet-mobile-header.is-dgm-sticky {
        position: fixed !important;

        top: var(--dgm-sticky-top) !important;
        left: 0 !important;
        right: 0 !important;

        width: 100% !important;

        z-index: 10000 !important;

        background: var(--dgm-color-bg-white) !important;

        box-shadow:
            0 4px 14px rgba(17, 17, 17, 0.10);
    }


    .dgm-mobile-sticky-placeholder {
        display: none;
        width: 100%;
        height: 0;
    }


    .dgm-mobile-sticky-placeholder.is-active {
        display: block;
    }
}

/* =====================================================
 * ELEMENTOR-EDITOR – MENÜS STANDARDMÄSSIG GESCHLOSSEN
 * Version 1.7.2
 *
 * Frontend bleibt unverändert. Im Elementor-Editor verhalten
 * sich Desktop-Mega-Menü, mobile Suche und Mobile-Offcanvas
 * nun wie im Frontend: geschlossen, bis der jeweilige Trigger
 * angeklickt wird. Dadurch blockieren sie die Bearbeitung der
 * darunterliegenden Seite nicht mehr.
 * ===================================================== */

/* Desktop Mega-Menü: im Editor geschlossen, per .is-open sichtbar. */
body.elementor-editor-active .dgm-products-mega-menu {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translateY(-6px) !important;
}
body.elementor-editor-active .dgm-products-mega-menu.is-open {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateY(0) !important;
}

@media (max-width: 1024px) {
    /* Mobile Suche: im Editor ebenfalls standardmässig geschlossen. */
    body.elementor-editor-active .dgm-mobile-search-panel {
        max-height: 0 !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        overflow: hidden !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
        border-bottom-width: 0 !important;
    }
    body.elementor-editor-active .dgm-mobile-search-panel.is-open {
        max-height: 220px !important;
        padding: 16px 18px 18px !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        border-bottom-width: 1px !important;
    }

    /* Mobile Offcanvas: im Editor aus dem Arbeitsbereich heraushalten. */
    body.elementor-editor-active .dgm-mobile-offcanvas {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        display: block !important;
        width: min(440px, 92vw) !important;
        max-width: 92vw !important;
        height: 100vh !important;
        height: 100dvh !important;
        min-height: 0 !important;
        max-height: 100dvh !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        box-sizing: border-box !important;
        background: var(--dgm-color-bg-white) !important;
        z-index: 10002 !important;
        transform: translate3d(-104%, 0, 0) !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }
    body.elementor-editor-active.dgm-mobile-menu-open .dgm-mobile-offcanvas {
        transform: translate3d(0, 0, 0) !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }
}


/* =====================================================
 * V4.0.10 – DESKTOP NAVIGATION BACKGROUND ROBUSTNESS
 *
 * Elementor liefert die Hintergrundfarbe des Navigationscontainers
 * über einen Global-Color-Verweis. Falls dessen generiertes CSS
 * verzögert/fehlend ist, würden die weissen Menülinks auf Weiss
 * praktisch unsichtbar werden. Deshalb erhält der DGM-Desktop-
 * Navigationsbalken hier zusätzlich dieselbe vorhandene DGM-
 * Primary-Variable als robuste CSS-Quelle.
 * ===================================================== */
@media (min-width: 1025px) {
    .dgm-desktop-navigation {
        background: var(--dgm-color-primary) !important;
    }
}