{{-- Header demo-digital-agency-2 — Marketplace style (Shopify / MercadoLibre)
     Estructura:
       Top bar (fixed, dark): logo + buscador prominente + acciones (lang + auth)
       Sub bar (sticky): nav menu de categorías + contacto
--}}
@php
    use App\Modules\Products\Models\ProductCategory;
    use App\Modules\Products\Models\Product;

    // Cargar catalog.json + core labels (matching del controller buildCoresIndex)
    $catalogData = [];
    $catalogPath = database_path('seeders/products/catalog.json');
    if (file_exists($catalogPath)) {
        $catalogData = json_decode(file_get_contents($catalogPath), true) ?? [];
        unset($catalogData['_comment']);
    }

    $coreLabels = [
        'agency' => 'Agencia', 'art-design' => 'Arte y Diseño', 'bp-dinamic' => 'Sitio Dinámico',
        'business-catalogue' => 'Catálogo Empresarial', 'catalogue-ai' => 'Catálogo AI',
        'concierge' => 'Concierge', 'construction' => 'Construcción', 'construction-2' => 'Arquitectura',
        'corporative' => 'Corporativo', 'creative-agency' => 'Agencia Creativa',
        'creative-video-editor' => 'Editor de Video', 'financial-wealth' => 'Finanzas',
        'foundations-ong' => 'Fundaciones y ONG', 'insurance-advisor' => 'Seguros',
        'law-firm-digital' => 'Estudios Jurídicos', 'nutritionist' => 'Salud y Bienestar',
        'personal-brand' => 'Marca Personal', 'petite-website' => 'Sitio Petite',
        'photography' => 'Fotografía', 'real-estate' => 'Inmobiliaria',
        'restaurant-bar' => 'Restaurantes y Bares', 'sitio-web-profesional' => 'Sitio Profesional',
        'standard-website' => 'Sitio Standard', 'website-reseller' => 'Para Revendedores',
    ];

    // Categorías ordenadas por count desc (todas las que tengan al menos 1 producto)
    $popularCategories = collect();
    $categoriesWithCores = [];
    try {
        $popularCategories = ProductCategory::withCount(['products'])
            ->get()
            ->sortByDesc('products_count')
            ->where('products_count', '>', 0)
            ->take(13)
            ->values();

        // Para cada categoría, agrupar sus productos por core preset
        foreach ($popularCategories as $cat) {
            $products = Product::where('category_id', $cat->id)->get();
            $coresInCat = [];
            foreach ($products as $p) {
                $core = $catalogData[$p->slug]['core'] ?? null;
                if (!$core) continue;
                if (!isset($coresInCat[$core])) {
                    $coresInCat[$core] = [
                        'slug'    => $core,
                        'name'    => $coreLabels[$core] ?? ucwords(str_replace('-', ' ', $core)),
                        'count'   => 0,
                        'active'  => 0,
                    ];
                }
                $coresInCat[$core]['count']++;
                if ($p->is_active) $coresInCat[$core]['active']++;
            }
            uasort($coresInCat, fn($a, $b) => $b['active'] <=> $a['active'] ?: $b['count'] <=> $a['count']);
            $categoriesWithCores[$cat->slug] = [
                'name'           => $cat->name,
                'slug'           => $cat->slug,
                'products_count' => $cat->products_count,
                'cores'          => array_values(array_slice($coresInCat, 0, 8)),
            ];
        }
    } catch (\Throwable $e) {}
@endphp

