<nav class="bg-white">
  
    <div class="mx-auto boxed px-2 sm:px-6 lg:px-4">
        <div 
            class="relative flex items-center justify-between transition duration-200 h-24"
            :class="shadow ? 'h-14 lg:h-16' : 'h-24'"
            >

            <div class="flex flex-1 lg:grid lg:grid-cols-[318px_auto] items-center justify-center sm:items-stretch sm:justify-start">
                <div class="relative">
                    






<a href="/" title="Vai alla Homepage" class="block">
    <div class="py-4">
        <?xml version="1.0" encoding="utf-8"?>
<!-- logo color -->
<svg 
    class="h-10 w-36 transition duration-200 lg:h-[77px] lg:w-[238px]" 
    :class="shadow ? '!h-10 lg:!h-[50px] !w-32 lg:!w-[180px] -mt-[8px] lg:!-mt-[3px]' : '!h-10 lg:!h-[77px] !w-36 lg:!w-[238px]'"
    version="1.1" id="logo_color1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 260.02 74.45" style="enable-background:new 0 0 260.02 74.45;" xml:space="preserve">
<style type="text/css">
	.default_navbar_logo_st0{fill:#45c0e8}
	.default_navbar_logo_st1{fill:#1F262E;}
</style>
<g>
	<path class="default_navbar_logo_st0" d="M116.28,60.89V13.85h7.27v11.61h20.59c2.24,0,4.15,0.8,5.74,2.41c1.59,1.61,2.38,3.53,2.38,5.77V52.7
		c0,2.24-0.79,4.16-2.38,5.77c-1.59,1.61-3.5,2.41-5.74,2.41H116.28z M125.81,53.62h16.98c1.02,0,1.64-0.11,1.86-0.34
		c0.22-0.22,0.34-0.84,0.34-1.86V34.92c0-1.02-0.11-1.64-0.34-1.86c-0.22-0.22-0.85-0.34-1.86-0.34h-16.98
		c-1.02,0-1.65,0.11-1.89,0.34c-0.24,0.22-0.37,0.85-0.37,1.86v16.49c0,1.02,0.12,1.64,0.37,1.86
		C124.16,53.5,124.79,53.62,125.81,53.62z"/>
	<path class="default_navbar_logo_st0" d="M166.61,60.89c-2.24,0-4.16-0.8-5.77-2.41c-1.61-1.61-2.41-3.53-2.41-5.77V13.79h7.33v37.63
		c0,1.02,0.11,1.64,0.34,1.86c0.22,0.22,0.84,0.34,1.86,0.34h5.5v7.27H166.61z"/>
	<path class="default_navbar_logo_st0" d="M186.65,60.89c-2.24,0-4.16-0.8-5.77-2.41c-1.61-1.61-2.41-3.53-2.41-5.77V33.64c0-2.24,0.8-4.16,2.41-5.77
		c1.61-1.61,3.53-2.41,5.77-2.41h19.61c2.28,0,4.22,0.8,5.8,2.41c1.59,1.61,2.38,3.53,2.38,5.77V52.7c0,2.24-0.79,4.16-2.38,5.77
		c-1.59,1.61-3.52,2.41-5.8,2.41H186.65z M187.93,53.62h17.04c1.02,0,1.64-0.11,1.86-0.34c0.22-0.22,0.34-0.84,0.34-1.86V34.92
		c0-1.02-0.11-1.64-0.34-1.86c-0.22-0.22-0.85-0.34-1.86-0.34h-17.04c-1.02,0-1.64,0.11-1.86,0.34c-0.22,0.22-0.34,0.85-0.34,1.86
		v16.49c0,1.02,0.11,1.64,0.34,1.86C186.29,53.5,186.91,53.62,187.93,53.62z"/>
	<path class="default_navbar_logo_st0" d="M228.01,74.87l-7.66-7.33h26.58c1.02,0,1.64-0.11,1.86-0.34c0.22-0.22,0.34-0.85,0.34-1.86v-4.46h-20.53
		c-2.24,0-4.16-0.8-5.77-2.41c-1.61-1.61-2.41-3.53-2.41-5.77V33.64c0-2.24,0.8-4.16,2.41-5.77c1.61-1.61,3.53-2.41,5.77-2.41h19.67
		c2.28,0,4.2,0.8,5.77,2.41c1.57,1.61,2.35,3.53,2.35,5.77v33.05c0,2.28-0.78,4.22-2.35,5.8c-1.57,1.59-3.49,2.38-5.77,2.38H228.01z
		 M229.9,53.62h17.04c1.02,0,1.64-0.11,1.86-0.34c0.22-0.22,0.34-0.84,0.34-1.86V34.92c0-1.02-0.11-1.64-0.34-1.86
		c-0.22-0.22-0.85-0.34-1.86-0.34H229.9c-1.02,0-1.64,0.11-1.86,0.34c-0.22,0.22-0.34,0.85-0.34,1.86v16.49
		c0,1.02,0.11,1.64,0.34,1.86C228.26,53.5,228.88,53.62,229.9,53.62z"/>
	<g>
		<path class="default_navbar_logo_st1" d="M104.81,16.89c-2.21-2.21-4.87-3.32-7.98-3.32h-4.3H53.56l16.9,12.2h20.89c4.07,0,4.57,0.5,4.57,4.57v13.91
			c0,4.07-0.5,4.57-4.57,4.57H70.47L53.53,61.05l43.3,0.01c3.11,0,5.77-1.1,7.98-3.32c2.21-2.21,3.31-4.87,3.31-7.98v-4.31V29.18
			v-4.3C108.12,21.76,107.02,19.1,104.81,16.89z"/>
		<polygon class="default_navbar_logo_st0" points="60.17,25.04 60.17,49.57 77.16,37.3 		"/>
		<polygon class="default_navbar_logo_st1" points="54.75,53.47 54.75,21.15 44.25,13.57 44.25,30.6 16.06,30.6 16.06,13.57 3.61,13.57 3.61,61.05 
			16.06,61.05 16.06,42.36 44.25,42.36 44.25,61.05 		"/>
	</g>
</g>
</svg>

    </div>
</a>
                </div>
                <div class="hidden lg:mr-20 lg:block w-full">
                    <div x-cloak x-show="shadow" class="flex justify-end w-full h-full items-center">
                        
                        
                        <a href="/schede-tecniche/" class="px-2 py-2 text-md text-primary font-condensed hover:text-primary/80 uppercase">Schede Tecniche</a>
                    </div>
                </div>
            </div>

            <div x-show="!shadow" class="flex justify-end w-full h-full items-center">
                <div class="fullsearch-container relative w-full max-w-xl mx-auto">
    <input 
        type="text" 
        class="fullsearch-input w-full rounded-none border p-2 border-primary focus:border-primary focus:ring-primary focus:ring-1 focus:outline-none" 
        placeholder="Cerca..."
        autocomplete="off">
    
    <div class="fullsearch-results absolute top-full mt-2 left-0 w-full bg-white border border-gray-300 shadow-lg z-50 hidden">
        <!-- Results will be populated here -->
    </div>
</div>
 
<style>
.price-badge {
    display: inline-flex;
    align-items: center;
    background: linear-gradient(90deg, #e67e22 0%, #f39c12 100%);
    border-radius: 4px;
    padding: 0;
    text-decoration: none;
    color: white;
    font-weight: 600;
    font-size: 16px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    overflow: hidden;
    position: relative;
}

.price-symbol {
    background: #d35400;
    padding: 4px 8px;
    border-radius: 4px 0 0 4px;
    position: relative;
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}
 
.price-symbol::after {
    content: '';
    position: absolute;
    right: -8px;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-left: 8px solid #d35400;
}
 
.price-value {
    padding: 4px 10px;
    background: #f39c12;
    min-width: 60px;
    text-align: center;
    border-radius: 0 4px 4px 0;
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}
</style>

<script>
(function() {
    // Inizializza una singola istanza del pannello di ricerca
    function initSearchInstance(container) {
        const searchInput = container.querySelector('.fullsearch-input');
        const searchResults = container.querySelector('.fullsearch-results');
        
        if (!searchInput || !searchResults) {
            return false;
        }
        
        // Evita doppia inizializzazione
        if (container.hasAttribute('data-initialized')) {
            return true;
        }
        
        container.setAttribute('data-initialized', 'true');

        let searchTimeout;
        
        searchInput.addEventListener('input', function() {
            const searchTerm = this.value.trim();
            
            // Clear previous timeout
            clearTimeout(searchTimeout);
        
            // Hide results if search is empty
            if (searchTerm.length === 0) {
                searchResults.classList.add('hidden');
                return;
            }

            // Debounce the search request
            searchTimeout = setTimeout(() => {
                performSearch(searchTerm);
            }, 300);
        });

        // Gestione submit su Enter
        searchInput.addEventListener('keydown', function(e) {
            if (e.key === 'Enter') {
                e.preventDefault();
                const searchTerm = this.value.trim();
                if (searchTerm.length > 0) {
                    window.location.href = `/?sName=${encodeURIComponent(searchTerm)}`;
                }
            }
        });

        // Hide results when clicking outside
        document.addEventListener('click', function(e) {
            if (!container.contains(e.target)) {
                searchResults.classList.add('hidden');
            }
        });

        function performSearch(searchTerm) {
            const url = `/new_files/ajax/fullsearch.php?search_str=${encodeURIComponent(searchTerm)}&ltype=json`;
            
            fetch(url)
                .then(response => response.json())
                .then(data => {
                    displayResults(data);
                })
                .catch(error => {
                    console.error('Search error:', error);
                    searchResults.innerHTML = '<div class="p-3 text-gray-500">Errore durante la ricerca</div>';
                    searchResults.classList.remove('hidden');
                });
        }

        function displayResults(data) {
            if (!data || !Array.isArray(data) || data.length < 2 || !Array.isArray(data[1])) {
                searchResults.innerHTML = '<div class="p-3 text-gray-500">Nessun risultato trovato</div>';
                searchResults.classList.remove('hidden');
                return;
            }

            const items = data[1];
            let resultsHTML = '';

            items.forEach(item => {
                if (item.model) {
                    const hasVideoReview = item.reviewid && item.reviewid !== 0;
                    const hasPrice = item.price && item.price !== 0;
                    resultsHTML += `
                    <div class="flex items-center h-20 justify-between gap-0 border-b border-gray-200 last:border-b-0 select-none">
                        <div class="p-0 lg:p-2 w-2/12 lg:w-1/12 flex items-center justify-center">
                            <a href="${item.link || '/new_files/redirs/model.php?id=' + item.id}">
                                <img style="height:40px" class="object-contain" src="${item.image_url}">
                            </a>
                        </div>
                        <div class="p-2 w-6/12 lg:w-4/12 flex items-center">
                            <a href="${item.link || '/new_files/redirs/model.php?id=' + item.id}" class="text-sm hover:underline hover:text-red-600 hover:decoration-black">
                                ${item.producer_name} ${item.model}
                            </a>
                        </div>
                        <div class="p-2 w-2/12 hidden lg:flex items-center justify-center">
                            ${(!item.product_type || item.product_type === 'smartphone') ? `<a href="/compara/${item.id}.html" data-type="0" data-id="${item.id}" data-model="${item.model}" data-maker="${item.maker_name}" data-imageid="${item.imageid}" class="flex items-center gap-2">` : '<div class="flex items-center gap-2 opacity-0">'}
                                <span class="flex items-center justify-center border border-gray-200 rounded-full p-1">
                                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-3">
                                        <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
                                    </svg>
                                </span>
                                <span class="text-xs hover:underline">
                                    Compara
                                </span>
                            ${(!item.product_type || item.product_type === 'smartphone') ? '</a>' : '</div>'}
                        </div>
                        <div class="p-2 w-3/12 hidden lg:flex items-center justify-center">
                            ${hasVideoReview ? `
                            <a href="/new_files/redirs/videoreview.php?id=${item.id}" class="video_review flex items-center gap-2">
                                <div class="color_video relative text-white">
                                    <img src="${item.rimage_url}?w=63&amp;h=42" width="63" height="42">
                                    <div class="absolute top-0 left-0 w-full h-full bg-black/30"></div>
                                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-6 absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">
                                        <path fill-rule="evenodd" d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12Zm14.024-.983a1.125 1.125 0 0 1 0 1.966l-5.603 3.113A1.125 1.125 0 0 1 9 15.113V8.887c0-.857.921-1.4 1.671-.983l5.603 3.113Z" clip-rule="evenodd" />
                                    </svg>
                                </div>
                                <span class="text-xs text-slate-500 leading-3">Video Review</span>
                            </a>
                            ` : ''}
                        </div>
                        <div class="p-2 w-4/12 lg:w-2/12 flex items-center justify-center">
                             ${hasPrice ? `
                             <a href="${(item.link || '').replace("schede-tecniche","prezzi") || '/new_files/redirs/price.php?id=' + item.id}" class="price-badge" target="_blank">
                                 <span class="price-symbol">&euro;</span>
                                 <span class="price-value">${item.price}</span>
                             </a>
                             ` : ''}
                         </div>
                    </div>`;
                }
            });

            if (resultsHTML === '') {
                resultsHTML = '<div class="p-3 text-gray-500">Nessun risultato trovato</div>';
            }

            searchResults.innerHTML = resultsHTML;
            searchResults.classList.remove('hidden');
        }
        
        return true;
    }
    
    // Inizializza tutte le istanze del pannello di ricerca
    function initAllSearchPanels() {
        const containers = document.querySelectorAll('.fullsearch-container:not([data-initialized])');
        containers.forEach(container => {
            initSearchInstance(container);
        });
    }
    
    // Prova ad inizializzare quando il DOM è pronto
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', function() {
            setTimeout(initAllSearchPanels, 100);
        });
    } else {
        setTimeout(initAllSearchPanels, 100);
    }
    
    // Inizializza anche quando il pannello diventa visibile (Alpine.js)
    // Usa un observer per rilevare quando search-menu diventa visibile
    const observer = new MutationObserver(function(mutations) {
        mutations.forEach(function(mutation) {
            if (mutation.type === 'attributes' && mutation.attributeName === 'style') {
                const searchMenu = document.getElementById('search-menu');
                if (searchMenu && searchMenu.style.display !== 'none') {
                    setTimeout(initAllSearchPanels, 50);
                }
            }
        });
    });
    
    // Avvia l'observer quando il DOM è pronto
    function startObserver() {
        const searchMenu = document.getElementById('search-menu');
        if (searchMenu) {
            observer.observe(searchMenu, { attributes: true, attributeFilter: ['style'] });
        } else {
            setTimeout(startObserver, 100);
        }
    }
    
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', startObserver);
    } else {
        startObserver();
    }
})();
</script>
            </div>
            <div x-cloak x-show="shadow" class="space-x-4">
                <div class="absolute inset-y-0 right-10 flex items-center">
                    <!-- Search Button -->
                    <button type="button"
                        class="relative inline-flex items-center justify-center rounded-lg p-2 lg:text-slate-900 text-white"
                        aria-controls="search-menu"  @click="searchOpen = !searchOpen; if (searchOpen) menuOpen = false" aria-expanded="false"
                        x-bind:aria-expanded="searchOpen.toString()">
                        <span class="absolute"></span>
                        <span class="sr-only">Apri la ricerca</span>
                        <div class="h-4 w-4 fill-slate-900 " :class="{ 'hidden': searchOpen, 'block': !searchOpen }">
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z"/></svg>
                        </div>
                        <svg x-description="Icon when search is open." x-state:on="Search open" x-state:off="Search closed"
                            class="hidden h-6 w-6" :class="{ 'block': searchOpen, 'hidden': !searchOpen }" fill="none"
                            viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"></path>
                        </svg>
                    </button>
                </div>
                <div class="absolute inset-y-0 right-0 flex items-center">
                                            
                    <!-- Mobile Menu Button -->
                    <button type="button"
                        class="relative inline-flex items-center justify-center rounded-lg p-2 text-slate-900 "
                        aria-controls="mobile-menu" @click="menuOpen = !menuOpen; if (menuOpen) searchOpen = false" aria-expanded="false"
                        x-bind:aria-expanded="menuOpen.toString()">
                        <span class="absolute"></span>
                        <span class="sr-only">Apri il menu</span>
                        <svg x-state:on="Menu open" x-state:off="Menu closed"
                            class="block h-6 w-6" :class="{ 'hidden': menuOpen, 'block': !menuOpen }" fill="none"
                            viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true">
                            <path stroke-linecap="round" stroke-linejoin="round"
                                d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5"></path>
                        </svg>
                        <svg x-description="Icon when menu is open." x-state:on="Menu open" x-state:off="Menu closed"
                            class="hidden h-6 w-6" :class="{ 'block': menuOpen, 'hidden': !menuOpen }" fill="none"
                            viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"></path>
                        </svg>
                    </button>
                </div>
            </div>
        </div>
    </div>


    <!-- Search Panel -->
