/* MCC Suite Pro — mcc-main.css */
/* Auto-extracted. PHP dynamic vars replaced with CSS custom properties. */

.mcc-wl-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:20px; margin-top:20px; }
        .mcc-wl-card { border:1px solid #e8e8e8; border-radius:12px; overflow:hidden; background:#fff; }
        .mcc-wl-card-img-wrap { position:relative; aspect-ratio:1; overflow:hidden; }
        .mcc-wl-card-img-wrap img { width:100%; height:100%; object-fit:cover; transition:.2s; }
        .mcc-wl-card-img-wrap:hover img { transform:scale(1.04); }
        .mcc-wl-remove-btn { position:absolute; top:8px; right:8px; background:rgba(255,255,255,.92); border:none; border-radius:50%; width:28px; height:28px; cursor:pointer; font-size:12px; display:flex; align-items:center; justify-content:center; color:#e74c3c; }
        .mcc-wl-card-info { padding:12px 12px 0; }
        .mcc-wl-card-name { font-size:13px; font-weight:500; color:#1a1a1a; text-decoration:none; display:block; margin-bottom:4px; }
        .mcc-wl-card-price { font-size:13px; color:#1a1a1a; font-weight:600; }
        .mcc-wl-card-actions { padding:10px 12px 12px; }
        .mcc-wl-atc-btn { width:100%; padding:8px; background:#111; color:#fff; border:none; border-radius:8px; font-size:12px; cursor:pointer; font-weight:500; transition:background .2s; }
        .mcc-wl-atc-btn:hover { background:#333; }
        .mcc-wl-qty-wrap { display:flex; align-items:center; gap:0; margin-bottom:8px; border:1px solid #e0e0e0; border-radius:8px; overflow:hidden; }
        .mcc-wl-qty-btn { width:32px; height:32px; border:none; background:#f5f5f5; cursor:pointer; font-size:16px; font-weight:500; transition:background .15s; flex-shrink:0; }
        .mcc-wl-qty-btn:hover { background:#e0e0e0; }
        .mcc-wl-qty-input { flex:1; border:none; text-align:center; font-size:13px; font-weight:600; height:32px; min-width:0; -moz-appearance:textfield; }
        .mcc-wl-qty-input::-webkit-inner-spin-button,.mcc-wl-qty-input::-webkit-outer-spin-button{-webkit-appearance:none;}
        .mcc-wl-out { font-size:11px; color:#999; }
        .mcc-wl-empty { text-align:center; padding:40px 20px; color:#999; }
        .mcc-wl-empty-icon { font-size:48px; display:block; margin-bottom:12px; }
        </style>
        
        <?php
    }

    // ── Admin panel ───────────────────────────────────────────────────

    public static function admin_menu(): void {
        add_submenu_page(
            'herramientas-pro-main',
            '❤️ Wishlist',
            '❤️ Wishlist',
            'manage_options',
            'mcc-wishlist',
            [__CLASS__, 'admin_page']
        );
    }

    public static function admin_settings(): void {
        foreach ([
            'mcc_wl_show_account', 'mcc_wl_account_label',
            'mcc_wl_empty_icon',   'mcc_wl_empty_text',
            'mcc_wl_heart_color',  'mcc_wl_heart_active',
            'mcc_wl_show_count',
        ] as $key) {
            register_setting('mcc_wishlist_og', $key);
        }
    }

    public static function admin_page(): void {
        if ( isset($_POST['mcc_wl_save']) ) {
            check_admin_referer('mcc_wl_admin');
            update_option('mcc_wl_show_account',  sanitize_text_field($_POST['mcc_wl_show_account'] ?? '1'));
            update_option('mcc_wl_account_label', sanitize_text_field($_POST['mcc_wl_account_label'] ?? '❤️ Lista de deseos'));
            update_option('mcc_wl_empty_icon',    sanitize_text_field($_POST['mcc_wl_empty_icon'] ?? '🤍'));
            update_option('mcc_wl_empty_text',    sanitize_text_field($_POST['mcc_wl_empty_text'] ?? 'Tu lista de deseos está vacía'));
            update_option('mcc_wl_heart_color',   sanitize_hex_color($_POST['mcc_wl_heart_color'] ?? '#999999') ?: '#999999');
            update_option('mcc_wl_heart_active',  sanitize_hex_color($_POST['mcc_wl_heart_active'] ?? '#e74c3c') ?: '#e74c3c');
            update_option('mcc_wl_show_count',    sanitize_text_field($_POST['mcc_wl_show_count'] ?? '1'));
            echo '<div class="notice notice-success"><p>✅ Wishlist guardada.</p></div>';
        }
        $o = fn($k,$d='') => get_option($k,$d);
        ?>
        <div class="wrap" style="max-width:680px;">
        <h1>❤️ MCC Wishlist — Configuración</h1>
        <form method="post" style="background:#fff;padding:28px;border-radius:14px;border:1px solid #ddd;margin-top:18px;">
        /* PHP_VAR */
        <input type="hidden" name="mcc_wl_save" value="1">
        <h2 style="border-bottom:2px solid #f0f0f0;padding-bottom:8px;">🎨 Corazón en producto</h2>
        <table class="form-table">
            <tr><th>Color corazón (normal)</th>
                <td><input type="color" name="mcc_wl_heart_color"
                    value="/* PHP_VAR */">
                    <p style="color:#888;font-size:11px;margin:4px 0 0">Color del ícono cuando NO está en wishlist.</p>
                </td></tr>
            <tr><th>Color corazón (activo)</th>
                <td><input type="color" name="mcc_wl_heart_active"
                    value="/* PHP_VAR */">
                    <p style="color:#888;font-size:11px;margin:4px 0 0">Color cuando SÍ está en wishlist (rojo).</p>
                </td></tr>
            <tr><th>Mostrar contador</th>
                <td><select name="mcc_wl_show_count">
                    <option value="1" /* PHP_VAR */>Sí</option>
                    <option value="0" /* PHP_VAR */>No</option>
                    </select></td></tr>
        </table>
        <h2 style="border-bottom:2px solid #f0f0f0;padding-bottom:8px;margin-top:28px;">📋 Lista vacía</h2>
        <table class="form-table">
            <tr><th>Ícono vacío</th>
                <td><input type="text" name="mcc_wl_empty_icon" value="/* PHP_VAR */" style="width:80px"></td></tr>
            <tr><th>Texto vacío</th>
                <td><input type="text" name="mcc_wl_empty_text" value="/* PHP_VAR */" style="width:300px"></td></tr>
        </table>
        <h2 style="border-bottom:2px solid #f0f0f0;padding-bottom:8px;margin-top:28px;">👤 Mi Cuenta</h2>
        <table class="form-table">
            <tr><th>Mostrar pestaña en Mi Cuenta</th>
                <td><select name="mcc_wl_show_account">
                    <option value="1" /* PHP_VAR */>Sí</option>
                    <option value="0" /* PHP_VAR */>No</option>
                    </select></td></tr>
            <tr><th>Etiqueta de la pestaña</th>
                <td><input type="text" name="mcc_wl_account_label"
                    value="/* PHP_VAR */"
                    style="width:220px"></td></tr>
        </table>
        /* PHP_VAR */
        </form>
        </div>
        <?php
    }

} // class MCC_Wishlist
add_action('init', ['MCC_Wishlist','init']);
endif; // MCC_Wishlist


// ══════════════════════════════════════════════════════════════════════
// MCC PRO FILTER v1.0 — Filtro avanzado profesional para tienda
// Reemplaza el filtro nativo de WooCommerce con una UI moderna
// ══════════════════════════════════════════════════════════════════════

if ( ! class_exists('MCC_Pro_Filter') ) :
class MCC_Pro_Filter {

    public static function init(): void {
        // Render filter bar above shop grid
        add_action('woocommerce_before_shop_loop', [__CLASS__, 'render_filter_bar'], 25);
        // Inject CSS to remove theme spacing on archive/shop
        add_action('wp_head', [__CLASS__, 'remove_theme_shop_gap'], 999);

        // AJAX: fetch filtered products
        add_action('wp_ajax_mcc_filter_products',        [__CLASS__, 'ajax_filter']);
        add_action('wp_ajax_nopriv_mcc_filter_products', [__CLASS__, 'ajax_filter']);

        // Admin
        add_action('admin_menu', [__CLASS__, 'admin_menu'], 25);
        add_action('admin_init', [__CLASS__, 'admin_settings']);

        // Frontend styles + scripts
        add_action('wp_head',   [__CLASS__, 'frontend_styles'],  99);
    }

    // ── Get all price range for current context ───────────────────────
    private static function get_price_range(): array {
        global $wpdb;
        $min = (float) $wpdb->get_var("SELECT MIN(CAST(meta_value AS DECIMAL(10,2))) FROM {$wpdb->postmeta} WHERE meta_key='_price' AND meta_value != ''");
        $max = (float) $wpdb->get_var("SELECT MAX(CAST(meta_value AS DECIMAL(10,2))) FROM {$wpdb->postmeta} WHERE meta_key='_price' AND meta_value != ''");
        return [$min ?: 0, $max ?: 999999];
    }

    // ── Render the filter bar HTML ─────────────────────────────────────
    public static function render_filter_bar(): void {
        if ( ! is_shop() && ! is_product_category() && ! is_product_tag() ) return;

        [$price_min, $price_max] = self::get_price_range();

        // Get all categories for current context
        $current_cat_id = is_product_category() ? get_queried_object_id() : 0;
        if ( $current_cat_id ) {
            $cats = get_terms(['taxonomy'=>'product_cat','parent'=>$current_cat_id,'hide_empty'=>true]);
        } else {
            $cats = get_terms(['taxonomy'=>'product_cat','parent'=>0,'hide_empty'=>true,'number'=>12]);
        }

        // Active filters from URL
        $active_min   = isset($_GET['min_price']) ? (float)$_GET['min_price'] : $price_min;
        $active_max   = isset($_GET['max_price']) ? (float)$_GET['max_price'] : $price_max;
        $active_cats  = isset($_GET['product_cat']) ? (array)$_GET['product_cat'] : [];
        $active_sort  = isset($_GET['orderby']) ? sanitize_key($_GET['orderby']) : get_option('woocommerce_default_catalog_orderby', 'menu_order');
        $active_avail = isset($_GET['in_stock']) && $_GET['in_stock'] === '1';
        $active_sale  = isset($_GET['on_sale'])  && $_GET['on_sale']  === '1';

        $show_price   = get_option('mcc_filter_show_price',  '1') === '1';
        $show_cats    = get_option('mcc_filter_show_cats',   '1') === '1';
        $show_sort    = get_option('mcc_filter_show_sort',   '1') === '1';
        $show_stock   = get_option('mcc_filter_show_stock',  '1') === '1';
        $show_sale    = get_option('mcc_filter_show_sale',   '1') === '1';

        $has_active = !empty($active_cats) || $active_min > $price_min || $active_max < $price_max || $active_avail || $active_sale || $active_sort !== get_option('woocommerce_default_catalog_orderby','menu_order');
        ?>
        <!-- Mobile filter button (shown only on mobile via CSS) -->
        <div class="mcc-mobile-filter-row">
            <button class="mcc-mob-filter-btn" id="mccMobFilterBtn" onclick="mccOpenFilterDrawer()">
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="3" y1="6" x2="21" y2="6"/><line x1="8" y1="12" x2="16" y2="12"/><line x1="11" y1="18" x2="13" y2="18"/></svg>
                Filtros/* PHP_VAR */<span class="mcc-mob-filter-dot"></span>/* PHP_VAR */
            </button>
            /* PHP_VAR */
            <a href="/* PHP_VAR */" class="mcc-mob-clear-btn">× Limpiar</a>
            /* PHP_VAR */
        </div>

        <div id="mcc-filter-bar" class="mcc-filter-bar" data-price-min="/* PHP_VAR */" data-price-max="/* PHP_VAR */">

            /* PHP_VAR */
            <div class="mcc-filter-chips" role="group" aria-label="Filtros rápidos">

                /* PHP_VAR */
                <div class="mcc-filter-chip-wrap mcc-filter-sort-wrap">
                    <button class="mcc-filter-chip <?php echo str_contains($active_sort,'price') ? 'active':'' ?>" id="mcc-sort-trigger" aria-haspopup="true">
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M8 6h13M8 12h9M8 18h5"/></svg>
                        <?php
                        $sort_labels = ['menu_order'=>'Ordenar','popularity'=>'Más vendidos','rating'=>'Mejor valorados','date'=>'Novedades','price'=>'Precio: menor','price-desc'=>'Precio: mayor'];
                        echo esc_html($sort_labels[$active_sort] ?? 'Ordenar');
                        ?>
                        <svg class="mcc-chip-chevron" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="6 9 12 15 18 9"/></svg>
                    </button>
                    <div class="mcc-filter-dropdown" id="mcc-sort-dropdown" role="listbox">
                        /* PHP_VAR */
                        <button class="mcc-sort-opt <?php echo $active_sort === $val ? 'selected' : ''; ?>" data-val="/* PHP_VAR */" role="option">/* PHP_VAR */</button>
                        /* PHP_VAR */
                    </div>
                </div>
                /* PHP_VAR */

                /* PHP_VAR */
                <button class="mcc-filter-chip <?php echo ($active_min > $price_min || $active_max < $price_max) ? 'active' : ''; ?>" id="mcc-price-trigger" aria-haspopup="true">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="1" x2="12" y2="23"/><path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/></svg>
                    Precio
                    /* PHP_VAR */
                    <span class="mcc-chip-badge">/* PHP_VAR */</span>
                    /* PHP_VAR */
                    <svg class="mcc-chip-chevron" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="6 9 12 15 18 9"/></svg>
                </button>
                /* PHP_VAR */

                /* PHP_VAR */
                <div class="mcc-filter-chip-wrap mcc-filter-cat-wrap">
                    <button class="mcc-filter-chip <?php echo !empty($active_cats) ? 'active':'' ?>" id="mcc-cat-trigger" aria-haspopup="true">
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="3" width="7" height="7"/><rect x="15" y="3" width="7" height="7"/><rect x="15" y="14" width="7" height="7"/><rect x="2" y="14" width="7" height="7"/></svg>
                        Categoría
                        /* PHP_VAR */<span class="mcc-chip-badge">/* PHP_VAR */</span>/* PHP_VAR */
                        <svg class="mcc-chip-chevron" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="6 9 12 15 18 9"/></svg>
                    </button>
                    <div class="mcc-filter-dropdown" id="mcc-cat-dropdown">
                        /* PHP_VAR */
                        <label class="mcc-cat-opt <?php echo in_array($cat->slug,$active_cats)?'selected':''; ?>">
                            <input type="checkbox" value="/* PHP_VAR */"
                                   /* PHP_VAR */>
                            <span class="mcc-cat-opt-check"></span>
                            /* PHP_VAR */
                            <span class="mcc-cat-opt-count">/* PHP_VAR */</span>
                        </label>
                        /* PHP_VAR */
                        <button class="mcc-filter-apply-cats">Aplicar</button>
                    </div>
                </div>
                /* PHP_VAR */

                /* PHP_VAR */
                <button class="mcc-filter-chip mcc-toggle-chip <?php echo $active_avail ? 'active' : ''; ?>" id="mcc-stock-chip" data-param="in_stock">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>
                    Disponible
                </button>
                /* PHP_VAR */

                /* PHP_VAR */
                <button class="mcc-filter-chip mcc-toggle-chip <?php echo $active_sale ? 'active' : ''; ?>" id="mcc-sale-chip" data-param="on_sale">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z"/><line x1="7" y1="7" x2="7.01" y2="7"/></svg>
                    Ofertas
                </button>
                /* PHP_VAR */

                /* PHP_VAR */
                <button class="mcc-filter-clear" id="mcc-filter-clear" title="Limpiar filtros">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
                    Limpiar
                </button>
                /* PHP_VAR */
            </div>

            /* PHP_VAR */
            /* PHP_VAR */
            <div class="mcc-filter-panel mcc-price-panel" id="mcc-price-panel">
                <div class="mcc-price-panel-inner">
                    <span class="mcc-price-panel-title">Rango de precio</span>
                    <div class="mcc-range-wrap">
                        <div class="mcc-range-track" id="mcc-range-track">
                            <div class="mcc-range-fill" id="mcc-range-fill"></div>
                            <input type="range" class="mcc-range-input" id="mcc-range-min"
                                min="/* PHP_VAR */" max="/* PHP_VAR */"
                                value="/* PHP_VAR */" step="1000">
                            <input type="range" class="mcc-range-input" id="mcc-range-max"
                                min="/* PHP_VAR */" max="/* PHP_VAR */"
                                value="/* PHP_VAR */" step="1000">
                        </div>
                        <div class="mcc-price-values">
                            <span id="mcc-price-display-min">/* PHP_VAR */</span>
                            <span>—</span>
                            <span id="mcc-price-display-max">/* PHP_VAR */</span>
                        </div>
                    </div>
                    <button class="mcc-price-apply">Aplicar precio</button>
                </div>
            </div>
            /* PHP_VAR */

        </div>

        <!-- ── Mobile filter drawer ── -->
        <div id="mcc-filter-drawer-ov" class="mcc-fd-ov" onclick="mccCloseFilterDrawer()" aria-hidden="true"></div>
        <div id="mcc-filter-drawer" class="mcc-fd" role="dialog" aria-modal="true" aria-label="Filtros">
            <div class="mcc-fd-handle"></div>
            <div class="mcc-fd-head">
                <span class="mcc-fd-title">Filtros</span>
                <button class="mcc-fd-close" onclick="mccCloseFilterDrawer()" aria-label="Cerrar">
                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
                </button>
            </div>
            <div class="mcc-fd-body">
                /* PHP_VAR */
                <div class="mcc-fd-section">
                    <div class="mcc-fd-section-title">Ordenar por</div>
                    <div class="mcc-fd-options">
                    /* PHP_VAR */
                    <a href="/* PHP_VAR */" class="mcc-fd-opt <?php echo $active_sort===$val?'active':''; ?>">/* PHP_VAR */</a>
                    /* PHP_VAR */
                    </div>
                </div>
                /* PHP_VAR */

                /* PHP_VAR */
                <div class="mcc-fd-section">
                    <div class="mcc-fd-section-title">Categorías</div>
                    <div class="mcc-fd-options">
                    <?php foreach ($cats as $cat):
                        $active = in_array($cat->slug, $active_cats, true);
                        $url = $active
                            ? remove_query_arg('product_cat')
                            : add_query_arg('product_cat', $cat->slug);
                    ?>
                    <a href="/* PHP_VAR */" class="mcc-fd-opt <?php echo $active?'active':''; ?>">/* PHP_VAR */ <span class="mcc-fd-count">(/* PHP_VAR */)</span></a>
                    /* PHP_VAR */
                    </div>
                </div>
                /* PHP_VAR */

                /* PHP_VAR */
                <div class="mcc-fd-section">
                    <div class="mcc-fd-section-title">Precio: <span id="mcc-fdd-min">/* PHP_VAR */</span> — <span id="mcc-fdd-max">/* PHP_VAR */</span></div>
                    <input type="range" class="mcc-fd-range" id="mcc-fdd-min-r"
                        min="/* PHP_VAR */" max="/* PHP_VAR */"
                        value="/* PHP_VAR */"
                        oninput="document.getElementById('mcc-fdd-min').textContent=new Intl.NumberFormat('es-CO',{style:'currency',currency:'COP',maximumFractionDigits:0}).format(this.value)">
                    <input type="range" class="mcc-fd-range" id="mcc-fdd-max-r"
                        min="/* PHP_VAR */" max="/* PHP_VAR */"
                        value="/* PHP_VAR */"
                        oninput="document.getElementById('mcc-fdd-max').textContent=new Intl.NumberFormat('es-CO',{style:'currency',currency:'COP',maximumFractionDigits:0}).format(this.value)">
                    <button class="mcc-fd-price-apply" onclick="mccApplyDrawerPrice()">Aplicar precio</button>
                </div>
                /* PHP_VAR */

                /* PHP_VAR */
                <div class="mcc-fd-section">
                    <div class="mcc-fd-section-title">Filtros rápidos</div>
                    <div class="mcc-fd-options">
                    <?php if ($show_stock): $url_stock = $active_avail ? remove_query_arg('in_stock') : add_query_arg('in_stock','1'); ?>
                    <a href="/* PHP_VAR */" class="mcc-fd-opt <?php echo $active_avail?'active':''; ?>">✓ Solo disponibles</a>
                    /* PHP_VAR */
                    <?php if ($show_sale): $url_sale = $active_sale ? remove_query_arg('on_sale') : add_query_arg('on_sale','1'); ?>
                    <a href="/* PHP_VAR */" class="mcc-fd-opt <?php echo $active_sale?'active':''; ?>">🏷️ En oferta</a>
                    /* PHP_VAR */
                    </div>
                </div>
                /* PHP_VAR */

                /* PHP_VAR */
                <div style="padding:8px 0 4px">
                    <a href="/* PHP_VAR */" class="mcc-fd-clear-all">× Limpiar todos los filtros</a>
                </div>
                /* PHP_VAR */
            </div>
        </div>
        <?php
    }

    // ── Admin ──────────────────────────────────────────────────────────

    public static function admin_menu(): void {
        add_submenu_page(
            'herramientas-pro-main',
            '🔍 Filtro Pro',
            '🔍 Filtro Pro',
            'manage_options',
            'mcc-filter-pro',
            [__CLASS__, 'admin_page']
        );
    }

    public static function admin_settings(): void {
        foreach (['mcc_filter_show_price','mcc_filter_show_cats','mcc_filter_show_sort','mcc_filter_show_stock','mcc_filter_show_sale','mcc_filter_accent'] as $k)
            register_setting('mcc_filter_og', $k);
    }

    public static function admin_page(): void {
        if (isset($_POST['mcc_filter_save'])) {
            check_admin_referer('mcc_filter_admin');
            foreach (['mcc_filter_show_price','mcc_filter_show_cats','mcc_filter_show_sort','mcc_filter_show_stock','mcc_filter_show_sale'] as $k)
                update_option($k, sanitize_text_field($_POST[$k] ?? '0'));
            update_option('mcc_filter_accent', sanitize_hex_color($_POST['mcc_filter_accent'] ?? '#111111') ?: '#111111');
            echo '<div class="notice notice-success"><p>✅ Filtro guardado.</p></div>';
        }
        $o = fn($k,$d='') => get_option($k,$d);
        $yn = function($key, $def='1') use ($o) {
            $v = $o($key,$def);
            return '<select name="'.$key.'"><option value="1" '.selected($v,'1',false).'>Sí</option><option value="0" '.selected($v,'0',false).'>No</option></select>';
        };
        ?>
        <div class="wrap" style="max-width:640px;">
        <h1>🔍 MCC Filtro Pro — Configuración</h1>
        <form method="post" style="background:#fff;padding:28px;border-radius:14px;border:1px solid #ddd;margin-top:18px;">
        /* PHP_VAR */
        <input type="hidden" name="mcc_filter_save" value="1">
        <h2 style="border-bottom:2px solid #f0f0f0;padding-bottom:8px;">⚙️ Elementos del filtro</h2>
        <table class="form-table">
            <tr><th>Ordenar por</th><td>/* PHP_VAR */</td></tr>
            <tr><th>Rango de precio</th><td>/* PHP_VAR */</td></tr>
            <tr><th>Categorías</th><td>/* PHP_VAR */</td></tr>
            <tr><th>Solo disponibles</th><td>/* PHP_VAR */</td></tr>
            <tr><th>Solo en oferta</th><td>/* PHP_VAR */</td></tr>
            <tr><th>Color acento filtro</th>
                <td><input type="color" name="mcc_filter_accent"
                    value="/* PHP_VAR */"></td></tr>
        </table>
        /* PHP_VAR */
        </form>
        </div>
        <?php
    }

    // ── Frontend styles ────────────────────────────────────────────────

    public static function frontend_styles(): void {
        if ( ! is_shop() && ! is_product_category() && ! is_product_tag() ) return;
        $accent = sanitize_hex_color(get_option('mcc_filter_accent','#111111')) ?: '#111111';
        ?>
        <style id="mcc-filter-styles">
        /* ──────────────────────────────────────────────────
           MCC Pro Filter Bar
        ────────────────────────────────────────────────── */
        /* ── Mobile filter row (button row above products) ── */
        .mcc-mobile-filter-row {
            display:none; /* hidden on desktop */
            align-items:center; gap:8px; padding:0 0 12px;
        }
        .mcc-mob-filter-btn {
            display:inline-flex; align-items:center; gap:6px;
            padding:10px 18px; border-radius:100px;
            background:#111; color:#fff; border:none; cursor:pointer;
            font-size:14px; font-weight:600; position:relative;
            -webkit-tap-highlight-color:transparent;
        }
        .mcc-mob-filter-dot {
            width:7px; height:7px; border-radius:50%; background:var(--accent,#B08B6E);
            position:absolute; top:6px; right:8px;
        }
        .mcc-mob-clear-btn {
            font-size:13px; color:#666; text-decoration:none;
            padding:8px 12px; border-radius:100px; border:1px solid #e0e0e0;
            background:#fff; white-space:nowrap;
        }
        /* ── Mobile filter drawer overlay ── */
        .mcc-fd-ov {
            display:none; position:fixed; inset:0; z-index:8600;
            background:rgba(0,0,0,.5); backdrop-filter:blur(2px);
            opacity:0; transition:opacity .25s;
        }
        .mcc-fd-ov.open { display:block; opacity:1; }
        /* ── Drawer sheet ── */
        .mcc-fd {
            position:fixed; bottom:0; left:0; right:0; z-index:8700;
            background:#fff; border-radius:20px 20px 0 0;
            padding:0 0 calc(80px + env(safe-area-inset-bottom,10px));
            transform:translateY(100%); visibility:hidden;
            transition:transform .32s cubic-bezier(.4,0,.2,1), visibility 0s .32s;
            max-height:85vh; display:flex; flex-direction:column;
        }
        .mcc-fd.open {
            transform:translateY(0); visibility:visible;
            transition:transform .32s cubic-bezier(.4,0,.2,1), visibility 0s 0s;
        }
        .mcc-fd-handle {
            width:36px; height:4px; border-radius:2px; background:#e0e0e0;
            margin:14px auto 0; flex-shrink:0;
        }
        .mcc-fd-head {
            display:flex; align-items:center; justify-content:space-between;
            padding:14px 20px 12px; border-bottom:1px solid #f0f0f0; flex-shrink:0;
        }
        .mcc-fd-title { font-size:16px; font-weight:700; color:#111; }
        .mcc-fd-close {
            width:32px; height:32px; border-radius:50%; background:#f5f5f5;
            border:none; cursor:pointer; display:flex; align-items:center; justify-content:center;
            -webkit-tap-highlight-color:transparent;
        }
        .mcc-fd-body { overflow-y:auto; flex:1; padding:16px 20px 8px; }
        .mcc-fd-section { margin-bottom:24px; }
        .mcc-fd-section-title {
            font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
            color:#999; margin-bottom:10px;
        }
        .mcc-fd-options { display:flex; flex-wrap:wrap; gap:8px; }
        .mcc-fd-opt {
            display:inline-flex; align-items:center; gap:4px;
            padding:9px 16px; border-radius:100px; font-size:13px; font-weight:500;
            color:#333; border:1.5px solid #e0e0e0; background:#fff;
            text-decoration:none; transition:all .15s;
            -webkit-tap-highlight-color:transparent;
        }
        .mcc-fd-opt.active, .mcc-fd-opt:active {
            background:/* PHP_VAR */; border-color:/* PHP_VAR */; color:#fff;
        }
        .mcc-fd-count { font-size:11px; opacity:.6; }
        .mcc-fd-range {
            width:100%; height:4px; accent-color:/* PHP_VAR */;
            margin:10px 0; cursor:pointer;
        }
        .mcc-fd-price-apply {
            width:100%; padding:12px; border-radius:12px; border:none;
            background:/* PHP_VAR */; color:#fff; font-size:14px; font-weight:700;
            cursor:pointer; margin-top:8px; -webkit-tap-highlight-color:transparent;
        }
        .mcc-fd-clear-all {
            display:block; text-align:center; padding:12px; border-radius:12px;
            background:#f8f8f8; color:#e74c3c; font-size:14px; font-weight:600;
            text-decoration:none; border:1px solid #fde8e8;
        }
        @media (max-width:768px) {
            .mcc-mobile-filter-row { display:flex !important; }
            .mcc-filter-bar { display:none !important; } /* hide desktop chips on mobile */
        }

        /* ── Eliminar espacios extra del theme antes del shop ── */
        .woocommerce-page .entry-content,
        .woocommerce .entry-content,
        body.archive.post-type-archive .site-main > .entry-content,
        .woocommerce-shop .entry-content { padding-top: 0 !important; margin-top: 0 !important; }
        .woocommerce-page .page-header,
        .woocommerce .woocommerce-breadcrumb ~ * { margin-top: 0 !important; }

        .mcc-filter-bar {
            position:relative;
            margin: 0 0 24px;
            overflow:visible;
        }
        /* Hide WooCommerce native ordering/filters */
        .woocommerce-ordering,
        .woocommerce-result-count,
        .widget_layered_nav,
        .widget_price_filter { display:none !important; }

        .mcc-filter-chips {
            display:flex;
            flex-wrap:nowrap;
            gap:8px;
            overflow-x:scroll !important;
            overflow-y:visible;
            padding-bottom:8px;
            padding-right:24px;
            scrollbar-width:none;
            -webkit-overflow-scrolling:touch;
            align-items:center;
            touch-action:pan-x pan-y;
            cursor:grab;
            -webkit-user-select:none;
            user-select:none;
        }
        .mcc-filter-chips::-webkit-scrollbar { display:none; }
        .mcc-filter-chips.is-dragging { cursor:grabbing; }
        /* Ensure chips don't shrink — key for horizontal scroll */
        .mcc-filter-chips > * { flex-shrink:0; }
        @media (max-width:768px) {
            .mcc-filter-chips {
                padding-right:32px;
                /* Stronger mobile touch handling */
                touch-action:pan-x;
                overscroll-behavior-x:contain;
            }
        }

        /* Chip base */
        .mcc-filter-chip {
            display:inline-flex; align-items:center; gap:6px;
            padding:8px 14px;
            background:#fff;
            border:1.5px solid #e0e0e0;
            border-radius:100px;
            font-size:13px; font-weight:500; color:#1a1a1a;
            cursor:pointer; white-space:nowrap;
            transition:border-color .18s, background .18s, color .18s, box-shadow .18s;
            -webkit-tap-highlight-color:transparent;
        }
        .mcc-filter-chip svg:first-child { width:14px; height:14px; flex-shrink:0; opacity:.6; }
        .mcc-chip-chevron { width:12px; height:12px; opacity:.45; transition:transform .2s; flex-shrink:0; }
        .mcc-filter-chip:hover { border-color:#bbb; box-shadow:0 2px 8px rgba(0,0,0,.08); }
        .mcc-filter-chip.active {
            background:/* PHP_VAR */;
            border-color:/* PHP_VAR */;
            color:#fff;
        }
        .mcc-filter-chip.active svg:first-child { opacity:1; }
        .mcc-filter-chip.active .mcc-chip-chevron { opacity:.8; }
        .mcc-filter-chip.open .mcc-chip-chevron { transform:rotate(180deg); }
        .mcc-filter-chip.active.open { background:/* PHP_VAR */; }

        /* Badge on chip */
        .mcc-chip-badge {
            font-size:11px; font-weight:600;
            background:rgba(255,255,255,.25);
            padding:1px 6px; border-radius:20px;
            max-width:120px; overflow:hidden; text-overflow:ellipsis;
        }
        .mcc-filter-chip:not(.active) .mcc-chip-badge {
            background:/* PHP_VAR */;
            color:#fff;
        }

        /* Toggle chip (no dropdown) */
        .mcc-toggle-chip { cursor:pointer; }

        /* Clear button */
        .mcc-filter-clear {
            display:inline-flex; align-items:center; gap:5px;
            padding:8px 12px; background:none;
            border:1.5px solid #f0c0c0; border-radius:100px;
            font-size:12px; font-weight:500; color:#e74c3c;
            cursor:pointer; white-space:nowrap; flex-shrink:0;
            transition:background .15s;
        }
        .mcc-filter-clear svg { width:11px; height:11px; }
        .mcc-filter-clear:hover { background:#fef2f2; }

        /* Chip wrap (for items with dropdowns) */
        .mcc-filter-chip-wrap { position:relative; flex-shrink:0; touch-action:pan-x; }
        .mcc-filter-chip-wrap > .mcc-filter-chip { position:relative; }

        /* Dropdown */
        .mcc-filter-dropdown {
            position:absolute;
            top:calc(100% + 8px); left:0;
            min-width:180px; max-width:260px;
            background:#fff;
            border:1px solid #e8e8e8;
            border-radius:14px;
            box-shadow:0 8px 32px rgba(0,0,0,.12);
            padding:6px;
            z-index:9990;
            opacity:0; pointer-events:none;
            transform:translateY(-6px);
            transition:opacity .18s, transform .18s;
        }
        .mcc-filter-dropdown.open {
            opacity:1; pointer-events:all; transform:translateY(0);
        }
        /* Sort options */
        .mcc-sort-opt {
            display:block; width:100%;
            padding:9px 12px; background:none; border:none;
            font-size:13px; text-align:left; cursor:pointer; color:#1a1a1a;
            border-radius:8px; transition:background .15s;
        }
        .mcc-sort-opt:hover { background:#f5f5f5; }
        .mcc-sort-opt.selected {
            font-weight:600; color:/* PHP_VAR */;
            background:#f8f8f8;
        }
        /* Category options */
        .mcc-cat-opt {
            display:flex; align-items:center; gap:8px;
            padding:9px 10px; cursor:pointer;
            font-size:13px; color:#1a1a1a;
            border-radius:8px; transition:background .15s;
            user-select:none;
        }
        .mcc-cat-opt:hover { background:#f5f5f5; }
        .mcc-cat-opt input { display:none; }
        .mcc-cat-opt-check {
            width:16px; height:16px; flex-shrink:0;
            border:2px solid #ccc; border-radius:4px;
            transition:background .15s, border-color .15s;
            position:relative;
        }
        .mcc-cat-opt.selected .mcc-cat-opt-check {
            background:/* PHP_VAR */;
            border-color:/* PHP_VAR */;
        }
        .mcc-cat-opt.selected .mcc-cat-opt-check::after {
            content:''; position:absolute; top:2px; left:4px;
            width:5px; height:8px; border:2px solid #fff;
            border-top:none; border-left:none; transform:rotate(45deg);
        }
        .mcc-cat-opt-count { margin-left:auto; font-size:11px; color:#999; }
        .mcc-filter-apply-cats {
            display:block; width:100%; margin-top:8px;
            padding:9px; background:/* PHP_VAR */; color:#fff;
            border:none; border-radius:8px; font-size:13px; font-weight:600;
            cursor:pointer; transition:opacity .15s;
        }
        .mcc-filter-apply-cats:hover { opacity:.88; }

        /* Price panel */
        .mcc-price-panel {
            position:absolute;
            top:calc(100% + 8px); left:0;
            width:300px; max-width:90vw;
            background:#fff;
            border:1px solid #e8e8e8;
            border-radius:16px;
            box-shadow:0 8px 32px rgba(0,0,0,.12);
            padding:20px;
            z-index:9990;
            opacity:0; pointer-events:none;
            transform:translateY(-6px);
            transition:opacity .18s, transform .18s;
        }
        .mcc-price-panel.open { opacity:1; pointer-events:all; transform:translateY(0); }
        .mcc-price-panel-title { font-size:14px; font-weight:600; display:block; margin-bottom:16px; }

        /* Dual range slider */
        .mcc-range-wrap { }
        .mcc-range-track {
            position:relative; height:4px;
            background:#e0e0e0; border-radius:2px; margin:20px 0 12px;
        }
        .mcc-range-fill {
            position:absolute; height:100%; top:0;
            background:/* PHP_VAR */;
            border-radius:2px;
        }
        .mcc-range-input {
            position:absolute; top:50%; left:0; width:100%;
            transform:translateY(-50%);
            -webkit-appearance:none; appearance:none;
            background:transparent; pointer-events:none;
            height:20px; margin:0;
        }
        .mcc-range-input::-webkit-slider-thumb {
            -webkit-appearance:none; appearance:none;
            width:20px; height:20px;
            border-radius:50%; background:#fff;
            border:2px solid /* PHP_VAR */;
            cursor:pointer; pointer-events:all;
            box-shadow:0 2px 6px rgba(0,0,0,.12);
            transition:border-color .15s, box-shadow .15s;
        }
        .mcc-range-input::-webkit-slider-thumb:hover { box-shadow:0 2px 10px rgba(0,0,0,.2); }
        .mcc-range-input::-moz-range-thumb {
            width:20px; height:20px; border-radius:50%;
            background:#fff; border:2px solid /* PHP_VAR */;
            cursor:pointer; pointer-events:all;
        }
        .mcc-price-values {
            display:flex; align-items:center; gap:8px;
            font-size:13px; font-weight:500; color:#1a1a1a;
            margin-bottom:14px;
        }
        .mcc-price-apply {
            width:100%; padding:10px;
            background:/* PHP_VAR */; color:#fff;
            border:none; border-radius:10px; font-size:14px; font-weight:600;
            cursor:pointer; transition:opacity .15s;
        }
        .mcc-price-apply:hover { opacity:.88; }

        /* Loading overlay */
        .mcc-filter-loading {
            position:fixed; inset:0; z-index:99999;
            display:flex; align-items:center; justify-content:center;
            background:rgba(255,255,255,.72); backdrop-filter:blur(3px);
            opacity:0; pointer-events:none; transition:opacity .2s;
        }
        .mcc-filter-loading.show { opacity:1; pointer-events:all; }
        .mcc-filter-loading-dot {
            width:10px; height:10px; border-radius:50%;
            background:/* PHP_VAR */;
            animation:mcc-dot-pulse 1s ease-in-out infinite;
            margin:0 4px;
        }
        .mcc-filter-loading-dot:nth-child(2) { animation-delay:.15s; }
        .mcc-filter-loading-dot:nth-child(3) { animation-delay:.3s; }
        @keyframes mcc-dot-pulse {
            0%,100% { transform:scale(.6); opacity:.4; }
            50%      { transform:scale(1);   opacity:1; }
        }

        @media(max-width:600px) {
            .mcc-filter-chip { font-size:12px; padding:7px 11px; }
            .mcc-price-panel { left:0; right:0; width:auto; margin:0 -16px; border-radius:12px; }
        }
        </style>
        <div class="mcc-filter-loading" id="mcc-filter-loading">
            <div class="mcc-filter-loading-dot"></div>
            <div class="mcc-filter-loading-dot"></div>
            <div class="mcc-filter-loading-dot"></div>
        </div>
        <script id="mcc-filter-js">
        (function(){
        'use strict';
        document.addEventListener('DOMContentLoaded', function() {
            const bar = document.getElementById('mcc-filter-bar');
            if (!bar) return;

            const loading   = document.getElementById('mcc-filter-loading');
            const priceMin  = parseInt(bar.dataset.priceMin) || 0;
            const priceMax  = parseInt(bar.dataset.priceMax) || 999999;

            // ── Dropdown toggle ─────────────────────────────────────────────
            function toggleDropdown(triggerId, dropdownId) {
                const trigger  = document.getElementById(triggerId);
                const dropdown = document.getElementById(dropdownId);
                if (!trigger || !dropdown) return;

                trigger.addEventListener('click', e => {
                    e.stopPropagation();
                    const isOpen = dropdown.classList.contains('open');
                    closeAllDropdowns();
                    if (!isOpen) {
                        dropdown.classList.add('open');
                        trigger.classList.add('open');
                    }
                });
            }

            function closeAllDropdowns() {
                document.querySelectorAll('.mcc-filter-dropdown,.mcc-price-panel').forEach(d => {
                    d.classList.remove('open');
                });
                document.querySelectorAll('.mcc-filter-chip').forEach(c => c.classList.remove('open'));
            }

            document.addEventListener('click', e => {
                if (!e.target.closest('.mcc-filter-bar')) closeAllDropdowns();
            });

            // Sort dropdown
            toggleDropdown('mcc-sort-trigger', 'mcc-sort-dropdown');
            document.querySelectorAll('.mcc-sort-opt').forEach(opt => {
                opt.addEventListener('click', () => {
                    navigate({ orderby: opt.dataset.val });
                });
            });

            // Category dropdown
            toggleDropdown('mcc-cat-trigger', 'mcc-cat-dropdown');
            document.querySelectorAll('.mcc-cat-opt').forEach(opt => {
                opt.addEventListener('click', () => {
                    opt.classList.toggle('selected');
                    opt.querySelector('input').checked = opt.classList.contains('selected');
                });
            });
            const applyC = document.querySelector('.mcc-filter-apply-cats');
            if (applyC) {
                applyC.addEventListener('click', () => {
                    const selected = [...document.querySelectorAll('.mcc-cat-opt.selected input')].map(i => i.value);
                    navigate({ product_cat: selected.join(',') });
                });
            }

            // Price panel
            const priceTrigger = document.getElementById('mcc-price-trigger');
            const pricePanel   = document.getElementById('mcc-price-panel');
            if (priceTrigger && pricePanel) {
                priceTrigger.addEventListener('click', e => {
                    e.stopPropagation();
                    const isOpen = pricePanel.classList.contains('open');
                    closeAllDropdowns();
                    if (!isOpen) { pricePanel.classList.add('open'); priceTrigger.classList.add('open'); }
                });

                // Dual range slider logic
                const rMin    = document.getElementById('mcc-range-min');
                const rMax    = document.getElementById('mcc-range-max');
                const fill    = document.getElementById('mcc-range-fill');
                const dispMin = document.getElementById('mcc-price-display-min');
                const dispMax = document.getElementById('mcc-price-display-max');

                function updateRange() {
                    let a = parseInt(rMin.value), b = parseInt(rMax.value);
                    if (a > b) { [a,b] = [b,a]; }
                    const pct1 = ((a - priceMin) / (priceMax - priceMin)) * 100;
                    const pct2 = ((b - priceMin) / (priceMax - priceMin)) * 100;
                    fill.style.left  = pct1 + '%';
                    fill.style.width = (pct2 - pct1) + '%';
                    if (dispMin) dispMin.textContent = formatPrice(a);
                    if (dispMax) dispMax.textContent = formatPrice(b);
                }

                function formatPrice(v) {
                    return new Intl.NumberFormat('es-CO', {style:'currency',currency:'COP',maximumFractionDigits:0}).format(v);
                }

                [rMin,rMax].forEach(r => r?.addEventListener('input', updateRange));
                updateRange();

                const applyP = pricePanel.querySelector('.mcc-price-apply');
                if (applyP) {
                    applyP.addEventListener('click', () => {
                        let a = parseInt(rMin.value), b = parseInt(rMax.value);
                        if (a > b) [a,b] = [b,a];
                        navigate({ min_price: a, max_price: b });
                    });
                }
            }

            // Toggle chips (stock / sale)
            document.querySelectorAll('.mcc-toggle-chip').forEach(chip => {
                chip.addEventListener('click', () => {
                    const param  = chip.dataset.param;
                    const active = chip.classList.contains('active');
                    navigate({ [param]: active ? null : '1' });
                });
            });

            // Clear all
            const clearBtn = document.getElementById('mcc-filter-clear');
            if (clearBtn) {
                clearBtn.addEventListener('click', () => {
                    const url = new URL(window.location.href);
                    ['orderby','min_price','max_price','product_cat','in_stock','on_sale'].forEach(k => url.searchParams.delete(k));
                    showLoading();
                    window.location.href = url.toString();
                });
            }

            // ── Navigate with new params ──────────────────────────────────
            function navigate(params) {
                const url = new URL(window.location.href);
                Object.entries(params).forEach(([k, v]) => {
                    if (v === null || v === '' || v === undefined) {
                        url.searchParams.delete(k);
                    } else {
                        url.searchParams.set(k, v);
                    }
                });
                // Reset to page 1
                url.searchParams.delete('paged');
                url.pathname = url.pathname.replace(/\/page\/\d+\/?$/, '/');
                showLoading();
                window.location.href = url.toString();
            }

            function showLoading() {
                if (loading) loading.classList.add('show');
            }

            // ── Drag-scroll para filtros en mobile/tablet ──────────────
            (function() {
                const chipsEl = document.querySelector('.mcc-filter-chips');
                if (!chipsEl) return;
                let isDrag = false, startX = 0, sl = 0;
                chipsEl.addEventListener('mousedown', e => {
                    isDrag = true; startX = e.pageX - chipsEl.offsetLeft;
                    sl = chipsEl.scrollLeft; chipsEl.classList.add('is-dragging');
                });
                ['mouseleave','mouseup'].forEach(ev => chipsEl.addEventListener(ev, () => {
                    isDrag = false; chipsEl.classList.remove('is-dragging');
                }));
                chipsEl.addEventListener('mousemove', e => {
                    if (!isDrag) return; e.preventDefault();
                    chipsEl.scrollLeft = sl - (e.pageX - chipsEl.offsetLeft - startX) * 1.5;
                });
            })();

            // ── Mobile filter drawer JS ───────────────────────────────
            window.mccOpenFilterDrawer = function() {
                const ov = document.getElementById('mcc-filter-drawer-ov');
                const dr = document.getElementById('mcc-filter-drawer');
                if (!ov || !dr) return;
                ov.classList.add('open');
                dr.classList.add('open');
                document.body.style.overflow = 'hidden';
            };
            window.mccCloseFilterDrawer = function() {
                const ov = document.getElementById('mcc-filter-drawer-ov');
                const dr = document.getElementById('mcc-filter-drawer');
                if (!ov || !dr) return;
                ov.classList.remove('open');
                dr.classList.remove('open');
                document.body.style.overflow = '';
            };
            window.mccApplyDrawerPrice = function() {
                const minR = document.getElementById('mcc-fdd-min-r');
                const maxR = document.getElementById('mcc-fdd-max-r');
                if (!minR || !maxR) return;
                const url = new URL(window.location.href);
                url.searchParams.set('min_price', minR.value);
                url.searchParams.set('max_price', maxR.value);
                window.location.href = url.toString();
            };
            // Swipe-down to close drawer
            (function(){
                const dr = document.getElementById('mcc-filter-drawer');
                if (!dr) return;
                let sy=0;
                dr.addEventListener('touchstart', e => { sy = e.touches[0].clientY; }, {passive:true});
                dr.addEventListener('touchend', e => {
                    if (e.changedTouches[0].clientY - sy > 60) window.mccCloseFilterDrawer();
                }, {passive:true});
            })();
        });
        })();
        </script>
        <?php
    }

    public static function remove_theme_shop_gap(): void {
        if ( ! is_shop() && ! is_product_category() && ! is_product_tag() && ! is_product_taxonomy() ) return;
        echo '<style>
/* MCC: remove theme gap above shop loop */
.woocommerce-page .entry-header,
.woocommerce-page .page-header,
.archive .entry-header { display:none !important; }
.woocommerce-page .entry-content > .woocommerce,
.archive .entry-content > .woocommerce { margin-top:0 !important; padding-top:0 !important; }
.site-main > article > .entry-content { padding-top:0 !important; }
</style>';
    }

} // class MCC_Pro_Filter
add_action('init', ['MCC_Pro_Filter','init']);
endif; // MCC_Pro_Filter

// ── CSS ───────────────────────────────────────────────────────────────
add_action('wp_head', function () {
    $logo_w         = (int)    get_option('mcc_logo_width',              '110');
    $logo_wm        = (int)    get_option('mcc_logo_width_mobile',       '90');
    $h_top          = (int)    get_option('mcc_header_top',              '44');
    $h_height       = max(0,   (int) get_option('mcc_header_height',     '68'));
    $h_max_w_raw    = (int) get_option('mcc_header_max_width', '1400');
    $h_max_w        = $h_max_w_raw; // 0 = sin límite (100%)
    $h_bg           = sanitize_hex_color(get_option('mcc_header_bg',    '#FFFFFF')) ?: '#FFFFFF';
    $accent         = sanitize_hex_color(get_option('mcc_accent_color', '#B08B6E')) ?: '#B08B6E';
    $icon_pc        = max(12, min(40, (int) get_option('mcc_icon_size_pc',  '20')));
    $icon_mob       = max(12, min(40, (int) get_option('mcc_icon_size_mob', '20')));
    $acc_logged_col = sanitize_hex_color(get_option('mcc_account_logged_color', '#B08B6E')) ?: '#B08B6E';
    $nav_fs         = max(8, min(30,  (int) get_option('mcc_nav_font_size', '14')));
    $cat_gap        = max(0, min(300, (int) get_option('mcc_header_cat_gap',   '0')));
    $icons_gap      = max(0, min(300, (int) get_option('mcc_header_icons_gap', '0')));
    /* Logo height: if saved → use it; if empty → auto (header - 16px padding) */
    $logo_h_raw     = get_option('mcc_logo_height', '');
    $logo_hm_raw    = get_option('mcc_logo_height_mobile', '');
    $logo_h_css     = $logo_h_raw  !== '' ? (int)$logo_h_raw  . 'px' : ($h_height > 10 ? ($h_height - 16).'px' : '52px');
    $logo_hm_css    = $logo_hm_raw !== '' ? (int)$logo_hm_raw . 'px' : $logo_h_css;
    ?>
<style>
/* ── VARIABLES ─────────────────────────────────────────────────────── */
:root {
    --h-bg:       /* PHP_VAR */;
    --accent:     /* PHP_VAR */;
    --icon-sz:    /* PHP_VAR */px;
    --acc-logged: /* PHP_VAR */;
    --nav-fs:     /* PHP_VAR */px;
    --h-top:      /* PHP_VAR */px;
    --h-cat-gap:  /* PHP_VAR */px;
    --h-ico-gap:  /* PHP_VAR */px;
    --h-height:   /* PHP_VAR */px;
    --border:     #e8e8e8;
    --text:       #1a1a1a;
    --muted:      #6b6b6b;
    --dock-bg:    #0f0f0f;
    --green:      #27ae60;
    --red:        #e74c3c;
    --radius-sm:  8px;
    --radius-md:  14px;
    --shadow:     0 4px 24px rgba(0,0,0,.08);
    --shadow-lg:  0 8px 40px rgba(0,0,0,.16);
    --ease:       .24s cubic-bezier(.4,0,.2,1);
}

/* ── RESET ─────────────────────────────────────────────────────────── */
.mcc-h *, .mcc-dock *, #mcc-drawer *,
#mcc-search-ov *, #mcc-cat-modal * {
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
}

/* ══════════════════════════════════════════════════════════════════════
   FIX ESPACIO VACÍO:
   - Antes: position:relative + margin-top:44px + body padding-top:44px = 88px de espacio
   - Ahora: position:sticky + top:0 (sin margin-top)
             body.mb-bar-active .mcc-h { top: var(--h-top) } ajusta dinámicamente
             cuando la barra de anuncios está activa.
   De esta forma el header se pega exactamente debajo de la barra fija.
══════════════════════════════════════════════════════════════════════ */
.mcc-h {
    position: sticky;
    top: 0;                     /* Por defecto: sin barra de anuncios */
    left: 0; right: 0;
    background: var(--h-bg);
    z-index: 900;
    border-bottom: 1px solid var(--border);
    /* Sin margin-top — el body padding-top del módulo de barra lo maneja */
}
/* Cuando la barra de anuncios está activa, el header se pega justo debajo */
body.mb-bar-active .mcc-h {
    top: var(--h-top, 44px);
}

.mcc-h-inner {
    max-width: var(--mcc-header-max-w, 1400px);
    margin: 0 auto;
    height: var(--h-height, 68px);
    display: flex;
    align-items: center;
    padding: 0 28px;
    gap: 0;
    position: relative;
}

/* ── LOGO centrado ── */
.mcc-logo-wrap {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    display: flex; align-items: center;
    pointer-events: none; /* hijos capturan eventos */
}
.mcc-logo-wrap a { pointer-events: all; }
.mcc-logo-inner {
    position: relative;
    display: flex; align-items: center;
}
.mcc-logo-img  {
    display: block;
    height: /* PHP_VAR */;
    max-height: /* PHP_VAR */;
    object-fit: contain;
    transition: opacity .3s ease, transform .3s ease;
}
.mcc-logo-1 {
    width: /* PHP_VAR */px;
    max-width: /* PHP_VAR */px;
    opacity: 1;
    transform: scale(1);
}
.mcc-logo-2 {
    position: absolute;
    left: 50%; top: 50%;
    transform: translate(-50%,-50%) scale(0.85);
    width: auto;
    max-width: 200px;
    height: auto;
    max-height: calc(/* PHP_VAR */ * 1.4);
    opacity: 0;
    pointer-events: none;
    transition: opacity .35s ease, transform .35s cubic-bezier(.34,1.56,.64,1);
}
/* GIF logo2: solo se muestra cuando está activo */
.mcc-logo-2-gif { image-rendering: auto; }
/* Hover desktop / active mobile */
.mcc-logo-wrap.logo-animated .mcc-logo-1 {
    opacity: 0;
    transform: scale(0.9);
}
.mcc-logo-wrap.logo-animated .mcc-logo-2 {
    opacity: 1;
    transform: translate(-50%,-50%) scale(1);
    pointer-events: all;
}
/* h-left ocupa flex-1 */
.mcc-h-left  { flex: 1; display: flex; align-items: center; min-width: 0; }
/* h-right empuja a la derecha */
.mcc-h-right { margin-left: auto; display: flex; align-items: center; justify-content: flex-end; gap: 4px; padding-right: 4px; }
/* Espaciado personalizado Categorías↔Logo y Logo↔Iconos — solo desktop */
@media (min-width: 861px) {
    .mcc-h-left  { padding-right: var(--h-cat-gap, 0px); }
    .mcc-h-right { padding-left:  var(--h-ico-gap, 0px); }
}

/* ── IZQUIERDA ── (ver declaración completa arriba) */

/* NAV DESKTOP */
.mcc-nav { display: flex; align-items: center; }
.mcc-nav-item { position: relative; }
.mcc-nav-btn {
    display: flex; align-items: center; gap: 5px;
    padding: 9px 16px;
    font-size: var(--nav-fs, 14px); font-weight: 500;
    color: var(--text);
    background: none; border: none; border-radius: var(--radius-sm);
    cursor: pointer; font-family: inherit;
    letter-spacing: .01em; white-space: nowrap;
    transition: background var(--ease);
}
.mcc-nav-btn:hover,
.mcc-nav-item:hover > .mcc-nav-btn { background: #f4f4f4; }
.mcc-nav-chevron {
    width: 11px; height: 11px; opacity: .45;
    transition: transform var(--ease), opacity var(--ease);
}
.mcc-nav-item:hover > .mcc-nav-btn .mcc-nav-chevron {
    transform: rotate(180deg); opacity: 1;
}

/* DROPDOWN con imágenes */

/* ══════════════════════════════════════════════════════════
   MEGA MENÚ CATEGORÍAS — estilo Nihao/marketplace
══════════════════════════════════════════════════════════ */
.mcc-mega-btn {
    display: flex; align-items: center; gap: 8px;
    background: var(--accent); color: #fff !important;
    padding: 9px 18px; border-radius: 8px;
    font-size: 13px; font-weight: 700; letter-spacing: .3px;
    border: none; cursor: pointer; transition: background .2s;
    white-space: nowrap;
}
.mcc-mega-btn:hover { background: color-mix(in srgb, var(--accent) 85%, #000); }

.mcc-mega-trigger { position: relative; }

.mcc-mega-panel {
    position: absolute;
    top: calc(100% + 8px); left: 0;
    width: min(820px, 90vw);
    background: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 12px;
    box-shadow: 0 8px 40px rgba(0,0,0,.14);
    display: flex;
    overflow: hidden;
    opacity: 0; pointer-events: none;
    transform: translateY(10px);
    transition: opacity .22s ease, transform .22s ease;
    z-index: 500;
}
.mcc-mega-panel.open {
    opacity: 1; pointer-events: all; transform: translateY(0);
}

/* Sidebar izquierda */
.mcc-mega-sidebar {
    width: 220px; flex-shrink: 0;
    background: #f8f8f8;
    border-right: 1px solid #eee;
    overflow-y: auto; max-height: 480px;
    padding: 8px 0;
}
.mcc-mega-cat {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 14px;
    font-size: 13px; font-weight: 500; color: #333;
    text-decoration: none;
    border-left: 3px solid transparent;
    transition: all .15s;
    position: relative;
}
.mcc-mega-cat:hover, .mcc-mega-cat.active {
    background: #fff; color: var(--accent);
    border-left-color: var(--accent);
}
.mcc-mega-cat-img {
    width: 32px; height: 32px; object-fit: cover;
    border-radius: 6px; flex-shrink: 0;
}
.mcc-mega-cat-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mcc-mega-cat-arr { flex-shrink: 0; color: #bbb; }
.mcc-mega-cat.active .mcc-mega-cat-arr { color: var(--accent); }

/* Panel derecho */
.mcc-mega-content {
    flex: 1; overflow-y: auto; max-height: 480px; padding: 16px;
}
.mcc-mega-pane { display: block; }
.mcc-mega-pane-hidden { display: none !important; }

/* Video de categoría */
.mcc-mega-video-wrap {
    width: 100%; aspect-ratio: 16/6; border-radius: 10px;
    overflow: hidden; margin-bottom: 14px; background: #111;
}
.mcc-mega-video { width: 100%; height: 100%; object-fit: cover; }

/* Grid subcategorías */
.mcc-mega-sub-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
    gap: 10px;
}
.mcc-mega-sub-item {
    display: flex; flex-direction: column; align-items: center;
    gap: 6px; padding: 10px 6px;
    border: 1px solid #f0f0f0; border-radius: 10px;
    text-decoration: none; color: #333;
    font-size: 11px; font-weight: 600; text-align: center;
    transition: all .15s; background: #fff;
}
.mcc-mega-sub-item:hover {
    border-color: var(--accent);
    color: var(--accent);
    box-shadow: 0 2px 8px rgba(0,0,0,.07);
    transform: translateY(-1px);
}
.mcc-mega-sub-img {
    width: 60px; height: 60px; object-fit: cover; border-radius: 8px;
}
.mcc-mega-sub-icon {
    width: 60px; height: 60px; border-radius: 8px;
    background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 60%, #fff));
    color: #fff; font-size: 22px;
    display: flex; align-items: center; justify-content: center;
}
.mcc-mega-sub-all { border-color: var(--accent) !important; }

/* ══════════════════════════════════════════════════════════
   BUSCADOR INLINE EN HEADER
══════════════════════════════════════════════════════════ */
.mcc-h-search-wrap { position: relative; }

/* hover manejado en .mcc-h-srch-expanded */

.mcc-h-srch-expanded {
    position: absolute; right: 0; top: calc(100% + 4px);
    width: min(520px, 92vw);
    background: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 14px;
    box-shadow: 0 8px 32px rgba(0,0,0,.13);
    overflow: hidden;
    z-index: 500;
    /* Estado inicial - oculto con opacity para que hover CSS funcione */
    opacity: 0;
    pointer-events: none;
    transform: translateY(6px);
    transition: opacity .18s ease, transform .18s ease;
}
/* Solo JS controla apertura del buscador (sin hover automático) */
@media (hover:hover) and (pointer:fine) {
    .mcc-h-search-wrap:focus-within .mcc-h-srch-expanded {
        opacity: 1 !important;
        pointer-events: all !important;
        transform: translateY(0) !important;
        display: block !important;
    }
}
/* Clase JS para mantener abierto en mobile y al escribir */
.mcc-h-srch-expanded.srch-open {
    opacity: 1 !important;
    pointer-events: all !important;
    transform: translateY(0) !important;
    display: block !important;
}
@keyframes mccSrchIn {
    from { opacity:0; transform:translateY(6px); }
    to   { opacity:1; transform:translateY(0); }
}
/* Historial de búsqueda */
.mcc-srch-history-row {
    display: flex; flex-wrap: wrap; gap: 6px;
    padding: 10px 14px 0;
}
.mcc-srch-history-tag {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 4px 10px; background: #f5f5f5; border-radius: 20px;
    font-size: 12px; color: #555; cursor: pointer;
    border: 1px solid #eee; transition: all .15s;
}
.mcc-srch-history-tag:hover { background: #ebebeb; color: #111; }
.mcc-srch-history-tag .mcc-srch-hist-rm {
    font-size: 11px; color: #aaa; margin-left: 2px;
    background: none; border: none; cursor: pointer; padding: 0; line-height: 1;
}
.mcc-srch-section-lbl {
    font-size: 10px; font-weight: 700; color: #aaa;
    text-transform: uppercase; letter-spacing: .5px;
    display: block; padding: 10px 14px 4px;
}
.mcc-h-srch-inner {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 14px;
    border-bottom: 1px solid #f0f0f0;
}
.mcc-h-srch-input {
    flex: 1; border: none; outline: none;
    font-size: 14px; color: #111; background: transparent;
}
.mcc-h-srch-input::placeholder { color: #bbb; }
.mcc-h-srch-inner button {
    background: none; border: none; cursor: pointer;
    font-size: 16px; color: #aaa; padding: 2px; line-height: 1;
}
.mcc-h-srch-inner button:hover { color: #555; }

.mcc-h-srch-drop { max-height: 420px; overflow-y: auto; }

.mcc-srch-chip {
    padding: 5px 12px; border: 1px solid #e5e5e5;
    border-radius: 20px; background: #fafafa;
    font-size: 12px; font-weight: 600; color: #555;
    cursor: pointer; transition: all .15s; white-space: nowrap;
}
.mcc-srch-chip:hover { border-color: var(--accent); color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, white); }

.mcc-srch-feat-row {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 10px;
}
.mcc-srch-feat-card {
    text-decoration: none; color: #333;
    border: 1px solid #f0f0f0; border-radius: 10px;
    overflow: hidden; transition: box-shadow .15s, transform .15s;
}
.mcc-srch-feat-card:hover { box-shadow: 0 3px 12px rgba(0,0,0,.1); transform: translateY(-1px); }
.mcc-srch-feat-media {
    width: 100%; aspect-ratio: 1; object-fit: cover; display: block;
}
.mcc-srch-feat-info { padding: 6px 8px; }
.mcc-srch-feat-name { font-size: 11px; font-weight: 600; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mcc-srch-feat-price { font-size: 12px; font-weight: 700; color: var(--accent); display: block; margin-top: 2px; }

/* Resultado de búsqueda en el drop */
/* ── Buscador: resultados estilo Nihao ── */
.mcc-srch-result-card {
    display: grid;
    grid-template-columns: 80px 1fr;
    grid-template-rows: auto;
    gap: 0;
    border-bottom: 1px solid #f0f0f0;
    text-decoration: none; color: #333;
    transition: background .12s;
    overflow: hidden;
}
.mcc-srch-result-card:hover { background: #fafafa; }
/* Imagen izquierda */
.mcc-srch-result-img-col {
    width: 80px; height: 80px; flex-shrink: 0; position: relative; overflow: hidden;
    background: #f5f5f5;
}
.mcc-srch-result-img,
.mcc-srch-result-vid {
    width: 100%; height: 100%; object-fit: cover; display: block;
}
/* Info central */
.mcc-srch-result-info {
    padding: 8px 10px; min-width: 0;
    display: flex; flex-direction: column; justify-content: center; gap: 4px;
}
.mcc-srch-result-name {
    font-size: 12px; font-weight: 600; color: #111;
    overflow: hidden; text-overflow: ellipsis;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.mcc-srch-result-price { font-size: 13px; font-weight: 700; color: var(--accent); }
/* Acciones: qty + botones */
.mcc-srch-result-actions {
    display: flex; align-items: center; gap: 6px;
    padding: 0 10px 8px;
    grid-column: 2;
}
.mcc-srch-result-qty-wrap {
    display: flex; align-items: center; gap: 4px;
    border: 1px solid #e5e5e5; border-radius: 7px; padding: 3px 6px;
    font-size: 12px; font-weight: 700;
}
.mcc-srch-result-qty-wrap button {
    background: none; border: none; cursor: pointer;
    font-size: 14px; color: #555; padding: 0 3px; line-height: 1;
}
.mcc-srch-result-qty { min-width: 20px; text-align: center; font-size: 12px; }
.mcc-srch-result-add {
    flex: 1; padding: 6px 8px; background: var(--accent); color: #fff;
    border: none; border-radius: 7px; font-size: 11px; font-weight: 700;
    cursor: pointer; transition: opacity .15s; white-space: nowrap;
}
.mcc-srch-result-add:hover { opacity: .85; }
.mcc-srch-result-qb {
    padding: 6px 8px; background: #111; color: #fff;
    border: none; border-radius: 7px; font-size: 11px; font-weight: 700;
    cursor: pointer; transition: opacity .15s; white-space: nowrap;
    text-decoration: none; display: inline-block;
}
.mcc-srch-result-qb:hover { opacity: .85; }
/* Video: aparece cuando hay video (mitad derecha) */
.mcc-srch-result-has-video .mcc-srch-result-img-col { width: 80px; }
.mcc-srch-result-vid-col {
    width: 80px; height: 80px; flex-shrink: 0; overflow: hidden; background: #000;
    grid-row: 1; grid-column: 3;
}
.mcc-srch-result-has-video { grid-template-columns: 80px 1fr 80px; }
.mcc-srch-result-has-video .mcc-srch-result-actions { grid-column: 2 / 4; }

.mcc-srch-loading { padding: 20px; text-align: center; color: #aaa; font-size: 13px; }
.mcc-srch-no-res { padding: 20px; text-align: center; color: #aaa; font-size: 13px; }

/* Drop full width */
.mcc-h-srch-expanded { width: min(640px, 95vw) !important; }
@media (max-width: 640px) { .mcc-h-srch-expanded { width: 100vw !important; right: auto !important; left: 50% !important; transform: translateX(-50%) !important; } }

/* Mobile: ocultar mega en pantallas pequeñas */
@media (max-width: 768px) {
    .mcc-mega-panel { width: 100vw; left: -14px; }
    .mcc-mega-sidebar { width: 150px; }
    .mcc-h-srch-expanded { right: -50px; width: min(360px, 95vw); }
}

.mcc-dropdown {
    position: absolute;
    top: calc(100% + 4px); left: 0;
    min-width: 230px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    padding: 6px 0;
    z-index: 200;
    opacity: 0; pointer-events: none;
    transform: translateY(8px);
    transition: opacity var(--ease), transform var(--ease);
    display: flex !important;
    flex-direction: column !important;
    list-style: none !important;
    margin: 0 !important;
}
.mcc-nav-item:hover .mcc-dropdown {
    opacity: 1; pointer-events: all; transform: translateY(0);
}
.mcc-dropdown li { list-style: none !important; width: 100% !important; }
.mcc-dropdown-link {
    display: flex !important; align-items: center !important; gap: 10px !important;
    padding: 8px 14px !important; font-size: 13.5px !important;
    color: #333 !important; text-decoration: none !important;
    transition: background var(--ease), color var(--ease) !important;
    white-space: nowrap !important; width: 100% !important;
}
.mcc-dropdown-link:hover { background: #f7f7f7 !important; color: var(--accent) !important; }
.mcc-dropdown-img {
    width: 38px !important; height: 38px !important;
    object-fit: cover !important; border-radius: 6px !important;
    flex-shrink: 0 !important; background: #f0f0f0;
}
.mcc-dropdown-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── DERECHA ── */
/* .mcc-h-right ya declarado arriba */

/* Botón ícono genérico */
.mcc-icon-btn {
    position: relative;
    width: 42px; height: 42px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: none; border: none; cursor: pointer;
    color: var(--text); text-decoration: none; flex-shrink: 0;
    transition: background var(--ease);
}
.mcc-icon-btn:hover { background: #f4f4f4; }
.mcc-icon-btn svg { display: block; width: var(--icon-sz, 20px); height: var(--icon-sz, 20px); }
/* Account icon logged-in color */
.mcc-user-btn.logged svg { fill: var(--acc-logged, #B08B6E); }

/* Badge */
.mcc-badge {
    position: absolute; top: 3px; right: 3px;
    min-width: 17px; height: 17px;
    border-radius: 9px; padding: 0 4px;
    font-size: 9.5px; font-weight: 700; line-height: 1;
    display: flex; align-items: center; justify-content: center;
    border: 2px solid var(--h-bg); color: #fff;
    pointer-events: none;
}
.mcc-badge-g { background: var(--green); }
.mcc-badge-r { background: var(--red);   }

/* ── HAMBURGER ── */
.mcc-ham {
    display: none; flex-direction: column; gap: 5px;
    cursor: pointer; padding: 8px;
    border-radius: var(--radius-sm);
    background: none; border: none; color: var(--text);
    transition: background var(--ease);
}
.mcc-ham:hover { background: #f4f4f4; }
.mcc-ham span {
    display: block; width: 20px; height: 1.5px;
    background: currentColor; border-radius: 2px;
    transition: transform var(--ease), opacity var(--ease), width var(--ease);
    transform-origin: center;
}
.mcc-ham.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.mcc-ham.open span:nth-child(2) { opacity: 0; width: 0; }
.mcc-ham.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* ── Estado activo de paneles ── */
.mcc-panel-wrap.open .mcc-heart-svg {
    fill: var(--red) !important;
    stroke: var(--red) !important;
}
.mcc-panel-wrap.open .mcc-user-btn svg { color: var(--accent) !important; }
.mcc-user-btn svg[fill="currentColor"] { color: var(--accent); }
.mcc-user-panel { width: 240px !important; }
/* Wishlist card heart button */
.mcc-heart-btn { 
    position:absolute; 
    top:8px; right:8px;
    z-index:20; 
    background:rgba(255,255,255,.92); 
    border:1.5px solid rgba(0,0,0,.08);
    border-radius:50%; 
    width:34px; height:34px; 
    cursor:pointer; 
    display:flex; align-items:center; justify-content:center; 
    transition:background .15s, transform .15s;
    -webkit-tap-highlight-color:transparent;
    box-shadow:0 2px 8px rgba(0,0,0,.12);
}
.mcc-heart-btn svg { width:16px; height:16px; stroke:#e74c3c; fill:none; stroke-width:2; transition:stroke .2s, fill .2s; }
.mcc-heart-btn:hover { background:#fff; border-color:var(--accent); transform:scale(1.08); }
/* Evitar que el card WC corte el corazón */
.woocommerce ul.products li.product { overflow: visible !important; }
.mcc-heart-btn.active svg { stroke:/* PHP_VAR */; fill:/* PHP_VAR */; }
.mcc-wl-list-popup { position:absolute; bottom:42px; right:0; background:#fff; border:1px solid #eee; border-radius:10px; box-shadow:0 4px 20px rgba(0,0,0,.15); padding:8px; min-width:160px; z-index:100; display:none; }
.mcc-wl-list-popup.open { display:block; }
.mcc-wl-list-popup-item { padding:8px 12px; font-size:12px; font-weight:600; color:#333; cursor:pointer; border-radius:6px; white-space:nowrap; }
.mcc-wl-list-popup-item:hover { background:#f5f5f5; }
/* .mcc-heart-btn posición definida arriba */

/* Wishlist panel items */
.mcc-wl-empty { text-align:center; padding:32px 16px; color:#999; }
.mcc-wl-empty-icon { font-size:40px; display:block; margin-bottom:10px; }
.mcc-wl-empty p { font-size:13px; margin:0; }
.mcc-wl-list { list-style:none; margin:0; padding:0; }
.mcc-wl-item { display:flex; align-items:center; gap:10px; padding:10px 0; border-bottom:1px solid #f0f0f0; }
.mcc-wl-item:last-child { border-bottom:none; }
.mcc-wl-thumb { flex-shrink:0; }
.mcc-wl-thumb img { width:52px; height:52px; object-fit:cover; border-radius:8px; }
.mcc-wl-info { flex:1; min-width:0; }
.mcc-wl-name { font-size:12px; font-weight:500; color:#1a1a1a; text-decoration:none; display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mcc-wl-name:hover { color:var(--accent); }
.mcc-wl-price { font-size:12px; color:#444; font-weight:600; }
.mcc-wl-item-actions { display:flex; gap:4px; flex-shrink:0; }
.mcc-wl-atc, .mcc-wl-rm { background:none; border:1px solid #e0e0e0; border-radius:6px; width:28px; height:28px; cursor:pointer; font-size:13px; display:flex; align-items:center; justify-content:center; transition:background .15s,border-color .15s; }
.mcc-wl-atc:hover { background:#111; border-color:#111; color:#fff; }
.mcc-wl-rm:hover { background:#fef2f2; border-color:#e74c3c; color:#e74c3c; }

.mcc-panel-wrap.open .mcc-wish-btn {
    background: #f0f0f0;
}

/* ══════════════════════════════════════════════════════════════════════
   MINI-PANELS
   Nota: Los paneles son teleportados al <body> por JS para escapar
   de cualquier overflow:hidden del tema. La opacidad/transform controlan
   la visibilidad. El JS añade .panel-visible para mostrarlos.
══════════════════════════════════════════════════════════════════════ */
.mcc-panel-wrap { position: relative; display:flex; align-items:center; }
.mcc-panel {
    position: fixed;
    width: 330px; background: #fff;
    border: 1px solid var(--border); border-radius: var(--radius-md);
    box-shadow: 0 8px 30px rgba(0,0,0,.14);
    padding: 14px;
    z-index: 99999;
    opacity: 0; pointer-events: none;
    transform: translateY(8px);
    transition: opacity .18s ease, transform .18s ease;
    overflow: visible;
}
/* Puente invisible anti-gap */
.mcc-panel::after {
    content: '';
    position: absolute; top: -10px; left: 0; right: 0;
    height: 10px; pointer-events: auto;
}
.mcc-panel.panel-visible {
    opacity: 1; pointer-events: all; transform: translateY(0);
}
.mcc-panel-ttl {
    font-size: 10px; font-weight: 700; letter-spacing: .1em;
    text-transform: uppercase; color: #bbb; margin: 0 0 10px; display: block;
}

/* Panel usuario */
.mcc-user-welcome {
    display: flex; align-items: center; gap: 10px;
    margin-bottom: 14px; padding-bottom: 14px;
    border-bottom: 1px solid var(--border);
}
.mcc-user-avatar {
    width: 38px; height: 38px; border-radius: 50%;
    background: var(--accent); color: #fff;
    font-size: 16px; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.mcc-user-hi {
    display: block; font-size: 10px; color: #aaa;
    text-transform: uppercase; letter-spacing: .08em; line-height: 1;
    margin-bottom: 3px;
}
.mcc-user-name { display: block; font-size: 14px; font-weight: 700; color: #111; line-height: 1; }

.mcc-user-links { display: flex; flex-direction: column; gap: 2px; }
.mcc-user-links a {
    display: flex; align-items: center; gap: 9px;
    padding: 9px 8px; border-radius: var(--radius-sm);
    font-size: 13px; font-weight: 500; color: #333;
    text-decoration: none;
    transition: background var(--ease), color var(--ease);
}
.mcc-user-links a:hover { background: #f4f4f4; color: #111; }
.mcc-user-logout { color: var(--red) !important; margin-top: 6px; }
.mcc-user-logout:hover { background: #fff0f0 !important; }

.mcc-user-cta-txt { font-size: 12px; color: #888; line-height: 1.5; margin: 0 0 14px; text-align: center; }
.mcc-user-cta-btn {
    display: block; width: 100%; text-align: center;
    padding: 10px; border-radius: var(--radius-sm);
    font-size: 13px; font-weight: 700;
    text-decoration: none; margin-bottom: 7px;
    transition: opacity .2s ease;
}
.mcc-user-cta-btn:hover { opacity: .85; }
.mcc-user-cta-login { background: #111; color: #fff !important; }
.mcc-user-cta-reg   { background: #f4f4f4; color: #333 !important; border: 1px solid #e0e0e0; }

/* ── Carrito mini — Perfect Scrollbar ── */
.mcc-panel .woocommerce-mini-cart {
    max-height: 290px; overflow: hidden;   /* PS maneja el scroll */
    border-radius: calc(var(--radius-md) - 2px);
    position: relative;                    /* requerido por PS */
}
/* Estilos personalizados de la barra Perfect Scrollbar en el panel */
.mcc-panel .ps__rail-y               { width: 4px !important; right: 2px !important; opacity: 1 !important; background: transparent !important; }
.mcc-panel .ps__thumb-y              { width: 4px !important; border-radius: 4px !important; background: rgba(0,0,0,.18) !important; right: 0 !important; }
.mcc-panel .ps__rail-y:hover .ps__thumb-y,
.mcc-panel .ps__rail-y.ps--clicking .ps__thumb-y { background: rgba(0,0,0,.35) !important; }
.mcc-panel .ps__rail-x               { display: none !important; }
.mcc-panel ul.woocommerce-mini-cart { padding: 0 !important; margin: 0 !important; }
.mcc-panel li.mini_cart_item {
    list-style: none !important;
    padding: 10px 0 !important;
    border-bottom: 1px solid #f0f0f0 !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    display: block !important;
}
.mcc-panel li.mini_cart_item:last-of-type { border-bottom: none !important; }
.mcc-panel li.mini_cart_item img {
    float: right !important;
    width: 62px !important; height: 62px !important;
    object-fit: cover !important; border-radius: 8px !important;
    margin-left: 10px !important; display: block !important;
}
.mcc-panel li.mini_cart_item a.remove {
    display: inline-flex !important; align-items: center !important;
    justify-content: center !important;
    width: 16px !important; height: 16px !important;
    border-radius: 50% !important; background: #f0f0f0 !important;
    color: #999 !important; font-size: 11px !important;
    text-decoration: none !important; line-height: 1 !important;
    margin-right: 6px !important; vertical-align: middle !important;
    flex-shrink: 0 !important;
}
.mcc-panel li.mini_cart_item a:not(.remove) {
    font-size: 13px !important; font-weight: 600 !important;
    color: #111 !important; text-decoration: none !important;
    line-height: 1.38 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    margin-bottom: 3px !important;
}
.mcc-panel li.mini_cart_item .quantity {
    display: block !important; font-size: 12px !important;
    color: #999 !important; margin-top: 2px !important;
}
.mcc-panel .woocommerce-mini-cart__total {
    display: flex !important; justify-content: space-between !important;
    font-size: 14px !important; font-weight: 700 !important;
    margin-top: 12px !important; padding-top: 12px !important;
    border-top: 2px solid #f0f0f0 !important;
}
.mcc-panel .woocommerce-mini-cart__buttons {
    display: flex !important; gap: 8px !important; margin-top: 10px !important;
}
.mcc-panel .woocommerce-mini-cart__buttons a {
    flex: 1 !important; text-align: center !important;
    padding: 11px 6px !important; border-radius: 8px !important;
    font-size: 12px !important; font-weight: 700 !important;
    text-decoration: none !important; white-space: nowrap !important;
    display: block !important;
}
.mcc-panel .woocommerce-mini-cart__buttons .checkout {
    background: #111 !important; color: #fff !important;
}
.mcc-panel .woocommerce-mini-cart__buttons .button:not(.checkout) {
    display: none !important; /* Solo mostrar Finalizar Compra */
}
.mcc-panel .woocommerce-mini-cart__buttons .checkout {
    flex: 1 !important;
}

/* ── Wishlist panel — Perfect Scrollbar ── */
.mcc-panel #mcc-wishlist-content {
    max-height: 320px; overflow: hidden;
    position: relative;
}
.mcc-panel #mcc-wishlist-content .ps__rail-y { width: 4px !important; opacity: 1 !important; background: transparent !important; }
.mcc-panel #mcc-wishlist-content .ps__thumb-y { width: 4px !important; border-radius: 4px !important; background: rgba(0,0,0,.18) !important; }
.mcc-panel #mcc-wishlist-content .ps__rail-x  { display: none !important; }
/* WPC woosw removed — native wishlist active */
.mcc-panel .woosw-list thead, .mcc-panel .woosw-list th,
.mcc-panel [class*="stock"], .mcc-panel .availability { display: none !important; }
.mcc-panel .woosw-list,
.mcc-panel .woosw-list tbody { display: block !important; width: 100% !important; }
.mcc-panel .woosw-item {
    display: flex !important; flex-direction: row !important;
    align-items: center !important; gap: 10px !important;
    padding: 10px 0 !important; border-bottom: 1px solid #f0f0f0 !important;
    width: 100% !important; box-sizing: border-box !important;
}
.mcc-panel .woosw-item:last-child { border-bottom: none !important; }
.mcc-panel .woosw-item-thumbnail {
    display: block !important; flex-shrink: 0 !important;
    order: 10 !important; width: 66px !important;
}
.mcc-panel .woosw-item-thumbnail a { display: block !important; }
.mcc-panel .woosw-item-thumbnail img {
    width: 66px !important; height: 66px !important;
    object-fit: cover !important; border-radius: 9px !important; display: block !important;
}
.mcc-panel .woosw-item-info { display: block !important; flex: 1 !important; min-width: 0 !important; order: 5 !important; }
.mcc-panel .woosw-item-name a, .mcc-panel .woosw-item-name {
    display: -webkit-box !important; -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important; overflow: hidden !important;
    font-size: 13px !important; font-weight: 600 !important;
    color: #111 !important; text-decoration: none !important;
    line-height: 1.38 !important; white-space: normal !important;
    word-break: break-word !important;
}
.mcc-panel .woosw-item-price,
.mcc-panel .woosw-item-price * {
    font-size: 12px !important; font-weight: 700 !important;
    color: var(--accent) !important; display: block !important; margin-top: 3px !important;
}
.mcc-panel .woosw-item-add { display: block !important; flex-shrink: 0 !important; order: 7 !important; }
.mcc-panel .woosw-btn,
.mcc-panel .woosw-item-add button,
.mcc-panel .woosw-item-add .button {
    font-size: 0 !important; width: 34px !important; height: 34px !important;
    border-radius: 50% !important; background: #111 !important;
    border: none !important; cursor: pointer !important;
    padding: 0 !important; margin: 0 !important;
    display: flex !important; align-items: center !important;
    justify-content: center !important; transition: background .2s ease !important;
    position: relative !important;
}
.mcc-panel .woosw-btn:hover,
.mcc-panel .woosw-item-add button:hover { background: #333 !important; }
.mcc-panel .woosw-btn::before,
.mcc-panel .woosw-item-add button::before {
    content: ''; display: block; width: 16px; height: 16px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='9' cy='21' r='1'/%3E%3Ccircle cx='20' cy='21' r='1'/%3E%3Cpath d='M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6'/%3E%3C/svg%3E");
    background-size: contain; background-repeat: no-repeat; background-position: center;
}

/* ── Drawer lateral ── */
#mcc-drawer { position: fixed; inset: 0; z-index: 9000; pointer-events: none; }
#mcc-drawer.open { pointer-events: all; }
#mcc-draw-ov {
    position: absolute; inset: 0;
    background: rgba(0,0,0,.48); backdrop-filter: blur(3px);
    opacity: 0; transition: opacity var(--ease);
}
#mcc-drawer.open #mcc-draw-ov { opacity: 1; }
#mcc-draw-panel {
    position: absolute; top: 0; left: 0;
    width: min(320px, 84vw); height: 100%;
    background: #fff; overflow-y: auto;
    display: flex; flex-direction: column;
    transform: translateX(-100%);
    transition: transform .3s cubic-bezier(.4,0,.2,1);
}
#mcc-drawer.open #mcc-draw-panel { transform: translateX(0); }
.mcc-draw-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 18px; border-bottom: 1px solid var(--border); flex-shrink: 0;
}
.mcc-draw-head img { height: 30px; width: auto; object-fit: contain; }
.mcc-draw-close {
    width: 34px; height: 34px; border-radius: 50%;
    background: #f4f4f4; border: none; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    font-size: 18px; color: #444; transition: background var(--ease);
}
.mcc-draw-close:hover { background: #e8e8e8; }
.mcc-draw-search {
    display: flex; align-items: center; gap: 10px;
    margin: 14px 18px; background: #f5f5f5; border-radius: 50px;
    padding: 10px 16px; cursor: pointer;
    border: 1.5px solid transparent; transition: border-color var(--ease);
}
.mcc-draw-search:hover { border-color: var(--accent); }
.mcc-draw-search span { color: #999; font-size: 14px; }
.mcc-draw-search svg { color: #aaa; flex-shrink: 0; }
.mcc-draw-cats { flex: 1; padding: 0 0 20px; }
.mcc-draw-cats-lbl {
    display: block; padding: 12px 18px 6px;
    font-size: 10px; font-weight: 700; letter-spacing: .1em;
    text-transform: uppercase; color: #bbb;
}
.mcc-draw-cat {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 18px; text-decoration: none; color: #333;
    border-bottom: 1px solid #f5f5f5;
    font-size: 14px; font-weight: 500;
    transition: background var(--ease), color var(--ease);
}
.mcc-draw-cat:hover    { background: #fafafa; color: var(--accent); }
.mcc-draw-cat.active   { color: var(--accent); font-weight: 700; background: rgba(176,139,110,.05); }
.mcc-draw-cat-img {
    width: 46px; height: 46px; object-fit: cover;
    border-radius: 8px; flex-shrink: 0; background: #f0f0f0; display: block;
}
.mcc-draw-cat-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── Overlay buscador ── */
#mcc-search-ov {
    position: fixed; inset: 0; z-index: 9999;
    background: rgba(8,8,8,.92); backdrop-filter: blur(8px);
    display: none; flex-direction: column;
    align-items: center; padding-top: 60px;
}
#mcc-search-ov.open { display: flex; animation: mcc-fi .18s ease; }
@keyframes mcc-fi { from{opacity:0} to{opacity:1} }
.mcc-srch-wrap { width: 92%; max-width: 640px; position: relative; }
.mcc-srch-input {
    width: 100%; background: none;
    border: none; border-bottom: 2px solid rgba(255,255,255,.45);
    color: #fff; font-size: 24px;
    padding: 10px 44px 10px 0;
    outline: none; font-family: inherit;
    transition: border-color .2s;
}
.mcc-srch-input:focus { border-color: #fff; }
.mcc-srch-input::placeholder { color: rgba(255,255,255,.28); }
.mcc-srch-close {
    position: absolute; right: 0; top: 8px;
    color: rgba(255,255,255,.55); font-size: 28px;
    cursor: pointer; background: none; border: none; transition: color .2s;
}
.mcc-srch-close:hover { color: #fff; }
#mcc-srch-res {
    margin-top: 16px; width: 92%; max-width: 640px;
    display: flex; flex-direction: column; gap: 8px;
}
.mcc-res-card {
    background: #fff; border-radius: 12px; padding: 12px;
    display: grid; grid-template-columns: 64px 1fr auto;
    gap: 12px; align-items: center;
    animation: mcc-si .16s ease;
}
@keyframes mcc-si { from{opacity:0;transform:translateY(4px)} to{opacity:1;transform:none} }
.mcc-res-img { width: 64px; height: 64px; object-fit: cover; border-radius: 8px; display: block; }
.mcc-res-img-a { display: block; flex-shrink: 0; }
.mcc-res-title {
    display: block; font-size: 13.5px; font-weight: 600; color: #111;
    text-decoration: none; line-height: 1.3; margin-bottom: 4px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    transition: color .15s;
}
.mcc-res-title:hover { color: var(--accent); }
.mcc-res-price { color: var(--accent); font-weight: 700; font-size: 13.5px; }
.mcc-res-actions { display: flex; flex-direction: column; gap: 6px; align-items: flex-end; }
.mcc-res-qty-row { display: flex; align-items: center; gap: 6px; }
.mcc-res-qty {
    width: 52px !important; height: 34px !important;
    padding: 0 6px !important; border: 1.5px solid #ddd !important;
    border-radius: 6px !important; font-size: 14px !important;
    text-align: center !important; outline: none !important;
    -moz-appearance: textfield !important;
}
.mcc-res-qty::-webkit-outer-spin-button,
.mcc-res-qty::-webkit-inner-spin-button { -webkit-appearance: none; }
.mcc-res-qty:focus { border-color: var(--accent) !important; }
.mcc-res-add {
    width: 34px; height: 34px; background: #111; color: #fff;
    border: none; border-radius: 7px; font-size: 15px;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    transition: background .2s, transform .15s; flex-shrink: 0;
}
.mcc-res-add:hover { background: #333; transform: scale(1.06); }
.mcc-res-add.done { background: var(--green); }
.mcc-res-oc {
    display: block; text-align: center;
    background: var(--accent); color: #fff !important;
    font-size: 10px; font-weight: 700; letter-spacing: .08em;
    padding: 7px 10px; border-radius: 6px;
    text-decoration: none; white-space: nowrap;
    transition: filter .2s, transform .15s;
}
.mcc-res-oc:hover { filter: brightness(.88); transform: translateY(-1px); }
.mcc-no-res { color: rgba(255,255,255,.38); font-size: 15px; text-align: center; padding: 24px 0; }

/* ── Modal categorías (dock) ── */
#mcc-cat-modal { position: fixed; inset: 0; z-index: 8500; pointer-events: none; }
#mcc-cat-modal.open { pointer-events: all; }
#mcc-cat-ov {
    position: absolute; inset: 0;
    background: rgba(0,0,0,.52); backdrop-filter: blur(3px);
    opacity: 0; transition: opacity .28s ease;
}
#mcc-cat-modal.open #mcc-cat-ov { opacity: 1; }
#mcc-cat-sheet {
    position: absolute; bottom: 0; left: 0; right: 0;
    background: #fff; border-radius: 20px 20px 0 0;
    padding: 18px 16px calc(84px + env(safe-area-inset-bottom, 10px));
    transform: translateY(100%);
    transition: transform .32s cubic-bezier(.4,0,.2,1), visibility 0s .32s;
    max-height: 80vh; overflow-y: auto;
    visibility: hidden;
    will-change: transform;
}
#mcc-cat-modal.open #mcc-cat-sheet {
    transform: translateY(0);
    visibility: visible;
    transition: transform .32s cubic-bezier(.4,0,.2,1), visibility 0s 0s;
}
.mcc-cat-handle { width: 36px; height: 4px; background: #e0e0e0; border-radius: 2px; margin: 0 auto 16px; }
.mcc-cat-modal-ttl {
    font-size: 11px; font-weight: 700; letter-spacing: .1em;
    text-transform: uppercase; color: #bbb; margin-bottom: 16px; display: block;
}
.mcc-cat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
@media (max-width: 360px) { .mcc-cat-grid { grid-template-columns: repeat(2, 1fr); } }
.mcc-cat-card {
    display: flex; flex-direction: column; align-items: center; gap: 7px;
    text-decoration: none; padding: 10px 6px;
    border-radius: 12px; transition: background var(--ease);
}
.mcc-cat-card:hover { background: #f5f5f5; }
.mcc-cat-card-img {
    width: 76px; height: 76px; object-fit: cover;
    border-radius: 12px; display: block; background: #f0f0f0;
}
.mcc-cat-card-name {
    font-size: 11.5px; font-weight: 600; color: #222;
    text-align: center; line-height: 1.3;
    display: -webkit-box; -webkit-line-clamp: 2;
    -webkit-box-orient: vertical; overflow: hidden;
}

/* ── DOCK ── */
.mcc-dock {
    position: fixed; bottom: 18px; left: 50%;
    transform: translateX(-50%);
    width: min(94%, 420px); height: 62px;
    background: var(--dock-bg); border-radius: 62px;
    display: flex; align-items: center; justify-content: space-around;
    z-index: 8000;
    box-shadow: 0 8px 32px rgba(0,0,0,.3), 0 2px 8px rgba(0,0,0,.18);
    transition: opacity .25s ease;
    opacity: 1;
}
.mcc-dock.dock-hide { opacity: 0; pointer-events: none; }
.mcc-di {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    width: 52px; height: 52px; border-radius: 50%;
    text-decoration: none; background: none; border: none; cursor: pointer;
    color: rgba(255,255,255,.48); position: relative;
    transition: color var(--ease), transform var(--ease);
    gap: 3px; font-family: inherit;
}
.mcc-di:hover { color: rgba(255,255,255,.82); }
.mcc-di svg { display: block; flex-shrink: 0; }
.mcc-di-lbl {
    font-size: 8.5px; font-weight: 700; letter-spacing: .05em;
    text-transform: uppercase; line-height: 1;
    opacity: 0; transition: opacity var(--ease); white-space: nowrap;
}
.mcc-di.active { color: var(--accent) !important; }
.mcc-di.active .mcc-di-lbl { opacity: 1; color: var(--accent); }
.mcc-di.active::after {
    content: ''; position: absolute; bottom: 5px; left: 50%;
    transform: translateX(-50%); width: 4px; height: 4px;
    border-radius: 50%; background: var(--accent);
}
.mcc-di.active svg { transform: scale(1.1); }
.mcc-di-badge {
    position: absolute; top: 7px; right: 7px;
    min-width: 15px; height: 15px; border-radius: 8px; padding: 0 3px;
    font-size: 8.5px; font-weight: 700; line-height: 1;
    display: flex; align-items: center; justify-content: center;
    border: 2px solid var(--dock-bg); color: #fff;
}
.mcc-di-badge-g { background: var(--green); }
.mcc-di-badge-r { background: var(--red);   }
.mcc-di-center {
    width: 50px !important; height: 50px !important;
    background: var(--accent) !important; color: #fff !important;
    margin-top: -26px;
    box-shadow: 0 4px 18px rgba(0,0,0,.32); border-radius: 50% !important;
}
.mcc-di-center:hover { transform: scale(1.08) !important; }
.mcc-di-center.active { color: #fff !important; }

/* ── Responsive ── */
@media (max-width: 860px) {
    .mcc-nav    { display: none; }
    .mcc-ham    { display: flex; }
    /* Mobile: logo still absolutely centered, flex layout */
    .mcc-logo-img, .mcc-logo-1 {
        width: /* PHP_VAR */px;
        max-width: /* PHP_VAR */px;
        height: /* PHP_VAR */;
        max-height: /* PHP_VAR */;
    }
    .mcc-logo-2 {
        max-width: 180px;
        max-height: calc(/* PHP_VAR */ * 1.3);
    }
    .mcc-icon-btn svg { width: /* PHP_VAR */px; height: /* PHP_VAR */px; }
    /* Make sure h-right doesn't overlap logo on small screens */
    .mcc-h-right { gap: 0; }
}
@media (max-width: 380px) {
    .mcc-logo-wrap { position: absolute; left: 50%; transform: translateX(-50%); }
}
@media (max-width: 768px) {
    .mcc-dock {
        bottom: 0 !important; left: 0 !important; right: 0 !important;
        transform: none !important; width: 100% !important; max-width: 100% !important;
        border-radius: 16px 16px 0 0 !important;
        height: auto !important; min-height: 58px !important;
        padding-bottom: env(safe-area-inset-bottom, 0px) !important;
        box-shadow: 0 -2px 16px rgba(0,0,0,.22) !important;
        transition: opacity .08s ease !important;
    }
    .mcc-dock.dock-hide { opacity: 0 !important; pointer-events: none !important; transform: none !important; }
    #mcc-dock-floor { display: block !important; height: env(safe-area-inset-bottom, 0px) !important; }
    .mcc-di        { width: 48px; height: 54px; padding-bottom: 4px; }
    .mcc-di-center { margin-top: -18px; width: 46px !important; height: 46px !important; }
    body { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)) !important; }
    #mcc-dock-floor {
        display: block; position: fixed; bottom: 0; left: 0; right: 0;
        height: calc(64px + env(safe-area-inset-bottom, 0px));
        background: #0f0f0f; z-index: 7999; pointer-events: none;
    }
}
@media (max-width: 380px) {
    .mcc-di { width: 42px; }
    .mcc-di-lbl { font-size: 7.5px; }
}
#mcc-dock-floor { display: none; }