<header id="header" class="header-marketplace" data-plugin-options="{'stickyEnabled': true, 'stickyEffect': 'shrink', 'stickyEnableOnBoxed': true, 'stickyEnableOnMobile': false, 'stickyChangeLogo': false, 'stickyStartAt': 1, 'stickyHeaderContainerHeight': 70}">
    {{-- ═══════════════════════════════════════════════════════════════════
         TOP BAR — logo + search + actions
         ═══════════════════════════════════════════════════════════════════ --}}
    <div class="bewpro-topbar bg-color-dark">
        <div class="container container-xl-custom">
            <div class="d-flex align-items-center gap-3 py-3">
                {{-- Logo --}}
                <a href="{{ url('/') }}" class="d-flex align-items-center text-decoration-none flex-shrink-0">
                    <img alt="{{ config('site.assets.main_logo_alt', config('site.name')) }}"
                         src="{{ site_asset_url('main_logo') }}"
                         class="bewpro-logo"
                         height="38">
                </a>

                {{-- Search prominent (centro, full-width en desktop) --}}
                <form method="GET" action="{{ url('/products-catalogue') }}" class="bewpro-search d-none d-md-flex flex-grow-1 mx-2 mx-lg-3">
                    <div class="input-group">
                        <input type="text" name="search"
                               value="{{ request('search') ?? '' }}"
                               class="form-control bewpro-search-input"
                               placeholder="{{ __('Buscar modelo, industria o palabra clave...') }}"
                               autocomplete="off">
                        <button type="submit" class="btn bewpro-search-btn px-4">
                            <i class="fas fa-search"></i>
                        </button>
                    </div>
                </form>

                {{-- Mobile search icon --}}
                <button class="btn d-md-none bewpro-icon-btn ms-auto" type="button" data-bs-toggle="collapse" data-bs-target="#bewproMobileSearch" aria-label="{{ __('Buscar') }}">
                    <i class="fas fa-search text-color-light text-4"></i>
                </button>

                {{-- Right actions: lang + auth — ms-auto fuerza alineación a la
                     derecha porque .bewpro-search tiene max-width: 720px y deja
                     de crecer en pantallas anchas. --}}
                <div class="d-none d-lg-flex align-items-center gap-3 flex-shrink-0 ms-auto">
                    {{-- Language selector deshabilitado por ahora — el sitio queda solo en español.
                         Reactivar cuando se complete catálogo de traducciones EN.
                         <x-language-selector style="top-bar" /> --}}

                    @auth
                        <div class="dropdown">
                            <a href="#" class="bewpro-action-link" data-bs-toggle="dropdown" aria-expanded="false">
                                <i class="fas fa-user-circle me-1 text-3"></i>
                                <span class="d-none d-xl-inline">{{ Str::limit(auth()->user()->first_name ?: explode('@', auth()->user()->email)[0], 12) }}</span>
                                <i class="fas fa-chevron-down text-1 ms-1 opacity-7"></i>
                            </a>
                            <ul class="dropdown-menu dropdown-menu-end">
                                @if(auth()->user()->hasRole('Client'))
                                    <li><a class="dropdown-item" href="{{ url('/my-projects') }}"><i class="fas fa-folder-open me-2 text-color-primary"></i>{{ __('Mis Proyectos') }}</a></li>
                                    <li><a class="dropdown-item" href="{{ url('/my-projects/billing') }}"><i class="fas fa-receipt me-2 text-color-primary"></i>{{ __('Mis pagos') }}</a></li>
                                    <li><a class="dropdown-item" href="{{ url('/my-projects/support') }}"><i class="fas fa-life-ring me-2 text-color-primary"></i>{{ __('Soporte') }}</a></li>
                                @else
                                    <li><a class="dropdown-item" href="{{ url('/home') }}"><i class="fas fa-tachometer-alt me-2 text-color-primary"></i>{{ __('My Dashboard') }}</a></li>
                                @endif
                                <li><hr class="dropdown-divider"></li>
                                <li>
                                    <a class="dropdown-item" href="{{ route('logout') }}" onclick="event.preventDefault(); document.getElementById('bewpro-logout').submit();">
                                        <i class="fas fa-sign-out-alt me-2 text-muted"></i>{{ __('Logout') }}
                                    </a>
                                    <form id="bewpro-logout" action="{{ route('logout') }}" method="POST" class="d-none">@csrf</form>
                                </li>
                            </ul>
                        </div>
                    @else
                        <a href="{{ route('login') }}" class="bewpro-action-link">
                            <i class="fas fa-user-circle me-1 text-3"></i>
                            <span>{{ __('Iniciar sesión') }}</span>
                        </a>
                        <a href="{{ url('/products-catalogue') }}" class="btn btn-primary rounded-0 px-3 py-2 text-3 font-weight-semibold">
                            {{ __('Probar gratis') }}
                            <i class="fas fa-arrow-right text-1 ms-1"></i>
                        </a>
                    @endauth
                </div>

                {{-- Mobile hamburger (d-lg-none) --}}
                <button class="btn d-lg-none bewpro-icon-btn" type="button" data-bs-toggle="offcanvas" data-bs-target="#bewproMobileMenu" aria-label="{{ __('Menú') }}">
                    <i class="fas fa-bars text-color-light text-4"></i>
                </button>
            </div>

            {{-- Mobile search collapse --}}
            <div class="collapse d-md-none pb-3" id="bewproMobileSearch">
                <form method="GET" action="{{ url('/products-catalogue') }}">
                    <div class="input-group">
                        <input type="text" name="search" value="{{ request('search') ?? '' }}"
                               class="form-control bewpro-search-input"
                               placeholder="{{ __('Buscar modelo, industria o palabra clave...') }}">
                        <button type="submit" class="btn bewpro-search-btn px-4"><i class="fas fa-search"></i></button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    {{-- ═══════════════════════════════════════════════════════════════════
         SUB BAR — categorías populares + nav links
         IMPORTANTE: el dropdown está FUERA del scroll para que el menu
         no quede recortado por overflow. Las chips sí scrollean.
         ═══════════════════════════════════════════════════════════════════ --}}
    <div class="bewpro-subbar d-none d-lg-block">
        <div class="container container-xl-custom">
            <div class="d-flex align-items-center gap-2 py-2">
                {{-- Categorías mega-menu multinivel (estilo MercadoLibre) --}}
                <div class="dropdown bewpro-cat-dropdown flex-shrink-0">
                    <button type="button" class="bewpro-subbar-link bewpro-cat-trigger d-flex align-items-center gap-2 fw-semibold border-0" data-bs-toggle="dropdown" data-bs-display="dynamic" aria-expanded="false" data-bs-auto-close="outside">
                        <i class="fas fa-th-large"></i>
                        <span>{{ __('Categorías') }}</span>
                        <i class="fas fa-chevron-down text-1 opacity-7"></i>
                    </button>
                    <div class="dropdown-menu bewpro-megamenu p-0">
                        <div class="bewpro-megamenu-grid">
                            {{-- Sidebar izquierdo: lista de industrias --}}
                            <div class="bewpro-megamenu-sidebar">
                                @foreach($popularCategories as $i => $cat)
                                    <a href="{{ url('/products-catalogue?category=' . $cat->slug) }}"
                                       class="bewpro-megamenu-cat {{ $i === 0 ? 'active' : '' }}"
                                       data-cat="{{ $cat->slug }}">
                                        <span>{{ $cat->name }}</span>
                                        <i class="fas fa-chevron-right text-1 opacity-7"></i>
                                    </a>
                                @endforeach
                                <hr class="my-2 mx-3" style="border-color: var(--primary-rgba-20);">
                                <a href="{{ url('/products-catalogue') }}" class="bewpro-megamenu-cat text-color-primary">
                                    <span class="fw-semibold"><i class="fas fa-th me-2"></i>{{ __('Ver todas las industrias') }}</span>
                                </a>
                            </div>

                            {{-- Panel derecho: contenido por categoría (todos renderizados, JS toggle) --}}
                            <div class="bewpro-megamenu-content">
                                @foreach($popularCategories as $i => $cat)
                                    @php $catData = $categoriesWithCores[$cat->slug] ?? null; @endphp
                                    <div class="bewpro-megamenu-panel {{ $i === 0 ? '' : 'd-none' }}" data-panel="{{ $cat->slug }}">
                                        <div class="d-flex justify-content-between align-items-center mb-3">
                                            <h6 class="text-uppercase fw-bold text-color-light mb-0" style="letter-spacing: 0.05em;">
                                                {{ $cat->name }}
                                            </h6>
                                            <a href="{{ url('/products-catalogue?category=' . $cat->slug) }}" class="text-color-primary text-2 fw-semibold text-decoration-none">
                                                {{ __('Ver todos') }} ({{ $cat->products_count }}) <i class="fas fa-arrow-right text-1 ms-1"></i>
                                            </a>
                                        </div>

                                        @if($catData && !empty($catData['cores']))
                                            <div class="row g-3">
                                                @foreach($catData['cores'] as $core)
                                                    <div class="col-md-6 col-lg-4">
                                                        <a href="{{ url('/products-catalogue?core=' . $core['slug']) }}" class="bewpro-megamenu-core text-decoration-none d-block">
                                                            <span class="bewpro-megamenu-core-name fw-semibold d-block">{{ $core['name'] }}</span>
                                                            <span class="text-2 opacity-7 d-block mt-1">
                                                                @if($core['active'] > 0)
                                                                    <i class="fas fa-circle text-success" style="font-size: 6px;"></i>
                                                                    {{ $core['active'] }} {{ __('activos') }}
                                                                @endif
                                                                @if($core['count'] > $core['active'])
                                                                    @if($core['active'] > 0) · @endif
                                                                    {{ $core['count'] - $core['active'] }} {{ __('próximos') }}
                                                                @endif
                                                            </span>
                                                        </a>
                                                    </div>
                                                @endforeach
                                            </div>
                                        @else
                                            <p class="text-color-light opacity-7 text-3">{{ __('Modelos en preparación.') }}</p>
                                        @endif
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    </div>
                </div>

                <div class="bewpro-subbar-divider"></div>

                {{-- Chips scrollables (overflow horizontal sin afectar dropdowns) --}}
                <div class="d-flex align-items-center gap-1 flex-nowrap overflow-auto bewpro-subbar-scroll flex-grow-1">
                    @foreach($popularCategories->take(6) as $cat)
                        <a href="{{ url('/products-catalogue?category=' . $cat->slug) }}" class="bewpro-subbar-link flex-shrink-0">
                            {{ $cat->name }}
                        </a>
                    @endforeach
                </div>

                <div class="bewpro-subbar-divider"></div>

                <a href="{{ url('/contact') }}" class="bewpro-subbar-link flex-shrink-0">
                    {{ __('Contacto') }}
                </a>
            </div>
        </div>
    </div>