<div class="h-screen w-full overflow-auto hidden-scrollbar bg-white" id="search-menu" x-show="searchOpen" style="display: none;">
    <div class="pb-3 pt-2 flex-none boxed">
        <div class="sticky top-0 bg-white py-2">
            <div class="boxed px-4 lg:py-24 my-2">
                <div class="fullsearch-container relative w-full max-w-xl mx-auto">
    <input 
        type="text" 
        class="fullsearch-input w-full rounded-none border p-2 border-primary focus:border-primary focus:ring-primary focus:ring-1 focus:outline-none" 
        placeholder="Cerca..."
        autocomplete="off">
    
    <div class="fullsearch-results absolute top-full mt-2 left-0 w-full bg-white border border-gray-300 shadow-lg z-50 hidden">
        <!-- Results will be populated here -->
    </div>
</div>
 
<style>
.price-badge {
    display: inline-flex;
    align-items: center;
    background: linear-gradient(90deg, #e67e22 0%, #f39c12 100%);
    border-radius: 4px;
    padding: 0;
    text-decoration: none;
    color: white;
    font-weight: 600;
    font-size: 16px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    overflow: hidden;
    position: relative;
}

.price-symbol {
    background: #d35400;
    padding: 4px 8px;
    border-radius: 4px 0 0 4px;
    position: relative;
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}
 
.price-symbol::after {
    content: '';
    position: absolute;
    right: -8px;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-left: 8px solid #d35400;
}
 
.price-value {
    padding: 4px 10px;
    background: #f39c12;
    min-width: 60px;
    text-align: center;
    border-radius: 0 4px 4px 0;
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}
</style>

<script>
(function() {
    // Inizializza una singola istanza del pannello di ricerca
    function initSearchInstance(container) {
        const searchInput = container.querySelector('.fullsearch-input');
        const searchResults = container.querySelector('.fullsearch-results');
        
        if (!searchInput || !searchResults) {
            return false;
        }
        
        // Evita doppia inizializzazione
        if (container.hasAttribute('data-initialized')) {
            return true;
        }
        
        container.setAttribute('data-initialized', 'true');

        let searchTimeout;
        
        searchInput.addEventListener('input', function() {
            const searchTerm = this.value.trim();
            
            // Clear previous timeout
            clearTimeout(searchTimeout);
        
            // Hide results if search is empty
            if (searchTerm.length === 0) {
                searchResults.classList.add('hidden');
                return;
            }

            // Debounce the search request
            searchTimeout = setTimeout(() => {
                performSearch(searchTerm);
            }, 300);
        });

        // Gestione submit su Enter
        searchInput.addEventListener('keydown', function(e) {
            if (e.key === 'Enter') {
                e.preventDefault();
                const searchTerm = this.value.trim();
                if (searchTerm.length > 0) {
                    window.location.href = `/?sName=${encodeURIComponent(searchTerm)}`;
                }
            }
        });

        // Hide results when clicking outside
        document.addEventListener('click', function(e) {
            if (!container.contains(e.target)) {
                searchResults.classList.add('hidden');
            }
        });

        function performSearch(searchTerm) {
            const url = `/new_files/ajax/fullsearch.php?search_str=${encodeURIComponent(searchTerm)}&ltype=json`;
            
            fetch(url)
                .then(response => response.json())
                .then(data => {
                    displayResults(data);
                })
                .catch(error => {
                    console.error('Search error:', error);
                    searchResults.innerHTML = '<div class="p-3 text-gray-500">Errore durante la ricerca</div>';
                    searchResults.classList.remove('hidden');
                });
        }

        function displayResults(data) {
            if (!data || !Array.isArray(data) || data.length < 2 || !Array.isArray(data[1])) {
                searchResults.innerHTML = '<div class="p-3 text-gray-500">Nessun risultato trovato</div>';
                searchResults.classList.remove('hidden');
                return;
            }

            const items = data[1];
            let resultsHTML = '';

            items.forEach(item => {
                if (item.model) {
                    const hasVideoReview = item.reviewid && item.reviewid !== 0;
                    const hasPrice = item.price && item.price !== 0;
                    resultsHTML += `
                    <div class="flex items-center h-20 justify-between gap-0 border-b border-gray-200 last:border-b-0 select-none">
                        <div class="p-0 lg:p-2 w-2/12 lg:w-1/12 flex items-center justify-center">
                            <a href="${item.link || '/new_files/redirs/model.php?id=' + item.id}">
                                <img style="height:40px" class="object-contain" src="${item.image_url}">
                            </a>
                        </div>
                        <div class="p-2 w-6/12 lg:w-4/12 flex items-center">
                            <a href="${item.link || '/new_files/redirs/model.php?id=' + item.id}" class="text-sm hover:underline hover:text-red-600 hover:decoration-black">
                                ${item.producer_name} ${item.model}
                            </a>
                        </div>
                        <div class="p-2 w-2/12 hidden lg:flex items-center justify-center">
                            ${(!item.product_type || item.product_type === 'smartphone') ? `<a href="/compara/${item.id}.html" data-type="0" data-id="${item.id}" data-model="${item.model}" data-maker="${item.maker_name}" data-imageid="${item.imageid}" class="flex items-center gap-2">` : '<div class="flex items-center gap-2 opacity-0">'}
                                <span class="flex items-center justify-center border border-gray-200 rounded-full p-1">
                                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-3">
                                        <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
                                    </svg>
                                </span>
                                <span class="text-xs hover:underline">
                                    Compara
                                </span>
                            ${(!item.product_type || item.product_type === 'smartphone') ? '</a>' : '</div>'}
                        </div>
                        <div class="p-2 w-3/12 hidden lg:flex items-center justify-center">
                            ${hasVideoReview ? `
                            <a href="/new_files/redirs/videoreview.php?id=${item.id}" class="video_review flex items-center gap-2">
                                <div class="color_video relative text-white">
                                    <img src="${item.rimage_url}?w=63&amp;h=42" width="63" height="42">
                                    <div class="absolute top-0 left-0 w-full h-full bg-black/30"></div>
                                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-6 absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">
                                        <path fill-rule="evenodd" d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12Zm14.024-.983a1.125 1.125 0 0 1 0 1.966l-5.603 3.113A1.125 1.125 0 0 1 9 15.113V8.887c0-.857.921-1.4 1.671-.983l5.603 3.113Z" clip-rule="evenodd" />
                                    </svg>
                                </div>
                                <span class="text-xs text-slate-500 leading-3">Video Review</span>
                            </a>
                            ` : ''}
                        </div>
                        <div class="p-2 w-4/12 lg:w-2/12 flex items-center justify-center">
                             ${hasPrice ? `
                             <a href="${(item.link || '').replace("schede-tecniche","prezzi") || '/new_files/redirs/price.php?id=' + item.id}" class="price-badge" target="_blank">
                                 <span class="price-symbol">&euro;</span>
                                 <span class="price-value">${item.price}</span>
                             </a>
                             ` : ''}
                         </div>
                    </div>`;
                }
            });

            if (resultsHTML === '') {
                resultsHTML = '<div class="p-3 text-gray-500">Nessun risultato trovato</div>';
            }

            searchResults.innerHTML = resultsHTML;
            searchResults.classList.remove('hidden');
        }
        
        return true;
    }
    
    // Inizializza tutte le istanze del pannello di ricerca
    function initAllSearchPanels() {
        const containers = document.querySelectorAll('.fullsearch-container:not([data-initialized])');
        containers.forEach(container => {
            initSearchInstance(container);
        });
    }
    
    // Prova ad inizializzare quando il DOM è pronto
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', function() {
            setTimeout(initAllSearchPanels, 100);
        });
    } else {
        setTimeout(initAllSearchPanels, 100);
    }
    
    // Inizializza anche quando il pannello diventa visibile (Alpine.js)
    // Usa un observer per rilevare quando search-menu diventa visibile
    const observer = new MutationObserver(function(mutations) {
        mutations.forEach(function(mutation) {
            if (mutation.type === 'attributes' && mutation.attributeName === 'style') {
                const searchMenu = document.getElementById('search-menu');
                if (searchMenu && searchMenu.style.display !== 'none') {
                    setTimeout(initAllSearchPanels, 50);
                }
            }
        });
    });
    
    // Avvia l'observer quando il DOM è pronto
    function startObserver() {
        const searchMenu = document.getElementById('search-menu');
        if (searchMenu) {
            observer.observe(searchMenu, { attributes: true, attributeFilter: ['style'] });
        } else {
            setTimeout(startObserver, 100);
        }
    }
    
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', startObserver);
    } else {
        startObserver();
    }
})();
</script>
            </div>
        </div>
    </div>
