.product_section .product_form, .product_gallery { opacity: 1; } .multi_select, form .select { display: block !important; } .image-element__wrap { display: none; } <header id="header" ...> <style> /* ...estilos que já existem no header... */ /* === PATCH MINI-CART === */ #header .cart-container .cart_content { opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(8px); transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s; z-index: 9999 !important; } #header .cart-container[data-open="1"] .cart_content { opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; transform: none !important; display: block !important; } /* ===== DESKTOP: Mini-cart alinhado ao ícone e com “queda” controlada ===== */ @media (min-width: 769px){ :root{ /* ajuste fino da distância do dropdown até o header (desktop) */ --mini-desktop-drop: 12px; /* aumente se ainda encostar nos ícones */ --mini-desktop-width: 420px; } /* o container do carrinho vira referência pro dropdown */ #header .cart-container{ position: relative !important; } /* estado base: escondido (controlaremos só por atributo data-open) */ #header .cart-container .cart_content{ position: absolute !important; top: calc(100% + var(--mini-desktop-drop)) !important; /* “cai” abaixo do ícone */ right: 0 !important; left: auto !important; width: var(--mini-desktop-width) !important; opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; transform: translateY(6px) !important; transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s !important; z-index: 9999 !important; } /* quando marcado como aberto, fica visível e clicável */ #header .cart-container[data-open="1"] .cart_content{ opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; transform: none !important; transition: opacity .18s ease, transform .18s ease, visibility 0s !important; } /* neutraliza regras antigas do tema baseadas em :hover para não brigar */ #header .cart-container:hover .cart_content{ opacity: inherit !important; visibility: inherit !important; pointer-events: inherit !important; transform: none !important; } } /* opcional: se quiser um painel mais largo em telas bem grandes */ @media (min-width:1200px){ #header .cart-container .cart_content{ max-width: 560px !important; } } /* ===== DESKTOP hover/click: abre no ícone e só fecha quando realmente sair ===== */ (function(){ var mqDesktop = window.matchMedia('(min-width: 769px)'); var OPEN_ATTR = 'data-open'; var OPEN_VAL = '1'; var CLOSE_DELAY = 160; // ms – atraso pra não fechar ao cruzar o gap function isDesktop(){ return mqDesktop.matches; } function getCartDom(){ var cont = document.querySelector('#header .cart-container'); if (!cont) return null; var btn = cont.querySelector('a.mini_cart,[data-mini-cart-toggle]'); var panel = cont.querySelector('.cart_content'); if (!btn || !panel) return null; return {cont: cont, btn: btn, panel: panel}; } function open(cont){ cont.setAttribute(OPEN_ATTR, OPEN_VAL); } function close(cont){ cont.removeAttribute(OPEN_ATTR); } function wireDesktop(){ var refs = getCartDom(); if (!refs) return; var {cont, btn, panel} = refs; var closeTO = null; function scheduleClose(){ clearTimeout(closeTO); closeTO = setTimeout(function(){ close(cont); }, CLOSE_DELAY); } function cancelClose(){ clearTimeout(closeTO); } // abre no hover e mantém aberto dentro do dropdown cont.addEventListener('mouseenter', function(){ if (!isDesktop()) return; cancelClose(); open(cont); }); cont.addEventListener('mouseleave', function(e){ if (!isDesktop()) return; scheduleClose(); }); // clique no ícone: toggle (desktop) btn.addEventListener('click', function(ev){ if (!isDesktop()) return; // não interfere no mobile ev.preventDefault(); ev.stopPropagation(); if (cont.getAttribute(OPEN_ATTR) === OPEN_VAL){ close(cont); } else { open(cont); } }); // clique fora fecha document.addEventListener('mousedown', function(e){ if (!isDesktop()) return; if (!cont.contains(e.target)){ close(cont); } }); // ESC fecha document.addEventListener('keydown', function(e){ if (!isDesktop()) return; if (e.key === 'Escape') close(cont); }); // se o tema re-renderizar o conteúdo do mini-cart, garantimos que continua aberto var mo = new MutationObserver(function(){ if (!isDesktop()) return; if (cont.getAttribute(OPEN_ATTR) === OPEN_VAL){ cont.setAttribute(OPEN_ATTR, OPEN_VAL); } }); mo.observe(cont, {subtree:true, childList:true}); } function boot(){ if (isDesktop()) wireDesktop(); // se trocar de breakpoint em tempo real (resize), não precisa “deswire”: // o CSS por @media já garante que só aparece no desktop } if (document.readyState === 'loading'){ document.addEventListener('DOMContentLoaded', boot); } else { boot(); } })();