</header>

{{-- ═══════════════════════════════════════════════════════════════════
     MOBILE OFFCANVAS MENU
     ═══════════════════════════════════════════════════════════════════ --}}
<div class="offcanvas offcanvas-end bewpro-mobile-menu" tabindex="-1" id="bewproMobileMenu">
    <div class="offcanvas-header bg-color-dark">
        <h5 class="offcanvas-title text-color-light fw-bold">{{ __('Menú') }}</h5>
        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas" aria-label="{{ __('Cerrar') }}"></button>
    </div>
    <div class="offcanvas-body bg-color-dark">
        @auth
            <div class="mb-3 pb-3" style="border-bottom: 1px solid var(--primary-rgba-20);">
                <span class="text-color-light opacity-7 text-2 d-block mb-2">{{ __('Tu cuenta') }}</span>
                @if(auth()->user()->hasRole('Client'))
                    <a class="bewpro-mobile-link" href="{{ url('/my-projects') }}"><i class="fas fa-folder-open me-2"></i>{{ __('Mis Proyectos') }}</a>
                    <a class="bewpro-mobile-link" href="{{ url('/my-projects/billing') }}"><i class="fas fa-receipt me-2"></i>{{ __('Mis pagos') }}</a>
                    <a class="bewpro-mobile-link" href="{{ url('/my-projects/support') }}"><i class="fas fa-life-ring me-2"></i>{{ __('Soporte') }}</a>
                @else
                    <a class="bewpro-mobile-link" href="{{ url('/home') }}"><i class="fas fa-tachometer-alt me-2"></i>{{ __('My Dashboard') }}</a>
                @endif
                <a class="bewpro-mobile-link" href="{{ route('logout') }}" onclick="event.preventDefault(); document.getElementById('bewpro-logout-mobile').submit();">
                    <i class="fas fa-sign-out-alt me-2"></i>{{ __('Logout') }}
                </a>
                <form id="bewpro-logout-mobile" action="{{ route('logout') }}" method="POST" class="d-none">@csrf</form>
            </div>
        @else
            <div class="mb-3 pb-3" style="border-bottom: 1px solid var(--primary-rgba-20);">
                <a href="{{ url('/products-catalogue') }}" class="btn btn-primary w-100 rounded-0 mb-2 fw-semibold">{{ __('Probar gratis') }}</a>
                <a href="{{ route('login') }}" class="btn btn-outline-light w-100 rounded-0">{{ __('Iniciar sesión') }}</a>
            </div>
        @endauth

        <span class="text-color-light opacity-7 text-2 d-block mb-2">{{ __('Categorías') }}</span>
        @foreach($popularCategories as $cat)
            <a href="{{ url('/products-catalogue?category=' . $cat->slug) }}" class="bewpro-mobile-link d-flex justify-content-between">
                <span>{{ $cat->name }}</span>
                <span class="opacity-7 text-2">({{ $cat->products_count }})</span>
            </a>
        @endforeach
        <a href="{{ url('/products-catalogue') }}" class="bewpro-mobile-link text-color-primary fw-semibold">
            <i class="fas fa-arrow-right me-1"></i> {{ __('Ver todas las industrias') }}
        </a>

        <hr class="my-3" style="border-color: var(--primary-rgba-20);">

        <a href="{{ url('/contact') }}" class="bewpro-mobile-link"><i class="fas fa-envelope me-2"></i>{{ __('Contacto') }}</a>

        <hr class="my-3" style="border-color: var(--primary-rgba-20);">

        {{-- Language selector mobile — deshabilitado por ahora, sitio solo en español.
        <span class="text-color-light opacity-7 text-2 d-block mb-2">{{ __('Idioma') }}</span>
        <x-language-selector style="top-bar" />
        --}}
    </div>
