<div id="theme-section-header" class="theme-section">
    <div data-section-id="header" data-section-type="header">
        {{-- Technodom header --}}
        @include('web.themes.technodom.layouts.additional.nav')

        <div id="categories-navigation">
            {{-- Categories dropdown --}}
            @include('web.themes.shella.layouts.additional.navigation.categories-dropdown')
        </div>

        <header 
            id="header"
            class="header lg:d-none position-lg-relative js-header-sticky" 
            data-js-sticky="desktop_and_mobile"
        >
            {{-- Top flash message --}}
            {{-- @include('web.themes.shella.layouts.additional.header.top-flash-message') --}}
            {{-- Top flash message end --}}

            <div class="header__content" data-js-mobile-sticky>
                <div class="header__line-top position-relative d-flex px-10 px-lg-0 py-lg-2">
                    <div class="container d-flex align-items-center">

                        {{-- Mobile toggle bread icon --}}
                        @include('web.themes.shella.layouts.additional.header.mobile-nav-toggle-icon')
                        {{-- Mobile toggle bread icon --}}
                        
                        {{-- #Logro here --}}
                        @include('web.themes.shella.layouts.additional.header.logo')
                        {{-- #Logo end --}}

                        {{-- Top header right icons --}}
                        @include('web.themes.shella.layouts.additional.header.top-header-right-icons')
                        {{-- Top header right icons end --}}

                    </div>
                </div>

                {{-- Border --}}
                <div class="header__border border-bottom d-none d-lg-block"></div>
                {{-- Border end --}}

                <div data-js-desktop-sticky>
                    <div class="header__line-bottom position-relative d-lg-flex py-lg-6">
                        <div class="container d-lg-flex">

                            {{-- Navigation --}}
                            @include('web.themes.shella.layouts.navigation')

                            {{-- Search Icon --}}
                            @include('web.themes.shella.layouts.additional.navigation.search-icon')
                            {{-- Search Icon end --}}

                        </div>
                        
                        <div class="header__sticky-sidebar position-absolute d-none align-items-lg-center top-0 right-0 h-100 mr-15">
                            <div class="ml-lg-15" data-js-sticky-replace-here="wishlist"></div>
                            <div class="ml-lg-15" data-js-sticky-replace-here="compare"></div>
                            <div class="ml-lg-15" data-js-sticky-replace-here="cart"></div>
                        </div>
                    </div>
                    <div class="header__border border-bottom d-none d-lg-block"></div>
                </div>
                <div class="header__border border-bottom d-lg-none"></div>
            </div>
        </header>
    </div>

    <script>
        Loader.require({
            type: "script",
            name: "sticky_header"
        });

        Loader.require({
            type: "script",
            name: "header"
        });

        Loader.require({
            type: "script",
            name: "mask_js"
        });

        Loader.require({
            type: "script",
            name: "cs_functions"
        });
    </script>

</div>
