<?php
/**
 * Dynamic CSS Generator
 *
 * @package pawfect
 */

// Exit if accessed directly.
defined( 'ABSPATH' ) || exit;

/**
 * Dynamic CSS Generator Class
 */
if ( ! class_exists( 'Pawfect_Comprehensive_Dynamic_CSS' ) ) :

    class Pawfect_Comprehensive_Dynamic_CSS {

        /**
         * Constructor
         */
        public function __construct() {
            add_action( 'wp_enqueue_scripts', array( $this, 'enqueue_dynamic_css' ), 99 );
            add_action( 'customize_save_after', array( $this, 'clear_css_cache' ) );
        }

        /**
         * Enqueue dynamic CSS using wp_add_inline_style
         */
        public function enqueue_dynamic_css() {
            $css = $this->generate_css();
            if ( ! empty( $css ) ) {
                wp_add_inline_style( 'pawfect-style', $css );
            }
        }

        /**
         * Output dynamic CSS directly to head (fallback method - Deprecated)
         * CSS is now properly enqueued via wp_add_inline_style in enqueue_dynamic_css()
         */

        /**
         * Generate dynamic CSS
         */
        public function generate_css() {
            $css = '';

            // Pawfect Dynamic CSS
            $css .= '/* Pawfect Dynamic CSS */' . "\n";

            // Front-page Dynamic Colors
            $css .= ':root {' . "\n";
            $css .= '--pawfect-primary: ' . esc_attr(get_theme_mod('pawfect_primary_color', '#F4A259')) . ';' . "\n";
            $css .= '--pawfect-secondary: ' . esc_attr(get_theme_mod('pawfect_secondary_color', '#313134')) . ';' . "\n";
            $css .= '--pawfect-text: ' . esc_attr(get_theme_mod('pawfect_text_color', '#6B7280')) . ';' . "\n";
            $css .= '--pawfect-cta-bg: ' . esc_attr(get_theme_mod('pawfect_cta_background_color', '#1f2937')) . ';' . "\n";
            $css .= '--pawfect-cta-text: ' . esc_attr(get_theme_mod('pawfect_cta_text_color', '#ffffff')) . ';' . "\n";
            $css .= '--pawfect-feature-highlight-bg: ' . esc_attr(get_theme_mod('pawfect_feature_highlight_bg_color', '#ffffff')) . ';' . "\n";
            $css .= '--pawfect-feature-highlight-text: ' . esc_attr(get_theme_mod('pawfect_feature_highlight_text_color', '#1f2937')) . ';' . "\n";
            $css .= '--pawfect-featured-collection-bg: ' . esc_attr(get_theme_mod('pawfect_featured_collection_bg_color', '#ffffff')) . ';' . "\n";
            $css .= '--pawfect-hero-overlay: ' . esc_attr(get_theme_mod('pawfect_main_slider_overlay_color', 'rgba(0,0,0,0.4)')) . ';' . "\n";
            $css .= '--pawfect-hero-title: ' . esc_attr(get_theme_mod('pawfect_main_slider_caption_title_color', '#ffffff')) . ';' . "\n";
            $css .= '--pawfect-hero-subtitle: ' . esc_attr(get_theme_mod('pawfect_main_slider_caption_subtitle_title_color', '#F4A259')) . ';' . "\n";
            $css .= '--pawfect-hero-desc: ' . esc_attr(get_theme_mod('pawfect_main_slider_caption_desc_color', '#ffffff')) . ';' . "\n";
            $css .= '--pawfect-mission-bg: ' . esc_attr(get_theme_mod('pawfect_mission_background_color', '#1a202c')) . ';' . "\n";
            $css .= '--pawfect-promo-banner-bg: ' . esc_attr(get_theme_mod('pawfect_promo_banner_background_color', '#fef9f5')) . ';' . "\n";
            $css .= '--pawfect-promo-banner-title: ' . esc_attr(get_theme_mod('pawfect_promo_banner_title_color', '#ffffff')) . ';' . "\n";
            $css .= '--pawfect-promo-banner-subtitle: ' . esc_attr(get_theme_mod('pawfect_promo_banner_subtitle_color', '#F4A259')) . ';' . "\n";
            $css .= '--pawfect-promo-timer-desc: ' . esc_attr(get_theme_mod('pawfect_promo_timer_desc_color', '#F4A259')) . ';' . "\n";
            $css .= '--pawfect-testimonial-bg: ' . esc_attr(get_theme_mod('pawfect_testimonial_background_color', '#f9fafb')) . ';' . "\n";
            $css .= '--pawfect-testimonial-accent: ' . esc_attr(get_theme_mod('pawfect_testimonial_accent_color', '#f59e0b')) . ';' . "\n";
            $css .= '--pawfect-testimonial-heading: ' . esc_attr(get_theme_mod('pawfect_testimonial_heading_color', '#1f2937')) . ';' . "\n";
            $css .= '--pawfect-testimonial-desc: ' . esc_attr(get_theme_mod('pawfect_testimonial_description_color', '#6b7280')) . ';' . "\n";
            $css .= '--pawfect-testimonial-text: ' . esc_attr(get_theme_mod('pawfect_testimonial_text_color', '#1f2937')) . ';' . "\n";
            $css .= '--pawfect-press-mentions-bg: ' . esc_attr(get_theme_mod('pawfect_press_mentions_background_color', '#313134')) . ';' . "\n";
            $css .= '--pawfect-portfolio-bg: ' . esc_attr(get_theme_mod('pawfect_portfolio_bg_color', '#ffffff')) . ';' . "\n";
            $css .= '--pawfect-blog-bg: ' . esc_attr(get_theme_mod('pawfect_blog_background_color', '#fef9f5')) . ';' . "\n";
            $css .= '--pawfect-service-bg: ' . esc_attr(get_theme_mod('pawfect_service_bg_color', '#fef9f5')) . ';' . "\n";
            $css .= '--pawfect-service-text: ' . esc_attr(get_theme_mod('pawfect_service_text_color', '#1f2937')) . ';' . "\n";
            $css .= '}' . "\n";


            // Initialize critical variables with fallbacks to prevent undefined variable warnings
            $primary_color = get_theme_mod( 'pawfect_primary_color', '#F4A259' );
            $text_color = get_theme_mod( 'pawfect_text_color', '#6B7280' );
            $secondary_color = get_theme_mod( 'pawfect_secondary_color', '#313134' );
            $background_color = get_theme_mod( 'pawfect_background_color', '#fef9f5' );



            // Get existing theme colors from the colors options
            $menu_colors_enabled = get_theme_mod( 'pawfect_colors_menu_disable', false );
            $content_colors_enabled = get_theme_mod( 'pawfect_colors_content_disable', false );
            $sidebar_colors_enabled = get_theme_mod( 'pawfect_colors_sidebar_disable', false );
            $footer_colors_enabled = get_theme_mod( 'pawfect_colors_footer_disable', false );

            // Menu colors
            $menu_text_color = get_theme_mod( 'pawfect_colors_menu_text', '#ffffff' );
            $menu_hover_color = get_theme_mod( 'pawfect_colors_menu_hover', '#9cd0ff' );
            $menu_active_color = get_theme_mod( 'pawfect_colors_menu_active', '#000000' );
            $submenu_text_color = get_theme_mod( 'pawfect_colors_submenu_text', '#000000' );
            $submenu_hover_color = get_theme_mod( 'pawfect_colors_submenu_hover', '#ffffff' );
            $submenu_bg_color = get_theme_mod( 'pawfect_colors_submenu_bg', '#ffffff' );
            $header_bg_color = get_theme_mod( 'pawfect_colors_header_bg_colour', '#0f0d1d' );

            // Content colors
            $content_h1_color = get_theme_mod( 'pawfect_colors_content_h1', '#000000' );
            $content_h2_color = get_theme_mod( 'pawfect_colors_content_h2', '#000000' );
            $content_h3_color = get_theme_mod( 'pawfect_colors_content_h3', '#000000' );
            $content_h4_color = get_theme_mod( 'pawfect_colors_content_h4', '#000000' );
            $content_h5_color = get_theme_mod( 'pawfect_colors_content_h5', '#000000' );
            $content_h6_color = get_theme_mod( 'pawfect_colors_content_h6', '#000000' );
            $content_p_color = get_theme_mod( 'pawfect_colors_content_p', '#000000' );

            // Sidebar colors
            $sidebar_title_color = get_theme_mod( 'pawfect_colors_sidebar_title', '#000000' );
            $sidebar_text_color = get_theme_mod( 'pawfect_colors_sidebar_text', '#000000' );
            $sidebar_link_color = get_theme_mod( 'pawfect_colors_sidebar_link', '#000000' );
            $sidebar_hover_color = get_theme_mod( 'pawfect_colors_sidebar_hover', '#0074da' );

            // Footer colors
            $footer_title_color = get_theme_mod( 'pawfect_colors_footer_title', '#ffffff' );
            $footer_text_color = get_theme_mod( 'pawfect_colors_footer_text', '#8f8da0' );
            $footer_link_color = get_theme_mod( 'pawfect_colors_footer_link', '#6a6a6a' );
            $footer_hover_color = get_theme_mod( 'pawfect_colors_footer_hover', '#0074da' );
            $footer_bg_color = get_theme_mod( 'pawfect_colors_footer_bg_color', '#0f0d1d' );

            // Get new global theme colors with proper fallbacks
            $primary_color = get_theme_mod( 'pawfect_primary_color', '#F4A259' );
            $secondary_color = get_theme_mod( 'pawfect_secondary_color', '#313134' );
            $background_color = get_theme_mod( 'pawfect_background_color', '#fef9f5' );
            $text_color = get_theme_mod( 'pawfect_text_color', '#6B7280' );
            $global_header_bg_color = get_theme_mod( 'pawfect_header_background_color', '#313134' );
            $global_header_text_color = get_theme_mod( 'pawfect_header_text_color', '#FFFFFF' );
            $global_footer_bg_color = get_theme_mod( 'pawfect_footer_background_color', '#313134' );
            $global_footer_text_color = get_theme_mod( 'pawfect_footer_text_color', '#ffffff' );

            // Ensure colors are not empty - add additional fallbacks
            if (empty($primary_color) || $primary_color === '') {
                $primary_color = '#F4A259';
            }
            if (empty($secondary_color) || $secondary_color === '') {
                $secondary_color = '#313134';
            }
            if (empty($background_color) || $background_color === '') {
                $background_color = '#fef9f5';
            }
            if (empty($text_color) || $text_color === '') {
                $text_color = '#6B7280';
            }

            // Ensure typography variables are not empty
            if (empty($heading_font) || $heading_font === '') {
                $heading_font = 'Bricolage Grotesque';
            }
            if (empty($heading_weight) || $heading_weight === '') {
                $heading_weight = '700';
            }
            if (empty($heading_line_height) || $heading_line_height === '') {
                $heading_line_height = '1.2';
            }
            if (empty($heading_letter_spacing) || $heading_letter_spacing === '') {
                $heading_letter_spacing = '-0.025em';
            }
            if (empty($heading_text_transform) || $heading_text_transform === '') {
                $heading_text_transform = 'none';
            }

            // Temporary debug - force secondary color if still empty
            if (!$secondary_color || trim($secondary_color) === '') {
                $secondary_color = '#313134'; // Force fallback
            }

            // Validate hex color format
            if (!preg_match('/^#[a-f0-9]{6}$/i', $secondary_color)) {
                $secondary_color = '#313134'; // Force valid hex color
            }

            // Get typography settings
            $body_font = get_theme_mod( 'pawfect_body_font_family', 'Bricolage Grotesque' );
            $body_weight = get_theme_mod( 'pawfect_body_font_weight', '400' );
            $body_size = get_theme_mod( 'pawfect_body_font_size', 16 );
            $body_size = is_array( $body_size ) ? $body_size['slider'] : $body_size;
            $body_line_height = get_theme_mod( 'pawfect_body_line_height', '1.6' );
            $body_letter_spacing = get_theme_mod( 'pawfect_body_letter_spacing', '0' );

            // General heading typography settings
            $heading_font = get_theme_mod( 'pawfect_heading_font_family', 'Bricolage Grotesque' );
            $heading_weight = get_theme_mod( 'pawfect_heading_font_weight', '700' );
            $heading_line_height = get_theme_mod( 'pawfect_heading_line_height', '1.2' );
            $heading_letter_spacing = get_theme_mod( 'pawfect_heading_letter_spacing', '-0.025em' );
            $heading_text_transform = get_theme_mod( 'pawfect_heading_text_transform', 'none' );

            // Button typography
            $button_font = get_theme_mod( 'pawfect_button_font_family', 'Bricolage Grotesque' );
            $button_size = get_theme_mod( 'pawfect_button_font_size', 14 );
            $button_weight = get_theme_mod( 'pawfect_button_font_weight', '600' );
            $button_letter_spacing = get_theme_mod( 'pawfect_button_letter_spacing', '0.025em' );
            $button_text_transform = get_theme_mod( 'pawfect_button_text_transform', 'none' );

            // Blog typography
            $blog_title_font = get_theme_mod( 'pawfect_blog_title_font_family', 'Bricolage Grotesque' );
            $blog_title_size = get_theme_mod( 'pawfect_blog_title_font_size', 28 );
            $blog_title_weight = get_theme_mod( 'pawfect_blog_title_font_weight', '700' );
            $blog_meta_size = get_theme_mod( 'pawfect_blog_meta_font_size', 12 );
            $blog_meta_text_transform = get_theme_mod( 'pawfect_blog_meta_text_transform', 'uppercase' );
            $blog_meta_letter_spacing = get_theme_mod( 'pawfect_blog_meta_letter_spacing', '0.1em' );

            // Individual H1-H6 Typography Controls

            // H1 Typography
            $h1_font_family = get_theme_mod( 'pawfect_h1_font_family', 'Bricolage Grotesque' );
            $h1_font_weight = get_theme_mod( 'pawfect_h1_font_weight', '700' );
            $h1_line_height = get_theme_mod( 'pawfect_h1_line_height', json_encode(array('desktop' => 1.1, 'tablet' => 1.1, 'mobile' => 1.1)) );
            $h1_letter_spacing = get_theme_mod( 'pawfect_h1_letter_spacing', '-0.025em' );
            $h1_text_transform = get_theme_mod( 'pawfect_h1_text_transform', 'none' );
            $h1_font_size = get_theme_mod( 'pawfect_h1_font_size', json_encode(array('desktop' => 36, 'tablet' => 32, 'mobile' => 28)) );

            // H2 Typography
            $h2_font_family = get_theme_mod( 'pawfect_h2_font_family', 'Bricolage Grotesque' );
            $h2_font_weight = get_theme_mod( 'pawfect_h2_font_weight', '700' );
            $h2_line_height = get_theme_mod( 'pawfect_h2_line_height', json_encode(array('desktop' => 1.2, 'tablet' => 1.2, 'mobile' => 1.2)) );
            $h2_letter_spacing = get_theme_mod( 'pawfect_h2_letter_spacing', '-0.025em' );
            $h2_text_transform = get_theme_mod( 'pawfect_h2_text_transform', 'none' );
            $h2_font_size = get_theme_mod( 'pawfect_h2_font_size', json_encode(array('desktop' => 30, 'tablet' => 28, 'mobile' => 24)) );

            // H3 Typography
            $h3_font_family = get_theme_mod( 'pawfect_h3_font_family', 'Bricolage Grotesque' );
            $h3_font_weight = get_theme_mod( 'pawfect_h3_font_weight', '700' );
            $h3_line_height = get_theme_mod( 'pawfect_h3_line_height', json_encode(array('desktop' => 1.3, 'tablet' => 1.3, 'mobile' => 1.3)) );
            $h3_letter_spacing = get_theme_mod( 'pawfect_h3_letter_spacing', '-0.025em' );
            $h3_text_transform = get_theme_mod( 'pawfect_h3_text_transform', 'none' );
            $h3_font_size = get_theme_mod( 'pawfect_h3_font_size', json_encode(array('desktop' => 24, 'tablet' => 22, 'mobile' => 20)) );

            // H4 Typography
            $h4_font_family = get_theme_mod( 'pawfect_h4_font_family', 'Bricolage Grotesque' );
            $h4_font_weight = get_theme_mod( 'pawfect_h4_font_weight', '600' );
            $h4_line_height = get_theme_mod( 'pawfect_h4_line_height', json_encode(array('desktop' => 1.4, 'tablet' => 1.4, 'mobile' => 1.4)) );
            $h4_letter_spacing = get_theme_mod( 'pawfect_h4_letter_spacing', '0em' );
            $h4_text_transform = get_theme_mod( 'pawfect_h4_text_transform', 'none' );
            $h4_font_size = get_theme_mod( 'pawfect_h4_font_size', json_encode(array('desktop' => 20, 'tablet' => 18, 'mobile' => 16)) );

            // H5 Typography
            $h5_font_family = get_theme_mod( 'pawfect_h5_font_family', 'Bricolage Grotesque' );
            $h5_font_weight = get_theme_mod( 'pawfect_h5_font_weight', '600' );
            $h5_line_height = get_theme_mod( 'pawfect_h5_line_height', json_encode(array('desktop' => 1.5, 'tablet' => 1.5, 'mobile' => 1.5)) );
            $h5_letter_spacing = get_theme_mod( 'pawfect_h5_letter_spacing', '0em' );
            $h5_text_transform = get_theme_mod( 'pawfect_h5_text_transform', 'none' );
            $h5_font_size = get_theme_mod( 'pawfect_h5_font_size', json_encode(array('desktop' => 18, 'tablet' => 16, 'mobile' => 14)) );

            // H6 Typography
            $h6_font_family = get_theme_mod( 'pawfect_h6_font_family', 'Bricolage Grotesque' );
            $h6_font_weight = get_theme_mod( 'pawfect_h6_font_weight', '600' );
            $h6_line_height = get_theme_mod( 'pawfect_h6_line_height', json_encode(array('desktop' => 1.6, 'tablet' => 1.6, 'mobile' => 1.6)) );
            $h6_letter_spacing = get_theme_mod( 'pawfect_h6_letter_spacing', '0em' );
            $h6_text_transform = get_theme_mod( 'pawfect_h6_text_transform', 'none' );
            $h6_font_size = get_theme_mod( 'pawfect_h6_font_size', json_encode(array('desktop' => 16, 'tablet' => 14, 'mobile' => 12)) );

            // Menu typography
            $menu_font = get_theme_mod( 'pawfect_menu_font_family', 'Bricolage Grotesque' );
            $menu_weight = get_theme_mod( 'pawfect_menu_font_weight', '500' );
            $menu_size = get_theme_mod( 'pawfect_menu_font_size', 16 );
            $menu_letter_spacing = get_theme_mod( 'pawfect_menu_letter_spacing', '0' );
            $menu_text_transform = get_theme_mod( 'pawfect_menu_text_transform', 'none' );

            // Button typography
            $button_font = get_theme_mod( 'pawfect_button_font_family', 'Bricolage Grotesque' );
            $button_size = get_theme_mod( 'pawfect_button_font_size', 14 );
            $button_weight = get_theme_mod( 'pawfect_button_font_weight', '600' );
            $button_letter_spacing = get_theme_mod( 'pawfect_button_letter_spacing', '0.025em' );
            $button_text_transform = get_theme_mod( 'pawfect_button_text_transform', 'none' );

            // Blog typography
            $blog_title_font = get_theme_mod( 'pawfect_blog_title_font_family', 'Bricolage Grotesque' );
            $blog_title_size = get_theme_mod( 'pawfect_blog_title_font_size', 28 );
            $blog_title_weight = get_theme_mod( 'pawfect_blog_title_font_weight', '700' );
            $blog_meta_size = get_theme_mod( 'pawfect_blog_meta_font_size', 12 );
            $blog_meta_text_transform = get_theme_mod( 'pawfect_blog_meta_text_transform', 'uppercase' );
            $blog_meta_letter_spacing = get_theme_mod( 'pawfect_blog_meta_letter_spacing', '0.1em' );

            // =======================================================
            // == TYPOGRAPHY CSS GENERATION
            // =======================================================

            // Body typography
            $css .= 'body {';
            $css .= 'font-family: "' . $body_font . '", -apple-system, BlinkMacSystemFont, sans-serif;';
            $css .= 'font-weight: ' . $body_weight . ';';
            $css .= 'font-size: ' . $body_size . 'px;';
            $css .= 'line-height: ' . $body_line_height . ';';
            if ( $body_letter_spacing != '0' ) {
                $css .= 'letter-spacing: ' . $body_letter_spacing . ';';
            }
            $css .= 'color: ' . $text_color . ';';
            $css .= 'background-color: ' . $background_color . ';';
            $css .= '}';

            // Heading typography (general - applies to all headings as baseline)
            $css .= 'h1, h2, h3, h4, h5, h6, .pawfect-heading {';
            $css .= 'font-family: "' . $heading_font . '", -apple-system, BlinkMacSystemFont, sans-serif;';
            $css .= 'font-weight: ' . $heading_weight . ';';
            $css .= 'line-height: ' . $heading_line_height . ';';
            $css .= 'text-transform: ' . $heading_text_transform . ';';
            if ( $heading_letter_spacing != '0' ) {
                $css .= 'letter-spacing: ' . $heading_letter_spacing . ';';
            }
            $css .= 'color: ' . $text_color . ';';
            $css .= '}';

            // Individual H1-H6 sizes are handled by the responsive typography section below

            // Comprehensive Menu Typography - All Menu Selectors
            $menu_selectors = [
                // Header navigation
                '.pawfect-header nav a',
                '.pawfect-header nav ul li a',
                '.pawfect-sticky-header nav a',
                '.pawfect-sticky-scrolled-layout nav a',

                // Mobile menu
                '#pawfect-mobile-drawer nav a',
                '#pawfect-mobile-drawer a',

                // General menu classes
                '.pawfect-nav a',
                '.pawfect-menu a',
                '.main-navigation a',
                '.site-navigation a',
                '.primary-navigation a',

                // WordPress menu classes
                '.menu a',
                '.nav-menu a',
                '.primary-menu a',

                // Custom walker classes
                '.pawfect-nav-link'
            ];

            $css .= implode(', ', $menu_selectors) . ' {';
            $css .= 'font-family: "' . $menu_font . '", -apple-system, BlinkMacSystemFont, sans-serif !important;';
            $css .= 'font-weight: ' . $menu_weight . ' !important;';
            $css .= 'font-size: ' . $menu_size . 'px !important;';
            if ( $menu_letter_spacing != '0' ) {
                $css .= 'letter-spacing: ' . $menu_letter_spacing . ' !important;';
            }
            $css .= 'text-transform: ' . $menu_text_transform . ' !important;';
            $css .= '}';

            // Button Typography - Simple approach like body/heading/menu
            $css .= '.pawfect-btn, .pawfect-btn--dark, .pawfect-btn--primary, .pawfect-btn--secondary, .pawfect-btn--outline, .pawfect-button, button[type="submit"], input[type="submit"], .wp-block-button__link, .woocommerce button.button, .woocommerce a.button, .woocommerce input.button {';
            $css .= 'font-family: "' . $button_font . '", -apple-system, BlinkMacSystemFont, sans-serif !important;';
            $css .= 'font-size: ' . $button_size . 'px !important;';
            $css .= 'font-weight: ' . $button_weight . ' !important;';
            if ( $button_letter_spacing != '0' ) {
                $css .= 'letter-spacing: ' . $button_letter_spacing . ' !important;';
            }
            $css .= 'text-transform: ' . $button_text_transform . ' !important;';
            $css .= '}';

            // Blog Post Typography - Simple approach like body/heading/menu
            $css .= '.pawfect-post-title, .pawfect-blog-post .pawfect-post-title, .pawfect-blog-post h2, .pawfect-post-card h2, .pawfect-post-card h3, .entry-title, .post-title {';
            $css .= 'font-family: "' . $blog_title_font . '", -apple-system, BlinkMacSystemFont, sans-serif !important;';
            $css .= 'font-size: ' . $blog_title_size . 'px !important;';
            $css .= 'font-weight: ' . $blog_title_weight . ' !important;';
            $css .= '}';

            // Blog Meta Typography - Simple approach like body/heading/menu
            $css .= '.pawfect-post-meta, .pawfect-blog-post .pawfect-post-meta, .pawfect-blog-meta, .entry-meta, .post-meta {';
            $css .= 'font-size: ' . $blog_meta_size . 'px !important;';
            $css .= 'text-transform: ' . $blog_meta_text_transform . ' !important;';
            if ( $blog_meta_letter_spacing != '0' ) {
                $css .= 'letter-spacing: ' . $blog_meta_letter_spacing . ' !important;';
            }
            $css .= '}';

            // Frontpage Blog Classic Card Style - Minimal Design (Conditional)
            $blog_card_style = get_theme_mod('pawfect_blog_card_style', 'modern');
            $blog_minimal_style = get_theme_mod('pawfect_blog_classic_minimal_style', true);

            if ($blog_card_style === 'classic' && $blog_minimal_style) {
                $css .= '/* Frontpage Blog Classic Card Minimal Styles */';
                $css .= '.pawfect-blog-section .pawfect-blog-post {';
                $css .= 'background: transparent !important;';
                $css .= 'border-radius: 0 !important;';
                $css .= 'box-shadow: none !important;';
                $css .= 'border: none !important;';
                $css .= 'transition: none !important;';
                $css .= 'overflow: visible !important;';
                $css .= 'margin-bottom: 0 !important;';
                $css .= '}';

                // Classic card hover effects with smooth transitions
                $css .= '.pawfect-blog-section .pawfect-blog-post:hover {';
                //$css .= 'transform: translateY(-4px);';
                $css .= 'transition: transform 0.3s ease;';
                $css .= '}';

                // Classic card image hover effects
                $css .= '.pawfect-blog-section .pawfect-blog-post:hover img {';
                $css .= 'transform: scale(1.05);';
                $css .= 'transition: transform 0.3s ease;';
                $css .= '}';

                // Featured image container hover effects
                $css .= '.pawfect-blog-section .pawfect-blog-post:hover .pawfect-post-featured-image img {';
                $css .= 'transform: scale(1.05);';
                $css .= 'transition: transform 0.3s ease;';
                $css .= '}';

                // Featured image container minimal styling
                $css .= '.pawfect-blog-section .pawfect-blog-post .pawfect-post-featured-image {';
                $css .= 'background: transparent !important;';
                $css .= 'border: none !important;';
                $css .= 'box-shadow: none !important;';
               // $css .= 'border-radius: 0 !important;';
                $css .= '}';

                // Aspect ratio container minimal styling
                $css .= '.pawfect-blog-section .pawfect-blog-post .pawfect-aspect-\\[4\\/3\\] {';
               // $css .= 'border-radius: 0 !important;';
                $css .= 'background: transparent !important;';
                $css .= '}';

                // Read more icon default state - ensure it\'s hidden initially
                $css .= '.pawfect-blog-section .pawfect-blog-post .pawfect-post-featured-image .pawfect-absolute {';
                $css .= 'opacity: 0 !important;';
                $css .= 'transform: scale(0.75) !important;';
                $css .= 'transition: all 0.3s ease !important;';
                $css .= '}';

                // Read more icon hover effects for featured image
                $css .= '.pawfect-blog-section .pawfect-blog-post:hover .pawfect-post-featured-image .pawfect-absolute {';
                $css .= 'opacity: 1 !important;';
                $css .= 'transform: scale(1) !important;';
                $css .= 'transition: all 0.3s ease !important;';
                $css .= '}';

                // Read more icon styling
                $css .= '.pawfect-blog-section .pawfect-blog-post .pawfect-post-featured-image .pawfect-absolute > div {';
                $css .= 'background: rgba(255, 255, 255, 0.9) !important;';
                $css .= 'backdrop-filter: blur(4px) !important;';
                $css .= 'box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;';
                $css .= '}';

                // Classic card title hover effects
               // $css .= '.pawfect-blog-section .pawfect-blog-post:hover h2 a {';
               // $css .= 'color: ' . $primary_color . ' !important;';
               // $css .= 'transition: color 0.3s ease;';
                //$css .= '}';

                // Add subtle hover icon effect for read more links
                $css .= '.pawfect-blog-section .pawfect-blog-post:hover .pawfect-text-pawfect-primary:after {';
                $css .= 'content: " →";';
                $css .= 'opacity: 1;';
                $css .= 'transform: translateX(4px);';
                $css .= 'transition: all 0.3s ease;';
                $css .= '}';

                $css .= '.pawfect-blog-section .pawfect-blog-post .pawfect-text-pawfect-primary:after {';
                $css .= 'content: "";';
                $css .= 'opacity: 0;';
                $css .= 'transform: translateX(0);';
                $css .= 'transition: all 0.3s ease;';
                $css .= '}';
            }

            // Get layout settings - handle both old array format and new simple format
            $container_width = $this->parse_slider_value(get_theme_mod( 'pawfect_container_max_width', 1200 ), 1200);
            $container_padding = $this->parse_slider_value(get_theme_mod( 'pawfect_container_padding', 20 ), 20);

            // Get section spacing - check preset first, then manual controls
            $spacing_preset = get_theme_mod( 'pawfect_section_spacing_preset', 'normal' );

            if ( $spacing_preset === 'custom' ) {
                // Use manual controls
                $section_top = $this->parse_slider_value(get_theme_mod( 'pawfect_section_padding_top', 80 ), 80);
                $section_bottom = $this->parse_slider_value(get_theme_mod( 'pawfect_section_padding_bottom', 80 ), 80);
            } else {
                // Use preset values
                switch ( $spacing_preset ) {
                    case 'compact':
                        $section_top = $section_bottom = 60;
                        break;
                    case 'relaxed':
                        $section_top = $section_bottom = 120;
                        break;
                    case 'normal':
                    default:
                        $section_top = $section_bottom = 80;
                        break;
                }
            }

            $header_height = $this->parse_slider_value(get_theme_mod( 'pawfect_header_height', 80 ), 80);
            
            $footer_top = $this->parse_slider_value(get_theme_mod( 'pawfect_footer_padding_top', 200 ), 200);
            $footer_bottom = $this->parse_slider_value(get_theme_mod( 'pawfect_footer_padding_bottom', 20 ), 20);

            // Press mentions settings
            $press_gap = $this->parse_slider_value(get_theme_mod( 'pawfect_press_mentions_gap', 64 ), 64);

            // Button style settings
            $button_style = get_theme_mod( 'pawfect_button_style', 'modern' );
            $button_size = get_theme_mod( 'pawfect_button_size', 'medium' );

            // Slider styling settings
            $slider_subtitle_font_size = get_theme_mod( 'pawfect_main_slider_subtitle_font_size', 16 );
            $slider_subtitle_font_size = is_array( $slider_subtitle_font_size ) ? $slider_subtitle_font_size['slider'] : $slider_subtitle_font_size;
            $slider_subtitle_font_weight = get_theme_mod( 'pawfect_main_slider_subtitle_font_weight', '500' );
            $slider_subtitle_text_transform = get_theme_mod( 'pawfect_main_slider_subtitle_text_transform', 'uppercase' );
            $slider_subtitle_letter_spacing = get_theme_mod( 'pawfect_main_slider_subtitle_letter_spacing', 1 );
            $slider_subtitle_letter_spacing = is_array( $slider_subtitle_letter_spacing ) ? $slider_subtitle_letter_spacing['slider'] : $slider_subtitle_letter_spacing;
            $slider_title_font_size = get_theme_mod( 'pawfect_main_slider_title_font_size', 92 );
            // Handle both old array format and new JSON format
            if (is_string($slider_title_font_size) && $this->is_json($slider_title_font_size)) {
                $parsed = json_decode($slider_title_font_size, true);
                $slider_title_font_size = isset($parsed['desktop']) ? $parsed['desktop'] : 92;
            } elseif (is_array($slider_title_font_size)) {
                $slider_title_font_size = isset($slider_title_font_size['slider']) ? $slider_title_font_size['slider'] : $slider_title_font_size['desktop'] ?? 92;
            }
            $slider_title_line_height = get_theme_mod( 'pawfect_main_slider_title_line_height', 1 );
            $slider_title_line_height = is_array( $slider_title_line_height ) ? $slider_title_line_height['slider'] : $slider_title_line_height;
            $slider_content_spacing = get_theme_mod( 'pawfect_main_slider_content_spacing', 24 );
            $slider_content_spacing = is_array( $slider_content_spacing ) ? $slider_content_spacing['slider'] : $slider_content_spacing;
            $slider_button_spacing = get_theme_mod( 'pawfect_main_slider_button_spacing', 64 );
            $slider_button_spacing = is_array( $slider_button_spacing ) ? $slider_button_spacing['slider'] : $slider_button_spacing;



            // Premium Minimal Design System CSS Variables
            $css .= ':root {';
            $css .= '--pawfect-primary: ' . $primary_color . ';';
            $css .= '--pawfect-primary-color: ' . $primary_color . ';'; // Alternative naming
            $css .= '--pawfect-secondary: ' . $secondary_color . ';';

            // Convert secondary color to RGB for opacity usage
            $secondary_rgb = '';
            if (preg_match('/^#([a-f0-9]{6})$/i', $secondary_color, $matches)) {
                $hex = $matches[1];
                $r = hexdec(substr($hex, 0, 2));
                $g = hexdec(substr($hex, 2, 2));
                $b = hexdec(substr($hex, 4, 2));
                $secondary_rgb = $r . ', ' . $g . ', ' . $b;
            } else {
                $secondary_rgb = '49, 49, 52'; // fallback
            }
            $css .= '--pawfect-secondary-rgb: ' . $secondary_rgb . ';';

            $css .= '--pawfect-accent: ' . $primary_color . ';';
            $css .= '--pawfect-background: ' . $background_color . ';';
            $css .= '--pawfect-text: ' . $text_color . ';';
            $css .= '--pawfect-header-bg: ' . ($menu_colors_enabled ? $header_bg_color : $global_header_bg_color) . ';';
            $css .= '--pawfect-header-text: ' . $global_header_text_color . ';';
            $css .= '--pawfect-footer-bg: ' . ($footer_colors_enabled ? $footer_bg_color : $global_footer_bg_color) . ';';
            $css .= '--pawfect-footer-text: ' . ($footer_colors_enabled ? $footer_text_color : $global_footer_text_color) . ';';

            // Additional color variables used in CSS
            $css .= '--pawfect-dark: #1f2937;';
            $css .= '--pawfect-text-dark: #333333;';
            $css .= '--pawfect-text-light: #555555;';
            $css .= '--pawfect-border-color: #E0D8D1;';
            $css .= '--pawfect-sale-bg: #A3B18A;';
            $css .= '--pawfect-primary-dark: #E6935A;';

            // Premium spacing system
            $css .= '--pawfect-space-xs: 0.5rem;';
            $css .= '--pawfect-space-sm: 1rem;';
            $css .= '--pawfect-space-md: 1.5rem;';
            $css .= '--pawfect-space-lg: 2rem;';
            $css .= '--pawfect-space-xl: 3rem;';
            $css .= '--pawfect-space-2xl: 4rem;';
            $css .= '--pawfect-space-3xl: 6rem;';

            // Premium shadows
            $css .= '--pawfect-shadow-subtle: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);';
            $css .= '--pawfect-shadow-soft: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);';
            $css .= '--pawfect-shadow-premium: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);';

            // Premium border radius
            $css .= '--pawfect-radius-sm: 0.25rem;';
            $css .= '--pawfect-radius-md: 0.375rem;';
            $css .= '--pawfect-radius-lg: 0.5rem;';
            $css .= '--pawfect-radius-xl: 0.75rem;';

            // Topbar height
            $css .= '--pawfect-topbar-height: 40px;';

            // Premium border radius
            $css .= '--pawfect-radius-sm: 0.375rem;';
            $css .= '--pawfect-radius-md: 0.5rem;';
            $css .= '--pawfect-radius-lg: 0.75rem;';
            $css .= '--pawfect-radius-xl: 1rem;';



            $css .= '}';

            // Cart Widget Product Link Hover - Dynamic Primary Color
            $css .= '.pawfect-cart-product-link:hover, .pawfect-cart-product-link:hover span { color: ' . esc_attr($primary_color) . ' !important; }';

            // Sticky Menu Cart Styling - Dynamic Primary Color
            $css .= '.pawfect-header.pawfect-scrolled .pawfect-cart-badge { background-color: ' . esc_attr($primary_color) . ' !important; }';
            $css .= '.pawfect-header.pawfect-scrolled .pawfect-cart-container:hover { background-color: ' . esc_attr($primary_color) . '1a !important; }';

            // Dynamic Mini Cart Buttons match theme button styles
            $button_style_val = get_theme_mod( 'pawfect_button_style', 'modern' );
            $button_size_val = get_theme_mod( 'pawfect_button_size', 'medium' );
            $br_radius = '2px';
            if ($button_style_val === 'rounded') $br_radius = '8px';
            if ($button_style_val === 'sharp') $br_radius = '0';
            if ($button_style_val === 'pill') $br_radius = '50px';
            if ($button_style_val === 'gradient') $br_radius = '6px';
            
            $btn_pad = '12px 32px'; $btn_fs = '14px'; $btn_fw = '500';
            if ($button_size_val === 'small') { $btn_pad = '8px 24px'; $btn_fs = '12px'; }
            if ($button_size_val === 'large') { $btn_pad = '16px 40px'; $btn_fs = '16px'; $btn_fw = '600'; }

            $css .= '.widget_shopping_cart .woocommerce-mini-cart__buttons .button { ';
            $css .= 'border-radius: ' . $br_radius . ' !important; ';
            $css .= 'padding: 8px 20px !important; ';
            $css .= 'font-size: ' . $btn_fs . ' !important; ';
            $css .= 'font-weight: ' . $btn_fw . ' !important; ';
            $css .= 'letter-spacing: 0.5px !important; ';
            $css .= 'text-transform: uppercase !important; ';
            $css .= 'justify-content: center !important; ';
            $css .= 'border-width: 1px !important; ';
            $css .= 'border-style: solid !important; ';
            $css .= '} ';

            $css .= '.widget_shopping_cart .woocommerce-mini-cart__buttons .button:not(.checkout) { background-color: ' . esc_attr($secondary_color) . ' !important; border-color: ' . esc_attr($secondary_color) . ' !important; color: #ffffff !important; }';
            $css .= '.widget_shopping_cart .woocommerce-mini-cart__buttons .button:not(.checkout):hover { opacity: 0.9 !important; transform: translateY(-1px) !important; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important; }';
            $css .= '.widget_shopping_cart .woocommerce-mini-cart__buttons .button.checkout { background-color: ' . esc_attr($primary_color) . ' !important; border-color: ' . esc_attr($primary_color) . ' !important; color: #ffffff !important; }';
            $css .= '.widget_shopping_cart .woocommerce-mini-cart__buttons .button.checkout:hover { opacity: 0.9 !important; transform: translateY(-1px) !important; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important; }';

            // Premium minimal body styles
            $css .= 'body {';
            $css .= 'letter-spacing: -0.01em;';
            $css .= 'line-height: 1.6;';
            $css .= '}';

            // Premium section spacing
           // $css .= 'section {';
            //$css .= 'margin-bottom: var(--pawfect-space-3xl);';
           // $css .= '}';

            // Shop page grid: ul.products uses display:contents (set in style.css)
            // so li items flow into the parent .pawfect-products-grid grid.

            // Premium minimal cards and containers
            $css .= '.pawfect-card, .pawfect-container-card {';
            $css .= 'background: rgba(255, 255, 255, 0.8);';
            $css .= 'backdrop-filter: blur(10px);';
            $css .= 'border: 1px solid rgba(255, 255, 255, 0.2);';
            $css .= 'border-radius: var(--pawfect-radius-lg);';
            $css .= 'box-shadow: var(--pawfect-shadow-subtle);';
            $css .= 'transition: all 0.3s ease;';
            $css .= '}';

            $css .= '.pawfect-card:hover {';
            $css .= 'box-shadow: var(--pawfect-shadow-premium);';
            $css .= 'transform: translateY(-2px);';
            $css .= '}';

            // Premium minimal headings - scoped to theme content areas
            $css .= '.pawfect-content h1, .pawfect-content h2, .pawfect-content h3, .pawfect-content h4, .pawfect-content h5, .pawfect-content h6,';
            $css .= '.entry-content h1, .entry-content h2, .entry-content h3, .entry-content h4, .entry-content h5, .entry-content h6,';
            $css .= '.pawfect-section h1, .pawfect-section h2, .pawfect-section h3, .pawfect-section h4, .pawfect-section h5, .pawfect-section h6 {';
            $css .= 'letter-spacing: -0.02em;';
            $css .= 'line-height: 1.2;';
            $css .= 'margin-bottom: var(--pawfect-space-md);';
            $css .= '}';

            // Premium section spacing - will be overridden by customizer settings (excluding hero)
            $css .= '.pawfect-py-20:not(.hero-slider):not(.pawfect-hero):not([class*="hero"]), .pawfect-py-28:not(.hero-slider):not(.pawfect-hero):not([class*="hero"]) {';
            $css .= 'padding-top: ' . $section_top . 'px;';
            $css .= 'padding-bottom: ' . $section_bottom . 'px;';
            $css .= '}';

            // Minimal background decorations
            $css .= '.pawfect-absolute.pawfect-opacity-5, .pawfect-absolute.pawfect-opacity-10 {';
            $css .= 'opacity: 0.02 !important;';
            $css .= '}';

            // Clean container spacing
            $css .= '.pawfect-container, .pawfect-container-small, .pawfect-container-narrow {';
            $css .= 'padding-left: ' . $container_padding . 'px !important;';
            $css .= 'padding-right: ' . $container_padding . 'px !important;';
            $css .= '}';

            // Premium text styling
            // Scope paragraph styles to theme content areas only
            $css .= '.pawfect-content p, .entry-content p, .pawfect-section p, .pawfect-card p {';
            $css .= 'line-height: 1.7;';
            $css .= 'margin-bottom: var(--pawfect-space-sm);';
            $css .= '}';

            // Minimal animations
            $css .= '.pawfect-animate-pulse {';
            $css .= 'animation: none !important;';
            $css .= '}';

            // Apply menu colors if enabled
            if ($menu_colors_enabled) {
                $css .= '.pawfect-nav a, .pawfect-menu a, .main-navigation a {';
                $css .= 'color: ' . $menu_text_color . ';';
                $css .= '}';

                $css .= '.pawfect-nav a:hover, .pawfect-menu a:hover, .main-navigation a:hover {';
                $css .= 'color: ' . $menu_hover_color . ';';
                $css .= '}';

                $css .= '.pawfect-nav .current-menu-item a, .pawfect-menu .current-menu-item a, .main-navigation .current-menu-item a {';
                $css .= 'color: ' . $menu_active_color . ';';
                $css .= '}';

                $css .= '.pawfect-nav .sub-menu, .pawfect-menu .sub-menu, .main-navigation .sub-menu, .pawfect-dropdown-menu {';
                $css .= 'background-color: ' . $submenu_bg_color . ' !important;';
                $css .= '}';

                $css .= '.pawfect-nav .sub-menu a, .pawfect-menu .sub-menu a, .main-navigation .sub-menu a, .pawfect-dropdown-menu a {';
                $css .= 'color: ' . $submenu_text_color . ' !important;';
                $css .= '}';

                $css .= '.pawfect-nav .sub-menu a:hover, .pawfect-menu .sub-menu a:hover, .main-navigation .sub-menu a:hover, .pawfect-dropdown-menu a:hover {';
                $css .= 'color: ' . $submenu_hover_color . ' !important;';
                $css .= '}';

                $css .= '.pawfect-header, .site-header {';
                $css .= 'background-color: ' . $header_bg_color . ' !important;';
                $css .= '}';
            } else {
                $css .= '.pawfect-dropdown-menu, .pawfect-nav .sub-menu, .pawfect-menu .sub-menu, .main-navigation .sub-menu {';
                $css .= 'background-color: ' . $global_header_bg_color . ' !important;';
                $css .= '}';
            }

            // Caret Rotation via Dynamic CSS to bypass cache
            $css .= '.pawfect-has-dropdown > .pawfect-dropdown-toggle svg, .pawfect-has-dropdown > a svg { transition: transform 0.3s ease !important; }';
            $css .= '.pawfect-has-dropdown:hover > .pawfect-dropdown-toggle svg, .pawfect-has-dropdown:focus-within > .pawfect-dropdown-toggle svg, .pawfect-has-dropdown.focus > .pawfect-dropdown-toggle svg, .pawfect-has-dropdown:hover > a svg, .pawfect-has-dropdown:focus-within > a svg, .pawfect-has-dropdown.focus > a svg { transform: rotate(180deg) !important; }';


            // Apply content colors if enabled
            if ($content_colors_enabled) {
                $css .= 'h1, .h1 { color: ' . $content_h1_color . '; }';
                $css .= 'h2, .h2 { color: ' . $content_h2_color . '; }';
                $css .= 'h3, .h3 { color: ' . $content_h3_color . '; }';
                $css .= 'h4, .h4 { color: ' . $content_h4_color . '; }';
                $css .= 'h5, .h5 { color: ' . $content_h5_color . '; }';
                $css .= 'h6, .h6 { color: ' . $content_h6_color . '; }';
                $css .= 'p, .entry-content p { color: ' . $content_p_color . '; }';
            }

            // Apply sidebar colors if enabled
            if ($sidebar_colors_enabled) {
                $css .= '.widget-title, .sidebar .widget-title {';
                $css .= 'color: ' . $sidebar_title_color . ';';
                $css .= '}';

                $css .= '.sidebar, .sidebar p, .sidebar .widget {';
                $css .= 'color: ' . $sidebar_text_color . ';';
                $css .= '}';

                $css .= '.sidebar a, .sidebar .widget a {';
                $css .= 'color: ' . $sidebar_link_color . ';';
                $css .= '}';

                $css .= '.sidebar a:hover, .sidebar .widget a:hover {';
                $css .= 'color: ' . $sidebar_hover_color . ';';
                $css .= '}';
            }

            // Apply footer colors if enabled
            if ($footer_colors_enabled) {
                $css .= '.pawfect-footer, footer, .site-footer {';
                $css .= 'background-color: ' . $footer_bg_color . ';';
                $css .= '}';

                $css .= '.footer-widget-title, .pawfect-footer .widget-title {';
                $css .= 'color: ' . $footer_title_color . ';';
                $css .= '}';

                $css .= '.pawfect-footer, .pawfect-footer p, footer, footer p {';
                $css .= 'color: ' . $footer_text_color . ';';
                $css .= '}';

                $css .= '.pawfect-footer a, footer a {';
                $css .= 'color: ' . $footer_link_color . ';';
                $css .= '}';

                $css .= '.pawfect-footer a:hover, footer a:hover {';
                $css .= 'color: ' . $footer_hover_color . ';';
                $css .= '}';
            }

            // Helper function to get font family with fallbacks
            $body_font_stack = $this->get_font_stack($body_font);
            $heading_font_stack = $this->get_font_stack($heading_font);
            $menu_font_stack = $this->get_font_stack($menu_font);

            // Global Body Typography (only if content colors are not enabled)
            if (!$content_colors_enabled) {
                $css .= 'body {';
                $css .= 'font-family: ' . $body_font_stack . ';';
                $css .= 'font-weight: ' . $body_weight . ';';
                $css .= 'font-size: ' . $body_size . 'px;';
                $css .= 'line-height: ' . $body_line_height . ';';
                if ($body_letter_spacing != '0') {
                    $css .= 'letter-spacing: ' . $body_letter_spacing . ';';
                }
                $css .= 'color: ' . $text_color . ';';
                $css .= 'background-color: ' . $background_color . ';';
                $css .= '}';
            } else {
                $css .= 'body {';
                $css .= 'font-family: ' . $body_font_stack . ';';
                $css .= 'font-weight: ' . $body_weight . ';';
                $css .= 'font-size: ' . $body_size . 'px;';
                $css .= 'line-height: ' . $body_line_height . ';';
                if ($body_letter_spacing != '0') {
                    $css .= 'letter-spacing: ' . $body_letter_spacing . ';';
                }
                $css .= 'background-color: ' . $background_color . ';';
                $css .= '}';
            }

            // Global Heading Typography (only if content colors are not enabled)
            if (!$content_colors_enabled) {
                $css .= 'h1, h2, h3, h4, h5, h6, .pawfect-heading {';
                $css .= 'font-family: ' . $heading_font_stack . ';';
                $css .= 'font-weight: ' . $heading_weight . ';';
                $css .= 'line-height: ' . $heading_line_height . ';';
                $css .= 'text-transform: ' . $heading_text_transform . ';';
                if ($heading_letter_spacing != '0') {
                    $css .= 'letter-spacing: ' . $heading_letter_spacing . ';';
                }
                $css .= 'color: ' . $text_color . ';';
                $css .= '}';
            } else {
                $css .= 'h1, h2, h3, h4, h5, h6, .pawfect-heading {';
                $css .= 'font-family: ' . $heading_font_stack . ';';
                $css .= 'font-weight: ' . $heading_weight . ';';
                $css .= 'line-height: ' . $heading_line_height . ';';
                $css .= 'text-transform: ' . $heading_text_transform . ';';
                if ($heading_letter_spacing != '0') {
                    $css .= 'letter-spacing: ' . $heading_letter_spacing . ';';
                }
                $css .= '}';
            }

            // Individual H1-H6 sizes are handled by the responsive typography section below

            // Comprehensive Global Menu Typography - All Menu Selectors
            $menu_selectors_global = [
                // Header navigation
                '.pawfect-header nav a',
                '.pawfect-header nav ul li a',
                '.pawfect-sticky-header nav a',
                '.pawfect-sticky-scrolled-layout nav a',

                // Mobile menu
                '#pawfect-mobile-drawer nav a',
                '#pawfect-mobile-drawer a',

                // General menu classes
                '.pawfect-nav a',
                '.pawfect-menu a',
                '.main-navigation a',
                '.site-navigation a',
                '.primary-navigation a',

                // WordPress menu classes
                '.menu a',
                '.nav-menu a',
                '.primary-menu a',

                // Custom walker classes
                '.pawfect-nav-link'
            ];

            $css .= implode(', ', $menu_selectors_global) . ' {';
            $css .= 'font-family: ' . $menu_font_stack . ' !important;';
            $css .= 'font-weight: ' . $menu_weight . ' !important;';
            $css .= 'font-size: ' . $menu_size . 'px !important;';
            if ( $menu_letter_spacing != '0' ) {
                $css .= 'letter-spacing: ' . $menu_letter_spacing . ' !important;';
            }
            $css .= 'text-transform: ' . $menu_text_transform . ' !important;';
            $css .= '}';

            // Container Styles
            $css .= '.pawfect-container, .pawfect-container-small, .pawfect-container-narrow {';
            $css .= 'padding-left: ' . $container_padding . 'px;';
            $css .= 'padding-right: ' . $container_padding . 'px;';
            $css .= '}';
            $css .= '.pawfect-container { max-width: ' . $container_width . 'px !important; }';
            $css .= '.pawfect-container-narrow { max-width: ' . min(1120, $container_width) . 'px !important; }';
            $css .= '.pawfect-container-small { max-width: ' . min(800, $container_width) . 'px !important; }';

            // Container Full Styles
            $css .= '.pawfect-container-full {';
            $css .= 'width: 100%;';
            $css .= 'max-width: 100%;';
            $css .= 'padding-left: ' . $container_padding . 'px;';
            $css .= 'padding-right: ' . $container_padding . 'px;';
            $css .= '}';

            // Section Spacing (excluding hero slider)
            $css .= '.pawfect-py-20:not(.hero-slider):not(.pawfect-hero):not([class*="hero"]), .pawfect-py-28:not(.hero-slider):not(.pawfect-hero):not([class*="hero"]), section[class*="pawfect-"]:not(.hero-slider):not(.pawfect-hero):not([class*="hero"]), .pawfect-section:not(.hero-slider):not(.pawfect-hero):not([class*="hero"]) {';
            $css .= 'padding-top: ' . $section_top . 'px !important;';
            $css .= 'padding-bottom: ' . $section_bottom . 'px !important;';
            $css .= '}';

            // Header Styles
            $css .= '.pawfect-header {';
            $css .= 'background-color: ' . ($menu_colors_enabled ? $header_bg_color : $global_header_bg_color) . ';';
            $css .= 'color: ' . $global_header_text_color . ';';
            $css .= 'min-height: ' . $header_height . 'px !important;';
            $css .= '}';

            // Header container padding based on height
          /*  $header_padding = max(10, ($header_height - 40) / 2); // Calculate padding to center content
            $css .= '.pawfect-header .pawfect-container > div:first-child {';
            $css .= 'padding-top: ' . $header_padding . 'px;';
            $css .= 'padding-bottom: ' . $header_padding . 'px;';
            $css .= '}';*/

            // Footer Styles
            $css .= '.pawfect-footer, footer {';
            $css .= 'background-color: ' . ($footer_colors_enabled ? $footer_bg_color : $global_footer_bg_color) . ';';
            $css .= 'color: ' . $footer_text_color . ';';
            $css .= 'padding-top: ' . $footer_top . 'px !important;';
            $css .= 'padding-bottom: ' . $footer_bottom . 'px !important;';
            $css .= '}';

            // Footer Background Image (Dynamic)
            $footer_bg_image = get_theme_mod('pawfect_footer_background', PAWFECT_THEME_URL . '/assets/images/paw-steps-white.webp');
            $css .= '.pawfect-footer-logo-container { position: relative; z-index: 1; }';
            $css .= '.pawfect-footer-logo-container::before {';
            $css .= 'content: "";';
            $css .= 'position: absolute;';
            $css .= 'top: 50%;';
            $css .= 'left: 50%;';
            $css .= 'transform: translate(-50%, -50%) rotate(74deg);';
            $css .= 'background-image: url(' . esc_url($footer_bg_image) . ');';
            $css .= 'background-repeat: no-repeat;';
            $css .= 'background-size: contain;';
            $css .= 'width: 800px;';
            $css .= 'height: 800px;';
            $css .= 'opacity: 0.05;';
            $css .= 'z-index: -1;';
            $css .= 'pointer-events: none;';
            $css .= '}';

            // Press Mentions Gap
            $css .= '.pawfect-press-mentions-container .pawfect-press-mentions-item  {';
            $css .= 'gap: ' . $press_gap . 'px !important;';
            $css .= '}';

            // Dynamic Slider Styling
            $css .= $this->generate_slider_styles($slider_subtitle_font_size, $slider_subtitle_font_weight, $slider_subtitle_text_transform, $slider_subtitle_letter_spacing, $slider_title_font_size, $slider_title_line_height, $slider_content_spacing, $slider_button_spacing);

            // Dynamic Button Styling Based on User Choice
            $primary_btn_css = $this->generate_button_styles($button_style, $button_size, $primary_color);
            $css .= $primary_btn_css;

            // Restrict padding for dropdown cart buttons so they don't break onto two lines when global button size is 'large'
            $css .= '.pawfect-cart-dropdown .pawfect-btn, .pawfect-cart-dropdown .pawfect-btn-secondary, .widget_shopping_cart .pawfect-btn, .widget_shopping_cart .pawfect-btn-secondary { padding: 10px 16px !important; font-size: 14px !important; }';

            $css .= '.pawfect-text-primary, .pawfect-primary-text {';
            $css .= 'color: ' . $primary_color . ';';
            $css .= '}';

            $css .= '.pawfect-bg-primary, .pawfect-primary-bg {';
            $css .= 'background-color: ' . $primary_color . ';';
            $css .= '}';

            // Site Identity Dynamic CSS
            $css .= $this->generate_site_identity_css();

            // Responsive Typography Dynamic CSS
            $css .= $this->generate_responsive_typography_css();

            // Responsive Front Page Dynamic CSS
            $css .= $this->generate_responsive_frontpage_css();

            // Responsive Page Header Dynamic CSS
            $css .= $this->generate_responsive_page_header_css();

            // About Page Specific Styles
            $css .= '.pawfect-about-page .pawfect-section-divider {';
            $css .= 'width: 80px;';
            $css .= 'height: 4px;';
            $css .= 'background-color: ' . $primary_color . ';';
            $css .= 'margin: 1rem auto;';
            $css .= 'border-radius: 2px;';
            $css .= '}';

            $css .= '.pawfect-page .pawfect-section-divider {';
            $css .= 'width: 80px;';
            $css .= 'height: 4px;';
            $css .= 'background-color: ' . $primary_color . ';';
            $css .= 'margin: 1rem auto;';
            $css .= 'border-radius: 2px;';
            $css .= '}';

            // Fun Facts hover effects
            $css .= '.pawfect-funfact-item:hover {';
            $css .= 'transform: translateY(-5px);';
            $css .= 'transition: transform 0.3s ease;';
            $css .= '}';

            // Page content styling
            $css .= '.pawfect-content p {';
            $css .= 'margin-bottom: 1.5rem;';
            $css .= 'line-height: 1.7;';
            $css .= '}';

            $css .= '.pawfect-content h2, .pawfect-content h3, .pawfect-content h4 {';
            $css .= 'color: ' . $text_color . ';';
            $css .= 'margin-top: 2rem;';
            $css .= 'margin-bottom: 1rem;';
            $css .= '}';

            $css .= '.pawfect-border-primary, .pawfect-primary-border {';
            $css .= 'border-color: ' . $primary_color . ';';
            $css .= '}';

            // Shop by Pet Section Primary Color Styling
            $css .= '.pawfect-shop-by-pets .pawfect-text-primary, .pawfect-shop-by-pets .pawfect-bg-primary {';
            $css .= 'color: ' . $primary_color . ' !important;';
            $css .= '}';

            $css .= '.pawfect-shop-by-pets .pawfect-bg-primary {';
            $css .= 'background-color: ' . $primary_color . ' !important;';
            $css .= '}';

            $css .= '.pawfect-shop-by-pets .pawfect-text-pawfect-primary {';
            $css .= 'color: ' . $primary_color . ' !important;';
            $css .= '}';

            $css .= '.pawfect-shop-by-pets .group:hover .pawfect-border-pawfect-primary {';
            $css .= 'border-color: ' . $primary_color . ' !important;';
            $css .= '}';

            // Shop Now Button Hover Effects
            $css .= '.pawfect-shop-by-pets .group:hover span {';
            $css .= 'color: ' . $primary_color . ' !important;';
            $css .= '}';

            $css .= '.pawfect-shop-by-pets .group:hover .pawfect-rounded-full {';
            $css .= 'border-radius: 0 !important;';
            $css .= 'background-color: ' . $primary_color . ' !important;';
            $css .= '}';

            $css .= '.pawfect-shop-by-pets .group:hover .pawfect-w-32, .pawfect-shop-by-pets .group:hover .pawfect-w-40 {';
            $css .= 'border-radius: 0 !important;';
            $css .= '}';

            // Shop by Category Card Links Primary Color
            $css .= '.pawfect-shop-by-pets a, .pawfect-shop-by-pets .pawfect-block {';
            $css .= 'color: ' . $primary_color . ' !important;';
            $css .= '}';

            $css .= '.pawfect-shop-by-pets .pawfect-pet-category a:hover {';
            $css .= 'color: ' . $primary_color . ' !important;';
            $css .= '}';

            // Hero Slider Pagination Bullets Primary Color
            $css .= '.swiper-pagination-bullet-active, .pawfect-pagination-bullet.swiper-pagination-bullet-active {';
            $css .= 'background-color: ' . $primary_color . ' !important;';
            $css .= 'border-color: ' . $primary_color . ' !important;';
            $css .= '}';

            $css .= '.swiper-pagination-bullet-active .pawfect-bullet-fill, .pawfect-bullet-fill {';
            $css .= 'background-color: ' . $primary_color . ' !important;';
            $css .= '}';

            // Blog Post Title Hover Effects
            $css .= '.entry-title a:hover, .post-title a:hover, .blog-post-title a:hover {';
            $css .= 'color: ' . $primary_color . ';';
            $css .= 'transition: color 0.3s ease;';
            $css .= '}';

            // Read More Button Styling
            $css .= '.read-more, .more-link, .pawfect-read-more, .btn-read-more {';
            $css .= 'color: ' . $primary_color . ';';
            $css .= 'border-color: ' . $primary_color . ';';
            $css .= 'transition: all 0.3s ease;';
            $css .= '}';

            $css .= '.read-more:hover, .more-link:hover, .pawfect-read-more:hover, .btn-read-more:hover {';
         
            $css .= 'color: #ffffff;';
            $css .= 'border-color: ' . $primary_color . ';';
            $css .= '}';

            // Go to Top Button Styling
            $css .= '.go-to-top, .back-to-top, #back-to-top, .scroll-to-top, .pawfect-go-to-top {';
            $css .= 'background-color: ' . $primary_color . ';';
            $css .= 'color: #ffffff;';
            $css .= 'border-color: ' . $primary_color . ';';
            $css .= 'transition: all 0.3s ease;';
            $css .= '}';

            $css .= '.go-to-top:hover, .back-to-top:hover, #back-to-top:hover, .scroll-to-top:hover, .pawfect-go-to-top:hover {';
            $css .= 'background-color: ' . $secondary_color . ';';
            $css .= 'border-color: ' . $secondary_color . ';';
            $css .= 'transform: translateY(-2px);';
            $css .= 'box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);';
            $css .= '}';

            // Pawfect Primary Text Class
            $css .= '.pawfect-text-pawfect-primary {';
            $css .= 'color: ' . $primary_color . ';';
            $css .= '}';

            // Group Hover Primary Text Class
            $css .= '.pawfect-group:hover .group-hover\\:pawfect-text-pawfect-primary {';
            $css .= 'color: ' . $primary_color . ';';
            $css .= '}';

            // Pawfect Primary Background Class
            $css .= '.pawfect-bg-pawfect-primary {';
            $css .= 'background-color: ' . $primary_color . ';';
            $css .= '}';

            // Pawfect Primary Gradient Via Class
            $css .= '.pawfect-via-pawfect-primary {';
            $css .= '--tw-gradient-to: rgb(' . implode(' ', sscanf($primary_color, "#%02x%02x%02x")) . ' / 0) var(--tw-gradient-to-position);';
            $css .= '--tw-gradient-stops: var(--tw-gradient-from), ' . $primary_color . ' var(--tw-gradient-via-position), var(--tw-gradient-to);';
            $css .= '}';

            // WooCommerce Pagination Styling to Match Blog Pagination
            $css .= '.woocommerce-pagination, .woocommerce nav.woocommerce-pagination {';
            $css .= 'display: flex;';
            $css .= 'justify-content: center;';
            $css .= 'align-items: center;';
            $css .= 'gap: 1rem;';
            $css .= 'margin-top: 3rem;';
            $css .= 'padding: 2rem 0;';
            $css .= '}';

            $css .= '.woocommerce-pagination .page-numbers, .woocommerce nav.woocommerce-pagination .page-numbers {';
            $css .= 'display: inline-flex;';
            $css .= 'align-items: center;';
            $css .= 'justify-content: center;';
            $css .= 'gap: 0.5rem;';
            $css .= 'padding: 0.75rem 1rem;';
            $css .= 'min-width: 2.5rem;';
            $css .= 'border-radius: 0.375rem;';
            $css .= 'color: #6B7280;';
            $css .= 'text-decoration: none;';
            $css .= 'transition: all 0.3s ease;';
            $css .= 'font-weight: 500;';
            $css .= 'background-color: transparent;';
            $css .= 'border: none;';
            $css .= '}';

            $css .= '.woocommerce-pagination .page-numbers:hover, .woocommerce nav.woocommerce-pagination .page-numbers:hover {';
            $css .= 'background-color: #ffffff;';
            $css .= 'color: #6B7280;';
            $css .= 'box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);';
            $css .= 'transform: translateY(-1px);';
            $css .= '}';

            $css .= '.woocommerce-pagination .page-numbers.current, .woocommerce nav.woocommerce-pagination .page-numbers.current {';
            $css .= 'background-color: ' . $primary_color . ';';
            $css .= 'color: #ffffff;';
            $css .= 'box-shadow: 0 4px 12px rgba(' . implode(',', sscanf($primary_color, "#%02x%02x%02x")) . ', 0.3);';
            $css .= '}';

            // Additional WooCommerce Grid Fixes
            $css .= '.woocommerce ul.products, .woocommerce-page ul.products {';
            $css .= 'display: grid !important;';
            $css .= 'grid-template-columns: repeat(1, 1fr) !important;';
            $css .= 'gap: 2rem !important;';
            $css .= 'width: 100% !important;';
            $css .= 'margin: 0 !important;';
            $css .= 'padding: 0 !important;';
            $css .= 'list-style: none !important;';
            $css .= '}';

            $css .= '@media (min-width: 768px) {';
            $css .= '.woocommerce ul.products, .woocommerce-page ul.products {';
            $css .= 'grid-template-columns: repeat(2, 1fr) !important;';
            $css .= '}';
            $css .= '}';

            $css .= '@media (min-width: 1024px) {';
            $css .= '.woocommerce ul.products, .woocommerce-page ul.products {';
            $css .= 'grid-template-columns: repeat(3, 1fr) !important;';
            $css .= '}';
            $css .= '}';

            $css .= '.woocommerce ul.products li.product, .woocommerce-page ul.products li.product {';
            $css .= 'margin: 0 !important;';
            $css .= 'float: none !important;';
            $css .= 'width: auto !important;';
            $css .= 'display: flex !important;';
            $css .= 'flex-direction: column !important;';
            $css .= '}';

            // Clean View Toggle Styles - 3 Column Grid (First Button)
            $css .= '.pawfect-products-grid[data-view="grid"][data-columns="3"] ul.products {';
            $css .= 'grid-template-columns: repeat(1, 1fr) !important;';
            $css .= '}';

            $css .= '@media (min-width: 648px) {';
            $css .= '.pawfect-products-grid[data-view="grid"][data-columns="3"] ul.products {';
            $css .= 'grid-template-columns: repeat(2, 1fr) !important;';
            $css .= '}';
            $css .= '}';

            $css .= '@media (min-width: 1280px) {';
            $css .= '.pawfect-products-grid[data-view="grid"][data-columns="3"] ul.products {';
            $css .= 'grid-template-columns: repeat(3, 1fr) !important;';
            $css .= '}';
            $css .= '}';

            // View Toggle - 2 Column Grid (Second Button)
            $css .= '.pawfect-products-grid[data-view="grid"][data-columns="2"] ul.products {';
            $css .= 'grid-template-columns: repeat(1, 1fr) !important;';
            $css .= '}';

            $css .= '@media (min-width: 768px) {';
            $css .= '.pawfect-products-grid[data-view="grid"][data-columns="2"] ul.products {';
            $css .= 'grid-template-columns: repeat(2, 1fr) !important;';
            $css .= '}';
            $css .= '}';

            // View Toggle - List View (Third Button)
            $css .= '.pawfect-products-grid[data-view="list"] ul.products {';
            $css .= 'display: flex !important;';
            $css .= 'flex-direction: column !important;';
            $css .= 'grid-template-columns: none !important;';
            $css .= '}';

            $css .= '.pawfect-products-grid[data-view="list"] ul.products li.product {';
            $css .= 'display: flex !important;';
            $css .= 'flex-direction: row !important;';
            $css .= 'width: 100% !important;';
            $css .= 'align-items: flex-start !important;';
            $css .= 'gap: 1.5rem !important;';
            // $css .= 'height: auto !important;';
            $css .= '}';

            // Apply flex row to the actual card structure
            $css .= '.pawfect-products-grid[data-view="list"] .pawfect-category-card > a {';
            $css .= 'display: flex !important;';
            $css .= 'flex-direction: row !important;';
            $css .= 'flex: 1 !important;';
            $css .= 'align-items: flex-start !important;';
            $css .= 'gap: 1.5rem !important;';
            $css .= '}';

            // Special handling for classic cards - make the feature card itself flex
            $css .= '.pawfect-products-grid[data-view="list"] .pawfect-shop-card-classic .pawfect-feature-card {';
            $css .= 'display: flex !important;';
            $css .= 'flex-direction: row !important;';
            $css .= 'align-items: flex-start !important;';
            $css .= 'gap: 1.5rem !important;';
            $css .= 'min-height: auto !important;';
            $css .= 'height: auto !important;';
            $css .= 'padding: 0 !important;';
            $css .= 'margin: 0 !important;';
            $css .= '}';

            // Classic card image container in list view - exactly like modern cards (no fixed dimensions)
            $css .= '.pawfect-products-grid[data-view="list"] .pawfect-shop-card-classic .pawfect-aspect-square {';
            $css .= 'flex-shrink: 0 !important;';
            $css .= 'aspect-ratio: 1 !important;';
            $css .= 'overflow: hidden !important;';
            $css .= '}';

            // Classic card image itself - ensure it fits properly
            $css .= '.pawfect-products-grid[data-view="list"] .pawfect-shop-card-classic .pawfect-aspect-square img {';
            $css .= 'width: 100% !important;';
            $css .= 'height: 100% !important;';
            $css .= 'object-fit: cover !important;';
            $css .= '}';

            // Apply pawfect-h-64 only in list view for both modern and classic cards
            $css .= '.pawfect-products-grid[data-view="list"] .pawfect-height-16 {';
            $css .= 'height: 16rem !important;';
            $css .= '}';

            // Remove pawfect-h-64 height in grid view (let aspect-square control it)
            $css .= '.pawfect-products-grid[data-view="grid"] .pawfect-height-16 {';
            $css .= 'height: auto !important;';
            $css .= '}';

            // Classic card content area in list view - target the p-4 div
            $css .= '.pawfect-products-grid[data-view="list"] .pawfect-shop-card-classic .pawfect-p-4 {';
            $css .= 'flex: 1 !important;';
            $css .= 'padding: 0.5rem !important;';
            $css .= 'margin: 0 !important;';
            $css .= 'min-height: auto !important;';
            $css .= '}';

            // Remove any extra margins/padding from the entire card
            $css .= '.pawfect-products-grid[data-view="list"] .pawfect-shop-card-classic {';
            $css .= 'margin-bottom: 0.5rem !important;';
            $css .= '}';

            $css .= '.pawfect-products-grid[data-view="list"] .product-excerpt {';
            $css .= 'display: block !important;';
            $css .= 'color: #666 !important;';
            $css .= 'font-size: 0.9rem !important;';
            $css .= 'line-height: 1.5 !important;';
            $css .= 'margin: 0.5rem 0 !important;';
            $css .= '}';

            $css .= '.pawfect-products-grid[data-view="grid"] .product-excerpt {';
            $css .= 'display: none !important;';
            $css .= '}';

            // View Toggle Button Active State
            $css .= '.pawfect-view-toggle.active {';
            $css .= 'background-color: ' . $primary_color . ' !important;';
            $css .= 'color: #ffffff !important;';
            $css .= '}';

            // Override hover:pawfect-text-white to use primary color instead of white
            $css .= '.hover\\:pawfect-text-white:hover {';
            $css .= 'color: ' . $primary_color . ' !important;';
            $css .= '}';

            // WooCommerce price styling with primary color
            $css .= '.woocommerce .price, .woocommerce .amount, .woocommerce .woocommerce-Price-amount {';
            $css .= 'color: ' . $primary_color . ' !important;';
            $css .= 'font-weight: bold !important;';
            $css .= '}';

            // Override hover:pawfect-text-pawfect-primary to use dynamic primary color
            $css .= '.hover\\:pawfect-text-pawfect-primary:hover {';
            $css .= 'color: ' . $primary_color . ' !important;';
            $css .= '}';

            // Full Width Header Option
            $header_full_width = get_theme_mod('pawfect_header_full_width', false);
            if ($header_full_width) {
                $css .= '.pawfect-header .pawfect-container {';
                $css .= 'max-width: none !important;';
                $css .= 'padding-left: 2rem !important;';
                $css .= 'padding-right: 2rem !important;';
                $css .= '}';

                $css .= '@media (min-width: 768px) {';
                $css .= '.pawfect-header .pawfect-container {';
                $css .= 'padding-left: 3rem !important;';
                $css .= 'padding-right: 3rem !important;';
                $css .= '}';
                $css .= '}';
            }

            // Search Close Button Rotation Effect
            $css .= '#pawfect-search-close {';
            $css .= 'transition: transform 0.3s ease !important;';
            $css .= '}';

            $css .= '#pawfect-search-close:hover {';
            $css .= 'transform: rotate(180deg) !important;';
            $css .= '}';

            // Quick View Close Button Rotation Effect - Match Search Modal
            // Focus on SVG rotation only to avoid conflicts
            $css .= '#pawfect-quick-view-close svg {';
            $css .= 'transition: transform 0.3s ease !important;';
            $css .= 'transform-origin: center center !important;';
            $css .= 'will-change: transform !important;';
            $css .= '}';

            $css .= '#pawfect-quick-view-close:hover svg {';
            $css .= 'transform: rotate(180deg) !important;';
            $css .= '}';

            // Ensure button doesn't interfere with SVG transform
            $css .= '#pawfect-quick-view-close {';
            $css .= 'transition: color 0.3s ease, background-color 0.3s ease !important;';
            $css .= '}';

            // WooCommerce Block Buttons - Apply pawfect-btn styling
            $css .= '.wc-block-cart__submit-button,';
            $css .= '.wc-block-components-checkout-place-order-button {';
            $css .= 'background-color: ' . $primary_color . ' !important;';
            $css .= 'color: #ffffff !important;';
            $css .= 'border: none !important;';
            $css .= 'padding: 0.875rem 2rem !important;';
            $css .= 'border-radius: 0.5rem !important;';
            $css .= 'font-weight: 600 !important;';
            $css .= 'letter-spacing: -0.01em !important;';
            $css .= 'transition: all 0.3s ease !important;';
            $css .= 'box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;';
            $css .= 'text-transform: uppercase !important;';
            $css .= 'font-size: 0.875rem !important;';
            $css .= 'cursor: pointer !important;';
            $css .= 'display: inline-flex !important;';
            $css .= 'align-items: center !important;';
            $css .= 'justify-content: center !important;';
            $css .= 'text-decoration: none !important;';
            $css .= 'width: 100% !important;';
            $css .= 'position: relative !important;';
            $css .= 'overflow: hidden !important;';
            $css .= '}';

            $css .= '.wc-block-cart__submit-button:hover,';
            $css .= '.wc-block-components-checkout-place-order-button:hover {';
            $css .= 'background-color: ' . $primary_color . ' !important;';
            $css .= 'opacity: 0.9 !important;';
            $css .= 'transform: translateY(-1px) !important;';
            $css .= 'box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15) !important;';
            $css .= '}';

            $css .= '.wc-block-cart__submit-button:active,';
            $css .= '.wc-block-components-checkout-place-order-button:active {';
            $css .= 'transform: translateY(0) !important;';
            $css .= 'box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;';
            $css .= '}';

            // Add to Cart Button - Dynamic secondary color for "Added to cart" state
            $css .= '.pawfect-add-to-cart-btn.pawfect-added-to-cart {';
            $css .= 'background-color: ' . $secondary_color . ' !important;';
            $css .= 'border-color: ' . $secondary_color . ' !important;';
            $css .= '}';

            $css .= '.pawfect-add-to-cart-btn.pawfect-added-to-cart:hover {';
            $css .= 'background-color: ' . $secondary_color . ' !important;';
            $css .= 'border-color: ' . $secondary_color . ' !important;';
            $css .= 'opacity: 0.9 !important;';
            $css .= '}';

            // Secondary Button Styling
            // Secondary Button Styling
            $css .= '.pawfect-btn--dark, .pawfect-btn--secondary {';
            $css .= 'background-color: ' . $secondary_color . ';';
            $css .= 'color: #ffffff;';
            $css .= 'border: none;';
            $css .= 'padding: 12px 32px;';
            $css .= 'font-size: 14px;';
            $css .= 'font-weight: 500;';
            $css .= 'letter-spacing: 0.5px;';
            $css .= 'text-transform: uppercase;';
            $css .= 'border-radius: 2px;';
            $css .= 'cursor: pointer;';
            $css .= 'display: inline-flex;';
            $css .= 'align-items: center;';
            $css .= 'justify-content: center;';
            $css .= 'text-decoration: none;';
            $css .= 'transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);';
            $css .= 'box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);';
            $css .= '}';

            // Outline button variant
            $css .= '.pawfect-btn--outline {';
            $css .= 'background-color: transparent;';
            $css .= 'color: ' . $primary_color . ';';
            $css .= 'border: 1px solid ' . $primary_color . ';';
            $css .= 'padding: 11px 31px;'; // Slightly less padding to account for border
            $css .= 'font-size: 14px;';
            $css .= 'font-weight: 500;';
            $css .= 'letter-spacing: 0.5px;';
            $css .= 'text-transform: uppercase;';
            $css .= 'border-radius: 2px;';
            $css .= 'cursor: pointer;';
            $css .= 'display: inline-flex;';
            $css .= 'align-items: center;';
            $css .= 'justify-content: center;';
            $css .= 'text-decoration: none;';
            $css .= 'transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);';
            $css .= '}';

            // Outline button hover
            $css .= '.pawfect-btn--outline:hover {';
            $css .= 'background-color: ' . $primary_color . ';';
            $css .= 'color: #ffffff;';
            $css .= 'transform: translateY(-1px);';
            $css .= 'box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);';
            $css .= '}';

            $css .= '.pawfect-text-secondary, .pawfect-secondary-text {';
            $css .= 'color: ' . $secondary_color . ';';
            $css .= '}';

            $css .= '.pawfect-bg-secondary, .pawfect-secondary-bg {';
            $css .= 'background-color: ' . $secondary_color . ';';
            $css .= '}';

            // Apply secondary color to dark text elements (excluding footer)
            $css .= '.pawfect-text-dark, .dark-text, .pawfect-dark-text, .text-dark {';
            $css .= 'color: ' . $secondary_color . ' !important;';
            $css .= '}';

            $css .= '.pawfect-section-title, .section-title, .pawfect-title {';
            $css .= 'color: ' . $secondary_color . ' !important;';
            $css .= '}';

            $css .= '.pawfect-section-description, .section-description, .pawfect-description {';
            $css .= 'color: ' . $secondary_color . ' !important;';
            $css .= '}';

            // Swiper Navigation Styling - Apply dynamic secondary color
            $css .= '.swiper-button-next, .swiper-button-prev {';
            $css .= 'color: ' . $secondary_color . ';';
            $css .= '}';

            $css .= '.swiper-button-next:hover, .swiper-button-prev:hover {';
            $css .= 'background-color: ' . $secondary_color . ' !important;';
            $css .= 'color: #ffffff !important;';
            $css .= '}';

            $css .= '.swiper-button-next:hover svg, .swiper-button-prev:hover svg {';
            $css .= 'fill: #ffffff !important;';
            $css .= 'color: #ffffff !important;';
            $css .= '}';

            // Testimonial navigation buttons
            $css .= '.pawfect-testimonial-prev, .pawfect-testimonial-next {';
            $css .= 'color: ' . $secondary_color . ';';
            $css .= '}';

            $css .= '.pawfect-testimonial-prev:hover, .pawfect-testimonial-next:hover {';
            $css .= 'background-color: ' . $secondary_color . ' !important;';
            $css .= 'color: #ffffff !important;';
            $css .= '}';

            // WooCommerce navigation buttons (inline styled ones)
            $css .= '.pawfect-product-swiper .swiper-button-prev, .pawfect-product-swiper .swiper-button-next {';
            $css .= 'color: ' . $secondary_color . ';';
            $css .= '}';

            $css .= '.pawfect-product-swiper .swiper-button-prev:hover, .pawfect-product-swiper .swiper-button-next:hover {';
            $css .= 'background-color: ' . $secondary_color . ' !important;';
            $css .= 'border-color: ' . $secondary_color . ' !important;';
            $css .= 'color: #ffffff !important;';
            $css .= '}';

            // Hero Slider Text Shadows for better readability
         

            // Page Header Dynamic Styling
            $page_header_bg_color = get_theme_mod('pawfect_page_header_background_color', '#FFFFFF');
            $page_header_text_color = get_theme_mod('pawfect_page_header_text_color', '#333333');
            $page_header_height = get_theme_mod('pawfect_page_header_height', 300);

            // Handle both old array format and new JSON format for height
            if (is_string($page_header_height) && $this->is_json($page_header_height)) {
                $parsed = json_decode($page_header_height, true);
                $page_header_height = isset($parsed['desktop']) ? intval($parsed['desktop']) : 300;
            } elseif (is_array($page_header_height)) {
                $page_header_height = isset($page_header_height['slider']) ? intval($page_header_height['slider']) : intval($page_header_height['desktop'] ?? 300);
            } else {
                $page_header_height = intval($page_header_height);
            }

            $page_header_overlay = get_theme_mod('pawfect_page_header_overlay_opacity', array('slider' => 50, 'suffix' => '%'));
            $page_header_overlay = is_array($page_header_overlay) ? intval($page_header_overlay['slider']) : intval($page_header_overlay);

            $css .= '.pawfect-page-header {';
            $css .= 'background-color: ' . $page_header_bg_color . ';';
            $css .= 'color: ' . $page_header_text_color . ';';
            $css .= 'min-height: ' . $page_header_height . 'px;';
            $css .= '}';
            
            $css .= '.pawfect-page-header h1, .pawfect-page-header .pawfect-breadcrumbs a, .pawfect-page-header .pawfect-breadcrumbs span {';
            $css .= 'color: ' . $page_header_text_color . ' !important;';
            $css .= '}';
            
            $css .= '.pawfect-page-header .pawfect-breadcrumbs svg {';
            $css .= 'fill: ' . $page_header_text_color . ' !important;';
            $css .= '}';

            $css .= '.pawfect-page-header .pawfect-page-header-overlay {';
            $css .= 'opacity: ' . ($page_header_overlay / 100) . ';';
            $css .= '}';

            // Top Bar Dynamic Styling
            $topbar_bg_color = get_theme_mod('pawfect_topbar_bg_color', '#333333');
            $topbar_text_color = get_theme_mod('pawfect_topbar_text_color', '#ffffff');

            $css .= '.pawfect-topbar {';
            $css .= 'background-color: ' . $topbar_bg_color . ';';
            $css .= 'color: ' . $topbar_text_color . ';';
            $css .= '}';

            $css .= '.pawfect-topbar a {';
            $css .= 'color: ' . $topbar_text_color . ';';
            $css .= '}';

            // Responsive adjustments
            $css .= '@media (max-width: 768px) {';
            $css .= '.pawfect-container, .pawfect-container-small, .pawfect-container-narrow {';
            $css .= 'padding-left: ' . ($container_padding / 2) . 'px;';
            $css .= 'padding-right: ' . ($container_padding / 2) . 'px;';
            $css .= '}';
           // $css .= '.pawfect-section, section {';
           // $css .= 'padding-top: ' . ($section_top * 0.7) . 'px;';
           // $css .= 'padding-bottom: ' . ($section_bottom * 0.7) . 'px;';
           // $css .= '}';
            $css .= '}';

            // Footer Logo CSS
            $css .= $this->generate_footer_logo_css();

            // End of Pawfect Dynamic CSS
            $css .= '/* End of Pawfect Dynamic CSS */' . "\n";

            $css .= '.pawfect-btn { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 0.5rem; flex-wrap: nowrap !important; }';
            return $css;
        }

        /**
         * Clear CSS cache when customizer is saved
         */
        public function clear_css_cache() {
            // Only clear theme-specific cache, NOT the entire object cache.
            // wp_cache_flush() was destroying ALL cached data on every Customizer save,
            // forcing WordPress to rebuild everything from scratch on the next load.
            wp_cache_delete( 'theme_mods_' . get_option( 'stylesheet' ), 'options' );
            delete_transient( 'pawfect_customizer_cache' );
            wp_cache_delete( 'pawfect_dynamic_css', 'pawfect' );
        }

        /**
         * Generate button styles based on user selection
         */
        private function generate_button_styles($style, $size, $primary_color) {
            $css = '';

            // Size configurations
            $size_configs = array(
                'small' => array(
                    'padding' => '8px 24px',
                    'font-size' => '12px',
                    'font-weight' => '500',
                ),
                'medium' => array(
                    'padding' => '12px 32px',
                    'font-size' => '14px',
                    'font-weight' => '500',
                ),
                'large' => array(
                    'padding' => '16px 40px',
                    'font-size' => '16px',
                    'font-weight' => '600',
                ),
            );

            $current_size = $size_configs[$size] ?? $size_configs['medium'];

            // Base button styles
            $css .= '.pawfect-btn, .pawfect-button, .pawfect-btn--primary, .pawfect-btn-secondary {';
            $css .= 'display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;';
            $css .= 'border: none;';
            $css .= 'padding: ' . $current_size['padding'] . ';';
            $css .= 'font-size: ' . $current_size['font-size'] . ';';
            $css .= 'font-weight: ' . $current_size['font-weight'] . ';';
            $css .= 'letter-spacing: 0.5px;';
            $css .= 'text-transform: uppercase;';
            $css .= 'cursor: pointer;';
            $css .= 'display: inline-flex;';
            $css .= 'align-items: center;';
            $css .= 'justify-content: center;';
            $css .= 'text-decoration: none;';
            $css .= 'transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);';
            $css .= 'position: relative;';
            $css .= 'overflow: hidden;';
            $css .= '}';

            // Valid styles check fallback
            if ( ! in_array( $style, array( 'modern', 'rounded', 'sharp', 'pill', 'gradient' ) ) ) {
                $style = 'modern';
            }

            // Style-specific properties
            $css .= '.pawfect-btn, .pawfect-button, .pawfect-btn--primary, .pawfect-btn-secondary {';
            switch ($style) {
                case 'modern':
                    $css .= 'background-color: transparent !important;';
                    $css .= 'color: ' . $primary_color . ' !important;';
                    $css .= 'border: 1px solid ' . $primary_color . ' !important;';
                    $css .= 'border-radius: 2px !important;';
                    $css .= 'box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);';
                    break;

                case 'rounded':
                    $css .= 'background-color: ' . $primary_color . ';';
                    $css .= 'color: #ffffff;';
                    $css .= 'border-radius: 8px;';
                    $css .= 'box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);';
                    break;

                case 'sharp':
                    $css .= 'background-color: ' . $primary_color . ';';
                    $css .= 'color: #ffffff;';
                    $css .= 'border-radius: 0;';
                    $css .= 'box-shadow: none;';
                    $css .= 'border-bottom: 3px solid rgba(0, 0, 0, 0.1);';
                    break;

                case 'pill':
                    $css .= 'background-color: ' . $primary_color . ';';
                    $css .= 'color: #ffffff;';
                    $css .= 'border-radius: 50px;';
                    $css .= 'box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);';
                    break;

                case 'gradient':
                    $css .= 'color: #ffffff;';
                    $css .= 'border-radius: 6px;';
                    $css .= 'background: linear-gradient(135deg, ' . $primary_color . ' 0%, ' . $this->adjust_brightness($primary_color, -20) . ' 100%);';
                    $css .= 'box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);';
                    break;
            }

            $css .= '}';

            // Hover effects
            $css .= '.pawfect-btn:hover, .pawfect-button:hover, .pawfect-btn--primary:hover, .pawfect-btn-secondary:hover {';

            switch ($style) {
                case 'modern':
                    $css .= 'background-color: ' . $primary_color . ' !important;';
                    $css .= 'color: #ffffff !important;';
                    $css .= 'transform: translateY(-1px);';
                    $css .= 'box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);';
                    break;

                case 'rounded':
                    $css .= 'transform: translateY(-1px);';
                    $css .= 'box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);';
                    $css .= 'filter: brightness(1.05);';
                    break;

                case 'sharp':
                    $css .= 'background-color: ' . $this->adjust_brightness($primary_color, -10) . ';';
                    $css .= 'border-bottom-color: rgba(0, 0, 0, 0.2);';
                    break;

                case 'pill':
                    $css .= 'transform: translateY(-2px);';
                    $css .= 'box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);';
                    $css .= 'filter: brightness(1.1);';
                    break;

                case 'gradient':
                    $css .= 'transform: translateY(-1px);';
                    $css .= 'box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);';
                    $css .= 'filter: brightness(1.1);';
                    break;
            }

            $css .= '}';

            // Active state
            $css .= '.pawfect-btn:active, .pawfect-button:active, .pawfect-btn--primary:active, .pawfect-btn-secondary:active {';
            $css .= 'transform: translateY(0);';
            $css .= '}';

            // Focus state for accessibility
            $css .= '.pawfect-btn:focus, .pawfect-button:focus, .pawfect-btn--primary:focus, .pawfect-btn-secondary:focus {';
            $css .= 'outline: none;';
            $css .= 'box-shadow: 0 0 0 3px rgba(' . hexdec(substr($primary_color, 1, 2)) . ', ' . hexdec(substr($primary_color, 3, 2)) . ', ' . hexdec(substr($primary_color, 5, 2)) . ', 0.3);';
            $css .= '}';

            // Override for secondary button using secondary color
            $secondary_color = get_theme_mod( 'pawfect_secondary_color', '#313134' );
            $css .= '.pawfect-btn-secondary {';
            switch ($style) {
                case 'modern':
                    $css .= 'color: ' . $secondary_color . ' !important; border: 1px solid ' . $secondary_color . ' !important;';
                    break;
                case 'rounded':
                case 'sharp':
                case 'pill':
                    $css .= 'background-color: ' . $secondary_color . ' !important; border-color: ' . $secondary_color . ' !important;';
                    break;
                case 'gradient':
                    $css .= 'background: linear-gradient(135deg, ' . $secondary_color . ' 0%, ' . $this->adjust_brightness($secondary_color, -20) . ' 100%) !important; border-color: ' . $secondary_color . ' !important;';
                    break;
            }
            $css .= '}';
            
            $css .= '.pawfect-btn-secondary:hover {';
            switch ($style) {
                case 'modern':
                    $css .= 'background-color: ' . $secondary_color . ' !important; color: #ffffff !important;';
                    break;
                case 'sharp':
                    $css .= 'background-color: ' . $this->adjust_brightness($secondary_color, -10) . ' !important;';
                    break;
            }
            $css .= '}';

            $css .= '.pawfect-btn { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 0.5rem; flex-wrap: nowrap !important; }';
            return $css;
        }





        /**
         * Generate slider styles based on user selection
         */
        private function generate_slider_styles($subtitle_font_size, $subtitle_font_weight, $subtitle_text_transform, $subtitle_letter_spacing, $title_font_size, $title_line_height, $content_spacing, $button_spacing) {
            $css = '';

            // Minimal Slider subtitle styling for overall theme consistency
            $css .= '.pawfect-hero-subtitle, .pawfect-hero-subtitle span {';
            $css .= 'font-size: ' . $subtitle_font_size . 'px !important;';
            $css .= 'font-weight: ' . $subtitle_font_weight . ' !important;';
            $css .= 'text-transform: ' . $subtitle_text_transform . ' !important;';
            $css .= 'letter-spacing: ' . $subtitle_letter_spacing . 'px !important;';
            $css .= 'opacity: 0.9;';
            $css .= 'position: relative;';
            $css .= 'padding: 0.5rem 0;';
            $css .= 'transition: all 0.3s ease;';
            $css .= '}';

            // Minimal underline accent
           /* $css .= '.pawfect-hero-subtitle::after {';
            $css .= 'content: "";';
            $css .= 'position: absolute;';
            $css .= 'bottom: 0;';
            $css .= 'left: 50%;';
            $css .= 'width: 60px;';
            $css .= 'height: 2px;';
            $css .= 'background: currentColor;';
            $css .= 'transform: translateX(-50%);';
            $css .= 'opacity: 0.6;';
            $css .= 'transition: all 0.3s ease;';
            $css .= '}';*/

            // Subtle hover effect
            $css .= '.pawfect-hero-subtitle:hover::after {';
            $css .= 'width: 80px;';
            $css .= 'opacity: 0.8;';
            $css .= '}';

            // Simple fade-in animation
            $css .= '.pawfect-hero-subtitle {';
            $css .= 'animation: subtitleFadeIn 0.6s ease-out 0.2s both;';
            $css .= '}';

            $css .= '@keyframes subtitleFadeIn {';
            $css .= '0% {';
            $css .= 'opacity: 0;';
            $css .= 'transform: translateY(10px);';
            $css .= '}';
            $css .= '100% {';
            $css .= 'opacity: 0.9;';
            $css .= 'transform: translateY(0);';
            $css .= '}';
            $css .= '}';

            // Responsive subtitle sizes
            $css .= '@media (max-width: 768px) {';
            $css .= '.pawfect-hero-subtitle {';
            $css .= 'font-size: ' . ($subtitle_font_size * 0.75) . 'px;';
            $css .= 'margin-bottom: 1rem;';
            $css .= '}';
            $css .= '.pawfect-hero-subtitle::after {';
            $css .= 'width: 40px;';
            $css .= '}';
            $css .= '}';

            $css .= '@media (min-width: 769px) and (max-width: 1024px) {';
            $css .= '.pawfect-hero-subtitle {';
            $css .= 'font-size: ' . ($subtitle_font_size * 0.875) . 'px;';
            $css .= '}';
            $css .= '.pawfect-hero-subtitle::after {';
            $css .= 'width: 50px;';
            $css .= '}';
            $css .= '}';

            // Slider title styling
            $css .= '.pawfect-hero-title {';
            $css .= 'font-size: ' . $title_font_size . 'px !important;';
            $css .= 'line-height: ' . $title_line_height . ' !important;';
            $css .= 'margin-bottom: 2rem;';
            $css .= 'font-weight: 700;';
            $css .= 'letter-spacing: -0.02em;';
            $css .= '}';

            // Responsive title sizes
            $css .= '@media (max-width: 768px) {';
            $css .= '.pawfect-hero-title {';
            $css .= 'font-size: ' . ($title_font_size * 0.5) . 'px;';
            $css .= '}';
            $css .= '}';

            $css .= '@media (min-width: 769px) and (max-width: 1024px) {';
            $css .= '.pawfect-hero-title {';
            $css .= 'font-size: ' . ($title_font_size * 0.75) . 'px;';
            $css .= '}';
            $css .= '}';

            // Content spacing - Apply proper spacing values
            $css .= '.pawfect-hero-description {';
            $css .= 'margin-top: ' . ($content_spacing / 16) . 'rem;'; // Convert px to rem (16px = 1rem)
            $css .= 'margin-bottom: ' . ($content_spacing / 16) . 'rem;';
            $css .= '}';

            // Subtitle spacing
            $css .= '.pawfect-hero-subtitle {';
            $css .= 'margin-bottom: ' . ($content_spacing / 16) . 'rem;';
            $css .= '}';

            // Title spacing
            $css .= '.pawfect-hero-title {';
            $css .= 'margin-bottom: ' . ($content_spacing / 16) . 'rem;';
            $css .= '}';

            // Button spacing
            $css .= '.pawfect-hero-button-wrapper {';
            $css .= 'margin-top: ' . ($button_spacing / 16) . 'rem;'; // Convert px to rem (16px = 1rem)
            $css .= '}';

            // Content format styles
            $css .= '.pawfect-slide-content-left {';
            $css .= 'text-align: left !important;';
            $css .= 'justify-content: flex-start !important;';
            $css .= '}';

            $css .= '.pawfect-slide-content-left .pawfect-hero-subtitle {';
            $css .= 'justify-content: flex-start !important;';
            $css .= '}';

            $css .= '.pawfect-slide-content-right {';
            $css .= 'text-align: right !important;';
            $css .= 'justify-content: flex-end !important;';
            $css .= '}';

            $css .= '.pawfect-slide-content-right .pawfect-hero-subtitle {';
            $css .= 'justify-content: flex-end !important;';
            $css .= '}';

            $css .= '.pawfect-slide-content-center {';
            $css .= 'text-align: center !important;';
            $css .= 'justify-content: center !important;';
            $css .= '}';

            $css .= '.pawfect-slide-content-center .pawfect-hero-subtitle {';
            $css .= 'justify-content: center !important;';
            $css .= '}';

            // Standard format (default center alignment)
            $css .= '.pawfect-slide-content-standard {';
            $css .= 'text-align: center !important;';
            $css .= 'justify-content: center !important;';
            $css .= '}';

            $css .= '.pawfect-slide-content-standard .pawfect-hero-subtitle {';
            $css .= 'justify-content: center !important;';
            $css .= '}';

            $css .= '.pawfect-btn { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 0.5rem; flex-wrap: nowrap !important; }';
            return $css;
        }

        /**
         * Adjust color brightness
         */
        private function adjust_brightness($hex, $percent) {
            // Validate input parameters
            if (empty($hex) || !is_string($hex)) {
                return '#F4A259'; // Return default primary color if invalid
            }

            if (!is_numeric($percent)) {
                $percent = 0; // Default to no change if invalid
            }

            // Remove # if present
            $hex = ltrim($hex, '#');

            // Validate hex color format
            if (!preg_match('/^[a-fA-F0-9]{6}$/', $hex)) {
                return '#F4A259'; // Return default primary color if invalid format
            }

            // Convert to RGB
            $r = hexdec(substr($hex, 0, 2));
            $g = hexdec(substr($hex, 2, 2));
            $b = hexdec(substr($hex, 4, 2));

            // Adjust brightness
            $r = max(0, min(255, $r + ($r * $percent / 100)));
            $g = max(0, min(255, $g + ($g * $percent / 100)));
            $b = max(0, min(255, $b + ($b * $percent / 100)));

            // Convert back to hex
            return sprintf('#%02x%02x%02x', $r, $g, $b);
        }

        /**
         * Get font stack with proper fallbacks
         */
        private function get_font_stack($font_family) {
            // System font stack
            if ($font_family === 'System Font Stack') {
                return '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif';
            }

            // System fonts
            $system_fonts = array(
                '-apple-system' => '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
                'Arial' => 'Arial, "Helvetica Neue", Helvetica, sans-serif',
                'Helvetica' => '"Helvetica Neue", Helvetica, Arial, sans-serif',
                'Georgia' => 'Georgia, "Times New Roman", Times, serif',
                'Times New Roman' => '"Times New Roman", Times, Georgia, serif',
            );

            if (isset($system_fonts[$font_family])) {
                return $system_fonts[$font_family];
            }

            // Google Fonts with fallbacks
            $google_font_fallbacks = array(
                'Bricolage Grotesque' => '"Bricolage Grotesque", -apple-system, BlinkMacSystemFont, sans-serif',
                'Inter' => '"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
                'Poppins' => '"Poppins", -apple-system, BlinkMacSystemFont, sans-serif',
                'Roboto' => '"Roboto", -apple-system, BlinkMacSystemFont, sans-serif',
                'Open Sans' => '"Open Sans", -apple-system, BlinkMacSystemFont, sans-serif',
                'Lato' => '"Lato", -apple-system, BlinkMacSystemFont, sans-serif',
                'Montserrat' => '"Montserrat", -apple-system, BlinkMacSystemFont, sans-serif',
                'Source Sans Pro' => '"Source Sans Pro", -apple-system, BlinkMacSystemFont, sans-serif',
                'Nunito' => '"Nunito", -apple-system, BlinkMacSystemFont, sans-serif',
                'Raleway' => '"Raleway", -apple-system, BlinkMacSystemFont, sans-serif',
                'Playfair Display' => '"Playfair Display", Georgia, "Times New Roman", serif',
                'Merriweather' => '"Merriweather", Georgia, "Times New Roman", serif',
                'Oswald' => '"Oswald", -apple-system, BlinkMacSystemFont, sans-serif',
                'PT Sans' => '"PT Sans", -apple-system, BlinkMacSystemFont, sans-serif',
                'Ubuntu' => '"Ubuntu", -apple-system, BlinkMacSystemFont, sans-serif',
                'Libre Baskerville' => '"Libre Baskerville", Georgia, "Times New Roman", serif',
                'Crimson Text' => '"Crimson Text", Georgia, "Times New Roman", serif',
                'Work Sans' => '"Work Sans", -apple-system, BlinkMacSystemFont, sans-serif',
                'Fira Sans' => '"Fira Sans", -apple-system, BlinkMacSystemFont, sans-serif',
                'DM Sans' => '"DM Sans", -apple-system, BlinkMacSystemFont, sans-serif',
                'Manrope' => '"Manrope", -apple-system, BlinkMacSystemFont, sans-serif',
                'Space Grotesk' => '"Space Grotesk", -apple-system, BlinkMacSystemFont, sans-serif',
                'Plus Jakarta Sans' => '"Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, sans-serif',
            );

            if (isset($google_font_fallbacks[$font_family])) {
                return $google_font_fallbacks[$font_family];
            }

            // Default fallback
            return '"' . $font_family . '", -apple-system, BlinkMacSystemFont, sans-serif';
        }

        /**
         * Generate Site Identity CSS
         */
        private function generate_site_identity_css() {
            $css = '';

            // Add debug comment
            $css .= '/* Site Identity CSS Debug - Working! */' . "\n";

            // Get responsive logo size settings
            $logo_size = get_theme_mod('pawfect_logo_size', json_encode(array(
                'desktop' => 150,
                'tablet' => 120,
                'mobile' => 100,
            )));

            // Get responsive site title size settings
            $site_title_size = get_theme_mod('pawfect_site_title_size', json_encode(array(
                'desktop' => 30,
                'tablet' => 26,
                'mobile' => 22,
            )));

            // Get responsive site tagline size settings
            $site_tagline_size = get_theme_mod('pawfect_site_tagline_size', json_encode(array(
                'desktop' => 16,
                'tablet' => 14,
                'mobile' => 12,
            )));

            // Parse JSON strings to arrays
            if (is_string($logo_size)) {
                $logo_size = json_decode($logo_size, true);
            }
            if (is_string($site_title_size)) {
                $site_title_size = json_decode($site_title_size, true);
            }
            if (is_string($site_tagline_size)) {
                $site_tagline_size = json_decode($site_tagline_size, true);
            }

            // Ensure we have arrays with fallbacks
            if (!is_array($logo_size)) {
                $logo_size = array('desktop' => 150, 'tablet' => 120, 'mobile' => 100);
            }
            if (!is_array($site_title_size)) {
                $site_title_size = array('desktop' => 30, 'tablet' => 26, 'mobile' => 22);
            }
            if (!is_array($site_tagline_size)) {
                $site_tagline_size = array('desktop' => 16, 'tablet' => 14, 'mobile' => 12);
            }

            // Logo Size - Desktop
            if (!empty($logo_size['desktop'])) {
                $css .= '.site-logo img, .custom-logo, .site-branding img, .pawfect-logo-link img, .header-titles-wrapper .site-logo img {';
                $css .= 'max-width: ' . intval($logo_size['desktop']) . 'px !important;';
                $css .= 'width: ' . intval($logo_size['desktop']) . 'px !important;';
                $css .= 'height: auto !important;';
                $css .= '}';
            }

            // Site Title Size - Desktop
            if (!empty($site_title_size['desktop'])) {
                $css .= '.site-title, .site-title a, .site-branding .site-title, h1.site-title, .header-titles-wrapper .site-title, .header-titles-wrapper h1.site-title {';
                $css .= 'font-size: ' . intval($site_title_size['desktop']) . 'px !important;';
                $css .= 'line-height: 1.2 !important;';
                $css .= '}';
            }

            // Site Tagline Size - Desktop
            if (!empty($site_tagline_size['desktop'])) {
                $css .= '.site-description, .site-branding .site-description, p.site-description, .header-titles-wrapper .site-description, .header-titles-wrapper p.site-description {';
                $css .= 'font-size: ' . intval($site_tagline_size['desktop']) . 'px !important;';
                $css .= 'line-height: 1.4 !important;';
                $css .= '}';
            }

            // Tablet Responsive Styles
            $css .= '@media (max-width: 1024px) {';

            if (!empty($logo_size['tablet'])) {
                $css .= '.site-logo img, .custom-logo, .site-branding img, .pawfect-logo-link img, .header-titles-wrapper .site-logo img {';
                $css .= 'max-width: ' . intval($logo_size['tablet']) . 'px !important;';
                $css .= 'width: ' . intval($logo_size['tablet']) . 'px !important;';
                $css .= '}';
            }

            if (!empty($site_title_size['tablet'])) {
                $css .= '.site-title, .site-title a, .site-branding .site-title, h1.site-title, .header-titles-wrapper .site-title, .header-titles-wrapper h1.site-title {';
                $css .= 'font-size: ' . intval($site_title_size['tablet']) . 'px !important;';
                $css .= '}';
            }

            if (!empty($site_tagline_size['tablet'])) {
                $css .= '.site-description, .site-branding .site-description, p.site-description, .header-titles-wrapper .site-description, .header-titles-wrapper p.site-description {';
                $css .= 'font-size: ' . intval($site_tagline_size['tablet']) . 'px !important;';
                $css .= '}';
            }

            $css .= '}'; // End tablet media query

            // Mobile Responsive Styles
            $css .= '@media (max-width: 768px) {';

            if (!empty($logo_size['mobile'])) {
                $css .= '.site-logo img, .custom-logo, .site-branding img, .pawfect-logo-link img, .header-titles-wrapper .site-logo img {';
                $css .= 'max-width: ' . intval($logo_size['mobile']) . 'px !important;';
                $css .= 'width: ' . intval($logo_size['mobile']) . 'px !important;';
                $css .= '}';
            }

            if (!empty($site_title_size['mobile'])) {
                $css .= '.site-title, .site-title a, .site-branding .site-title, h1.site-title, .header-titles-wrapper .site-title, .header-titles-wrapper h1.site-title {';
                $css .= 'font-size: ' . intval($site_title_size['mobile']) . 'px !important;';
                $css .= '}';
            }

            if (!empty($site_tagline_size['mobile'])) {
                $css .= '.site-description, .site-branding .site-description, p.site-description, .header-titles-wrapper .site-description, .header-titles-wrapper p.site-description {';
                $css .= 'font-size: ' . intval($site_tagline_size['mobile']) . 'px !important;';
                $css .= '}';
            }

            $css .= '}'; // End mobile media query

            // Display Site Title and Tagline setting
            $display_title_tagline = get_theme_mod('pawfect_display_site_title_tagline', true);
            if (!$display_title_tagline) {
                $css .= '.site-title, .site-description {';
                $css .= 'display: none !important;';
                $css .= '}';
            }

            // Hidden Title for SEO
            $enable_hidden_title = get_theme_mod('pawfect_enable_hidden_title', false);
            if ($enable_hidden_title) {
                $css .= '.pawfect-hidden-title {';
                $css .= 'position: absolute !important;';
                $css .= 'left: -9999px !important;';
                $css .= 'width: 1px !important;';
                $css .= 'height: 1px !important;';
                $css .= 'overflow: hidden !important;';
                $css .= '}';
            }

            // Sticky Menu Logo Width - Responsive
            $sticky_logo_width = get_theme_mod('pawfect_sticky_logo_width', json_encode(array(
                'desktop' => 220,
                'tablet' => 180,
                'mobile' => 150,
            )));

            // Parse JSON string to array
            if (is_string($sticky_logo_width)) {
                $sticky_logo_width = json_decode($sticky_logo_width, true);
            }

            // Ensure we have array with fallbacks
            if (!is_array($sticky_logo_width)) {
                $sticky_logo_width = array('desktop' => 220, 'tablet' => 180, 'mobile' => 150);
            }

            // Desktop Sticky Logo Width
            if (!empty($sticky_logo_width['desktop'])) {
                $css .= '.pawfect-header.pawfect-sticky-scrolled .pawfect-logo-link img, .pawfect-header.pawfect-sticky-scrolled .site-logo img {';
                $css .= 'max-width: ' . intval($sticky_logo_width['desktop']) . 'px !important;';
                $css .= 'width: ' . intval($sticky_logo_width['desktop']) . 'px !important;';
                $css .= 'height: auto !important;';
                $css .= '}';
            }

            // Tablet Sticky Logo Width
            $css .= '@media (max-width: 1024px) {';
            if (!empty($sticky_logo_width['tablet'])) {
                $css .= '.pawfect-header.pawfect-sticky-scrolled .pawfect-logo-link img, .pawfect-header.pawfect-sticky-scrolled .site-logo img {';
                $css .= 'max-width: ' . intval($sticky_logo_width['tablet']) . 'px !important;';
                $css .= 'width: ' . intval($sticky_logo_width['tablet']) . 'px !important;';
                $css .= '}';
            }
            $css .= '}'; // End tablet media query

            // Mobile Sticky Logo Width
            $css .= '@media (max-width: 768px) {';
            if (!empty($sticky_logo_width['mobile'])) {
                $css .= '.pawfect-header.pawfect-sticky-scrolled .pawfect-logo-link img, .pawfect-header.pawfect-sticky-scrolled .site-logo img {';
                $css .= 'max-width: ' . intval($sticky_logo_width['mobile']) . 'px !important;';
                $css .= 'width: ' . intval($sticky_logo_width['mobile']) . 'px !important;';
                $css .= '}';
            }
            $css .= '}'; // End mobile media query

            $css .= '.pawfect-btn { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 0.5rem; flex-wrap: nowrap !important; }';
            return $css;
        }

        /**
         * Generate Responsive Typography CSS
         */
        private function generate_responsive_typography_css() {
            $css = '';

            // Add debug comment
            $css .= '/* Responsive Typography CSS */' . "\n";

            // Get responsive typography settings
            $body_font_size = get_theme_mod('pawfect_body_font_size', json_encode(array(
                'desktop' => 16,
                'tablet' => 15,
                'mobile' => 14,
            )));

            $body_line_height = get_theme_mod('pawfect_body_line_height', json_encode(array(
                'desktop' => 1.6,
                'tablet' => 1.6,
                'mobile' => 1.5,
            )));

            $body_letter_spacing = get_theme_mod('pawfect_body_letter_spacing', json_encode(array(
                'desktop' => 0,
                'tablet' => 0,
                'mobile' => 0,
            )));

            $heading_line_height = get_theme_mod('pawfect_heading_line_height', json_encode(array(
                'desktop' => 1.2,
                'tablet' => 1.2,
                'mobile' => 1.3,
            )));

            $menu_font_size = get_theme_mod('pawfect_menu_font_size', json_encode(array(
                'desktop' => 16,
                'tablet' => 15,
                'mobile' => 14,
            )));

            $page_title_font_size = get_theme_mod('pawfect_page_title_font_size', json_encode(array(
                'desktop' => 36,
                'tablet' => 32,
                'mobile' => 28,
            )));

            $page_content_font_size = get_theme_mod('pawfect_page_content_font_size', json_encode(array(
                'desktop' => 16,
                'tablet' => 15,
                'mobile' => 14,
            )));

            $button_font_size = get_theme_mod('pawfect_button_font_size', json_encode(array(
                'desktop' => 14,
                'tablet' => 13,
                'mobile' => 12,
            )));

            $blog_title_font_size = get_theme_mod('pawfect_blog_title_font_size', json_encode(array(
                'desktop' => 28,
                'tablet' => 24,
                'mobile' => 20,
            )));

            // Fetch global heading font for fallback
            $heading_font = get_theme_mod('pawfect_heading_font_family', 'Bricolage Grotesque');

            // Fetch H1-H6 typography settings
            $h1_font_family = get_theme_mod( 'pawfect_h1_font_family', $heading_font );
            $h1_font_weight = get_theme_mod( 'pawfect_h1_font_weight', '700' );
            $h1_letter_spacing = get_theme_mod( 'pawfect_h1_letter_spacing', '-0.025em' );
            $h1_text_transform = get_theme_mod( 'pawfect_h1_text_transform', 'none' );

            $h2_font_family = get_theme_mod( 'pawfect_h2_font_family', $heading_font );
            $h2_font_weight = get_theme_mod( 'pawfect_h2_font_weight', '700' );
            $h2_letter_spacing = get_theme_mod( 'pawfect_h2_letter_spacing', '-0.025em' );
            $h2_text_transform = get_theme_mod( 'pawfect_h2_text_transform', 'none' );

            $h3_font_family = get_theme_mod( 'pawfect_h3_font_family', $heading_font );
            $h3_font_weight = get_theme_mod( 'pawfect_h3_font_weight', '700' );
            $h3_letter_spacing = get_theme_mod( 'pawfect_h3_letter_spacing', '-0.025em' );
            $h3_text_transform = get_theme_mod( 'pawfect_h3_text_transform', 'none' );

            $h4_font_family = get_theme_mod( 'pawfect_h4_font_family', $heading_font );
            $h4_font_weight = get_theme_mod( 'pawfect_h4_font_weight', '600' );
            $h4_letter_spacing = get_theme_mod( 'pawfect_h4_letter_spacing', '0em' );
            $h4_text_transform = get_theme_mod( 'pawfect_h4_text_transform', 'none' );

            $h5_font_family = get_theme_mod( 'pawfect_h5_font_family', $heading_font );
            $h5_font_weight = get_theme_mod( 'pawfect_h5_font_weight', '600' );
            $h5_letter_spacing = get_theme_mod( 'pawfect_h5_letter_spacing', '0em' );
            $h5_text_transform = get_theme_mod( 'pawfect_h5_text_transform', 'none' );

            $h6_font_family = get_theme_mod( 'pawfect_h6_font_family', $heading_font );
            $h6_font_weight = get_theme_mod( 'pawfect_h6_font_weight', '600' );
            $h6_letter_spacing = get_theme_mod( 'pawfect_h6_letter_spacing', '0em' );
            $h6_text_transform = get_theme_mod( 'pawfect_h6_text_transform', 'none' );

            // Individual heading font sizes and line heights
            $h1_font_size = get_theme_mod('pawfect_h1_font_size', json_encode(array(
                'desktop' => 36,
                'tablet' => 32,
                'mobile' => 28,
            )));
            $h1_line_height = get_theme_mod('pawfect_h1_line_height', json_encode(array(
                'desktop' => 1.1,
                'tablet' => 1.1,
                'mobile' => 1.1,
            )));

            $h2_font_size = get_theme_mod('pawfect_h2_font_size', json_encode(array(
                'desktop' => 30,
                'tablet' => 28,
                'mobile' => 24,
            )));
            $h2_line_height = get_theme_mod('pawfect_h2_line_height', json_encode(array(
                'desktop' => 1.2,
                'tablet' => 1.2,
                'mobile' => 1.2,
            )));

            $h3_font_size = get_theme_mod('pawfect_h3_font_size', json_encode(array(
                'desktop' => 24,
                'tablet' => 22,
                'mobile' => 20,
            )));
            $h3_line_height = get_theme_mod('pawfect_h3_line_height', json_encode(array(
                'desktop' => 1.3,
                'tablet' => 1.3,
                'mobile' => 1.3,
            )));

            $h4_font_size = get_theme_mod('pawfect_h4_font_size', json_encode(array(
                'desktop' => 20,
                'tablet' => 18,
                'mobile' => 16,
            )));
            $h4_line_height = get_theme_mod('pawfect_h4_line_height', json_encode(array(
                'desktop' => 1.4,
                'tablet' => 1.4,
                'mobile' => 1.4,
            )));

            $h5_font_size = get_theme_mod('pawfect_h5_font_size', json_encode(array(
                'desktop' => 18,
                'tablet' => 16,
                'mobile' => 14,
            )));
            $h5_line_height = get_theme_mod('pawfect_h5_line_height', json_encode(array(
                'desktop' => 1.5,
                'tablet' => 1.5,
                'mobile' => 1.5,
            )));

            $h6_font_size = get_theme_mod('pawfect_h6_font_size', json_encode(array(
                'desktop' => 16,
                'tablet' => 14,
                'mobile' => 12,
            )));
            $h6_line_height = get_theme_mod('pawfect_h6_line_height', json_encode(array(
                'desktop' => 1.6,
                'tablet' => 1.6,
                'mobile' => 1.6,
            )));

            // Ensure heading font size variables are not empty with fallbacks
            if (empty($h1_font_size)) {
                $h1_font_size = json_encode(array('desktop' => 36, 'tablet' => 32, 'mobile' => 28));
            }
            if (empty($h1_line_height)) {
                $h1_line_height = json_encode(array('desktop' => 1.1, 'tablet' => 1.1, 'mobile' => 1.1));
            }
            if (empty($h2_font_size)) {
                $h2_font_size = json_encode(array('desktop' => 30, 'tablet' => 28, 'mobile' => 24));
            }
            if (empty($h2_line_height)) {
                $h2_line_height = json_encode(array('desktop' => 1.2, 'tablet' => 1.2, 'mobile' => 1.2));
            }
            if (empty($h3_font_size)) {
                $h3_font_size = json_encode(array('desktop' => 24, 'tablet' => 22, 'mobile' => 20));
            }
            if (empty($h3_line_height)) {
                $h3_line_height = json_encode(array('desktop' => 1.3, 'tablet' => 1.3, 'mobile' => 1.3));
            }
            if (empty($h4_font_size)) {
                $h4_font_size = json_encode(array('desktop' => 20, 'tablet' => 18, 'mobile' => 16));
            }
            if (empty($h4_line_height)) {
                $h4_line_height = json_encode(array('desktop' => 1.4, 'tablet' => 1.4, 'mobile' => 1.4));
            }
            if (empty($h5_font_size)) {
                $h5_font_size = json_encode(array('desktop' => 18, 'tablet' => 16, 'mobile' => 14));
            }
            if (empty($h5_line_height)) {
                $h5_line_height = json_encode(array('desktop' => 1.5, 'tablet' => 1.5, 'mobile' => 1.5));
            }
            if (empty($h6_font_size)) {
                $h6_font_size = json_encode(array('desktop' => 16, 'tablet' => 14, 'mobile' => 12));
            }
            if (empty($h6_line_height)) {
                $h6_line_height = json_encode(array('desktop' => 1.6, 'tablet' => 1.6, 'mobile' => 1.6));
            }

            // Parse JSON strings to arrays
            if (is_string($body_font_size)) {
                $body_font_size = json_decode($body_font_size, true);
            }
            if (is_string($body_line_height)) {
                $body_line_height = json_decode($body_line_height, true);
            }
            if (is_string($body_letter_spacing)) {
                $body_letter_spacing = json_decode($body_letter_spacing, true);
            }
            if (is_string($heading_line_height)) {
                $heading_line_height = json_decode($heading_line_height, true);
            }
            if (is_string($menu_font_size)) {
                $menu_font_size = json_decode($menu_font_size, true);
            }
            if (is_string($page_title_font_size)) {
                $page_title_font_size = json_decode($page_title_font_size, true);
            }
            if (is_string($page_content_font_size)) {
                $page_content_font_size = json_decode($page_content_font_size, true);
            }
            if (is_string($button_font_size)) {
                $button_font_size = json_decode($button_font_size, true);
            }
            if (is_string($blog_title_font_size)) {
                $blog_title_font_size = json_decode($blog_title_font_size, true);
            }

            // Parse individual heading font sizes and line heights
            if (is_string($h1_font_size)) { $h1_font_size = json_decode($h1_font_size, true); }
            if (is_string($h1_line_height)) { $h1_line_height = json_decode($h1_line_height, true); }
            if (is_string($h2_font_size)) { $h2_font_size = json_decode($h2_font_size, true); }
            if (is_string($h2_line_height)) { $h2_line_height = json_decode($h2_line_height, true); }
            if (is_string($h3_font_size)) { $h3_font_size = json_decode($h3_font_size, true); }
            if (is_string($h3_line_height)) { $h3_line_height = json_decode($h3_line_height, true); }
            if (is_string($h4_font_size)) { $h4_font_size = json_decode($h4_font_size, true); }
            if (is_string($h4_line_height)) { $h4_line_height = json_decode($h4_line_height, true); }
            if (is_string($h5_font_size)) { $h5_font_size = json_decode($h5_font_size, true); }
            if (is_string($h5_line_height)) { $h5_line_height = json_decode($h5_line_height, true); }
            if (is_string($h6_font_size)) { $h6_font_size = json_decode($h6_font_size, true); }
            if (is_string($h6_line_height)) { $h6_line_height = json_decode($h6_line_height, true); }

            // Ensure we have arrays with fallbacks
            if (!is_array($body_font_size)) {
                $body_font_size = array('desktop' => 16, 'tablet' => 15, 'mobile' => 14);
            }
            if (!is_array($body_line_height)) {
                $body_line_height = array('desktop' => 1.6, 'tablet' => 1.6, 'mobile' => 1.5);
            }
            if (!is_array($body_letter_spacing)) {
                $body_letter_spacing = array('desktop' => 0, 'tablet' => 0, 'mobile' => 0);
            }
            if (!is_array($heading_line_height)) {
                $heading_line_height = array('desktop' => 1.2, 'tablet' => 1.2, 'mobile' => 1.3);
            }
            if (!is_array($menu_font_size)) {
                $menu_font_size = array('desktop' => 16, 'tablet' => 15, 'mobile' => 14);
            }
            if (!is_array($page_title_font_size)) {
                $page_title_font_size = array('desktop' => 36, 'tablet' => 32, 'mobile' => 28);
            }
            if (!is_array($page_content_font_size)) {
                $page_content_font_size = array('desktop' => 16, 'tablet' => 15, 'mobile' => 14);
            }
            if (!is_array($button_font_size)) {
                $button_font_size = array('desktop' => 14, 'tablet' => 13, 'mobile' => 12);
            }
            if (!is_array($blog_title_font_size)) {
                $blog_title_font_size = array('desktop' => 28, 'tablet' => 24, 'mobile' => 20);
            }

            // Desktop Typography
            if (!empty($body_font_size['desktop'])) {
                $css .= 'body, body.pawfect-body, body.wp-customizer {';
                $css .= 'font-size: ' . intval($body_font_size['desktop']) . 'px !important;';
                if (!empty($body_line_height['desktop'])) {
                    $css .= 'line-height: ' . floatval($body_line_height['desktop']) . ' !important;';
                }
                if (!empty($body_letter_spacing['desktop']) && $body_letter_spacing['desktop'] != 0) {
                    $css .= 'letter-spacing: ' . floatval($body_letter_spacing['desktop']) . 'em !important;';
                }
                $css .= '}';
            }

            // Individual H1-H6 Typography - Desktop (excluding hero slider titles)

            // H1 Typography - Desktop
            $css .= 'h1:not(.pawfect-hero-title) {';
            if (!empty($h1_font_family)) { $css .= 'font-family: ' . $this->get_font_stack($h1_font_family) . ' !important;'; }
            if (!empty($h1_font_weight)) { $css .= 'font-weight: ' . esc_attr($h1_font_weight) . ' !important;'; }
            if (!empty($h1_font_size['desktop'])) { $css .= 'font-size: ' . intval($h1_font_size['desktop']) . 'px !important;'; }
            if (!empty($h1_line_height['desktop'])) { $css .= 'line-height: ' . floatval($h1_line_height['desktop']) . ' !important;'; }
            if (!empty($h1_letter_spacing) && $h1_letter_spacing != '0em') { $css .= 'letter-spacing: ' . esc_attr($h1_letter_spacing) . ' !important;'; }
            if (!empty($h1_text_transform) && $h1_text_transform != 'none') { $css .= 'text-transform: ' . esc_attr($h1_text_transform) . ' !important;'; }
            $css .= '}';

            // H2 Typography - Desktop
            $css .= 'h2:not(.pawfect-hero-title) {';
            if (!empty($h2_font_family)) { $css .= 'font-family: ' . $this->get_font_stack($h2_font_family) . ' !important;'; }
            if (!empty($h2_font_weight)) { $css .= 'font-weight: ' . esc_attr($h2_font_weight) . ' !important;'; }
            if (!empty($h2_font_size['desktop'])) { $css .= 'font-size: ' . intval($h2_font_size['desktop']) . 'px !important;'; }
            if (!empty($h2_line_height['desktop'])) { $css .= 'line-height: ' . floatval($h2_line_height['desktop']) . ' !important;'; }
            if (!empty($h2_letter_spacing) && $h2_letter_spacing != '0em') { $css .= 'letter-spacing: ' . esc_attr($h2_letter_spacing) . ' !important;'; }
            if (!empty($h2_text_transform) && $h2_text_transform != 'none') { $css .= 'text-transform: ' . esc_attr($h2_text_transform) . ' !important;'; }
            $css .= '}';

            // H3 Typography - Desktop
            $css .= 'h3:not(.pawfect-hero-title) {';
            if (!empty($h3_font_family)) { $css .= 'font-family: ' . $this->get_font_stack($h3_font_family) . ' !important;'; }
            if (!empty($h3_font_weight)) { $css .= 'font-weight: ' . esc_attr($h3_font_weight) . ' !important;'; }
            if (!empty($h3_font_size['desktop'])) { $css .= 'font-size: ' . intval($h3_font_size['desktop']) . 'px !important;'; }
            if (!empty($h3_line_height['desktop'])) { $css .= 'line-height: ' . floatval($h3_line_height['desktop']) . ' !important;'; }
            if (!empty($h3_letter_spacing) && $h3_letter_spacing != '0em') { $css .= 'letter-spacing: ' . esc_attr($h3_letter_spacing) . ' !important;'; }
            if (!empty($h3_text_transform) && $h3_text_transform != 'none') { $css .= 'text-transform: ' . esc_attr($h3_text_transform) . ' !important;'; }
            $css .= '}';

            // H4 Typography - Desktop
            $css .= 'h4:not(.pawfect-hero-title):not(.widget_shopping_cart h4):not(.woocommerce-mini-cart h4):not(.cart_list h4) {';
            if (!empty($h4_font_family)) { $css .= 'font-family: ' . $this->get_font_stack($h4_font_family) . ' !important;'; }
            if (!empty($h4_font_weight)) { $css .= 'font-weight: ' . esc_attr($h4_font_weight) . ' !important;'; }
            if (!empty($h4_font_size['desktop'])) { $css .= 'font-size: ' . intval($h4_font_size['desktop']) . 'px !important;'; }
            if (!empty($h4_line_height['desktop'])) { $css .= 'line-height: ' . floatval($h4_line_height['desktop']) . ' !important;'; }
            if (!empty($h4_letter_spacing) && $h4_letter_spacing != '0em') { $css .= 'letter-spacing: ' . esc_attr($h4_letter_spacing) . ' !important;'; }
            if (!empty($h4_text_transform) && $h4_text_transform != 'none') { $css .= 'text-transform: ' . esc_attr($h4_text_transform) . ' !important;'; }
            $css .= '}';

            // H5 Typography - Desktop
            $css .= 'h5:not(.pawfect-hero-title) {';
            if (!empty($h5_font_family)) { $css .= 'font-family: ' . $this->get_font_stack($h5_font_family) . ' !important;'; }
            if (!empty($h5_font_weight)) { $css .= 'font-weight: ' . esc_attr($h5_font_weight) . ' !important;'; }
            if (!empty($h5_font_size['desktop'])) { $css .= 'font-size: ' . intval($h5_font_size['desktop']) . 'px !important;'; }
            if (!empty($h5_line_height['desktop'])) { $css .= 'line-height: ' . floatval($h5_line_height['desktop']) . ' !important;'; }
            if (!empty($h5_letter_spacing) && $h5_letter_spacing != '0em') { $css .= 'letter-spacing: ' . esc_attr($h5_letter_spacing) . ' !important;'; }
            if (!empty($h5_text_transform) && $h5_text_transform != 'none') { $css .= 'text-transform: ' . esc_attr($h5_text_transform) . ' !important;'; }
            $css .= '}';

            // H6 Typography - Desktop
            $css .= 'h6:not(.pawfect-hero-title) {';
            if (!empty($h6_font_family)) { $css .= 'font-family: ' . $this->get_font_stack($h6_font_family) . ' !important;'; }
            if (!empty($h6_font_weight)) { $css .= 'font-weight: ' . esc_attr($h6_font_weight) . ' !important;'; }
            if (!empty($h6_font_size['desktop'])) { $css .= 'font-size: ' . intval($h6_font_size['desktop']) . 'px !important;'; }
            if (!empty($h6_line_height['desktop'])) { $css .= 'line-height: ' . floatval($h6_line_height['desktop']) . ' !important;'; }
            if (!empty($h6_letter_spacing) && $h6_letter_spacing != '0em') { $css .= 'letter-spacing: ' . esc_attr($h6_letter_spacing) . ' !important;'; }
            if (!empty($h6_text_transform) && $h6_text_transform != 'none') { $css .= 'text-transform: ' . esc_attr($h6_text_transform) . ' !important;'; }
            $css .= '}';

            // Heading Line Height - Desktop
            if (!empty($heading_line_height['desktop'])) {
                $css .= 'h1, h2, h3, h4, h5, h6, .pawfect-heading, .heading {';
                $css .= 'line-height: ' . floatval($heading_line_height['desktop']) . ' !important;';
                $css .= '}';
            }

            // Menu Font Size - Desktop
            if (!empty($menu_font_size['desktop'])) {
                $css .= '.pawfect-primary-nav-menu a, .pawfect-nav-menu a, .primary-navigation a, .main-navigation a {';
                $css .= 'font-size: ' . intval($menu_font_size['desktop']) . 'px !important;';
                $css .= '}';
            }

            if (!empty($page_title_font_size['desktop'])) {
                $css .= '.pawfect-page-title-heading, .pawfect-page-title, .page-title, .entry-title, h1.page-title, h1.entry-title {';
                $css .= 'font-size: ' . intval($page_title_font_size['desktop']) . 'px !important;';
                $css .= '}';
            }

            if (!empty($page_content_font_size['desktop'])) {
                $css .= '.pawfect-page-content, .page-content, .entry-content, .pawfect-content p {';
                $css .= 'font-size: ' . intval($page_content_font_size['desktop']) . 'px !important;';
                $css .= '}';
            }

            // Button Font Size - Desktop
            if (!empty($button_font_size['desktop'])) {
                $css .= '.pawfect-btn, .btn, button, input[type="submit"], input[type="button"], .wp-block-button__link, .woocommerce button, .woocommerce .button, .woocommerce input.button {';
                $css .= 'font-size: ' . intval($button_font_size['desktop']) . 'px !important;';
                $css .= '}';
            }

            // Blog Title Font Size - Desktop
            if (!empty($blog_title_font_size['desktop'])) {
                $css .= '.pawfect-post-title, .pawfect-blog-post .pawfect-post-title, .pawfect-blog-post h2, .pawfect-post-card h2, .pawfect-post-card h3, .entry-title, .post-title, .blog .entry-title, .archive .entry-title {';
                $css .= 'font-size: ' . intval($blog_title_font_size['desktop']) . 'px !important;';
                $css .= '}';
            }

            // Tablet Responsive Styles
            $css .= '@media (max-width: 1024px) {';

            if (!empty($body_font_size['tablet'])) {
                $css .= 'body, body.pawfect-body, body.wp-customizer {';
                $css .= 'font-size: ' . intval($body_font_size['tablet']) . 'px !important;';
                if (!empty($body_line_height['tablet'])) {
                    $css .= 'line-height: ' . floatval($body_line_height['tablet']) . ' !important;';
                }
                if (!empty($body_letter_spacing['tablet']) && $body_letter_spacing['tablet'] != 0) {
                    $css .= 'letter-spacing: ' . floatval($body_letter_spacing['tablet']) . 'em !important;';
                }
                $css .= '}';
            }

            // Individual H1-H6 Typography - Tablet (responsive properties only)
            if (!empty($h1_font_size['tablet'])) { $css .= 'h1:not(.pawfect-hero-title) { font-size: ' . intval($h1_font_size['tablet']) . 'px !important; }'; }
            if (!empty($h1_line_height['tablet'])) { $css .= 'h1:not(.pawfect-hero-title) { line-height: ' . floatval($h1_line_height['tablet']) . ' !important; }'; }
            if (!empty($h2_font_size['tablet'])) { $css .= 'h2:not(.pawfect-hero-title) { font-size: ' . intval($h2_font_size['tablet']) . 'px !important; }'; }
            if (!empty($h2_line_height['tablet'])) { $css .= 'h2:not(.pawfect-hero-title) { line-height: ' . floatval($h2_line_height['tablet']) . ' !important; }'; }
            if (!empty($h3_font_size['tablet'])) { $css .= 'h3:not(.pawfect-hero-title) { font-size: ' . intval($h3_font_size['tablet']) . 'px !important; }'; }
            if (!empty($h3_line_height['tablet'])) { $css .= 'h3:not(.pawfect-hero-title) { line-height: ' . floatval($h3_line_height['tablet']) . ' !important; }'; }
            if (!empty($h4_font_size['tablet'])) { $css .= 'h4:not(.pawfect-hero-title):not(.widget_shopping_cart h4):not(.woocommerce-mini-cart h4):not(.cart_list h4) { font-size: ' . intval($h4_font_size['tablet']) . 'px !important; }'; }
            if (!empty($h4_line_height['tablet'])) { $css .= 'h4:not(.pawfect-hero-title):not(.widget_shopping_cart h4):not(.woocommerce-mini-cart h4):not(.cart_list h4) { line-height: ' . floatval($h4_line_height['tablet']) . ' !important; }'; }
            if (!empty($h5_font_size['tablet'])) { $css .= 'h5:not(.pawfect-hero-title) { font-size: ' . intval($h5_font_size['tablet']) . 'px !important; }'; }
            if (!empty($h5_line_height['tablet'])) { $css .= 'h5:not(.pawfect-hero-title) { line-height: ' . floatval($h5_line_height['tablet']) . ' !important; }'; }
            if (!empty($h6_font_size['tablet'])) { $css .= 'h6:not(.pawfect-hero-title) { font-size: ' . intval($h6_font_size['tablet']) . 'px !important; }'; }
            if (!empty($h6_line_height['tablet'])) { $css .= 'h6:not(.pawfect-hero-title) { line-height: ' . floatval($h6_line_height['tablet']) . ' !important; }'; }

            if (!empty($heading_line_height['tablet'])) {
                $css .= 'h1, h2, h3, h4, h5, h6, .pawfect-heading, .heading {';
                $css .= 'line-height: ' . floatval($heading_line_height['tablet']) . ' !important;';
                $css .= '}';
            }

            if (!empty($menu_font_size['tablet'])) {
                $css .= '.pawfect-primary-nav-menu a, .pawfect-nav-menu a, .primary-navigation a, .main-navigation a {';
                $css .= 'font-size: ' . intval($menu_font_size['tablet']) . 'px !important;';
                $css .= '}';
            }

            if (!empty($page_title_font_size['tablet'])) {
                $css .= '.pawfect-page-title-heading, .pawfect-page-title, .page-title, .entry-title, h1.page-title, h1.entry-title {';
                $css .= 'font-size: ' . intval($page_title_font_size['tablet']) . 'px !important;';
                $css .= '}';
            }

            if (!empty($page_content_font_size['tablet'])) {
                $css .= '.pawfect-page-content, .page-content, .entry-content, .pawfect-content p {';
                $css .= 'font-size: ' . intval($page_content_font_size['tablet']) . 'px !important;';
                $css .= '}';
            }

            // Button Font Size - Tablet
            if (!empty($button_font_size['tablet'])) {
                $css .= '.pawfect-btn, .btn, button, input[type="submit"], input[type="button"], .wp-block-button__link, .woocommerce button, .woocommerce .button, .woocommerce input.button {';
                $css .= 'font-size: ' . intval($button_font_size['tablet']) . 'px !important;';
                $css .= '}';
            }

            // Blog Title Font Size - Tablet
            if (!empty($blog_title_font_size['tablet'])) {
                $css .= '.pawfect-post-title, .pawfect-blog-post .pawfect-post-title, .pawfect-blog-post h2, .pawfect-post-card h2, .pawfect-post-card h3, .entry-title, .post-title, .blog .entry-title, .archive .entry-title {';
                $css .= 'font-size: ' . intval($blog_title_font_size['tablet']) . 'px !important;';
                $css .= '}';
            }

            $css .= '}'; // End tablet media query

            // Mobile Responsive Styles
            $css .= '@media (max-width: 768px) {';

            if (!empty($body_font_size['mobile'])) {
                $css .= 'body, body.pawfect-body, body.wp-customizer {';
                $css .= 'font-size: ' . intval($body_font_size['mobile']) . 'px !important;';
                if (!empty($body_line_height['mobile'])) {
                    $css .= 'line-height: ' . floatval($body_line_height['mobile']) . ' !important;';
                }
                if (!empty($body_letter_spacing['mobile']) && $body_letter_spacing['mobile'] != 0) {
                    $css .= 'letter-spacing: ' . floatval($body_letter_spacing['mobile']) . 'em !important;';
                }
                $css .= '}';
            }

            // Individual H1-H6 Typography - Mobile (responsive properties only)
            if (!empty($h1_font_size['mobile'])) { $css .= 'h1:not(.pawfect-hero-title) { font-size: ' . intval($h1_font_size['mobile']) . 'px !important; }'; }
            if (!empty($h1_line_height['mobile'])) { $css .= 'h1:not(.pawfect-hero-title) { line-height: ' . floatval($h1_line_height['mobile']) . ' !important; }'; }
            if (!empty($h2_font_size['mobile'])) { $css .= 'h2:not(.pawfect-hero-title) { font-size: ' . intval($h2_font_size['mobile']) . 'px !important; }'; }
            if (!empty($h2_line_height['mobile'])) { $css .= 'h2:not(.pawfect-hero-title) { line-height: ' . floatval($h2_line_height['mobile']) . ' !important; }'; }
            if (!empty($h3_font_size['mobile'])) { $css .= 'h3:not(.pawfect-hero-title) { font-size: ' . intval($h3_font_size['mobile']) . 'px !important; }'; }
            if (!empty($h3_line_height['mobile'])) { $css .= 'h3:not(.pawfect-hero-title) { line-height: ' . floatval($h3_line_height['mobile']) . ' !important; }'; }
            if (!empty($h4_font_size['mobile'])) { $css .= 'h4:not(.pawfect-hero-title):not(.widget_shopping_cart h4):not(.woocommerce-mini-cart h4):not(.cart_list h4) { font-size: ' . intval($h4_font_size['mobile']) . 'px !important; }'; }
            if (!empty($h4_line_height['mobile'])) { $css .= 'h4:not(.pawfect-hero-title):not(.widget_shopping_cart h4):not(.woocommerce-mini-cart h4):not(.cart_list h4) { line-height: ' . floatval($h4_line_height['mobile']) . ' !important; }'; }
            if (!empty($h5_font_size['mobile'])) { $css .= 'h5:not(.pawfect-hero-title) { font-size: ' . intval($h5_font_size['mobile']) . 'px !important; }'; }
            if (!empty($h5_line_height['mobile'])) { $css .= 'h5:not(.pawfect-hero-title) { line-height: ' . floatval($h5_line_height['mobile']) . ' !important; }'; }
            if (!empty($h6_font_size['mobile'])) { $css .= 'h6:not(.pawfect-hero-title) { font-size: ' . intval($h6_font_size['mobile']) . 'px !important; }'; }
            if (!empty($h6_line_height['mobile'])) { $css .= 'h6:not(.pawfect-hero-title) { line-height: ' . floatval($h6_line_height['mobile']) . ' !important; }'; }

            if (!empty($heading_line_height['mobile'])) {
                $css .= 'h1, h2, h3, h4, h5, h6, .pawfect-heading, .heading {';
                $css .= 'line-height: ' . floatval($heading_line_height['mobile']) . ' !important;';
                $css .= '}';
            }

            if (!empty($menu_font_size['mobile'])) {
                $css .= '.pawfect-primary-nav-menu a, .pawfect-nav-menu a, .primary-navigation a, .main-navigation a {';
                $css .= 'font-size: ' . intval($menu_font_size['mobile']) . 'px !important;';
                $css .= '}';
            }

            if (!empty($page_title_font_size['mobile'])) {
                $css .= '.pawfect-page-title-heading, .pawfect-page-title, .page-title, .entry-title, h1.page-title, h1.entry-title {';
                $css .= 'font-size: ' . intval($page_title_font_size['mobile']) . 'px !important;';
                $css .= '}';
            }

            if (!empty($page_content_font_size['mobile'])) {
                $css .= '.pawfect-page-content, .page-content, .entry-content, .pawfect-content p {';
                $css .= 'font-size: ' . intval($page_content_font_size['mobile']) . 'px !important;';
                $css .= '}';
            }

            // Button Font Size - Mobile
            if (!empty($button_font_size['mobile'])) {
                $css .= '.pawfect-btn, .btn, button, input[type="submit"], input[type="button"], .wp-block-button__link, .woocommerce button, .woocommerce .button, .woocommerce input.button {';
                $css .= 'font-size: ' . intval($button_font_size['mobile']) . 'px !important;';
                $css .= '}';
            }

            // Blog Title Font Size - Mobile
            if (!empty($blog_title_font_size['mobile'])) {
                $css .= '.pawfect-post-title, .pawfect-blog-post .pawfect-post-title, .pawfect-blog-post h2, .pawfect-post-card h2, .pawfect-post-card h3, .entry-title, .post-title, .blog .entry-title, .archive .entry-title {';
                $css .= 'font-size: ' . intval($blog_title_font_size['mobile']) . 'px !important;';
                $css .= '}';
            }

            $css .= '}'; // End mobile media query

            $css .= '.pawfect-btn { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 0.5rem; flex-wrap: nowrap !important; }';
            return $css;
        }

        /**
         * Generate Responsive Front Page CSS
         */
        private function generate_responsive_frontpage_css() {
            $css = '';

            // Add debug comment
            $css .= '/* Responsive Front Page CSS */' . "\n";

            // Get responsive front page settings
            $hero_title_font_size = get_theme_mod('pawfect_main_slider_title_font_size', json_encode(array(
                'desktop' => 92,
                'tablet' => 72,
                'mobile' => 48,
            )));

            $press_logo_size = get_theme_mod('pawfect_press_mentions_logo_height', json_encode(array(
                'desktop' => 32,
                'tablet' => 28,
                'mobile' => 24,
            )));

            $press_logo_gap = get_theme_mod('pawfect_press_mentions_gap', json_encode(array(
                'desktop' => 64,
                'tablet' => 48,
                'mobile' => 32,
            )));

            // Parse JSON strings to arrays
            if (is_string($hero_title_font_size)) {
                $hero_title_font_size = json_decode($hero_title_font_size, true);
            }
            if (is_string($press_logo_size)) {
                $press_logo_size = json_decode($press_logo_size, true);
            }
            if (is_string($press_logo_gap)) {
                $press_logo_gap = json_decode($press_logo_gap, true);
            }

            // Ensure we have arrays with fallbacks
            if (!is_array($hero_title_font_size)) {
                $hero_title_font_size = array('desktop' => 92, 'tablet' => 72, 'mobile' => 48);
            }
            if (!is_array($press_logo_size)) {
                $press_logo_size = array('desktop' => 32, 'tablet' => 28, 'mobile' => 24);
            }
            if (!is_array($press_logo_gap)) {
                $press_logo_gap = array('desktop' => 64, 'tablet' => 48, 'mobile' => 32);
            }

            // Desktop Front Page Styles
            if (!empty($hero_title_font_size['desktop'])) {
                $css .= '.pawfect-hero-swiper .pawfect-hero-title, .pawfect-main-slider .pawfect-hero-title {';
                $css .= 'font-size: ' . intval($hero_title_font_size['desktop']) . 'px !important;';
                $css .= '}';
            }

            if (!empty($press_logo_size['desktop'])) {
                $css .= '.pawfect-press-mentions img, .pawfect-press-mentions-container img {';
                $css .= 'height: ' . intval($press_logo_size['desktop']) . 'px !important;';
                $css .= 'width: auto !important;';
                $css .= '}';
            }

            if (!empty($press_logo_gap['desktop'])) {
                $css .= '.pawfect-press-mentions-container, .pawfect-press-mentions {';
                $css .= 'gap: ' . intval($press_logo_gap['desktop']) . 'px !important;';
                $css .= '}';
            }

            // Tablet Front Page Styles
            $css .= '@media (max-width: 1024px) {';

            if (!empty($hero_title_font_size['tablet'])) {
                $css .= '.pawfect-hero-swiper .pawfect-hero-title, .pawfect-main-slider .pawfect-hero-title {';
                $css .= 'font-size: ' . intval($hero_title_font_size['tablet']) . 'px !important;';
                $css .= '}';
            }

            if (!empty($press_logo_size['tablet'])) {
                $css .= '.pawfect-press-mentions img, .pawfect-press-mentions-container img {';
                $css .= 'height: ' . intval($press_logo_size['tablet']) . 'px !important;';
                $css .= '}';
            }

            if (!empty($press_logo_gap['tablet'])) {
                $css .= '.pawfect-press-mentions-container, .pawfect-press-mentions {';
                $css .= 'gap: ' . intval($press_logo_gap['tablet']) . 'px !important;';
                $css .= '}';
            }

            $css .= '}'; // End tablet media query

            // Mobile Front Page Styles
            $css .= '@media (max-width: 768px) {';

            if (!empty($hero_title_font_size['mobile'])) {
                $css .= '.pawfect-hero-swiper .pawfect-hero-title, .pawfect-main-slider .pawfect-hero-title {';
                $css .= 'font-size: ' . intval($hero_title_font_size['mobile']) . 'px !important;';
                $css .= '}';
            }

            if (!empty($press_logo_size['mobile'])) {
                $css .= '.pawfect-press-mentions img, .pawfect-press-mentions-container img {';
                $css .= 'height: ' . intval($press_logo_size['mobile']) . 'px !important;';
                $css .= '}';
            }

            if (!empty($press_logo_gap['mobile'])) {
                $css .= '.pawfect-press-mentions-container, .pawfect-press-mentions {';
                $css .= 'gap: ' . intval($press_logo_gap['mobile']) . 'px !important;';
                $css .= '}';
            }

            $css .= '}'; // End mobile media query

            $css .= '.pawfect-btn { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 0.5rem; flex-wrap: nowrap !important; }';
            return $css;
        }

        /**
         * Generate Responsive Page Header CSS
         */
        private function generate_responsive_page_header_css() {
            $css = '';

            // Add debug comment
            $css .= '/* Responsive Page Header CSS */' . "\n";

            // Get responsive page header settings
            $page_header_height = get_theme_mod('pawfect_page_header_height', json_encode(array(
                'desktop' => 300,
                'tablet' => 250,
                'mobile' => 200,
            )));



            // Parse JSON strings to arrays
            if (is_string($page_header_height)) {
                $page_header_height = json_decode($page_header_height, true);
            }

            // Ensure we have arrays with fallbacks
            if (!is_array($page_header_height)) {
                $page_header_height = array('desktop' => 300, 'tablet' => 250, 'mobile' => 200);
            }

            // Desktop Page Header Styles
            if (!empty($page_header_height['desktop'])) {
                $css .= '.pawfect-page-header {';
                $css .= 'min-height: ' . intval($page_header_height['desktop']) . 'px !important;';
                $css .= '}';
            }

            // Tablet Page Header Styles
            $css .= '@media (max-width: 1024px) {';

            if (!empty($page_header_height['tablet'])) {
                $css .= '.pawfect-page-header {';
                $css .= 'min-height: ' . intval($page_header_height['tablet']) . 'px !important;';
                $css .= '}';
            }

            $css .= '}'; // End tablet media query

            // Mobile Page Header Styles
            $css .= '@media (max-width: 768px) {';

            if (!empty($page_header_height['mobile'])) {
                $css .= '.pawfect-page-header {';
                $css .= 'min-height: ' . intval($page_header_height['mobile']) . 'px !important;';
                $css .= '}';
            }

            $css .= '}'; // End mobile media query

            // Instagram Gallery Section - Minimal Styling
            $css .= '/* Instagram Gallery Minimal Styles */';
            $css .= '.pawfect-instagram-gallery {';
            $css .= 'background: transparent !important;';
            $css .= 'border: none !important;';
            $css .= 'box-shadow: none !important;';
            $css .= 'border-radius: 0 !important;';
            $css .= '}';

            // Instagram Gallery Container
            $css .= '.pawfect-instagram-gallery .pawfect-container {';
            $css .= 'padding: var(--pawfect-space-lg) !important;';
            $css .= '}';

            // Instagram Gallery Heading Section - Custom Background
            $css .= '.pawfect-instagram-heading.pawfect-group.pawfect-bg-white.pawfect-bg-opacity-90.pawfect-backdrop-blur-lg.pawfect-p-8.pawfect-rounded-2xl.pawfect-text-center.pawfect-border.pawfect-border-white.pawfect-border-opacity-50 {';
            $css .= 'background: #f9f3f166 !important;';
            $css .= '}';

            // Instagram Gallery Heading Text - White Color
            $css .= '.pawfect-instagram-heading h2, .pawfect-instagram-heading .pawfect-section-title {';
            $css .= 'color: white !important;';
            $css .= 'font-weight: 700 !important;';
            $css .= 'margin-bottom: var(--pawfect-space-md) !important;';
            $css .= 'text-align: center !important;';
            $css .= '}';

            // Ensure color variables are defined for Instagram Gallery section
            if (!isset($text_color) || empty($text_color)) {
                $text_color = get_theme_mod( 'pawfect_text_color', '#6B7280' );
            }
            if (!isset($primary_color) || empty($primary_color)) {
                $primary_color = get_theme_mod( 'pawfect_primary_color', '#F4A259' );
            }

            // Instagram Gallery Heading Description - White Color
            $css .= '.pawfect-instagram-heading p, .pawfect-instagram-heading .pawfect-section-description {';
            $css .= 'color: white !important;';
            $css .= 'opacity: 0.9 !important;';
            $css .= 'text-align: center !important;';
            $css .= '}';

            // Instagram Gallery Title (fallback for other sections)
            $css .= '.pawfect-instagram-gallery h2:not(.pawfect-instagram-heading h2), .pawfect-instagram-gallery .pawfect-section-title:not(.pawfect-instagram-heading .pawfect-section-title) {';
            $css .= 'color: ' . $text_color . ' !important;';
            $css .= 'font-weight: 700 !important;';
            $css .= 'margin-bottom: var(--pawfect-space-md) !important;';
            $css .= 'text-align: center !important;';
            $css .= '}';

            // Instagram Gallery Description (fallback for other sections)
            $css .= '.pawfect-instagram-gallery p:not(.pawfect-instagram-heading p), .pawfect-instagram-gallery .pawfect-section-description:not(.pawfect-instagram-heading .pawfect-section-description) {';
            $css .= 'color: ' . $text_color . ' !important;';
            $css .= 'opacity: 0.8 !important;';
            $css .= 'text-align: center !important;';
            $css .= 'margin-bottom: var(--pawfect-space-xl) !important;';
            $css .= '}';

            // Instagram Gallery - Fix Container to Use Grid Layout
            $css .= '.pawfect-instagram-section .pawfect-flex.pawfect-w-full.pawfect-gap-2 {';
            $css .= 'display: grid !important;';
            $css .= 'grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important;';
            $css .= 'gap: 16px !important;';
            $css .= 'width: 100% !important;';
            $css .= 'max-width: 100% !important;';
            $css .= 'overflow: visible !important;';
            $css .= '}';

            // Instagram Gallery Items - Remove Fixed Width and Enable Grid
            $css .= '.pawfect-instagram-section .pawfect-instagram-item {';
            $css .= 'width: auto !important;'; // Remove fixed width
            $css .= 'flex: none !important;'; // Remove flex properties
            $css .= 'background: transparent !important;';
            $css .= 'border: none !important;';
            $css .= 'box-shadow: none !important;';
            $css .= 'border-radius: var(--pawfect-radius-md) !important;';
            $css .= 'overflow: hidden !important;';
            $css .= 'transition: all 0.3s ease !important;';
            $css .= 'height: auto !important;';
            $css .= 'aspect-ratio: 1 / 1 !important;';
            $css .= 'position: relative !important;';
            $css .= '}';

            // Override Tailwind fixed width classes
            $css .= '.pawfect-instagram-section .pawfect-instagram-item.pawfect-w-1\/4 {';
            $css .= 'width: auto !important;';
            $css .= '}';

            // Instagram Gallery Item Hover Effects
            $css .= '.pawfect-instagram-section .pawfect-instagram-item:hover {';
            $css .= 'transform: translateY(-2px) !important;';
            $css .= 'box-shadow: var(--pawfect-shadow-soft) !important;';
            $css .= '}';

            // Instagram Gallery Images
            $css .= '.pawfect-instagram-gallery .pawfect-instagram-item img {';
            $css .= 'width: 100% !important;';
            $css .= 'height: 100% !important;';
            $css .= 'object-fit: cover !important;';
            $css .= 'transition: transform 0.3s ease !important;';
            $css .= 'border-radius: var(--pawfect-radius-md) !important;';
            $css .= '}';

            // Instagram Gallery Image Hover Effects
            $css .= '.pawfect-instagram-gallery .pawfect-instagram-item:hover img {';
            $css .= 'transform: scale(1.05) !important;';
            $css .= '}';

            // Instagram Gallery Overlay
            $css .= '.pawfect-instagram-gallery .pawfect-instagram-overlay {';
            $css .= 'background: rgba(0, 0, 0, 0.4) !important;';
            $css .= 'backdrop-filter: blur(2px) !important;';
            $css .= 'transition: all 0.3s ease !important;';
            $css .= '}';

            // Instagram Gallery Follow Button
            $css .= '.pawfect-instagram-gallery .pawfect-instagram-follow-btn {';
            $css .= 'background: ' . $primary_color . ' !important;';
            $css .= 'color: white !important;';
            $css .= 'border: none !important;';
            $css .= 'border-radius: var(--pawfect-radius-lg) !important;';
            $css .= 'padding: var(--pawfect-space-sm) var(--pawfect-space-lg) !important;';
            $css .= 'font-weight: 600 !important;';
            $css .= 'transition: all 0.3s ease !important;';
            $css .= 'box-shadow: var(--pawfect-shadow-subtle) !important;';
            $css .= '}';

            // Instagram Gallery Follow Button Hover
            $css .= '.pawfect-instagram-gallery .pawfect-instagram-follow-btn:hover {';
            $css .= 'transform: translateY(-1px) !important;';
            $css .= 'box-shadow: var(--pawfect-shadow-soft) !important;';
            $css .= 'background: ' . $this->adjust_brightness($primary_color, -10) . ' !important;';
            $css .= '}';

            // Instagram Gallery Responsive Adjustments

            // Tablet and smaller - adjust minimum size and gap
            $css .= '@media (max-width: 768px) {';
            $css .= '.pawfect-instagram-section .pawfect-flex.pawfect-w-full.pawfect-gap-2 {';
            $css .= 'grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)) !important;';
            $css .= 'gap: 12px !important;';
            $css .= '}';
            $css .= '.pawfect-instagram-section {';
            $css .= 'padding: var(--pawfect-space-md) !important;';
            $css .= '}';
            $css .= '}';

            // Mobile - smaller minimum size and gap
            $css .= '@media (max-width: 480px) {';
            $css .= '.pawfect-instagram-section .pawfect-flex.pawfect-w-full.pawfect-gap-2 {';
            $css .= 'grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)) !important;';
            $css .= 'gap: 8px !important;';
            $css .= '}';
            $css .= '.pawfect-instagram-section {';
            $css .= 'padding: var(--pawfect-space-sm) !important;';
            $css .= '}';
            $css .= '.pawfect-instagram-section .pawfect-instagram-item {';
            $css .= 'border-radius: var(--pawfect-radius-sm) !important;';
            $css .= '}';
            $css .= '.pawfect-instagram-section .pawfect-instagram-item img {';
            $css .= 'border-radius: var(--pawfect-radius-sm) !important;';
            $css .= '}';
            $css .= '}';

            // Cart Dropdown Styling
            $css .= '.pawfect-cart-dropdown {';
            $css .= 'max-height: 80vh !important;';
            $css .= 'overflow-y: auto !important;';
            $css .= '}';

            // Cart dropdown responsive width
            $css .= '@media (max-width: 480px) {';
            $css .= '.pawfect-cart-dropdown {';
            $css .= 'width: 90vw !important;';
            $css .= 'right: -20px !important;';
            $css .= '}';
            $css .= '}';

            // Cart dropdown items styling
            $css .= '.pawfect-cart-dropdown-items img {';
            $css .= 'object-fit: cover !important;';
            $css .= 'border-radius: var(--pawfect-radius-md) !important;';
            $css .= '}';

            // Cart dropdown hover effects
            $css .= '.pawfect-cart-dropdown-items a:hover {';
            $css .= 'background-color: var(--pawfect-background-light, #f9f9f9) !important;';
            $css .= '}';

            // Remove button styling - Always visible, inline positioning
            $css .= '.pawfect-remove-cart-item {';
            $css .= 'background-color: #f3f4f6 !important;';
            $css .= 'border-radius: 50% !important;';
            $css .= 'padding: 5px !important;';
            $css .= 'color: #4b5563 !important;';
            $css .= 'transition: all 0.3s ease !important;';
            $css .= 'border: none !important;';
            $css .= 'cursor: pointer !important;';
            $css .= 'margin-left: 8px !important;'; 
             $css .= 'margin-top: -24px !important;'; 
            $css .= 'flex-shrink: 0 !important;';
            $css .= '}';

            $css .= '.pawfect-remove-cart-item:hover {';
            $css .= 'background-color: #fef2f2 !important;';
            $css .= 'color: #ef4444 !important;';
            $css .= 'transform: scale(1.05) rotate(180deg) !important;';
            $css .= '}';

            // Cart trigger button styling
            $css .= '.pawfect-cart-trigger {';
            $css .= 'background: none !important;';
            $css .= 'border: none !important;';
            $css .= 'cursor: pointer !important;';
            $css .= 'padding: 0 !important;';
            $css .= 'transition: all 0.3s ease !important;';
            $css .= '}';

            $css .= '.pawfect-cart-trigger:hover {';
            $css .= 'transform: scale(1.05) !important;';
            $css .= '}';

            // Wishlist Button Styling - Use pawfect-bg-secondary class
            $css .= '.pawfect-wishlist-btn {';
            $css .= 'border: none !important;';
            $css .= 'cursor: pointer !important;';
            $css .= 'transition: all 0.3s ease !important;';
            $css .= '}';

            // Ensure SVG icons are white on secondary background
            $css .= '.pawfect-bg-secondary .pawfect-wishlist-btn svg,';
            $css .= '.pawfect-wishlist-btn.pawfect-bg-secondary svg {';
            $css .= 'color: #ffffff !important;';
            $css .= 'stroke: #ffffff !important;';
            $css .= 'fill: none !important;';
            $css .= '}';

            // Active wishlist state
            $css .= '.pawfect-wishlist-btn.pawfect-wishlist-active svg {';
            $css .= 'fill: #ffffff !important;';
            $css .= 'stroke: #ffffff !important;';
            $css .= '}';

            $css .= '.pawfect-wishlist-btn:hover {';
            $css .= 'transform: scale(1.05) !important;';
            $css .= '}';

            $css .= '.pawfect-wishlist-btn.pawfect-wishlist-active:hover {';
            $css .= 'transform: scale(1.05) !important;';
            $css .= '}';

            // Wishlist icon hover effect
            $css .= '.pawfect-wishlist-icon:hover {';
            $css .= 'transform: scale(1.05) !important;';
            $css .= 'transition: all 0.3s ease !important;';
            $css .= '}';

            // Wishlist page styling
            $css .= '.pawfect-wishlist-item {';
            $css .= 'transition: all 0.3s ease !important;';
            $css .= '}';

            $css .= '.pawfect-wishlist-item:hover {';
            $css .= 'transform: translateY(-2px) !important;';
            $css .= '}';

            // Notification styling
            $css .= '.pawfect-notification {';
            $css .= 'font-weight: 500 !important;';
            $css .= 'font-size: 14px !important;';
            $css .= 'max-width: 300px !important;';
            $css .= '}';

            // Quick View Modal Styling
            $css .= '.pawfect-quick-view-container {';
            $css .= 'animation: pawfect-modal-fade-in 0.3s ease-out !important;';
            $css .= '}';

            $css .= '@keyframes pawfect-modal-fade-in {';
            $css .= 'from {';
            $css .= 'opacity: 0 !important;';
            $css .= 'transform: scale(0.95) !important;';
            $css .= '}';
            $css .= 'to {';
            $css .= 'opacity: 1 !important;';
            $css .= 'transform: scale(1) !important;';
            $css .= '}';
            $css .= '}';

            // Quick view button styling - Use pawfect-bg-secondary class
            $css .= '.pawfect-quick-view-btn {';
            $css .= 'border: none !important;';
            $css .= 'cursor: pointer !important;';
            $css .= 'transition: all 0.3s ease !important;';
            $css .= '}';

            // Ensure SVG icons are white on secondary background
            $css .= '.pawfect-bg-secondary .pawfect-quick-view-btn svg,';
            $css .= '.pawfect-quick-view-btn.pawfect-bg-secondary svg {';
            $css .= 'color: #ffffff !important;';
            $css .= 'stroke: #ffffff !important;';
            $css .= 'fill: none !important;';
            $css .= '}';

            $css .= '.pawfect-quick-view-btn:hover {';
            $css .= 'transform: scale(1.05) !important;';
            $css .= '}';

            // General SVG styling for buttons with secondary background
            $css .= '.pawfect-bg-secondary svg {';
            $css .= 'color: #ffffff !important;';
            $css .= 'stroke: currentColor !important;';
            $css .= 'fill: none !important;';
            $css .= '}';

            // Specific styling for wishlist heart when active
            $css .= '.pawfect-wishlist-active.pawfect-bg-secondary svg {';
            $css .= 'fill: #ffffff !important;';
            $css .= 'stroke: #ffffff !important;';
            $css .= '}';

            // Ensure text color is white on secondary background buttons
            $css .= '.pawfect-bg-secondary {';
            $css .= 'color: #ffffff !important;';
            $css .= '}';

            // Quick view image gallery
            $css .= '.pawfect-thumb-btn {';
            $css .= 'background: none !important;';
            $css .= 'cursor: pointer !important;';
            $css .= 'transition: all 0.3s ease !important;';
            $css .= '}';

            $css .= '.pawfect-thumb-btn img {';
            $css .= 'object-fit: cover !important;';
            $css .= 'width: 100% !important;';
            $css .= 'height: 100% !important;';
            $css .= '}';

            // Quantity controls
            $css .= '.pawfect-qty-btn {';
            $css .= 'background: none !important;';
            $css .= 'border: none !important;';
            $css .= 'cursor: pointer !important;';
            $css .= 'transition: all 0.3s ease !important;';
            $css .= 'font-weight: bold !important;';
            $css .= '}';

            $css .= '.pawfect-qty-input {';
            $css .= 'text-align: center !important;';
            $css .= '}';

            // Quick view responsive
            $css .= '@media (max-width: 768px) {';
            $css .= '.pawfect-quick-view-container {';
            $css .= 'margin: 1rem !important;';
            $css .= 'max-height: calc(100vh - 2rem) !important;';
            $css .= '}';
            $css .= '.pawfect-quick-view-content .pawfect-grid {';
            $css .= 'grid-template-columns: 1fr !important;';
            $css .= '}';
            $css .= '}';

            // Enhanced Add to Cart Button States
            $css .= '.pawfect-ajax-add-to-cart.pawfect-loading {';
            $css .= 'opacity: 0.7 !important;';
            $css .= 'cursor: not-allowed !important;';
            $css .= '}';

            $css .= '.pawfect-ajax-add-to-cart.pawfect-added-to-cart {';
            $css .= 'background-color: #10b981 !important;';
            $css .= 'border-color: #10b981 !important;';
            $css .= 'color: white !important;';
            $css .= '}';

            $css .= '.pawfect-ajax-add-to-cart.pawfect-added-to-cart:hover {';
            $css .= 'background-color: #059669 !important;';
            $css .= 'border-color: #059669 !important;';
            $css .= '}';

            // Product card hover enhancements
            $css .= '.pawfect-product-item:hover .pawfect-quick-view-btn,';
            $css .= '.pawfect-product-item:hover .pawfect-wishlist-btn {';
            $css .= 'transform: translateY(-2px) !important;';
            $css .= 'box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;';
            $css .= '}';

            // Loading animation for buttons
            $css .= '@keyframes pawfect-pulse {';
            $css .= '0%, 100% { opacity: 1; }';
            $css .= '50% { opacity: 0.5; }';
            $css .= '}';

            $css .= '.pawfect-loading {';
            $css .= 'animation: pawfect-pulse 1.5s ease-in-out infinite !important;';
            $css .= '}';

            $css .= '.pawfect-btn { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 0.5rem; flex-wrap: nowrap !important; }';
            return $css;
        }

        /**
         * Generate Footer Logo CSS
         */
        private function generate_footer_logo_css() {
            $css = '';

            // Get footer logo size settings
            $footer_logo_size = get_theme_mod('pawfect_footer_logo_size', json_encode(array(
                'desktop' => 64,
                'tablet' => 56,
                'mobile' => 48,
            )));

            // Parse JSON string to array
            if (is_string($footer_logo_size)) {
                $footer_logo_size = json_decode($footer_logo_size, true);
            }

            // Ensure we have array with fallbacks
            if (!is_array($footer_logo_size)) {
                $footer_logo_size = array('desktop' => 64, 'tablet' => 56, 'mobile' => 48);
            }

            // Footer Logo Size - Desktop
            if (!empty($footer_logo_size['desktop'])) {
                $css .= '.pawfect-footer-logo {';
                $css .= 'height: ' . intval($footer_logo_size['desktop']) . 'px !important;';
                $css .= 'width: auto !important;';
                $css .= 'max-width: 100% !important;';
                $css .= '}';
            }

            // Tablet Responsive Styles
            $css .= '@media (max-width: 1024px) {';
            if (!empty($footer_logo_size['tablet'])) {
                $css .= '.pawfect-footer-logo {';
                $css .= 'height: ' . intval($footer_logo_size['tablet']) . 'px !important;';
                $css .= '}';
            }
            $css .= '}'; // End tablet media query

            // Mobile Responsive Styles
            $css .= '@media (max-width: 768px) {';
            if (!empty($footer_logo_size['mobile'])) {
                $css .= '.pawfect-footer-logo {';
                $css .= 'height: ' . intval($footer_logo_size['mobile']) . 'px !important;';
                $css .= '}';
            }
            $css .= '}'; // End mobile media query

            $css .= '.pawfect-btn { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 0.5rem; flex-wrap: nowrap !important; }';
            return $css;
        }

        /**
         * Check if string is valid JSON
         */
        private function is_json($string) {
            if (!is_string($string)) {
                return false;
            }
            json_decode($string);
            return (json_last_error() == JSON_ERROR_NONE);
        }

        /**
         * Parse slider value (handles new JSON format, old array format, and raw values)
         */
        private function parse_slider_value($value, $default = 0) {
            if (is_string($value) && $this->is_json($value)) {
                $parsed = json_decode($value, true);
                return isset($parsed['desktop']) ? intval($parsed['desktop']) : $default;
            } elseif (is_array($value)) {
                return isset($value['slider']) ? intval($value['slider']) : intval($value['desktop'] ?? $default);
            }
            return is_numeric($value) ? intval($value) : $default;
        }
    }

endif;


