<?php
if ( apply_filters( 'pawfect_is_pro_active', false ) ) {
?>
<!DOCTYPE html>
<html <?php language_attributes(); ?>>

<head>
    <meta charset="<?php bloginfo('charset'); ?>" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <?php
    // Load Google Fonts dynamically based on customizer settings
    $body_font = get_theme_mod( 'pawfect_body_font_family', 'Bricolage Grotesque' );
    $heading_font = get_theme_mod( 'pawfect_heading_font_family', 'Bricolage Grotesque' );
    $menu_font = get_theme_mod( 'pawfect_menu_font_family', 'Bricolage Grotesque' );

    $fonts = array_unique([$body_font, $heading_font, $menu_font, 'Bricolage Grotesque', 'Inter']);
    $font_families = [];
    foreach ($fonts as $font) {
        if (!empty($font) && $font !== 'inherit') {
            $encoded_font = str_replace(' ', '+', $font);
            $font_families[] = 'family=' . $encoded_font . ':wght@300;400;500;600;700;800';
        }
    }

    if (!empty($font_families)) {
        $fonts_url = 'https://fonts.googleapis.com/css2?' . implode('&', $font_families) . '&display=swap';
        echo '<link rel="stylesheet" href="' . esc_url($fonts_url) . '" />' . "\n";
    }
    ?>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
    <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>

    <?php wp_head(); // IMPORTANT: WordPress hook for plugins and styles ?>
</head>

<body <?php body_class(); ?>>
    <?php wp_body_open(); // WordPress hook, good practice to include ?>

    <!-- Top Bar -->
    <?php get_template_part('template-parts/topbar'); ?>

    <!-- Clean Header - Matching Original Design -->
    <?php
    $menu_style = get_theme_mod('pawfect_menu_style', 'sticky');
    $menu_container_size = get_theme_mod('pawfect_menu_container_size', 'container');
    $header_classes = 'pawfect-header pawfect-transition-all pawfect-duration-300';
    // Don't add sticky class initially - JavaScript will add it on scroll
    if ($menu_style === 'sticky') {
        $header_classes .= ' pawfect-sticky-enabled'; // Just mark as sticky-enabled
    }

    // Convert container size to proper class
    $container_class = 'pawfect-container';
    if ($menu_container_size === 'container-fluid') {
        $container_class = 'pawfect-container-full';
    } elseif ($menu_container_size === 'full-width') {
        $container_class = 'pawfect-w-full pawfect-px-6';
    }

    // Get logos safely
    $sticky_logo = get_theme_mod('pawfect_sticky_bar_logo', '');
    $custom_logo_id = get_theme_mod('custom_logo');
    if ($custom_logo_id) {
        $logo_data = wp_get_attachment_image_src($custom_logo_id, 'full');
        $main_logo = $logo_data ? $logo_data[0] : get_template_directory_uri() . '/assets/images/logo-white.webp';
    } else {
        $main_logo = get_template_directory_uri() . '/assets/images/logo-white.webp';
    }
    ?>
    <header class="<?php echo esc_attr($header_classes); ?>" id="pawfect-main-header">
        <?php if ($menu_style === 'sticky'): ?>
            <!-- STICKY HEADER - SAME AS STATIC INITIALLY -->
            <!-- Row 1: Utility -->
            <div class="<?php echo esc_attr($container_class); ?> pawfect-grid pawfect-grid-cols-3 pawfect-items-center pawfect-py-6 pawfect-transition-all pawfect-duration-300 pawfect-sticky-normal-layout">
                <!-- Left Side - Search -->
                <div class="pawfect-flex pawfect-items-center pawfect-gap-4 pawfect-justify-start">
                    <button id="pawfect-search-toggle" aria-label="Search" class="pawfect-search-toggle">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="#ffffff" viewBox="0 0 256 256">
                            <path d="M226.83,221.17l-52.7-52.7a84.1,84.1,0,1,0-5.66,5.66l52.7,52.7a4,4,0,0,0,5.66-5.66ZM36,112a76,76,0,1,1,76,76A76.08,76.08,0,0,1,36,112Z"></path>
                        </svg>
                    </button>
                </div>

                <!-- Center Logo -->
                <div class="pawfect-text-center">
                    <!-- Header Titles Wrapper - Always Present -->
                    <div class="header-titles-wrapper pawfect-text-center">
                        <?php if (has_custom_logo()): ?>
                            <div class="site-logo pawfect-mb-2">
                                <a href="<?php echo esc_url(home_url('/')); ?>" class="pawfect-logo-link">
                                    <img src="<?php echo esc_url($main_logo); ?>" alt="<?php bloginfo('name'); ?>" class="pawfect-transition-all pawfect-duration-300" />
                                </a>
                            </div>
                        <?php endif; ?>

                        <h1 class="site-title pawfect-text-4xl pawfect-font-bold pawfect-text-white <?php echo has_custom_logo() ? 'pawfect-mb-1' : 'pawfect-mb-2'; ?>">
                            <a href="<?php echo esc_url(home_url('/')); ?>" class="pawfect-text-white hover:pawfect-opacity-80 pawfect-transition-opacity">
                                <?php bloginfo('name'); ?>
                            </a>
                        </h1>

                        <?php
                        $description = get_bloginfo('description', 'display');
                        if ($description): ?>
                            <p class="site-description pawfect-text-white pawfect-opacity-80 pawfect-text-sm">
                                <?php echo esc_html($description); ?>
                            </p>
                        <?php endif; ?>
                    </div>
                </div>

                <!-- Right Side -->
                <div class="pawfect-flex pawfect-items-center pawfect-justify-end pawfect-gap-4">
                                        <!-- Language Switcher Shortcode -->
                    <?php if (get_theme_mod('pawfect_header_language_enabled', true)) : ?>
                        <div class="pawfect-language-switcher-wrapper pawfect-relative pawfect-language-dropdown pawfect-hidden sm:pawfect-block">
                            <?php 
                            $shortcode = get_theme_mod('pawfect_header_language_shortcode', '[gtranslate]');
                            $output = trim(do_shortcode($shortcode));
                            if (!empty($output) && $output !== $shortcode) {
                                echo $output;
                            } else {
                                get_template_part('template-parts/dummy-language');
                            }
                            ?>
                        </div>
                    <?php endif; ?>

                    <?php if (class_exists('WooCommerce') && get_theme_mod('pawfect_cart_icon_enabled', true)): ?>
                        <!-- WooCommerce Cart with Dropdown -->
                        <div class="pawfect-relative pawfect-cart-dropdown-container pawfect-flex pawfect-items-center">
                            <button class="pawfect-cart-icon pawfect-cart-trigger pawfect-flex pawfect-items-center pawfect-justify-center pawfect-w-7 pawfect-h-7" aria-label="Shopping Cart">
                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="#ffffff" viewBox="0 0 256 256">
                                    <path d="M216,68H172V64a44,44,0,0,0-88,0v4H40A12,12,0,0,0,28,80V200a12,12,0,0,0,12,12H216a12,12,0,0,0,12-12V80A12,12,0,0,0,216,68ZM92,64a36,36,0,0,1,72,0v4H92ZM220,200a4,4,0,0,1-4,4H40a4,4,0,0,1-4-4V80a4,4,0,0,1,4-4H84V96a4,4,0,0,0,8,0V76h72V96a4,4,0,0,0,8,0V76h44a4,4,0,0,1,4,4Z"></path>
                                </svg>
                            </button>
                            <!-- Cart Count Badge -->
                            <?php $cart_count = WC()->cart ? WC()->cart->get_cart_contents_count() : 0; ?>
                            <span class="pawfect-cart-badge pawfect-absolute pawfect--top-2 pawfect--right-2 pawfect-text-white pawfect-text-xs pawfect-font-bold pawfect-rounded-full pawfect-w-5 pawfect-h-5 pawfect-flex pawfect-items-center pawfect-justify-center pawfect-transition-all pawfect-duration-300 <?php echo $cart_count > 0 ? 'pawfect-scale-100' : 'pawfect-scale-0'; ?>" style="background-color: var(--pawfect-primary, #F4A259);">
                                <?php echo $cart_count; ?>
                            </span>

                            <!-- Cart Dropdown -->
                            <div class="pawfect-cart-dropdown pawfect-absolute pawfect-top-full pawfect-right-0 pawfect-mt-2 pawfect-w-96 pawfect-bg-white pawfect-rounded-lg pawfect-shadow-xl pawfect-border pawfect-border-gray-200 pawfect-opacity-0 pawfect-invisible pawfect-transform pawfect-translate-y-2 pawfect-transition-all pawfect-duration-300 pawfect-z-50">
                                <div class="pawfect-cart-dropdown-content">
                                    <?php echo pawfect_get_cart_dropdown_content(); ?>
                                </div>
                            </div>
                        </div>
                    <?php endif; ?>

                    <?php if (class_exists('WooCommerce') && get_theme_mod('pawfect_wishlist_enabled', true)): ?>
                        <!-- Wishlist Icon -->
                        <div class="pawfect-relative pawfect-flex pawfect-items-center">
                            <a href="<?php echo esc_url(pawfect_get_wishlist_url()); ?>" class="pawfect-wishlist-icon pawfect-flex pawfect-items-center pawfect-justify-center pawfect-w-7 pawfect-h-7" aria-label="Wishlist">
                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="#ffffff" viewBox="0 0 256 256"><path d="M178,44c-21.44,0-39.92,10.19-50,27.07C117.92,54.19,99.44,44,78,44a58.07,58.07,0,0,0-58,58c0,28.59,18,58.47,53.4,88.79a333.81,333.81,0,0,0,52.7,36.73,4,4,0,0,0,3.8,0,333.81,333.81,0,0,0,52.7-36.73C218,160.47,236,130.59,236,102A58.07,58.07,0,0,0,178,44ZM128,219.42c-14-8-100-59.35-100-117.42A50.06,50.06,0,0,1,78,52c21.11,0,38.85,11.31,46.3,29.51a4,4,0,0,0,7.4,0C139.15,63.31,156.89,52,178,52a50.06,50.06,0,0,1,50,50C228,160,142,211.46,128,219.42Z"></path></svg>
                            </a>
                            <!-- Wishlist Count Badge -->
                            <?php $wishlist_count = pawfect_get_wishlist_count(); ?>
                            <span class="pawfect-wishlist-count pawfect-absolute pawfect--top-2 pawfect--right-2 pawfect-text-white pawfect-text-xs pawfect-font-bold pawfect-rounded-full pawfect-w-5 pawfect-h-5 pawfect-flex pawfect-items-center pawfect-justify-center pawfect-transition-all pawfect-duration-300 <?php echo $wishlist_count > 0 ? 'pawfect-scale-100' : 'pawfect-scale-0'; ?>" style="background-color: var(--pawfect-primary, #F4A259);">
                                <?php echo $wishlist_count; ?>
                            </span>
                        </div>
                    <?php endif; ?>

                    <!-- Mobile Drawer Toggle Button -->
                    <button id="pawfect-menu-open" class="lg:pawfect-hidden pawfect-flex pawfect-items-center pawfect-justify-center  pawfect-h-7">
                       <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="#ffffff" viewBox="0 0 256 256"><path d="M220,128a4,4,0,0,1-4,4H40a4,4,0,0,1,0-8H216A4,4,0,0,1,220,128ZM40,68H216a4,4,0,0,0,0-8H40a4,4,0,0,0,0,8ZM216,188H40a4,4,0,0,0,0,8H216a4,4,0,0,0,0-8Z"></path></svg>
                    </button>
                </div>
            </div>

            <!-- Row 2: Navigation -->
            <div class="<?php echo esc_attr($container_class); ?> pawfect-sticky-nav-row pawfect-transition-all pawfect-duration-300">
                <nav class="pawfect-primary-nav-menu pawfect-hidden lg:pawfect-block">
                    <?php
                    if (has_nav_menu('primary')) {
                        wp_nav_menu([
                            'theme_location' => 'primary',
                            'container' => false,
                            'menu_class' => 'pawfect-flex pawfect-justify-center pawfect-items-center pawfect-text-[17px] pawfect-uppercase',
                            'walker' => new Pawfect_Nav_Walker(),
                            'fallback_cb' => false,
                        ]);
                    } else {
                        // Show fallback menu or message when no menu is assigned
                        echo '<div class="pawfect-no-menu-notice pawfect-text-center pawfect-py-4">';
                        echo '<p class="pawfect-text-sm pawfect-text-gray-500">Please assign a menu to the Primary Menu location in <a href="' . admin_url('nav-menus.php') . '" class="pawfect-text-primary hover:pawfect-underline">Appearance â†’ Menus</a></p>';
                        echo '</div>';
                    }
                    ?>
                </nav>
            </div>

            <!-- SCROLLED LAYOUT - Hidden by Default, Shows When Scrolled -->
            <div class="pawfect-sticky-scrolled-layout pawfect-hidden <?php echo esc_attr($container_class); ?> pawfect-flex pawfect-items-center pawfect-justify-between pawfect-py-3 pawfect-transition-all pawfect-duration-300" style="display: none;">
                <!-- Left: Logo -->
                <div class="pawfect-flex pawfect-items-center">
                    <a href="<?php echo esc_url(home_url('/')); ?>" class="pawfect-logo-link">
                        <?php if (!empty($sticky_logo)): ?>
                            <img src="<?php echo esc_url($sticky_logo); ?>" alt="<?php bloginfo('name'); ?>" style="height: 40px; width: auto;" />
                        <?php else: ?>
                            <img src="<?php echo esc_url($main_logo); ?>" alt="<?php bloginfo('name'); ?>" style="height: 40px; width: auto;" />
                        <?php endif; ?>
                    </a>
                </div>

                <!-- Center: Navigation -->
                <nav class="pawfect-primary-nav-menu pawfect-hidden lg:pawfect-block pawfect-flex-1 pawfect-mx-8">
                    <?php
                    if (has_nav_menu('primary')) {
                        wp_nav_menu([
                            'theme_location' => 'primary',
                            'container' => false,
                            'menu_class' => 'pawfect-flex pawfect-justify-center pawfect-items-center pawfect-text-[15px] pawfect-uppercase pawfect-gap-6',
                            'walker' => new Pawfect_Nav_Walker(),
                            'fallback_cb' => false,
                        ]);
                    } else {
                        // Show fallback menu or message when no menu is assigned
                        echo '<div class="pawfect-no-menu-notice pawfect-text-center pawfect-py-4">';
                        echo '<p class="pawfect-text-sm pawfect-text-gray-500">Please assign a menu to the Primary Menu location in <a href="' . admin_url('nav-menus.php') . '" class="pawfect-text-primary hover:pawfect-underline">Appearance â†’ Menus</a></p>';
                        echo '</div>';
                    }
                    ?>
                </nav>

                <!-- Right: Search, Cart, Mobile Menu -->
                <div class="pawfect-flex pawfect-items-center pawfect-gap-3">
                    <button id="pawfect-search-toggle" aria-label="Search" class="pawfect-search-toggle">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="#333" viewBox="0 0 256 256">
                            <path d="M226.83,221.17l-52.7-52.7a84.1,84.1,0,1,0-5.66,5.66l52.7,52.7a4,4,0,0,0,5.66-5.66ZM36,112a76,76,0,1,1,76,76A76.08,76.08,0,0,1,36,112Z"></path>
                        </svg>
                    </button>

                    <?php if (class_exists('WooCommerce') && get_theme_mod('pawfect_cart_icon_enabled', true)): ?>
                        <div class="pawfect-relative pawfect-cart-dropdown-container">
                            <button class="pawfect-cart-icon pawfect-cart-trigger pawfect-flex pawfect-items-center pawfect-justify-center pawfect-w-8 pawfect-h-8" aria-label="Shopping Cart">
                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="#333" viewBox="0 0 256 256">
                                    <path d="M216,68H172V64a44,44,0,0,0-88,0v4H40A12,12,0,0,0,28,80V200a12,12,0,0,0,12,12H216a12,12,0,0,0,12-12V80A12,12,0,0,0,216,68ZM92,64a36,36,0,0,1,72,0v4H92ZM220,200a4,4,0,0,1-4,4H40a4,4,0,0,1-4-4V80a4,4,0,0,1,4-4H84V96a4,4,0,0,0,8,0V76h72V96a4,4,0,0,0,8,0V76h44a4,4,0,0,1,4,4Z"></path>
                                </svg>
                            </button>
                            <span class="pawfect-cart-badge pawfect-absolute pawfect--top-2 pawfect--right-2 pawfect-text-white pawfect-text-xs pawfect-font-bold pawfect-rounded-full pawfect-w-4 pawfect-h-4 pawfect-flex pawfect-items-center pawfect-justify-center pawfect-transition-all pawfect-duration-300 <?php echo $cart_count > 0 ? 'pawfect-scale-100' : 'pawfect-scale-0'; ?>" style="background-color: var(--pawfect-primary, #F4A259);">
                                <?php echo $cart_count; ?>
                            </span>

                            <!-- Cart Dropdown -->
                            <div class="pawfect-cart-dropdown pawfect-absolute pawfect-top-full pawfect-right-0 pawfect-mt-2 pawfect-w-80 pawfect-bg-white pawfect-rounded-lg pawfect-shadow-xl pawfect-border pawfect-border-gray-200 pawfect-opacity-0 pawfect-invisible pawfect-transform pawfect-translate-y-2 pawfect-transition-all pawfect-duration-300 pawfect-z-50">
                                <div class="pawfect-cart-dropdown-content">
                                    <?php echo pawfect_get_cart_dropdown_content(); ?>
                                </div>
                            </div>
                        </div>
                    <?php endif; ?>

                    <?php if (class_exists('WooCommerce') && get_theme_mod('pawfect_wishlist_enabled', true)): ?>
                        <!-- Wishlist Icon -->
                        <div class="pawfect-relative">
                            <a href="<?php echo esc_url(pawfect_get_wishlist_url()); ?>" class="pawfect-wishlist-icon pawfect-flex pawfect-items-center pawfect-justify-center pawfect-w-8 pawfect-h-8" aria-label="Wishlist">
                               <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="#ffffff" viewBox="0 0 256 256"><path d="M178,44c-21.44,0-39.92,10.19-50,27.07C117.92,54.19,99.44,44,78,44a58.07,58.07,0,0,0-58,58c0,28.59,18,58.47,53.4,88.79a333.81,333.81,0,0,0,52.7,36.73,4,4,0,0,0,3.8,0,333.81,333.81,0,0,0,52.7-36.73C218,160.47,236,130.59,236,102A58.07,58.07,0,0,0,178,44ZM128,219.42c-14-8-100-59.35-100-117.42A50.06,50.06,0,0,1,78,52c21.11,0,38.85,11.31,46.3,29.51a4,4,0,0,0,7.4,0C139.15,63.31,156.89,52,178,52a50.06,50.06,0,0,1,50,50C228,160,142,211.46,128,219.42Z"></path></svg>
                            </a>
                            <!-- Wishlist Count Badge -->
                            <?php $wishlist_count = pawfect_get_wishlist_count(); ?>
                            <span class="pawfect-wishlist-count pawfect-absolute pawfect--top-2 pawfect--right-2 pawfect-text-white pawfect-text-xs pawfect-font-bold pawfect-rounded-full pawfect-w-4 pawfect-h-4 pawfect-flex pawfect-items-center pawfect-justify-center pawfect-transition-all pawfect-duration-300 <?php echo $wishlist_count > 0 ? 'pawfect-scale-100' : 'pawfect-scale-0'; ?>" style="background-color: var(--pawfect-primary, #F4A259);">
                                <?php echo $wishlist_count; ?>
                            </span>
                        </div>
                    <?php endif; ?>

                    <!-- Mobile Drawer Toggle Button -->
                    <button id="pawfect-menu-open" class="lg:pawfect-hidden pawfect-text-2xl">
                        <svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" fill="#333333" viewBox="0 0 256 256">
                            <path d="M220,128a4,4,0,0,1-4,4H40a4,4,0,0,1,0-8H216A4,4,0,0,1,220,128ZM40,68H216a4,4,0,0,0,0-8H40a4,4,0,0,0,0,8ZM216,188H40a4,4,0,0,0,0,8H216a4,4,0,0,0,0-8Z"></path>
                        </svg>
                    </button>
                </div>
            </div>

        <?php else: ?>
            <!-- STATIC HEADER LAYOUT: Original Design -->
            <!-- Row 1: Utility -->
            <div class="<?php echo esc_attr($container_class); ?> pawfect-grid pawfect-grid-cols-3 pawfect-items-center pawfect-py-6">
                <!-- Left Side - Search -->
                <div class="pawfect-flex pawfect-items-center pawfect-gap-4 pawfect-justify-start">
                    <?php if (get_theme_mod('pawfect_search_icon_enabled', true)): ?>
                        <button id="pawfect-search-toggle" aria-label="Search" class="pawfect-search-toggle">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="#ffffff" viewBox="0 0 256 256">
                                <path d="M226.83,221.17l-52.7-52.7a84.1,84.1,0,1,0-5.66,5.66l52.7,52.7a4,4,0,0,0,5.66-5.66ZM36,112a76,76,0,1,1,76,76A76.08,76.08,0,0,1,36,112Z"></path>
                            </svg>
                        </button>
                    <?php endif; ?>
                </div>

                <!-- Center Logo -->
                <div class="pawfect-text-center">
                    <!-- Header Titles Wrapper - Always Present -->
                    <div class="header-titles-wrapper pawfect-text-center">
                        <?php if (has_custom_logo()): ?>
                            <div class="site-logo pawfect-mb-2">
                                <a href="<?php echo esc_url(home_url('/')); ?>" class="pawfect-logo-link">
                                    <img src="<?php echo esc_url($main_logo); ?>" alt="<?php bloginfo('name'); ?>" />
                                </a>
                            </div>
                        <?php endif; ?>

                        <h1 class="site-title pawfect-text-4xl pawfect-font-bold pawfect-text-white <?php echo has_custom_logo() ? 'pawfect-mb-1' : 'pawfect-mb-2'; ?>">
                            <a href="<?php echo esc_url(home_url('/')); ?>" class="pawfect-text-white hover:pawfect-opacity-80 pawfect-transition-opacity">
                                <?php bloginfo('name'); ?>
                            </a>
                        </h1>

                        <?php
                        $description = get_bloginfo('description', 'display');
                        if ($description): ?>
                            <p class="site-description pawfect-text-white pawfect-opacity-80 pawfect-text-sm">
                                <?php echo esc_html($description); ?>
                            </p>
                        <?php endif; ?>
                    </div>
                </div>

                <!-- Right Side -->
                <div class="pawfect-flex pawfect-items-center pawfect-justify-end pawfect-gap-4">
                                        <!-- Language Switcher Shortcode (Mobile) -->
                    <?php if (get_theme_mod('pawfect_header_language_enabled', true)) : ?>
                        <div class="pawfect-language-switcher-wrapper pawfect-relative pawfect-language-dropdown pawfect-block sm:pawfect-hidden">
                            <?php 
                            $shortcode = get_theme_mod('pawfect_header_language_shortcode', '[gtranslate]');
                            $output = trim(do_shortcode($shortcode));
                            if (!empty($output) && $output !== $shortcode) {
                                echo $output;
                            } else {
                                get_template_part('template-parts/dummy-language');
                            }
                            ?>
                        </div>
                    <?php endif; ?>

                    <?php if (class_exists('WooCommerce') && get_theme_mod('pawfect_cart_icon_enabled', true)): ?>
                        <!-- WooCommerce Cart with Dropdown -->
                        <div class="pawfect-relative pawfect-cart-dropdown-container">
                            <button class="pawfect-cart-icon pawfect-cart-trigger pawfect-flex pawfect-items-center pawfect-justify-center pawfect-w-8 pawfect-h-8" aria-label="Shopping Cart">
                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="#ffffff" viewBox="0 0 256 256">
                                    <path d="M216,68H172V64a44,44,0,0,0-88,0v4H40A12,12,0,0,0,28,80V200a12,12,0,0,0,12,12H216a12,12,0,0,0,12-12V80A12,12,0,0,0,216,68ZM92,64a36,36,0,0,1,72,0v4H92ZM220,200a4,4,0,0,1-4,4H40a4,4,0,0,1-4-4V80a4,4,0,0,1,4-4H84V96a4,4,0,0,0,8,0V76h72V96a4,4,0,0,0,8,0V76h44a4,4,0,0,1,4,4Z"></path>
                                </svg>
                            </button>
                            <!-- Cart Count Badge -->
                            <?php $cart_count = WC()->cart ? WC()->cart->get_cart_contents_count() : 0; ?>
                            <span class="pawfect-cart-badge pawfect-absolute pawfect--top-2 pawfect--right-2 pawfect-text-white pawfect-text-xs pawfect-font-bold pawfect-rounded-full pawfect-w-5 pawfect-h-5 pawfect-flex pawfect-items-center pawfect-justify-center pawfect-transition-all pawfect-duration-300 <?php echo $cart_count > 0 ? 'pawfect-scale-100' : 'pawfect-scale-0'; ?>" style="background-color: var(--pawfect-primary, #F4A259);">
                                <?php echo $cart_count; ?>
                            </span>

                            <!-- Cart Dropdown -->
                            <div class="pawfect-cart-dropdown pawfect-absolute pawfect-top-full pawfect-right-0 pawfect-mt-2 pawfect-w-96 pawfect-bg-white pawfect-rounded-lg pawfect-shadow-xl pawfect-border pawfect-border-gray-200 pawfect-opacity-0 pawfect-invisible pawfect-transform pawfect-translate-y-2 pawfect-transition-all pawfect-duration-300 pawfect-z-50">
                                <div class="pawfect-cart-dropdown-content">
                                    <?php echo pawfect_get_cart_dropdown_content(); ?>
                                </div>
                            </div>
                        </div>
                    <?php endif; ?>

                    <?php if (class_exists('WooCommerce') && get_theme_mod('pawfect_wishlist_enabled', true)): ?>
                        <!-- Wishlist Icon -->
                        <div class="pawfect-relative">
                            <a href="<?php echo esc_url(pawfect_get_wishlist_url()); ?>" class="pawfect-wishlist-icon pawfect-flex pawfect-items-center pawfect-justify-center pawfect-w-8 pawfect-h-8" aria-label="Wishlist">
                              
                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="#ffffff" viewBox="0 0 256 256"><path d="M178,44c-21.44,0-39.92,10.19-50,27.07C117.92,54.19,99.44,44,78,44a58.07,58.07,0,0,0-58,58c0,28.59,18,58.47,53.4,88.79a333.81,333.81,0,0,0,52.7,36.73,4,4,0,0,0,3.8,0,333.81,333.81,0,0,0,52.7-36.73C218,160.47,236,130.59,236,102A58.07,58.07,0,0,0,178,44ZM128,219.42c-14-8-100-59.35-100-117.42A50.06,50.06,0,0,1,78,52c21.11,0,38.85,11.31,46.3,29.51a4,4,0,0,0,7.4,0C139.15,63.31,156.89,52,178,52a50.06,50.06,0,0,1,50,50C228,160,142,211.46,128,219.42Z"></path></svg>
                            </a>
                            <!-- Wishlist Count Badge -->
                            <?php $wishlist_count = pawfect_get_wishlist_count(); ?>
                            <span class="pawfect-wishlist-count pawfect-absolute pawfect--top-2 pawfect--right-2 pawfect-text-white pawfect-text-xs pawfect-font-bold pawfect-rounded-full pawfect-w-5 pawfect-h-5 pawfect-flex pawfect-items-center pawfect-justify-center pawfect-transition-all pawfect-duration-300 <?php echo $wishlist_count > 0 ? 'pawfect-scale-100' : 'pawfect-scale-0'; ?>" style="background-color: var(--pawfect-primary, #F4A259); display:block">
                                <?php echo $wishlist_count; ?>
                            </span>
                        </div>
                    <?php endif; ?>

                    <!-- Mobile Drawer Toggle Button -->
                    <button id="pawfect-menu-open" class="lg:pawfect-hidden pawfect-text-2xl">
                        <svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" fill="#ffffff" viewBox="0 0 256 256">
                            <path d="M220,128a4,4,0,0,1-4,4H40a4,4,0,0,1,0-8H216A4,4,0,0,1,220,128ZM40,68H216a4,4,0,0,0,0-8H40a4,4,0,0,0,0,8ZM216,188H40a4,4,0,0,0,0,8H216a4,4,0,0,0,0-8Z"></path>
                        </svg>
                    </button>
                </div>
            </div>

            <!-- Row 2: Navigation -->
            <div class="<?php echo esc_attr($container_class); ?>">
                <nav class="pawfect-primary-nav-menu pawfect-hidden lg:pawfect-block">
                    <?php
                    if (has_nav_menu('primary')) {
                        wp_nav_menu([
                            'theme_location' => 'primary',
                            'container' => false,
                            'menu_class' => 'pawfect-flex pawfect-justify-center pawfect-items-center pawfect-text-[17px] pawfect-uppercase',
                            'walker' => new Pawfect_Nav_Walker(),
                            'fallback_cb' => false,
                        ]);
                    } else {
                        // Show fallback menu or message when no menu is assigned
                        echo '<div class="pawfect-no-menu-notice pawfect-text-center pawfect-py-4">';
                        echo '<p class="pawfect-text-sm pawfect-text-gray-500">Please assign a menu to the Primary Menu location in <a href="' . admin_url('nav-menus.php') . '" class="pawfect-text-primary hover:pawfect-underline">Appearance â†’ Menus</a></p>';
                        echo '</div>';
                    }
                    ?>
                </nav>
            </div>
        <?php endif; ?>
    </header>

    <!-- Professional Search Modal -->
    <div id="pawfect-search-modal" class="pawfect-fixed pawfect-inset-0 pawfect-bg-black pawfect-bg-opacity-50 pawfect-z-50 pawfect-opacity-0 pawfect-invisible pawfect-pointer-events-none pawfect-transition-all pawfect-duration-300" style="display: none;">
        <div class="pawfect-flex pawfect-items-center pawfect-justify-center pawfect-min-h-screen pawfect-p-4">
            <div class="pawfect-bg-white pawfect-rounded-2xl pawfect-shadow-2xl pawfect-w-full pawfect-max-w-2xl pawfect-transform pawfect-scale-95 pawfect-transition-transform pawfect-duration-300" id="pawfect-search-modal-content">
                <!-- Search Header -->
                <div class="pawfect-flex pawfect-items-center pawfect-justify-between pawfect-p-6 pawfect-border-b pawfect-border-gray-100">
                    <h3 class="pawfect-text-xl pawfect-font-semibold pawfect-text-gray-900">Search</h3>
                    <button id="pawfect-search-close" class="pawfect-text-gray-400 pawfect-text-gray-600 pawfect-transition-colors pawfect-p-2 pawfect-rounded-full pawfect-bg-gray-100">
                        <svg class="pawfect-w-4 pawfect-h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
                        </svg>
                    </button>
                </div>

                <!-- Search Input -->
                <div class="pawfect-p-6 pawfect-pb-4">
                    <div class="pawfect-relative">
                        <input type="text" id="pawfect-search-input" placeholder="Search products and blog posts..."
                               class="pawfect-w-full pawfect-px-6 pawfect-py-4 pawfect-pl-14 pawfect-border-0 pawfect-bg-gray-50 pawfect-rounded-2xl pawfect-text-lg pawfect-placeholder-gray-500 pawfect-transition-all pawfect-duration-200 focus:pawfect-bg-white focus:pawfect-shadow-lg focus:pawfect-ring-2 focus:pawfect-ring-pawfect-primary focus:pawfect-ring-opacity-20" style="outline: none !important; box-shadow: none !important;">
                       
                      
                        <svg class="pawfect-absolute pawfect-left-5 pawfect-top-1/2 pawfect-transform pawfect--translate-y-1/2 pawfect-w-6 pawfect-h-6 pawfect-text-gray-400" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 256 256">
            <path d="M226.83,221.17l-52.7-52.7a84.1,84.1,0,1,0-5.66,5.66l52.7,52.7a4,4,0,0,0,5.66-5.66ZM36,112a76,76,0,1,1,76,76A76.08,76.08,0,0,1,36,112Z"></path>
        </svg>
                    </div>
                    
                </div>

                <!-- Search Results -->
                <div id="pawfect-search-results" class="pawfect-max-h-96 pawfect-overflow-y-auto pawfect-border-t pawfect-border-gray-100">
                    <div class="pawfect-p-6 pawfect-text-center pawfect-text-gray-500">
                        <svg class="pawfect-w-12 pawfect-h-12 pawfect-mx-auto pawfect-mb-4 pawfect-text-gray-300" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 256 256">
            <path d="M226.83,221.17l-52.7-52.7a84.1,84.1,0,1,0-5.66,5.66l52.7,52.7a4,4,0,0,0,5.66-5.66ZM36,112a76,76,0,1,1,76,76A76.08,76.08,0,0,1,36,112Z"></path>
        </svg>
                        <p>Start typing to search for products...</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
<?php } else { ?>
<?php
// Exit if accessed directly.
if ( ! defined( 'ABSPATH' ) ) {
    exit;
}
?>
<!DOCTYPE html>
<html <?php language_attributes(); ?>>

<head>
    <meta charset="<?php bloginfo('charset'); ?>" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <?php wp_head(); // IMPORTANT: WordPress hook for plugins and styles - Google Fonts are enqueued via functions.php ?>
</head>

<body <?php body_class(); ?>>
    <?php wp_body_open(); // WordPress hook, good practice to include ?>

    <!-- Skip to Content Link - Accessibility -->
    <a class="skip-link screen-reader-text" href="#primary-content"><?php esc_html_e( 'Skip to content', 'pawfect' ); ?></a>

    <!-- Top Bar -->
    <?php get_template_part('template-parts/topbar'); ?>

    <!-- Clean Header - Matching Original Design -->
    <?php
    $menu_style = get_theme_mod('pawfect_menu_style', 'static');
    $menu_container_size = get_theme_mod('pawfect_menu_container_size', 'container');
    $header_classes = 'pawfect-header pawfect-transition-all pawfect-duration-300';
    // Don't add sticky class initially - JavaScript will add it on scroll
    if ($menu_style === 'sticky') {
        $header_classes .= ' pawfect-sticky-enabled'; // Just mark as sticky-enabled
    }

    // Convert container size to proper class
    $container_class = 'pawfect-container';
    if ($menu_container_size === 'container-fluid') {
        $container_class = 'pawfect-container-full';
    } elseif ($menu_container_size === 'full-width') {
        $container_class = 'pawfect-w-full pawfect-px-6';
    }

    // Get logos safely
    $sticky_logo = get_theme_mod('pawfect_sticky_bar_logo', '');
    $custom_logo_id = get_theme_mod('custom_logo');
    if ($custom_logo_id) {
        $logo_data = wp_get_attachment_image_src($custom_logo_id, 'full');
        $main_logo = $logo_data ? $logo_data[0] : get_template_directory_uri() . '/assets/images/logo-white.webp';
    } else {
        $main_logo = get_template_directory_uri() . '/assets/images/logo-white.webp';
    }
    ?>
    <header class="<?php echo esc_attr($header_classes); ?>" id="pawfect-main-header">
        <?php if ($menu_style === 'sticky'): ?>
            <!-- STICKY HEADER - SAME AS STATIC INITIALLY -->
            <!-- Row 1: Utility -->
            <div class="<?php echo esc_attr($container_class); ?> pawfect-grid pawfect-grid-cols-3 pawfect-items-center pawfect-py-6 pawfect-transition-all pawfect-duration-300 pawfect-sticky-normal-layout">
                <!-- Left Side - Search -->
                <div class="pawfect-flex pawfect-items-center pawfect-gap-4 pawfect-justify-start">
                    <button id="pawfect-search-toggle" aria-label="<?php esc_attr_e( 'Search', 'pawfect' ); ?>" class="pawfect-search-toggle">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="#ffffff" viewBox="0 0 256 256">
                            <path d="M226.83,221.17l-52.7-52.7a84.1,84.1,0,1,0-5.66,5.66l52.7,52.7a4,4,0,0,0,5.66-5.66ZM36,112a76,76,0,1,1,76,76A76.08,76.08,0,0,1,36,112Z"></path>
                        </svg>
                    </button>
                </div>

                <!-- Center Logo -->
                <div class="pawfect-text-center">
                    <!-- Header Titles Wrapper - Always Present -->
                    <div class="header-titles-wrapper pawfect-text-center">
                        <?php if (has_custom_logo()): ?>
                            <div class="site-logo pawfect-mb-2">
                                <a href="<?php echo esc_url(home_url('/')); ?>" class="pawfect-logo-link">
                                    <img src="<?php echo esc_url($main_logo); ?>" alt="<?php bloginfo('name'); ?>" class="pawfect-transition-all pawfect-duration-300" />
                                </a>
                            </div>
                        <?php endif; ?>

                        <?php if ( is_front_page() ) : ?>
                        <h1 class="site-title pawfect-text-4xl pawfect-font-bold pawfect-text-white <?php echo has_custom_logo() ? 'pawfect-mb-1' : 'pawfect-mb-2'; ?>">
                            <a href="<?php echo esc_url(home_url('/')); ?>" class="pawfect-text-white hover:pawfect-opacity-80 pawfect-transition-opacity">
                                <?php bloginfo('name'); ?>
                            </a>
                        </h1>
                        <?php else : ?>
                        <p class="site-title pawfect-text-4xl pawfect-font-bold pawfect-text-white <?php echo has_custom_logo() ? 'pawfect-mb-1' : 'pawfect-mb-2'; ?>">
                            <a href="<?php echo esc_url(home_url('/')); ?>" class="pawfect-text-white hover:pawfect-opacity-80 pawfect-transition-opacity">
                                <?php bloginfo('name'); ?>
                            </a>
                        </p>
                        <?php endif; ?>

                        <?php
                        $description = get_bloginfo('description', 'display');
                        if ($description): ?>
                            <p class="site-description pawfect-text-white pawfect-opacity-80 pawfect-text-sm">
                                <?php echo esc_html($description); ?>
                            </p>
                        <?php endif; ?>
                    </div>
                </div>

                <!-- Right Side -->
                <div class="pawfect-flex pawfect-items-center pawfect-justify-end pawfect-gap-4">

                    <?php if (class_exists('WooCommerce') && get_theme_mod('pawfect_cart_icon_enabled', true)): ?>
                        <!-- WooCommerce Cart with Dropdown -->
                        <div class="pawfect-relative pawfect-cart-dropdown-container pawfect-flex pawfect-items-center">
                            <button class="pawfect-cart-icon pawfect-cart-trigger pawfect-flex pawfect-items-center pawfect-justify-center pawfect-w-7 pawfect-h-7" aria-label="<?php esc_attr_e( 'Shopping Cart', 'pawfect' ); ?>">
                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="#ffffff" viewBox="0 0 256 256">
                                    <path d="M216,68H172V64a44,44,0,0,0-88,0v4H40A12,12,0,0,0,28,80V200a12,12,0,0,0,12,12H216a12,12,0,0,0,12-12V80A12,12,0,0,0,216,68ZM92,64a36,36,0,0,1,72,0v4H92ZM220,200a4,4,0,0,1-4,4H40a4,4,0,0,1-4-4V80a4,4,0,0,1,4-4H84V96a4,4,0,0,0,8,0V76h72V96a4,4,0,0,0,8,0V76h44a4,4,0,0,1,4,4Z"></path>
                                </svg>
                            </button>
                            <!-- Cart Count Badge -->
                            <?php $cart_count = WC()->cart ? WC()->cart->get_cart_contents_count() : 0; ?>
                            <span class="pawfect-cart-badge pawfect-absolute pawfect--top-2 pawfect--right-2 pawfect-text-white pawfect-text-xs pawfect-font-bold pawfect-rounded-full pawfect-w-5 pawfect-h-5 pawfect-flex pawfect-items-center pawfect-justify-center pawfect-transition-all pawfect-duration-300 <?php echo esc_attr( $cart_count > 0 ? 'pawfect-scale-100' : 'pawfect-scale-0' ); ?>" style="background-color: var(--pawfect-primary, #F4A259);">
                                <?php echo absint( $cart_count ); ?>
                            </span>

                            <!-- Cart Dropdown -->
                            <div class="pawfect-cart-dropdown pawfect-absolute pawfect-top-full pawfect-right-0 pawfect-mt-2 pawfect-w-96 pawfect-bg-white pawfect-rounded-lg pawfect-shadow-xl pawfect-border pawfect-border-gray-200 pawfect-opacity-0 pawfect-invisible pawfect-transform pawfect-translate-y-2 pawfect-transition-all pawfect-duration-300 pawfect-z-50">
                                <div class="pawfect-cart-dropdown-content">
                                    <?php echo wp_kses_post( pawfect_get_cart_dropdown_content() ); ?>
                                </div>
                            </div>
                        </div>
                    <?php endif; ?>

                    <?php if (class_exists('WooCommerce') && get_theme_mod('pawfect_wishlist_enabled', true)): ?>
                        <!-- Wishlist Icon -->
                        <div class="pawfect-relative pawfect-flex pawfect-items-center">
                            <a href="<?php echo esc_url(pawfect_get_wishlist_url()); ?>" class="pawfect-wishlist-icon pawfect-flex pawfect-items-center pawfect-justify-center pawfect-w-7 pawfect-h-7" aria-label="<?php esc_attr_e( 'Wishlist', 'pawfect' ); ?>">
                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="#ffffff" viewBox="0 0 256 256"><path d="M178,44c-21.44,0-39.92,10.19-50,27.07C117.92,54.19,99.44,44,78,44a58.07,58.07,0,0,0-58,58c0,28.59,18,58.47,53.4,88.79a333.81,333.81,0,0,0,52.7,36.73,4,4,0,0,0,3.8,0,333.81,333.81,0,0,0,52.7-36.73C218,160.47,236,130.59,236,102A58.07,58.07,0,0,0,178,44ZM128,219.42c-14-8-100-59.35-100-117.42A50.06,50.06,0,0,1,78,52c21.11,0,38.85,11.31,46.3,29.51a4,4,0,0,0,7.4,0C139.15,63.31,156.89,52,178,52a50.06,50.06,0,0,1,50,50C228,160,142,211.46,128,219.42Z"></path></svg>
                            </a>
                            <!-- Wishlist Count Badge -->
                            <?php $wishlist_count = pawfect_get_wishlist_count(); ?>
                            <span class="pawfect-wishlist-count pawfect-absolute pawfect--top-2 pawfect--right-2 pawfect-text-white pawfect-text-xs pawfect-font-bold pawfect-rounded-full pawfect-w-5 pawfect-h-5 pawfect-flex pawfect-items-center pawfect-justify-center pawfect-transition-all pawfect-duration-300 <?php echo esc_attr( $wishlist_count > 0 ? 'pawfect-scale-100' : 'pawfect-scale-0' ); ?>" style="background-color: var(--pawfect-primary, #F4A259);">
                                <?php echo absint( $wishlist_count ); ?>
                            </span>
                        </div>
                    <?php endif; ?>

                    <!-- Mobile Drawer Toggle Button -->
                    <button id="pawfect-menu-open" aria-label="<?php esc_attr_e('Open Menu', 'pawfect'); ?>" class="lg:pawfect-hidden pawfect-flex pawfect-items-center pawfect-justify-center  pawfect-h-7">
                       <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="#ffffff" viewBox="0 0 256 256"><path d="M220,128a4,4,0,0,1-4,4H40a4,4,0,0,1,0-8H216A4,4,0,0,1,220,128ZM40,68H216a4,4,0,0,0,0-8H40a4,4,0,0,0,0,8ZM216,188H40a4,4,0,0,0,0,8H216a4,4,0,0,0,0-8Z"></path></svg>
                    </button>
                </div>
            </div>

            <!-- Row 2: Navigation -->
            <div class="<?php echo esc_attr($container_class); ?> pawfect-sticky-nav-row pawfect-transition-all pawfect-duration-300">
                <nav class="pawfect-primary-nav-menu pawfect-hidden lg:pawfect-block">
                    <?php
                    // Display primary menu or fallback to native page list
                    wp_nav_menu([
                        'theme_location' => 'primary',
                        'container' => false,
                        'menu_class' => 'pawfect-flex pawfect-justify-center pawfect-items-center pawfect-text-[17px] pawfect-uppercase',
                        'walker' => new Pawfect_Nav_Walker(),
                        'fallback_cb' => function() {
                            echo '<ul class="pawfect-flex pawfect-justify-center pawfect-items-center pawfect-text-[17px] pawfect-uppercase pawfect-page-menu-fallback pawfect-gap-8">';
                            echo '<li class="pawfect-relative pawfect-menu-item"><a href="' . esc_url(home_url('/')) . '" class="pawfect-nav-link pawfect-font-bold hover:pawfect-text-pawfect-primary pawfect-transition-colors">' . esc_html__('Home', 'pawfect') . '</a></li>';
                            $pages = get_pages(array('parent' => 0, 'number' => 5, 'sort_column' => 'menu_order, post_title'));
                            if (!empty($pages)) {
                                foreach ($pages as $p) {
                                    echo '<li class="pawfect-relative pawfect-menu-item"><a href="' . esc_url(get_permalink($p->ID)) . '" class="pawfect-nav-link pawfect-font-bold hover:pawfect-text-pawfect-primary pawfect-transition-colors">' . esc_html($p->post_title) . '</a></li>';
                                }
                            }
                            echo '</ul>';
                        },
                    ]);
                    ?>
                </nav>
            </div>

            <!-- SCROLLED LAYOUT - Hidden by Default, Shows When Scrolled -->
            <div class="pawfect-sticky-scrolled-layout <?php echo esc_attr($container_class); ?> pawfect-flex pawfect-items-center pawfect-justify-between pawfect-py-3 pawfect-transition-all pawfect-duration-300" style="display: none;">
                <!-- Left: Logo -->
                <div class="pawfect-flex pawfect-items-center">
                    <a href="<?php echo esc_url(home_url('/')); ?>" class="pawfect-logo-link">
                        <?php if (!empty($sticky_logo)): ?>
                            <img src="<?php echo esc_url($sticky_logo); ?>" alt="<?php bloginfo('name'); ?>" style="height: 40px; width: auto;" />
                        <?php else: ?>
                            <img src="<?php echo esc_url($main_logo); ?>" alt="<?php bloginfo('name'); ?>" style="height: 40px; width: auto;" />
                        <?php endif; ?>
                    </a>
                </div>

                <!-- Center: Navigation -->
                <nav class="pawfect-primary-nav-menu pawfect-hidden lg:pawfect-block pawfect-flex-1 pawfect-mx-8">
                    <?php
                    if (has_nav_menu('primary')) {
                        wp_nav_menu([
                            'theme_location' => 'primary',
                            'container' => false,
                            'menu_class' => 'pawfect-flex pawfect-justify-center pawfect-items-center pawfect-text-[15px] pawfect-uppercase pawfect-gap-6',
                            'walker' => new Pawfect_Nav_Walker(),
                            'fallback_cb' => false,
                        ]);
                    } else {
                        // Show fallback menu or message when no menu is assigned
                        echo '<div class="pawfect-no-menu-notice pawfect-text-center pawfect-py-4">';
                        echo '<p class="pawfect-text-sm pawfect-text-gray-500">' . esc_html__( 'Please assign a menu to the Primary Menu location in', 'pawfect' ) . ' <a href="' . esc_url( admin_url('nav-menus.php') ) . '" class="pawfect-text-primary hover:pawfect-underline">' . esc_html__( 'Appearance &rarr; Menus', 'pawfect' ) . '</a></p>';
                        echo '</div>';
                    }
                    ?>
                </nav>

                <!-- Right: Search, Cart, Mobile Menu -->
                <div class="pawfect-flex pawfect-items-center pawfect-gap-3">
                    <button id="pawfect-search-toggle" aria-label="<?php esc_attr_e( 'Search', 'pawfect' ); ?>" class="pawfect-search-toggle">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="#333" viewBox="0 0 256 256">
                            <path d="M226.83,221.17l-52.7-52.7a84.1,84.1,0,1,0-5.66,5.66l52.7,52.7a4,4,0,0,0,5.66-5.66ZM36,112a76,76,0,1,1,76,76A76.08,76.08,0,0,1,36,112Z"></path>
                        </svg>
                    </button>

                    <?php if (class_exists('WooCommerce') && get_theme_mod('pawfect_cart_icon_enabled', true)): ?>
                        <div class="pawfect-relative pawfect-cart-dropdown-container">
                            <button class="pawfect-cart-icon pawfect-cart-trigger pawfect-flex pawfect-items-center pawfect-justify-center pawfect-w-8 pawfect-h-8" aria-label="<?php esc_attr_e( 'Shopping Cart', 'pawfect' ); ?>">
                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="#333" viewBox="0 0 256 256">
                                    <path d="M216,68H172V64a44,44,0,0,0-88,0v4H40A12,12,0,0,0,28,80V200a12,12,0,0,0,12,12H216a12,12,0,0,0,12-12V80A12,12,0,0,0,216,68ZM92,64a36,36,0,0,1,72,0v4H92ZM220,200a4,4,0,0,1-4,4H40a4,4,0,0,1-4-4V80a4,4,0,0,1,4-4H84V96a4,4,0,0,0,8,0V76h72V96a4,4,0,0,0,8,0V76h44a4,4,0,0,1,4,4Z"></path>
                                </svg>
                            </button>
                            <span class="pawfect-cart-badge pawfect-absolute pawfect--top-2 pawfect--right-2 pawfect-text-white pawfect-text-xs pawfect-font-bold pawfect-rounded-full pawfect-w-4 pawfect-h-4 pawfect-flex pawfect-items-center pawfect-justify-center pawfect-transition-all pawfect-duration-300 <?php echo esc_attr( $cart_count > 0 ? 'pawfect-scale-100' : 'pawfect-scale-0' ); ?>" style="background-color: var(--pawfect-primary, #F4A259);">
                                <?php echo absint( $cart_count ); ?>
                            </span>

                            <!-- Cart Dropdown -->
                            <div class="pawfect-cart-dropdown pawfect-absolute pawfect-top-full pawfect-right-0 pawfect-mt-2 pawfect-w-80 pawfect-bg-white pawfect-rounded-lg pawfect-shadow-xl pawfect-border pawfect-border-gray-200 pawfect-opacity-0 pawfect-invisible pawfect-transform pawfect-translate-y-2 pawfect-transition-all pawfect-duration-300 pawfect-z-50">
                                <div class="pawfect-cart-dropdown-content">
                                    <?php echo wp_kses_post( pawfect_get_cart_dropdown_content() ); ?>
                                </div>
                            </div>
                        </div>
                    <?php endif; ?>

                    <?php if (class_exists('WooCommerce') && get_theme_mod('pawfect_wishlist_enabled', true)): ?>
                        <!-- Wishlist Icon -->
                        <div class="pawfect-relative">
                            <a href="<?php echo esc_url(pawfect_get_wishlist_url()); ?>" class="pawfect-wishlist-icon pawfect-flex pawfect-items-center pawfect-justify-center pawfect-w-8 pawfect-h-8" aria-label="<?php esc_attr_e( 'Wishlist', 'pawfect' ); ?>">
                               <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="#ffffff" viewBox="0 0 256 256"><path d="M178,44c-21.44,0-39.92,10.19-50,27.07C117.92,54.19,99.44,44,78,44a58.07,58.07,0,0,0-58,58c0,28.59,18,58.47,53.4,88.79a333.81,333.81,0,0,0,52.7,36.73,4,4,0,0,0,3.8,0,333.81,333.81,0,0,0,52.7-36.73C218,160.47,236,130.59,236,102A58.07,58.07,0,0,0,178,44ZM128,219.42c-14-8-100-59.35-100-117.42A50.06,50.06,0,0,1,78,52c21.11,0,38.85,11.31,46.3,29.51a4,4,0,0,0,7.4,0C139.15,63.31,156.89,52,178,52a50.06,50.06,0,0,1,50,50C228,160,142,211.46,128,219.42Z"></path></svg>
                            </a>
                            <!-- Wishlist Count Badge -->
                            <?php $wishlist_count = pawfect_get_wishlist_count(); ?>
                            <span class="pawfect-wishlist-count pawfect-absolute pawfect--top-2 pawfect--right-2 pawfect-text-white pawfect-text-xs pawfect-font-bold pawfect-rounded-full pawfect-w-4 pawfect-h-4 pawfect-flex pawfect-items-center pawfect-justify-center pawfect-transition-all pawfect-duration-300 <?php echo esc_attr( $wishlist_count > 0 ? 'pawfect-scale-100' : 'pawfect-scale-0' ); ?>" style="background-color: var(--pawfect-primary, #F4A259);">
                                <?php echo absint( $wishlist_count ); ?>
                            </span>
                        </div>
                    <?php endif; ?>

                    <!-- Mobile Drawer Toggle Button -->
                    <button id="pawfect-menu-open" aria-label="<?php esc_attr_e('Open Menu', 'pawfect'); ?>" class="lg:pawfect-hidden pawfect-text-2xl">
                        <svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" fill="#333333" viewBox="0 0 256 256">
                            <path d="M220,128a4,4,0,0,1-4,4H40a4,4,0,0,1,0-8H216A4,4,0,0,1,220,128ZM40,68H216a4,4,0,0,0,0-8H40a4,4,0,0,0,0,8ZM216,188H40a4,4,0,0,0,0,8H216a4,4,0,0,0,0-8Z"></path>
                        </svg>
                    </button>
                </div>
            </div>

        <?php else: ?>
            <!-- STATIC HEADER LAYOUT: Original Design -->
            <!-- Row 1: Utility -->
            <div class="<?php echo esc_attr($container_class); ?> pawfect-grid pawfect-grid-cols-3 pawfect-items-center pawfect-py-6">
                <!-- Left Side - Search -->
                <div class="pawfect-flex pawfect-items-center pawfect-gap-4 pawfect-justify-start">
                    <?php if (get_theme_mod('pawfect_search_icon_enabled', true)): ?>
                        <button id="pawfect-search-toggle" aria-label="<?php esc_attr_e( 'Search', 'pawfect' ); ?>" class="pawfect-search-toggle">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="#ffffff" viewBox="0 0 256 256">
                                <path d="M226.83,221.17l-52.7-52.7a84.1,84.1,0,1,0-5.66,5.66l52.7,52.7a4,4,0,0,0,5.66-5.66ZM36,112a76,76,0,1,1,76,76A76.08,76.08,0,0,1,36,112Z"></path>
                            </svg>
                        </button>
                    <?php endif; ?>
                </div>

                <!-- Center Logo -->
                <div class="pawfect-text-center">
                    <!-- Header Titles Wrapper - Always Present -->
                    <div class="header-titles-wrapper pawfect-text-center">
                        <?php if (has_custom_logo()): ?>
                            <div class="site-logo pawfect-mb-2">
                                <a href="<?php echo esc_url(home_url('/')); ?>" class="pawfect-logo-link">
                                    <img src="<?php echo esc_url($main_logo); ?>" alt="<?php bloginfo('name'); ?>" />
                                </a>
                            </div>
                        <?php endif; ?>

                        <?php if ( is_front_page() ) : ?>
                        <h1 class="site-title pawfect-text-4xl pawfect-font-bold pawfect-text-white <?php echo has_custom_logo() ? 'pawfect-mb-1' : 'pawfect-mb-2'; ?>">
                            <a href="<?php echo esc_url(home_url('/')); ?>" class="pawfect-text-white hover:pawfect-opacity-80 pawfect-transition-opacity">
                                <?php bloginfo('name'); ?>
                            </a>
                        </h1>
                        <?php else : ?>
                        <p class="site-title pawfect-text-4xl pawfect-font-bold pawfect-text-white <?php echo has_custom_logo() ? 'pawfect-mb-1' : 'pawfect-mb-2'; ?>">
                            <a href="<?php echo esc_url(home_url('/')); ?>" class="pawfect-text-white hover:pawfect-opacity-80 pawfect-transition-opacity">
                                <?php bloginfo('name'); ?>
                            </a>
                        </p>
                        <?php endif; ?>

                        <?php
                        $description = get_bloginfo('description', 'display');
                        if ($description): ?>
                            <p class="site-description pawfect-text-white pawfect-opacity-80 pawfect-text-sm">
                                <?php echo esc_html($description); ?>
                            </p>
                        <?php endif; ?>
                    </div>
                </div>

                <!-- Right Side -->
                <div class="pawfect-flex pawfect-items-center pawfect-justify-end pawfect-gap-4">


                    <?php if (class_exists('WooCommerce') && get_theme_mod('pawfect_cart_icon_enabled', true)): ?>
                        <!-- WooCommerce Cart with Dropdown -->
                        <div class="pawfect-relative pawfect-cart-dropdown-container">
                            <button class="pawfect-cart-icon pawfect-cart-trigger pawfect-flex pawfect-items-center pawfect-justify-center pawfect-w-8 pawfect-h-8" aria-label="<?php esc_attr_e( 'Shopping Cart', 'pawfect' ); ?>">
                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="#ffffff" viewBox="0 0 256 256">
                                    <path d="M216,68H172V64a44,44,0,0,0-88,0v4H40A12,12,0,0,0,28,80V200a12,12,0,0,0,12,12H216a12,12,0,0,0,12-12V80A12,12,0,0,0,216,68ZM92,64a36,36,0,0,1,72,0v4H92ZM220,200a4,4,0,0,1-4,4H40a4,4,0,0,1-4-4V80a4,4,0,0,1,4-4H84V96a4,4,0,0,0,8,0V76h72V96a4,4,0,0,0,8,0V76h44a4,4,0,0,1,4,4Z"></path>
                                </svg>
                            </button>
                            <!-- Cart Count Badge -->
                            <?php $cart_count = WC()->cart ? WC()->cart->get_cart_contents_count() : 0; ?>
                            <span class="pawfect-cart-badge pawfect-absolute pawfect--top-2 pawfect--right-2 pawfect-text-white pawfect-text-xs pawfect-font-bold pawfect-rounded-full pawfect-w-5 pawfect-h-5 pawfect-flex pawfect-items-center pawfect-justify-center pawfect-transition-all pawfect-duration-300 <?php echo esc_attr( $cart_count > 0 ? 'pawfect-scale-100' : 'pawfect-scale-0' ); ?>" style="background-color: var(--pawfect-primary, #F4A259);">
                                <?php echo absint( $cart_count ); ?>
                            </span>

                            <!-- Cart Dropdown -->
                            <div class="pawfect-cart-dropdown pawfect-absolute pawfect-top-full pawfect-right-0 pawfect-mt-2 pawfect-w-96 pawfect-bg-white pawfect-rounded-lg pawfect-shadow-xl pawfect-border pawfect-border-gray-200 pawfect-opacity-0 pawfect-invisible pawfect-transform pawfect-translate-y-2 pawfect-transition-all pawfect-duration-300 pawfect-z-50">
                                <div class="pawfect-cart-dropdown-content">
                                    <?php echo wp_kses_post( pawfect_get_cart_dropdown_content() ); ?>
                                </div>
                            </div>
                        </div>
                    <?php endif; ?>

                    <?php if (class_exists('WooCommerce') && get_theme_mod('pawfect_wishlist_enabled', true)): ?>
                        <!-- Wishlist Icon -->
                        <div class="pawfect-relative">
                            <a href="<?php echo esc_url(pawfect_get_wishlist_url()); ?>" class="pawfect-wishlist-icon pawfect-flex pawfect-items-center pawfect-justify-center pawfect-w-8 pawfect-h-8" aria-label="<?php esc_attr_e( 'Wishlist', 'pawfect' ); ?>">
                              
                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="#ffffff" viewBox="0 0 256 256"><path d="M178,44c-21.44,0-39.92,10.19-50,27.07C117.92,54.19,99.44,44,78,44a58.07,58.07,0,0,0-58,58c0,28.59,18,58.47,53.4,88.79a333.81,333.81,0,0,0,52.7,36.73,4,4,0,0,0,3.8,0,333.81,333.81,0,0,0,52.7-36.73C218,160.47,236,130.59,236,102A58.07,58.07,0,0,0,178,44ZM128,219.42c-14-8-100-59.35-100-117.42A50.06,50.06,0,0,1,78,52c21.11,0,38.85,11.31,46.3,29.51a4,4,0,0,0,7.4,0C139.15,63.31,156.89,52,178,52a50.06,50.06,0,0,1,50,50C228,160,142,211.46,128,219.42Z"></path></svg>
                            </a>
                            <!-- Wishlist Count Badge -->
                            <?php $wishlist_count = pawfect_get_wishlist_count(); ?>
                            <span class="pawfect-wishlist-count pawfect-absolute pawfect--top-2 pawfect--right-2 pawfect-text-white pawfect-text-xs pawfect-font-bold pawfect-rounded-full pawfect-w-5 pawfect-h-5 pawfect-flex pawfect-items-center pawfect-justify-center pawfect-transition-all pawfect-duration-300 <?php echo esc_attr( $wishlist_count > 0 ? 'pawfect-scale-100' : 'pawfect-scale-0' ); ?>" style="background-color: var(--pawfect-primary, #F4A259); display:block">
                                <?php echo absint( $wishlist_count ); ?>
                            </span>
                        </div>
                    <?php endif; ?>

                    <!-- Mobile Drawer Toggle Button -->
                    <button id="pawfect-menu-open" class="lg:pawfect-hidden pawfect-text-2xl" aria-label="<?php esc_attr_e('Open Menu', 'pawfect'); ?>">
                        <svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" fill="#ffffff" viewBox="0 0 256 256">
                            <path d="M220,128a4,4,0,0,1-4,4H40a4,4,0,0,1,0-8H216A4,4,0,0,1,220,128ZM40,68H216a4,4,0,0,0,0-8H40a4,4,0,0,0,0,8ZM216,188H40a4,4,0,0,0,0,8H216a4,4,0,0,0,0-8Z"></path>
                        </svg>
                    </button>
                </div>
            </div>

            <!-- Row 2: Navigation -->
            <div class="<?php echo esc_attr($container_class); ?>">
                <nav class="pawfect-primary-nav-menu pawfect-hidden lg:pawfect-block">
                    <?php
                    // Display primary menu or fallback to native page list
                    wp_nav_menu([
                        'theme_location' => 'primary',
                        'container' => false,
                        'menu_class' => 'pawfect-flex pawfect-justify-center pawfect-items-center pawfect-text-[17px] pawfect-uppercase',
                        'walker' => new Pawfect_Nav_Walker(),
                        'fallback_cb' => function() {
                            echo '<ul class="pawfect-flex pawfect-justify-center pawfect-items-center pawfect-text-[17px] pawfect-uppercase pawfect-page-menu-fallback pawfect-gap-8">';
                            echo '<li class="pawfect-relative pawfect-menu-item"><a href="' . esc_url(home_url('/')) . '" class="pawfect-nav-link pawfect-font-bold hover:pawfect-text-pawfect-primary pawfect-transition-colors">' . esc_html__('Home', 'pawfect') . '</a></li>';
                            $pages = get_pages(array('parent' => 0, 'number' => 5, 'sort_column' => 'menu_order, post_title'));
                            if (!empty($pages)) {
                                foreach ($pages as $p) {
                                    echo '<li class="pawfect-relative pawfect-menu-item"><a href="' . esc_url(get_permalink($p->ID)) . '" class="pawfect-nav-link pawfect-font-bold hover:pawfect-text-pawfect-primary pawfect-transition-colors">' . esc_html($p->post_title) . '</a></li>';
                                }
                            }
                            echo '</ul>';
                        },
                    ]);
                    ?>
                </nav>
            </div>
        <?php endif; ?>
    </header>

    <!-- Professional Search Modal -->
    <div id="pawfect-search-modal" class="pawfect-fixed pawfect-inset-0 pawfect-bg-black pawfect-bg-opacity-50 pawfect-z-50 pawfect-opacity-0 pawfect-invisible pawfect-pointer-events-none pawfect-transition-all pawfect-duration-300" style="display: none;">
        <div class="pawfect-flex pawfect-items-center pawfect-justify-center pawfect-min-h-screen pawfect-p-4">
            <div class="pawfect-bg-white pawfect-rounded-2xl pawfect-shadow-2xl pawfect-w-full pawfect-max-w-2xl pawfect-transform pawfect-scale-95 pawfect-transition-transform pawfect-duration-300" id="pawfect-search-modal-content">
                <!-- Search Header -->
                <div class="pawfect-flex pawfect-items-center pawfect-justify-between pawfect-p-6 pawfect-border-b pawfect-border-gray-100">
                    <h3 class="pawfect-text-xl pawfect-font-semibold pawfect-text-gray-900"><?php esc_html_e( 'Search', 'pawfect' ); ?></h3>
                    <button id="pawfect-search-close" class="pawfect-text-gray-400 pawfect-text-gray-600 pawfect-transition-colors pawfect-p-2 pawfect-rounded-full pawfect-bg-gray-100">
                        <svg class="pawfect-w-4 pawfect-h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
                        </svg>
                    </button>
                </div>

                <!-- Search Input -->
                <div class="pawfect-p-6 pawfect-pb-4">
                    <div class="pawfect-relative">
                        <input type="text" id="pawfect-search-input" placeholder="<?php esc_attr_e( 'Search products and blog posts...', 'pawfect' ); ?>"
                               class="pawfect-w-full pawfect-px-6 pawfect-py-4 pawfect-pl-14 pawfect-border-0 pawfect-bg-gray-50 pawfect-rounded-2xl pawfect-text-lg pawfect-placeholder-gray-500 pawfect-transition-all pawfect-duration-200 focus:pawfect-bg-white focus:pawfect-shadow-lg focus:pawfect-ring-2 focus:pawfect-ring-pawfect-primary focus:pawfect-ring-opacity-50">
                       
                      
                        <svg class="pawfect-absolute pawfect-left-5 pawfect-top-1/2 pawfect-transform pawfect--translate-y-1/2 pawfect-w-6 pawfect-h-6 pawfect-text-gray-400" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 256 256">
            <path d="M226.83,221.17l-52.7-52.7a84.1,84.1,0,1,0-5.66,5.66l52.7,52.7a4,4,0,0,0,5.66-5.66ZM36,112a76,76,0,1,1,76,76A76.08,76.08,0,0,1,36,112Z"></path>
        </svg>
                    </div>
                    
                </div>

                <!-- Search Results -->
                <div id="pawfect-search-results" class="pawfect-max-h-96 pawfect-overflow-y-auto pawfect-border-t pawfect-border-gray-100">
                    <div class="pawfect-p-6 pawfect-text-center pawfect-text-gray-500">
                        <svg class="pawfect-w-12 pawfect-h-12 pawfect-mx-auto pawfect-mb-4 pawfect-text-gray-300" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 256 256">
            <path d="M226.83,221.17l-52.7-52.7a84.1,84.1,0,1,0-5.66,5.66l52.7,52.7a4,4,0,0,0,5.66-5.66ZM36,112a76,76,0,1,1,76,76A76.08,76.08,0,0,1,36,112Z"></path>
        </svg>
                        <p><?php esc_html_e( 'Start typing to search for products...', 'pawfect' ); ?></p>
                    </div>
                </div>
            </div>
        </div>
    </div>
<?php } ?>
