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

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0;width:100%;
  background:/* PHP_VAR */;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  -webkit-font-smoothing:antialiased}
#wpadminbar{display:none!important}
.sf-w{position:relative;width:100%;height:100vh;display:flex;justify-content:center}
.sf-s{width:100%;height:100%;overflow-y:scroll;scroll-snap-type:y mandatory;
  scrollbar-width:none;max-width:500px}
.sf-s::-webkit-scrollbar{display:none}
.sf-sl{width:100%;height:100vh;position:relative;scroll-snap-align:start;
  overflow:hidden;background:#000;flex-shrink:0}
.sf-v{width:100%;height:100%;object-fit:cover;display:block}
.sf-g{position:absolute;bottom:0;left:0;right:0;height:72%;
  background:linear-gradient(to top,rgba(0,0,0,.93) 0%,rgba(0,0,0,.3) 55%,transparent);
  pointer-events:none;z-index:2}
.sf-t{position:absolute;inset:0;z-index:5;display:flex;align-items:center;
  justify-content:center;cursor:pointer}
.sf-pi{width:80px;height:80px;background:rgba(0,0,0,.45);border-radius:50%;
  display:none;align-items:center;justify-content:center;pointer-events:none;
  backdrop-filter:blur(6px);animation:si .2s}
.sf-pi svg{width:40px;height:40px;fill:#fff;margin-left:5px}
.sf-sl.paused .sf-pi{display:flex}
@keyframes si{from{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}}
.sf-ui{position:absolute;inset:0;z-index:10;pointer-events:none}
.sf-tb{position:fixed;top:0;left:50%;transform:translateX(-50%);width:100%;max-width:500px;
  display:flex;align-items:center;padding:14px 14px 0;z-index:100;pointer-events:auto;gap:10px;
  background:linear-gradient(to bottom,rgba(0,0,0,.5),transparent)}
.sf-sb{width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.15);
  backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.3);display:flex;
  align-items:center;justify-content:center;text-decoration:none;flex-shrink:0;overflow:hidden}