</div>

    <div x-cloak x-show="menuOpen" class="h-screen w-full overflow-auto hidden-scrollbar bg-white" id="mobile-menu" style="display: none;">
    <div class="px-6 pt-4 pb-40 lg:pb-4 grid grid-cols-1 lg:grid-cols-4 gap-6 boxed mx-auto">

        <div>
            <span class="uppercase text-black text-xs font-bold">Network:</span>
            
                <a target="_blank" href="https://www.hdblog.it/" class="text-gray-900 block rounded-md py-2 text-[20px] font-light">
                    HDblog
                </a>
    
            
                <a target="_blank" href="https://www.hdmotori.it/" class="text-gray-900 block rounded-md py-2 text-[20px] font-light">
                    HDmotori
                </a>
    
            
                <a target="_blank" href="https://hdgreen.it/" class="text-gray-900 block rounded-md py-2 text-[20px] font-light">
                    HDgreen
                </a>
    
            
                <a target="_blank" href="https://www.hdbusiness.it/" class="text-gray-900 block rounded-md py-2 text-[20px] font-light">
                    HDbusiness
                </a>

                <a target="_blank" href="https://www.hdblog.it/home/" class="text-gray-900 block rounded-md py-2 text-[20px] font-light">
                    HDhome
                </a>
            
        </div>

        <div>
            <span class="uppercase text-black text-xs font-bold">Topic:</span>
            <a href="/" class="text-gray-900 block rounded-md py-2 text-[20px] font-light">
                Home
            </a>
            <a href="/offerte/" class="text-gray-900 block rounded-md py-2 text-[20px] font-light">
                Offerte
            </a>
            <a href="/giochi/" class="text-gray-900 block rounded-md py-2 text-[20px] font-light">
                Giochi
            </a>
            <a href="/video/" class="text-gray-900 block rounded-md py-2 text-[20px] font-light">
                Video
            </a>
            <a href="/schede-tecniche/" class="text-gray-900 block rounded-md py-2 text-[20px] font-light">
                Schede Tecniche
            </a>
            <a href="https://discord.com/servers/hdblog-1086246510771052616" class="text-gray-900 block rounded-md py-2 text-[20px] font-light">
                Forum
            </a>
            <a href="/compara/" class="text-gray-900 block rounded-md py-2 text-[20px] font-light">
                Compara
            </a>
        </div>


        <div>
            <span class="uppercase text-black text-xs font-bold">About:</span>
            
            
                <a href="https://www.hdnetwork.it/contatti/" class="text-gray-900 block rounded-md py-2 text-[20px] font-light">
                    Contatti
                </a>
            
                <div class="divide-slate-500"></div>
            
            
                <a href="https://www.hdnetwork.it/pubblicita" class="text-gray-900 block rounded-md py-2 text-[20px] font-light">
                    Pubblicit&agrave;
                </a>
            
                <div class="divide-slate-500"></div>
            
            
                <a href="https://www.hdnetwork.it/cookie-policy/" class="text-gray-900 block rounded-md py-2 text-[20px] font-light">
                    Cookie policy
                </a>
            
                <div class="divide-slate-500"></div>
            
            
                <a href="https://www.hdnetwork.it/privacy-policy/" class="text-gray-900 block rounded-md py-2 text-[20px] font-light">
                    Privacy policy
                </a>
            
                <div class="divide-slate-500"></div>
            
            
                <a href="https://www.hdnetwork.it/note-legali/" class="text-gray-900 block rounded-md py-2 text-[20px] font-light">
                    Note legalli
                </a>
            
                <div class="divide-slate-500"></div>
            
            
                <a href="https://hdnetwork.it/codice-etico/" class="text-gray-900 block rounded-md py-2 text-[20px] font-light">
                    Codice Etico
                </a>
            
                <div class="divide-slate-500"></div>
            
            
                <a href="https://www.hdnetwork.it/affiliazione/" class="text-gray-900 block rounded-md py-2 text-[20px] font-light">
                    Affiliazione
                </a>
            
                <div class="divide-slate-500"></div>
            
        </div>

    </div>
</div>

</nav>