</div>

{{-- Script inline (master layout no tiene @stack('scripts'), solo @yield) --}}
<script>
(function () {
    function init() {
        var sidebar = document.querySelectorAll('.bewpro-megamenu-cat[data-cat]');
        var panels = document.querySelectorAll('.bewpro-megamenu-panel[data-panel]');
        sidebar.forEach(function (cat) {
            var switchTo = function () {
                var slug = cat.dataset.cat;
                sidebar.forEach(function (c) { c.classList.remove('active'); });
                cat.classList.add('active');
                panels.forEach(function (p) { p.classList.add('d-none'); });
                var target = document.querySelector('.bewpro-megamenu-panel[data-panel="' + slug + '"]');
                if (target) target.classList.remove('d-none');
            };
            cat.addEventListener('mouseenter', switchTo);
            cat.addEventListener('focus', switchTo);
        });
    }
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', init);
    } else {
        init();
    }
})();
</script>

@push('styles')
<style>
/* ═══════════════════════════════════════════════
   Header marketplace styles
   ═══════════════════════════════════════════════ */
.header-marketplace { position: relative; z-index: 1000; box-shadow: 0 2px 8px rgba(0,0,0,0.08); }

/* Top bar */
.bewpro-topbar { border-bottom: 1px solid var(--primary-rgba-10); }
.bewpro-logo { max-height: 40px; width: auto; transition: opacity 0.2s; }
.bewpro-logo:hover { opacity: 0.85; }