.sf-sb img{width:100%;height:100%;object-fit:contain}
.sf-sb svg{width:20px;height:20px;stroke:#fff;fill:none;stroke-width:2}
.sf-tabs{display:flex;flex:1;justify-content:center;gap:22px}
.sf-tab{color:rgba(255,255,255,.65);text-decoration:none;font-weight:600;font-size:15px;
  text-shadow:0 1px 3px rgba(0,0,0,.7);transition:.25s;padding-bottom:4px}
.sf-tab.active{color:#fff;border-bottom:2px solid #fff}
.sf-snd{position:fixed;top:68px;left:50%;transform:translateX(-50%);z-index:100;
  background:rgba(0,0,0,.6);color:#fff;border:1px solid rgba(255,255,255,.3);
  padding:6px 16px;border-radius:20px;font-size:12px;cursor:pointer;
  pointer-events:auto;transition:opacity .4s;backdrop-filter:blur(4px)}
.sf-side{position:absolute;right:10px;bottom:175px;z-index:20;display:flex;
  flex-direction:column;gap:22px;align-items:center;pointer-events:auto}
.sf-btn{color:#fff;display:flex;flex-direction:column;align-items:center;cursor:pointer;
  font-size:10px;font-weight:600;text-shadow:0 1px 2px rgba(0,0,0,.9);
  text-align:center;width:50px;position:relative;user-select:none}
.sf-ic{width:46px;height:46px;background:rgba(0,0,0,.4);border-radius:50%;
  display:flex;align-items:center;justify-content:center;margin-bottom:4px;
  border:1px solid rgba(255,255,255,.22);transition:all .25s;backdrop-filter:blur(4px)}
.sf-ic svg{width:22px;height:22px;stroke:#fff;stroke-width:1.5;fill:none}
.sf-btn:active .sf-ic{transform:scale(.88)}
.sf-btn.added .sf-ic{background:rgba(46,204,113,.45)!important;border-color:#2ecc71!important}
.sf-btn.added .sf-ic svg{stroke:#2ecc71!important}
.sf-ic-heart{transition:background .2s,border-color .2s}
.sf-wl-btn.wl-active .sf-ic-heart{background:rgba(231,76,60,.5)!important;border-color:#e74c3c!important}
.sf-wl-btn.wl-active .sf-ic-heart svg{stroke:#e74c3c!important;fill:#e74c3c!important}
.sf-wl{position:relative;width:50px;height:64px;display:flex;justify-content:center}
.sf-wlg{position:absolute;inset:0;opacity:0;z-index:10;cursor:pointer}
.sf-wlv{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
  pointer-events:none;z-index:1;color:#fff;font-size:10px;font-weight:600}
.sf-bn{position:absolute;top:0;right:0;background:#2ecc71;color:#fff;font-size:9px;
  padding:2px 5px;border-radius:10px;display:none;animation:pop .3s;border:1px solid #fff;z-index:10}
@keyframes pop{from{transform:scale(0)}to{transform:scale(1)}}
.sf-info{position:absolute;left:15px;bottom:90px;width:calc(100% - 80px);max-width:320px;
  z-index:20;text-align:left;pointer-events:auto}
.sf-sk{display:inline-block;background:#e74c3c;color:#fff;padding:3px 8px;
  border-radius:4px;font-size:10px;margin-bottom:6px;font-weight:700}
.sf-ti{font-size:16px;margin:0 0 5px;font-weight:700;
  text-shadow:0 1px 3px rgba(0,0,0,.95);line-height:1.25}
.sf-ti a{color:#fff!important;text-decoration:none}
.sf-de{color:rgba(255,255,255,.78);font-size:13px;margin:0 0 8px;line-height:1.4}
.sf-pr{color:#fff;font-size:22px;font-weight:800;text-shadow:0 1px 4px rgba(0,0,0,.95);
  margin-bottom:12px;display:block}
.sf-cta{display:flex;gap:8px;height:44px}
.sf-qty{display:flex;align-items:center;background:rgba(255,255,255,.22);
  backdrop-filter:blur(6px);border-radius:10px;width:90px;padding:0 6px;
  border:1px solid rgba(255,255,255,.25)}
.sf-qb{background:none;border:none;color:#fff;width:26px;font-size:20px;cursor:pointer;
  padding:0;display:flex;align-items:center;justify-content:center}
.sf-qn{flex:1;min-width:0;text-align:center;font-weight:700;font-size:16px;
  color:#fff;user-select:none}
.sf-buy{flex-grow:1;background:#fe2c55;color:#fff;border:none;border-radius:10px;
  font-weight:800;font-size:13px;text-transform:uppercase;cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:.15s}
.sf-buy:active{transform:scale(.96)}
.sf-em{height:100vh;display:flex;flex-direction:column;align-items:center;
  justify-content:center;color:#fff;text-align:center;padding:30px;gap:14px}
</style>
</head><body>
<div class="sf-w">
    /* PHP_VAR */
        <audio id="sf-audio" src="/* PHP_VAR */" preload="auto"></audio>
    /* PHP_VAR */
    <button id="sf-snd" class="sf-snd">🔇 Sonido Off</button>
    <div class="sf-tb">
        <a href="/* PHP_VAR */" class="sf-sb" title="Tienda">
            /* PHP_VAR */
                <img src="/* PHP_VAR */" alt="Tienda" loading="lazy">
            /* PHP_VAR */
                <svg viewBox="0 0 24 24"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/>
                <polyline points="9 22 9 12 15 12 15 22"/></svg>
            /* PHP_VAR */
        </a>
        <nav class="sf-tabs">
            <a href="?filter=random" class="sf-tab <?php echo $filter==='random'?'active':''; ?>">Para ti</a>
            <a href="?filter=new"    class="sf-tab <?php echo $filter==='new'   ?'active':''; ?>">Novedades</a>
            <a href="?filter=sale"   class="sf-tab <?php echo $filter==='sale'  ?'active':''; ?>">Ofertas</a>
        </nav>
    </div>
    <div class="sf-s" id="sfC">
        /* PHP_VAR */
        <div id="sf-inf" style="height:2px;width:100%;flex-shrink:0;"></div>
    </div>
</div>
<script>
(function(){
    const C    = document.getElementById('sfC');
    const sBtn = document.getElementById('sf-snd');
    const audio= document.getElementById('sf-audio');
    const ajax = /* PHP_VAR */;
    let muted  = true;

    // IntersectionObserver: reproducir el slide visible
    const io = new IntersectionObserver(ee => {
        ee.forEach(e => {
            const s = e.target, v = s.querySelector('video');
            if (!v) return;
            if (e.isIntersecting) {
                v.currentTime = 0;
                v.muted = muted;
                v.play().then(() => s.classList.remove('paused')).catch(() => {});
            } else {
                v.pause();
                s.classList.remove('paused');
            }
        });
    }, { threshold: .65 });
    document.querySelectorAll('.sf-sl').forEach(s => io.observe(s));

    /* PHP_VAR */
    const t = C.querySelector('.sf-sl[data-pid="/* PHP_VAR */"]');
    if (t) requestAnimationFrame(() => setTimeout(() => t.scrollIntoView({ behavior:'instant', block:'start' }), 80));
    /* PHP_VAR */

    // Scroll infinito: al llegar al centinela, duplicar slides
    const inf = document.getElementById('sf-inf');
    if (inf) {
        new IntersectionObserver(ee => {
            if (!ee[0].isIntersecting) return;
            const orig = Array.from(C.querySelectorAll('.sf-sl'));
            if (!orig.length) return;
            [...orig].sort(() => Math.random() - .5).forEach(s => {
                const cl = s.cloneNode(true);
                cl.classList.remove('paused');
                const v = cl.querySelector('video');
                if (v) { v.pause(); v.currentTime = 0; }
                C.insertBefore(cl, inf);
                io.observe(cl);
            });
        }, { root: C, threshold: .05 }).observe(inf);
    }

    // Botón sonido
    if (sBtn) {
        let ft = setTimeout(() => sBtn.style.opacity = '0', 4500);
        sBtn.onclick = () => {
            muted = !muted;
            sBtn.textContent = muted ? '🔇 Sonido Off' : '🔊 Sonido On';
            sBtn.style.opacity = '1';
            clearTimeout(ft);
            ft = setTimeout(() => sBtn.style.opacity = '0', 3000);
            document.querySelectorAll('video').forEach(v => v.muted = muted);
        };
    }

    // Delegación de eventos en el scroll-container
    C.addEventListener('click', e => {
        // Play/Pause al tocar el video
        if (e.target.closest('.sf-t')) {
            const s = e.target.closest('.sf-sl'), v = s?.querySelector('video');
            if (!v) return;
            if (v.paused) { v.play(); s.classList.remove('paused'); }
            else          { v.pause(); s.classList.add('paused');   }
            return;
        }

        // Botones +/− de cantidad
        if (e.target.classList.contains('sf-qb')) {
            const qty = e.target.closest('.sf-qty'), n = qty?.querySelector('.sf-qn');
            if (n) {
                const v = parseInt(n.textContent) || 1;
                n.textContent = e.target.classList.contains('minus') ? (v > 1 ? v - 1 : 1) : v + 1;
            }
            return;
        }

        // Compartir
        const sh = e.target.closest('.sf-share');
        if (sh) {
            const d = { title: sh.dataset.title, url: sh.dataset.url };
            navigator.share ? navigator.share(d).catch(() => {}) : prompt('Enlace:', sh.dataset.url);
            return;
        }

        // Añadir / Comprar
        const cb = e.target.closest('.sf-add,.sf-buy');
        if (cb) {
            const buy = cb.classList.contains('sf-buy');
            const pid = cb.dataset.pid;
            const n   = cb.closest('.sf-cta')?.querySelector('.sf-qn');
            const qty = buy ? (parseInt(n?.textContent) || 1) : 1;
            addCart(pid, qty, cb, buy);
        }
    });

    // ── MCC AJAX add to cart ──────────────────────────────────
    const NONCE = /* PHP_VAR */;
    const CHECKOUT = /* PHP_VAR */;
    const SHOP_URL = /* PHP_VAR */;

    function addCart(pid, qty, btn, redirect) {
        if (navigator.vibrate) navigator.vibrate(30);
        if (btn.dataset.busy === '1') return;
        const orig = btn.innerHTML;
        btn.dataset.busy = '1';
        if (redirect) btn.innerHTML = '⏳';
        fetch(ajax, {
            method: 'POST',
            headers: {'Content-Type':'application/x-www-form-urlencoded'},
            body: new URLSearchParams({action:'mcc_add_to_cart', product_id:pid, quantity:qty, nonce:NONCE})
        })
        .then(r => r.json())
        .then(d => {
            btn.dataset.busy = '';
            if (!redirect) {
                if (d.success) {
                    if (audio) { audio.currentTime = 0; audio.play().catch(() => {}); }
                    btn.classList.add('added');
                    const badge = btn.querySelector('.sf-bn');
                    if (badge) { badge.style.display = 'block'; setTimeout(() => badge.style.display = 'none', 2000); }
                    setTimeout(() => btn.classList.remove('added'), 2500);
                } else {
                    btn.innerHTML = '✕ Error'; setTimeout(() => btn.innerHTML = orig, 2000);
                }
            } else {
                if (d.success) {
                    window.location.href = (d.data?.checkout_url || CHECKOUT) + '?added_to_cart=1';
                } else {
                    btn.innerHTML = orig; btn.dataset.busy = '';
                }
            }
        })
        .catch(() => { btn.dataset.busy = ''; if (redirect) btn.innerHTML = orig; });
    }

    // ── MCC Wishlist toggle for Shorts ────────────────────────
    // Inicializar corazones activos
    fetch(ajax, { method:'POST', headers:{'Content-Type':'application/x-www-form-urlencoded'},
        body: new URLSearchParams({action:'mcc_wl_get', nonce:NONCE})
    }).then(r=>r.json()).then(d => {
        if (d.success && d.data.ids) {
            const ids = d.data.ids.map(String);
            document.querySelectorAll('.sf-wl-btn').forEach(b => {
                if (ids.includes(String(b.dataset.pid))) b.classList.add('wl-active');
            });
        }
    }).catch(()=>{});

    // Click corazón wishlist
    C.addEventListener('click', e => {
        const wlb = e.target.closest('.sf-wl-btn');
        if (wlb) {
            e.stopPropagation();
            const pid = wlb.dataset.pid;
            const wasActive = wlb.classList.contains('wl-active');
            wlb.classList.toggle('wl-active');
            if (navigator.vibrate) navigator.vibrate(wasActive ? 20 : 40);
            fetch(ajax, { method:'POST', headers:{'Content-Type':'application/x-www-form-urlencoded'},
                body: new URLSearchParams({action:'mcc_wl_toggle', pid:pid, nonce:NONCE})
            }).then(r=>r.json()).then(d => {
                if (!d.success) wlb.classList.toggle('wl-active');
                else if (d.data.ids) {
                    const ids = d.data.ids.map(String);
                    document.querySelectorAll('.sf-wl-btn').forEach(b => {
                        b.classList.toggle('wl-active', ids.includes(String(b.dataset.pid)));
                    });
                }
            }).catch(() => wlb.classList.toggle('wl-active'));
            return;
        }
    });

    // ── Swipe horizontal: derecha=producto, izquierda=tienda ─
    let touchStartX = 0, touchStartY = 0;
    C.addEventListener('touchstart', e => {
        touchStartX = e.touches[0].clientX;
        touchStartY = e.touches[0].clientY;
    }, { passive: true });
    C.addEventListener('touchend', e => {
        const dx = e.changedTouches[0].clientX - touchStartX;
        const dy = e.changedTouches[0].clientY - touchStartY;
        if (Math.abs(dx) < 50 || Math.abs(dx) < Math.abs(dy) * 1.5) return;
        if (dx > 0) {
            // Swipe right → tienda
            window.location.href = SHOP_URL;
        } else {
            // Swipe left → página del producto
            const visible = document.elementFromPoint(window.innerWidth/2, window.innerHeight/2);
            const slide   = visible?.closest('.sf-sl');
            if (slide) {
                const link = slide.querySelector('.sf-ti a');
                if (link) window.location.href = link.href;
            }
        }
    }, { passive: true });
})();
</script>
/* PHP_VAR */
</body></html>
        <?php
        echo ob_get_clean();
        exit;
    }

    /* ══════════════════════════════════════════════════════════
       SHORTS — Slide individual
    ══════════════════════════════════════════════════════════ */
    private function render_slide( $product ): void {
        $pid   = $product->get_id();
        $video = mcc_cloudinary_video( $pid );
        if ( ! $video ) return;

        $stock = $product->get_stock_quantity();
        $low   = ( $stock !== null && $stock > 0 && $stock < 5 );
        $price = strip_tags( wc_price( $product->get_price() ) );
        $link  = get_permalink( $pid );
        $thumb = get_the_post_thumbnail_url( $pid, 'medium' ) ?: '';
        ?>
        <div class="sf-sl" data-pid="/* PHP_VAR */">
            <video class="sf-v" src="/* PHP_VAR */"
                   playsinline loop muted preload="metadata"
                   /* PHP_VAR */></video>
            <div class="sf-t"><div class="sf-pi">
                <svg viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg>
            </div></div>
            <div class="sf-g"></div>
            <div class="sf-ui">
                <div class="sf-side">
                    <div class="sf-btn sf-wl-btn" data-pid="/* PHP_VAR */">
                        <div class="sf-ic sf-ic-heart">
                            <svg viewBox="0 0 24 24"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/></svg>
                        </div>
                        <span>Favorito</span>
                    </div>
                    <div class="sf-btn sf-add" data-pid="/* PHP_VAR */">
                        <div class="sf-ic">
                            <svg viewBox="0 0 24 24"><circle cx="9" cy="21" r="1"/><circle cx="20" cy="21" r="1"/>
                            <path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"/></svg>
                            <span class="sf-bn">+1</span>
                        </div>
                        <span>Añadir</span>
                    </div>
                    <div class="sf-btn sf-share"
                         data-url="/* PHP_VAR */"
                         data-title="/* PHP_VAR */">
                        <div class="sf-ic">
                            <svg viewBox="0 0 24 24"><circle cx="18" cy="5" r="3"/><circle cx="6" cy="12" r="3"/>
                            <circle cx="18" cy="19" r="3"/><line x1="8.59" y1="13.51" x2="15.42" y2="17.49"/>
                            <line x1="15.41" y1="6.51" x2="8.59" y2="10.49"/></svg>
                        </div>
                        <span>Enviar</span>
                    </div>
                </div>
                <div class="sf-info">
                    /* PHP_VAR */
                        <div class="sf-sk">⚡ ¡Quedan /* PHP_VAR */!</div>
                    /* PHP_VAR */
                    <h2 class="sf-ti">
                        <a href="/* PHP_VAR */">/* PHP_VAR */</a>
                    </h2>
                    /* PHP_VAR */
                        <p class="sf-de">/* PHP_VAR */</p>
                    /* PHP_VAR */
                    <span class="sf-pr">/* PHP_VAR */</span>
                    <div class="sf-cta">
                        <div class="sf-qty">
                            <button class="sf-qb minus" type="button">−</button>
                            <span class="sf-qn">1</span>
                            <button class="sf-qb plus" type="button">+</button>
                        </div>
                        <button class="sf-buy"
                                data-pid="/* PHP_VAR */"
                                data-co="/* PHP_VAR */">
                            Comprar • /* PHP_VAR */
                        </button>
                    </div>
                </div>
            </div>
        </div>
        <?php
    }

    /* ══════════════════════════════════════════════════════════
       TIENDA — DATA TAG (inyecta metadatos en cada card)
    ══════════════════════════════════════════════════════════ */
    public function filter_gif_loop_image( $image, $product, $size, $attr, $placeholder ): string {
        if ( ! is_a( $product, 'WC_Product' ) ) return $image;
        // Solo en el loop de la tienda, no en la ficha del producto
        if ( is_product() ) return $image;
        $main_id = $product->get_image_id();
        if ( ! $main_id ) return $image;
        if ( get_post_mime_type( $main_id ) !== 'image/gif' ) return $image;
        // Servir el GIF original (full) para que el navegador lo anime
        $full_url = wp_get_attachment_image_url( $main_id, 'full' );
        if ( ! $full_url ) return $image;
        // Reemplazar el src en el HTML generado por WC
        $image = preg_replace( '/ src="[^"]*"/', ' src="' . esc_url( $full_url ) . '"', $image );
        $image = preg_replace( '/ srcset="[^"]*"/', '', $image );
        $image = preg_replace( '/ sizes="[^"]*"/', '', $image );
        return $image;
    }

    public function inject_data_tag(): void {
        $pid = get_the_ID();
        if ( ! $pid ) return;
        $product = wc_get_product( $pid );
        if ( ! $product ) return;

        $video = mcc_cloudinary_video( $pid );

        // Imagen principal
        $images = [];
        $main_id = $product->get_image_id();
        if ( $main_id ) {
            // Usar tamaño 'full' para GIFs para preservar animación
            $main_mime = get_post_mime_type( $main_id );
            $main_size = ( $main_mime === 'image/gif' ) ? 'full' : 'woocommerce_thumbnail';
            $src = wp_get_attachment_image_url( $main_id, $main_size )
                ?: wp_get_attachment_image_url( $main_id, 'full' );
            if ( $src ) $images[] = $src;
        }
        // Galería — también preservar GIFs
        foreach ( $product->get_gallery_image_ids() as $gid ) {
            $gal_mime = get_post_mime_type( $gid );
            $gal_size = ( $gal_mime === 'image/gif' ) ? 'full' : 'woocommerce_thumbnail';
            $src = wp_get_attachment_image_url( $gid, $gal_size )
                ?: wp_get_attachment_image_url( $gid, 'full' );
            if ( $src ) $images[] = $src;
        }

        $video360      = mcc_video_360( $pid );
        $show_360_shop = mcc_360_en_tienda( $pid ) ? '1' : '0';

        printf(
            '<span class="mcc-data" data-pid="%d" data-video="%s" data-name="%s"'
            . ' data-price="%s" data-url="%s" data-images="%s"'
            . ' data-video360="%s" data-show360="%s"'
            . ' aria-hidden="true" style="display:none;"></span>',
            $pid,
            esc_attr( $video ),
            esc_attr( $product->get_name() ),
            esc_attr( strip_tags( wc_price( $product->get_price() ) ) ),
            esc_url( get_permalink( $pid ) ),
            esc_attr( wp_json_encode( $images ) ),
            esc_attr( $video360 ),
            esc_attr( $show_360_shop )
        );
    }

    /* ══════════════════════════════════════════════════════════
       TIENDA — CARD ACTIONS (botones precio, qty, añadir, ver)
    ══════════════════════════════════════════════════════════ */
    public function inject_card_actions(): void {
        global $product;
        if ( ! $product ) return;

        $pid      = $product->get_id();
        $qb_act   = (int) get_option('mcc_quick_buy_active', 1);
        $qb_text  = esc_html( get_option('mcc_quick_buy_text', 'Comprar ya ⚡') );
        $qb_bg    = esc_attr( get_option('mcc_quick_buy_bg', '#111111') );
        $qb_color = esc_attr( get_option('mcc_quick_buy_color', '#ffffff') );
        $add_bg   = esc_attr( get_option('mcc_add_btn_bg', '#111111') );
        $add_col  = esc_attr( get_option('mcc_add_btn_color', '#ffffff') );
        $has_vid  = (bool) mcc_cloudinary_video( $pid );
        ?>
        <div class="mcc-ca" data-pid="/* PHP_VAR */">
            <div class="mcc-ca-price">/* PHP_VAR */</div>
            <div class="mcc-ca-row">
                <div class="mcc-ca-qty">
                    <button class="mcc-ca-minus" type="button" aria-label="Reducir">−</button>
                    <span   class="mcc-ca-num"   aria-label="Cantidad">1</span>
                    <button class="mcc-ca-plus"  type="button" aria-label="Aumentar">+</button>
                </div>
                <button class="mcc-ca-add" type="button" data-pid="/* PHP_VAR */"
                        style="background:/* PHP_VAR */;color:/* PHP_VAR */;">
                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none"
                         stroke="currentColor" stroke-width="2.2">
                        <circle cx="9" cy="21" r="1"/><circle cx="20" cy="21" r="1"/>
                        <path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"/>
                    </svg>
                    <span class="mcc-ca-add-label">Añadir</span>
                </button>
                <button class="mcc-ca-view" type="button" data-pid="/* PHP_VAR */">
                    /* PHP_VAR */
                        <svg width="11" height="11" viewBox="0 0 24 24" fill="currentColor">
                            <polygon points="5 3 19 12 5 21 5 3"/>
                        </svg>
                    /* PHP_VAR */
                        <svg width="12" height="12" viewBox="0 0 24 24" fill="none"
                             stroke="currentColor" stroke-width="2">
                            <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/>
                            <circle cx="12" cy="12" r="3"/>
                        </svg>
                    /* PHP_VAR */
                    <span class="mcc-ca-view-label">Ver</span>
                </button>
            </div>
            /* PHP_VAR */
            <button class="mcc-ca-qb" type="button" data-pid="/* PHP_VAR */"
                    style="background:/* PHP_VAR */;color:/* PHP_VAR */;">
                /* PHP_VAR */
            </button>
            /* PHP_VAR */
        </div>
        <?php
    }

    /* ══════════════════════════════════════════════════════════
       FRONTEND STYLES — Tienda & Producto
    ══════════════════════════════════════════════════════════ */
    public function frontend_styles(): void {
        if ( ! is_shop() && ! is_product_category() && ! is_product_tag() && ! is_product() ) return;

        $qb_bg    = esc_attr( get_option('mcc_quick_buy_bg', '#111111') );
        $qb_color = esc_attr( get_option('mcc_quick_buy_color', '#ffffff') );
        // Border radius configurable (por defecto toma el de WooCommerce o el admin)
        $img_radius = (int) get_option('mcc_img_border_radius', 0);
        $radius_css = $img_radius > 0 ? $img_radius . 'px' : 'var(--wc-product-img-radius, 0px)';
        ?>
        <style id="mcc-suite-styles">
        /* Border radius de imágenes configurable */
        .mcc-img-wrap,
        .woocommerce ul.products li.product a img,
        .woocommerce-product-gallery__image img,
        .woocommerce-product-gallery .flex-viewport { border-radius: /* PHP_VAR */ !important; overflow: hidden; }
        .mcc-gi, .mcc-hv-vid { border-radius: /* PHP_VAR */ !important; }

        /* ── Ocultar botón WC nativo ── */
        .products li.product .button.add_to_cart_button,
        .products li.product .added_to_cart { display:none!important; }

        /* ══════════════════════════════════════════
           WRAPPER DE IMAGEN
        ══════════════════════════════════════════ */
        .mcc-img-wrap {
            position:relative; display:block; overflow:hidden;
            line-height:0; cursor:pointer;
        }
        .mcc-img-wrap > img {
            display:block; width:100%; height:auto;
            transition:opacity .35s ease; position:relative; z-index:1;
        }
        .mcc-img-wrap.gal-on > img { opacity:0; }
        .mcc-img-wrap.vid-on > img { opacity:0; }

        /* ══════════════════════════════════════════
           GALERÍA
        ══════════════════════════════════════════ */
        .mcc-gal-wrap {
            position:absolute; top:0; left:0; right:0; bottom:0;
            z-index:2; pointer-events:none; width:100%; height:100%;
        }
        .mcc-gi {
            position:absolute; top:0; left:0;
            width:100%; height:100%; object-fit:cover;
            opacity:0; transition:opacity .4s ease; display:block;
        }
        .mcc-gi.on { opacity:1; }

        /* Flechas de galería */
        .mcc-arr {
            position:absolute; top:50%; transform:translateY(-50%); z-index:5;
            background:rgba(0,0,0,.42); color:#fff; border:none;
            width:28px; height:28px; border-radius:50%;
            display:flex; align-items:center; justify-content:center;
            font-size:17px; font-weight:700; line-height:1; cursor:pointer;
            backdrop-filter:blur(4px); -webkit-tap-highlight-color:transparent;
            pointer-events:auto; transition:background .15s;
        }
        .mcc-arr:active { background:rgba(0,0,0,.72); }
        .mcc-arr-l { left:5px; }
        .mcc-arr-r { right:5px; }
        @media (hover:hover) and (pointer:fine) { .mcc-arr { display:none; } }

        /* Dots */
        .mcc-dots {
            position:absolute; bottom:6px; left:0; right:0;
            display:flex; justify-content:center; gap:5px; z-index:6; pointer-events:none;
        }
        .mcc-dot {
            width:5px; height:5px; border-radius:50%;
            background:rgba(255,255,255,.45); transition:background .2s,transform .2s; flex-shrink:0;
        }
        .mcc-dot.on { background:#fff; transform:scale(1.35); }

        /* Badge ▶ */
        .mcc-gb {
            position:absolute; top:7px; right:7px; z-index:10;
            background:rgba(0,0,0,.55); color:#fff;
            font-size:10px; font-weight:700; padding:3px 9px; border-radius:20px;
            display:flex; align-items:center; gap:4px;
            backdrop-filter:blur(4px); pointer-events:none; transition:opacity .2s;
        }
        .mcc-gb svg { width:9px; height:9px; fill:#fff; }
        .mcc-img-wrap.gal-on .mcc-gb,
        .mcc-img-wrap.vid-on .mcc-gb { opacity:0; }

        /* Video hover */
        .mcc-hv-vid {
            position:absolute; top:0; left:0; width:100%; height:100%;
            z-index:6; object-fit:cover; opacity:0; transition:opacity .28s ease;
            pointer-events:none; display:block;
        }
        .mcc-hv-vid.on { opacity:1; }

        /* ══════════════════════════════════════════
           CARD — BOTONES 25 / 50 / 25
        ══════════════════════════════════════════ */
        .mcc-ca { width:100%; box-sizing:border-box; padding:4px 0 2px; display:flex; flex-direction:column; gap:5px; }

        .mcc-ca-price {
            font-size:15px; font-weight:800; color:#111; padding:0 2px; line-height:1.2;
        }
        .mcc-ca-price .woocommerce-Price-amount { color:inherit; }
        .mcc-ca-price del { color:#999; font-weight:400; font-size:12px; margin-right:4px; }
        .mcc-ca-price ins { text-decoration:none; }

        .mcc-ca-row {
            display:grid; grid-template-columns:1fr 2fr 1fr;
            gap:5px; width:100%; box-sizing:border-box;
        }
        .mcc-ca-qty, .mcc-ca-add, .mcc-ca-view {
            height:44px; border-radius:8px; box-sizing:border-box;
            display:flex; align-items:center; justify-content:center; overflow:hidden;
        }
        .mcc-ca-qty { background:#f5f5f5; border:1.5px solid #ddd; padding:0; }
        .mcc-ca-minus, .mcc-ca-plus {
            background:none; border:none; width:34%; height:100%;
            font-size:20px; font-weight:600; color:#333; cursor:pointer;
            display:flex; align-items:center; justify-content:center;
            line-height:1; flex-shrink:0; -webkit-tap-highlight-color:transparent;
            transition:background .1s;
        }
        .mcc-ca-minus:active, .mcc-ca-plus:active { background:rgba(0,0,0,.07); }
        .mcc-ca-num {
            flex:1; min-width:0; text-align:center;
            font-weight:800; font-size:15px; color:#111; line-height:1;
            user-select:none; display:block;
        }
        .mcc-ca-add {
            border:none; cursor:pointer; font-size:12px; font-weight:700;
            gap:5px; padding:0 4px; white-space:nowrap;
            background:/* PHP_VAR */ !important;
            color:/* PHP_VAR */ !important;
            -webkit-tap-highlight-color:transparent; transition:filter .15s,transform .1s;
        }
        .mcc-ca-add:active { transform:scale(.95); }
        .mcc-ca-add:hover  { filter:brightness(1.18); }
        .mcc-ca-add.adding { opacity:.65; pointer-events:none; }
        .mcc-ca-add.added  { background:#2ecc71!important; color:#fff!important; }
        .mcc-ca-add svg { flex-shrink:0; }
        @media (hover:none) and (pointer:coarse) {
            .mcc-ca-add-label, .mcc-ca-view-label { display:none; }
        }
        .mcc-ca-view {
            background:#f0f0f0; color:#333; border:1.5px solid #ddd;
            cursor:pointer; font-size:11px; font-weight:700;
            gap:3px; padding:0 4px; white-space:nowrap;
            -webkit-tap-highlight-color:transparent; transition:background .12s,transform .1s;
        }
        .mcc-ca-view:active { transform:scale(.93); }
        .mcc-ca-view svg { flex-shrink:0; }

        .mcc-ca-qb {
            width:100%; height:44px; border:none; border-radius:8px;
            font-size:13px; font-weight:700; cursor:pointer;
            display:flex; align-items:center; justify-content:center;
            letter-spacing:.2px; box-sizing:border-box;
            background:/* PHP_VAR */ !important;
            color:/* PHP_VAR */ !important;
            transition:filter .15s,transform .12s; -webkit-tap-highlight-color:transparent;
        }
        .mcc-ca-qb:active  { transform:scale(.97); }
        .mcc-ca-qb.loading { opacity:.65; pointer-events:none; }

        /* ══════════════════════════════════════════
           MODAL DE VIDEO
        ══════════════════════════════════════════ */
        #mcc-mbg {
            display:none; position:fixed; inset:0; background:var(--mc-bg, rgba(0,0,0,.88));
            z-index:99997; backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
            align-items:center; justify-content:center; padding:12px;
        }
        #mcc-mbg.open { display:flex; }
        #mcc-modal {
            position:relative; width:100%; max-width:400px; max-height:94vh;
            background:var(--mc-surface, #0e0e0e); border-radius:22px; overflow:hidden;
            display:flex; flex-direction:column;
            box-shadow:0 30px 100px rgba(0,0,0,.7);
            animation:m-in .28s cubic-bezier(.32,1,.28,1);
        }
        @keyframes m-in { from{transform:scale(.88) translateY(20px);opacity:0} to{transform:scale(1) translateY(0);opacity:1} }
        .mcc-mv {
            position:relative; width:100%; aspect-ratio:3/4; max-height:46vh;
            background:#000; flex-shrink:0; overflow:hidden; cursor:pointer;
        }
        .mcc-mv video { width:100%; height:100%; object-fit:cover; display:block; }
        .mcc-mv::after {
            content:''; position:absolute; bottom:0; left:0; right:0;
            height:40%; background:linear-gradient(to top,rgba(0,0,0,.72),transparent);
            pointer-events:none;
        }
        .mcc-mv-hint {
            position:absolute; bottom:10px; left:50%; transform:translateX(-50%);
            z-index:5; color:rgba(255,255,255,.85); font-size:10px;
            display:flex; align-items:center; gap:4px; pointer-events:none;
            white-space:nowrap; background:rgba(0,0,0,.32); padding:4px 10px;
            border-radius:20px; backdrop-filter:blur(4px);
        }
        .mcc-mc {
            position:absolute; top:10px; right:10px;
            min-width:44px; min-height:44px; width:36px; height:36px;
            background:rgba(0,0,0,.55); border:none; border-radius:50%;
            color:#fff; font-size:16px; cursor:pointer; z-index:10;
            display:flex; align-items:center; justify-content:center;
            backdrop-filter:blur(4px); transition:background .18s;
        }
        .mcc-mc:hover { background:rgba(255,255,255,.2); }
        .mcc-mn {
            font-size:16px; font-weight:700; color:#fff; margin:0;
            line-height:1.3; text-decoration:none; display:block;
            padding:12px 16px 0;
        }
        .mcc-mn:hover { color:rgba(255,255,255,.82); }
        .mcc-mp {
            font-size:22px; font-weight:800; color:#fff;
            margin:0; padding:4px 16px 0; line-height:1.2;
        }
        .mcc-mp del { color:rgba(255,255,255,.5); font-size:14px; font-weight:400; margin-right:6px; }
        .mcc-mp ins  { text-decoration:none; }
        .mcc-mb {
            flex:1; overflow-y:auto; padding:10px 16px 20px;
            display:flex; flex-direction:column; gap:8px; scrollbar-width:none;
        }
        .mcc-mb::-webkit-scrollbar { display:none; }
        .mcc-mrow    { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
        .mcc-mrow-ca { display:grid; grid-template-columns:1fr 2fr; gap:8px; }
        .mcc-mb-btn {
            padding:12px 8px; border-radius:11px; font-size:13px; font-weight:700;
            text-align:center; text-decoration:none; border:none; cursor:pointer;
            display:flex; align-items:center; justify-content:center; gap:6px;
            transition:transform .14s,filter .15s; white-space:nowrap; min-height:48px;
            -webkit-tap-highlight-color:transparent;
        }
        .mcc-mb-btn:active { transform:scale(.95); }
        .mcc-mb-btn:hover  { filter:brightness(1.1); }
        .mcc-mb-shorts { background:#fe2c55; color:#fff; }
        .mcc-mb-shorts svg { fill:#fff; flex-shrink:0; }
        .mcc-mb-prod   { background:rgba(255,255,255,.1); color:#fff; border:1px solid rgba(255,255,255,.2); }
        .mcc-mb-prod svg { stroke:#fff; fill:none; stroke-width:2; flex-shrink:0; }
        .mcc-mq {
            display:flex; align-items:center;
            background:rgba(255,255,255,.12); border:1.5px solid rgba(255,255,255,.3);
            border-radius:11px; height:48px; overflow:hidden;
        }
        .mcc-mq-btn {
            flex:0 0 35%; height:100%; background:none; border:none; color:#fff;
            font-size:24px; cursor:pointer; display:flex; align-items:center;
            justify-content:center; -webkit-tap-highlight-color:transparent;
            transition:background .1s;
        }
        .mcc-mq-btn:active { background:rgba(255,255,255,.1); }
        .mcc-mq-num {
            flex:1; text-align:center; font-weight:800; font-size:18px;
            color:#fff; line-height:1; user-select:none;
        }
        .mcc-mb-cart { background:rgba(255,255,255,.1); color:#fff; border:1px solid rgba(255,255,255,.2); }
        .mcc-mb-cart svg { stroke:#fff; fill:none; stroke-width:2; flex-shrink:0; }
        .mcc-mb-cart.adding { opacity:.6; pointer-events:none; }
        .mcc-mb-cart.ok     { background:rgba(46,204,113,.3); border-color:#2ecc71; color:#2ecc71; }
        .mcc-mb-qb { background:/* PHP_VAR */; color:/* PHP_VAR */; }
        @media (max-width:400px) {
            #mcc-modal { border-radius:16px; }
            .mcc-mb-btn { font-size:12px; padding:10px 6px; min-height:44px; }
            .mcc-mv { max-height:40vh; }
        }
        @media (orientation:landscape) and (max-height:520px) {
            .mcc-mv { max-height:36vh; aspect-ratio:16/9; }
        }

        /* ══════════════════════════════════════════
           PRODUCTO INDIVIDUAL — Video
        ══════════════════════════════════════════ */
        .mcc-pv-section { margin-bottom:24px; }
        .mcc-pv-box {
            position:relative; width:100%; max-width:320px; aspect-ratio:9/16;
            background:#000; border-radius:18px; overflow:hidden;
            box-shadow:0 8px 32px rgba(0,0,0,.15);
        }
        @media (min-width:768px) { .mcc-pv-box { float:right; margin:0 0 20px 28px; } }
        .mcc-pv-box video { width:100%; height:100%; object-fit:cover; display:block; }
        .mcc-pv-box::after {
            content:''; position:absolute; bottom:0; left:0; right:0;
            height:42%; background:linear-gradient(to top,rgba(0,0,0,.65),transparent);
            pointer-events:none; z-index:1;
        }
        .mcc-pv-shorts {
            position:absolute; bottom:12px; left:50%; transform:translateX(-50%); z-index:5;
            background:rgba(254,44,85,.9); color:#fff; border:none; border-radius:24px;
            padding:9px 16px; font-weight:700; font-size:13px; cursor:pointer;
            text-decoration:none; display:inline-flex; align-items:center; gap:5px;
            backdrop-filter:blur(4px); white-space:nowrap;
        }
        .mcc-pv-shorts:hover { background:#fe2c55; color:#fff; }
        .mcc-pv-shorts svg { fill:#fff; flex-shrink:0; }

        /* PiP flotante */
        #mcc-pip {
            display:none; position:fixed; top:80px; right:16px; z-index:9990;
            width:130px; aspect-ratio:9/16; border-radius:14px; overflow:hidden;
            box-shadow:0 8px 40px rgba(0,0,0,.55); background:#000;
            animation:pip-in .3s cubic-bezier(.4,0,.2,1);
        }
        @keyframes pip-in { from{opacity:0;transform:scale(.7) translateY(-20px)} to{opacity:1;transform:scale(1) translateY(0)} }
        #mcc-pip video {
            width:100%; height:100%; object-fit:cover; display:block; cursor:grab;
        }
        #mcc-pip::after {
            content:''; position:absolute; bottom:0; left:0; right:0;
            height:50%; background:linear-gradient(to top,rgba(0,0,0,.8),transparent);
            pointer-events:none; z-index:1;
        }
        .pip-shorts {
            position:absolute; bottom:7px; left:50%; transform:translateX(-50%); z-index:3;
            background:rgba(254,44,85,.92); color:#fff; border:none; border-radius:20px;
            padding:5px 10px; font-weight:700; font-size:10px; cursor:pointer;
            text-decoration:none; display:inline-flex; align-items:center; gap:3px;
            backdrop-filter:blur(4px); white-space:nowrap;
        }
        .pip-shorts svg { fill:#fff; width:8px; height:8px; flex-shrink:0; }
        .pip-close {
            position:absolute; top:-9px; right:-9px; z-index:4;
            width:24px; height:24px; background:#fff; border:none; border-radius:50%;
            color:#111; font-size:12px; font-weight:700; cursor:pointer;
            box-shadow:0 2px 8px rgba(0,0,0,.3);
            display:flex; align-items:center; justify-content:center; line-height:1;
        }
        .pip-rz {
            position:absolute; bottom:0; left:0; width:22px; height:22px; z-index:4;
            cursor:nesw-resize; display:flex; align-items:flex-end; justify-content:flex-start; padding:2px;
        }
        .pip-rz::before {
            content:''; width:10px; height:10px;
            border-left:2px solid rgba(255,255,255,.6); border-bottom:2px solid rgba(255,255,255,.6);
        }

        /* Compra rápida en producto individual */
        .mcc-qb-prod {
            display:block; width:100%; margin-top:10px; padding:15px 20px;
            text-align:center; background:/* PHP_VAR */; color:/* PHP_VAR */ !important;
            font-weight:700; text-transform:uppercase; font-size:16px;
            border-radius:8px; border:none; cursor:pointer;
            transition:opacity .2s,transform .12s; -webkit-tap-highlight-color:transparent;
        }
        .mcc-qb-prod:hover  { opacity:.85; }
        .mcc-qb-prod:active { transform:scale(.98); }
        .mcc-qb-prod.loading { opacity:.65; pointer-events:none; }