/* Search prominent */
.bewpro-search { max-width: 720px; }
.bewpro-search-input {
    background: var(--light) !important;
    border: 2px solid var(--primary) !important;
    border-right: 0 !important;
    color: var(--dark) !important;
    font-size: 14px !important;
    padding: 10px 16px !important;
    border-radius: 0 !important;
}
.bewpro-search-input::placeholder { color: var(--grey-700); opacity: 0.7; }
.bewpro-search-input:focus { box-shadow: none !important; outline: 0; }
.bewpro-search-btn {
    background: var(--primary) !important;
    color: var(--light) !important;
    border: 2px solid var(--primary) !important;
    border-radius: 0 !important;
    transition: opacity 0.2s;
}
.bewpro-search-btn:hover { opacity: 0.9; }

/* Action links */
.bewpro-action-link {
    color: var(--light) !important;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    padding: 6px 8px;
    transition: opacity 0.2s;
}
.bewpro-action-link:hover { opacity: 0.85; color: var(--light) !important; }

/* Icon button (mobile actions) */
.bewpro-icon-btn { padding: 8px 12px; background: transparent !important; border: 0 !important; }
.bewpro-icon-btn:hover { opacity: 0.8; }

/* Sub bar */
.bewpro-subbar { background: var(--secondary-100); border-bottom: 1px solid var(--primary-rgba-10); position: relative; }
.bewpro-subbar-scroll::-webkit-scrollbar { display: none; }
.bewpro-subbar-scroll { -ms-overflow-style: none; scrollbar-width: none; }
.bewpro-subbar-link {
    color: var(--grey-900) !important;
    text-decoration: none;
    font-size: 13px;
    padding: 6px 14px;
    transition: all 0.15s;
    white-space: nowrap;
    border-radius: 2px;
    background: transparent;
    cursor: pointer;
}
.bewpro-subbar-link:hover,
.bewpro-subbar-link:focus { color: var(--primary) !important; background: var(--primary-rgba-10); outline: 0; }
.bewpro-subbar-divider { width: 1px; height: 20px; background: var(--primary-rgba-20); margin: 0 8px; flex-shrink: 0; }

/* Dropdown Categorías — escape del overflow del subbar */
.bewpro-cat-dropdown { position: relative; }
.bewpro-cat-trigger {
    background: transparent !important;
    color: var(--grey-900) !important;
    font-weight: 600;
}
.bewpro-cat-trigger:hover { color: var(--primary) !important; background: var(--primary-rgba-10) !important; }
.bewpro-cat-trigger::after { display: none; }

/* MEGA-MENÚ MULTINIVEL (estilo MercadoLibre) */
.bewpro-megamenu {
    z-index: 1050;
    width: min(960px, calc(100vw - 32px));
    margin-top: 4px;
    border: 0;
    box-shadow: 0 12px 32px rgba(0,0,0,0.2);
    overflow: hidden;
    padding: 0;
    background: var(--secondary);
}
.bewpro-megamenu-grid {
    display: grid;
    grid-template-columns: 280px 1fr;
    min-height: 480px;
}

/* Sidebar izquierdo */
.bewpro-megamenu-sidebar {
    background: var(--secondary-100);
    padding: 12px 0;
    overflow-y: auto;
    max-height: 480px;
    border-right: 1px solid var(--primary-rgba-10);
}
.bewpro-megamenu-cat {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 20px;
    color: var(--light) !important;
    text-decoration: none;
    font-size: 14px;
    transition: all 0.15s;
    cursor: pointer;
    background: transparent;
}
.bewpro-megamenu-cat:hover,
.bewpro-megamenu-cat.active {
    background: var(--primary) !important;
    color: var(--light) !important;
}
.bewpro-megamenu-cat.active i { opacity: 1 !important; }

/* Panel derecho con grid de cores */
.bewpro-megamenu-content {
    padding: 24px 28px;
    overflow-y: auto;
    max-height: 480px;
    background: var(--secondary);
}
.bewpro-megamenu-core {
    display: block;
    padding: 12px 14px;
    background: var(--secondary-100);
    border: 1px solid var(--primary-rgba-10);
    transition: all 0.15s;
    height: 100%;
}
.bewpro-megamenu-core:hover {
    border-color: var(--primary);
    background: var(--secondary-200);
}
.bewpro-megamenu-core-name { color: var(--light); font-size: 14px; transition: color 0.15s; }
.bewpro-megamenu-core:hover .bewpro-megamenu-core-name { color: var(--primary); }
.bewpro-megamenu-core .text-2 { color: var(--grey-700); }

/* Mobile responsive: collapse a single column on small screens */
@media (max-width: 768px) {
    .bewpro-megamenu { width: calc(100vw - 16px); }
    .bewpro-megamenu-grid { grid-template-columns: 1fr; min-height: auto; }
    .bewpro-megamenu-sidebar { max-height: 200px; border-right: 0; border-bottom: 1px solid var(--primary-rgba-10); }
    .bewpro-megamenu-content { max-height: 400px; }
}

/* Mobile menu offcanvas */
.bewpro-mobile-menu { width: 320px !important; }
.bewpro-mobile-link {
    display: block;
    color: var(--light) !important;
    text-decoration: none;
    padding: 10px 0;
    font-size: 14px;
    transition: opacity 0.2s;
}
.bewpro-mobile-link:hover { opacity: 0.8; color: var(--primary) !important; }

/* Sticky behavior — top bar permanece arriba al scrollear */
.header-marketplace.sticky-active { position: fixed; top: 0; left: 0; right: 0; }
.header-marketplace.sticky-active .bewpro-subbar { display: none !important; }

/* Dropdown menu (Categorías mega-menu) */
.dropdown-menu { border: 1px solid var(--primary-rgba-20); border-radius: 2px; box-shadow: 0 8px 24px rgba(0,0,0,0.15); }
.dropdown-item:hover { background: var(--primary-rgba-10); color: var(--primary) !important; }
.dropdown-item.text-color-primary:hover { background: var(--primary) !important; color: var(--light) !important; }
</style>
@endpush