/** * SEVENCOFFEE SUITE — Menu mobile (offcanvas do cabeçalho) * * Este ficheiro é carregado em TODO o site (não só Carrinho/Checkout/ * Minha Conta), porque o menu mobile aparece no cabeçalho de qualquer * página. O menu em si é montado pelo widget "Navigation Menu" do * Header Footer Elementor (classe .hfe-nav-menu), fora do controlo * direto deste plugin. * * MUDANÇA DE ESTRATÉGIA: os ícones deixaram de ser gerados por CSS * (::before/::after) — depois de várias tentativas (fonte de ícones, * background-image, content:url percent-encoded, content:url base64), * continuavam a não aparecer de forma consistente em produção, sinal de * que alguma regra do tema os está mesmo a anular. A solução robusta é * colocar o ícone como imagem real dentro do próprio texto do item do * menu (em Aparência > Menus > Etiqueta de navegação) — isso é HTML que * faz parte da página, nenhuma regra de CSS o consegue esconder. * * Este ficheiro trata só da parte estrutural: alinhamento do texto/ * ícone, o botão castanho de "Terminar sessão"/"Login-Registo", e a * seta da "A minha conta" encostada à direita. A classe * .scs-menu-icon (usada nos snippets a colar em cada item do menu) * garante que qualquer ícone real fica bem dimensionado e alinhado. */ /* Ícone real () colado na etiqueta de cada item */ .hfe-nav-menu img.scs-menu-icon { width: 17px !important; height: 17px !important; vertical-align: middle !important; margin-right: 8px !important; display: inline-block !important; } /* ========================================================================= "Terminar sessão" / "Log out" / "Cerrar sesión" e "Login / Registo" / "Login / Register" / "Iniciar sesión / Registrarse": botão castanho, mais largo ------------------------------------------------------------------------- Os seletores cobrem os 3 idiomas do site, porque o URL de cada link muda consoante o idioma da página: - Conta: /a-minha-conta/ (PT) · /my-account/ (EN) · /mi-cuenta/ (ES) - Logout: /sair/ (PT) · /logout/ (EN) · /cerrar-sesion/ (ES) — estes 3 endpoints foram traduzidos manualmente em WooCommerce > Definições > Avançado > URLs da página "Minha Conta", por isso já não têm nenhum texto em comum entre si. Mantém-se também ?action=logout como rede de segurança, para o link nativo de logout do WordPress (usa sempre este parâmetro, em qualquer idioma). ========================================================================= */ body .hfe-nav-menu li:not(.menu-item-has-children) > a.hfe-menu-item.hfe-menu-item[href*="/sair/"], body .hfe-nav-menu li:not(.menu-item-has-children) > a.hfe-menu-item.hfe-menu-item[href*="/logout/"], body .hfe-nav-menu li:not(.menu-item-has-children) > a.hfe-menu-item.hfe-menu-item[href*="/cerrar-sesion/"], body .hfe-nav-menu li:not(.menu-item-has-children) > a.hfe-menu-item.hfe-menu-item[href*="action=logout"], body .hfe-nav-menu li:not(.menu-item-has-children) > a.hfe-menu-item.hfe-menu-item[href$="/a-minha-conta/"], body .hfe-nav-menu li:not(.menu-item-has-children) > a.hfe-menu-item.hfe-menu-item[href$="/my-account/"], body .hfe-nav-menu li:not(.menu-item-has-children) > a.hfe-menu-item.hfe-menu-item[href$="/mi-cuenta/"] { display: flex !important; align-items: center !important; justify-content: center !important; width: calc(100% - 32px) !important; box-sizing: border-box !important; margin: 6px 16px 0 !important; padding: 13px 20px !important; background-color: var(--scs-dark) !important; color: var(--scs-card) !important; border-radius: var(--scs-radius-sm) !important; border: none !important; outline: none !important; box-shadow: none !important; transition: background-color 0.2s ease !important; } body .hfe-nav-menu li:not(.menu-item-has-children) > a.hfe-menu-item.hfe-menu-item[href*="/sair/"]:hover, body .hfe-nav-menu li:not(.menu-item-has-children) > a.hfe-menu-item.hfe-menu-item[href*="/sair/"]:focus, body .hfe-nav-menu li:not(.menu-item-has-children) > a.hfe-menu-item.hfe-menu-item[href*="/sair/"]:active, body .hfe-nav-menu li:not(.menu-item-has-children) > a.hfe-menu-item.hfe-menu-item[href*="/logout/"]:hover, body .hfe-nav-menu li:not(.menu-item-has-children) > a.hfe-menu-item.hfe-menu-item[href*="/logout/"]:focus, body .hfe-nav-menu li:not(.menu-item-has-children) > a.hfe-menu-item.hfe-menu-item[href*="/logout/"]:active, body .hfe-nav-menu li:not(.menu-item-has-children) > a.hfe-menu-item.hfe-menu-item[href*="/cerrar-sesion/"]:hover, body .hfe-nav-menu li:not(.menu-item-has-children) > a.hfe-menu-item.hfe-menu-item[href*="/cerrar-sesion/"]:focus, body .hfe-nav-menu li:not(.menu-item-has-children) > a.hfe-menu-item.hfe-menu-item[href*="/cerrar-sesion/"]:active, body .hfe-nav-menu li:not(.menu-item-has-children) > a.hfe-menu-item.hfe-menu-item[href*="action=logout"]:hover, body .hfe-nav-menu li:not(.menu-item-has-children) > a.hfe-menu-item.hfe-menu-item[href*="action=logout"]:focus, body .hfe-nav-menu li:not(.menu-item-has-children) > a.hfe-menu-item.hfe-menu-item[href*="action=logout"]:active, body .hfe-nav-menu li:not(.menu-item-has-children) > a.hfe-menu-item.hfe-menu-item[href$="/a-minha-conta/"]:hover, body .hfe-nav-menu li:not(.menu-item-has-children) > a.hfe-menu-item.hfe-menu-item[href$="/a-minha-conta/"]:focus, body .hfe-nav-menu li:not(.menu-item-has-children) > a.hfe-menu-item.hfe-menu-item[href$="/a-minha-conta/"]:active, body .hfe-nav-menu li:not(.menu-item-has-children) > a.hfe-menu-item.hfe-menu-item[href$="/my-account/"]:hover, body .hfe-nav-menu li:not(.menu-item-has-children) > a.hfe-menu-item.hfe-menu-item[href$="/my-account/"]:focus, body .hfe-nav-menu li:not(.menu-item-has-children) > a.hfe-menu-item.hfe-menu-item[href$="/my-account/"]:active, body .hfe-nav-menu li:not(.menu-item-has-children) > a.hfe-menu-item.hfe-menu-item[href$="/mi-cuenta/"]:hover, body .hfe-nav-menu li:not(.menu-item-has-children) > a.hfe-menu-item.hfe-menu-item[href$="/mi-cuenta/"]:focus, body .hfe-nav-menu li:not(.menu-item-has-children) > a.hfe-menu-item.hfe-menu-item[href$="/mi-cuenta/"]:active { background-color: var(--scs-dark-soft) !important; color: var(--scs-card) !important; outline: none !important; box-shadow: none !important; } /* ícone dentro do botão fica branco (definido no próprio via estilo, mas garantimos aqui que não fica escurecido por algum filtro do tema) */ body .hfe-nav-menu li:not(.menu-item-has-children) > a.hfe-menu-item.hfe-menu-item[href*="/sair/"] img.scs-menu-icon, body .hfe-nav-menu li:not(.menu-item-has-children) > a.hfe-menu-item.hfe-menu-item[href*="/logout/"] img.scs-menu-icon, body .hfe-nav-menu li:not(.menu-item-has-children) > a.hfe-menu-item.hfe-menu-item[href*="/cerrar-sesion/"] img.scs-menu-icon, body .hfe-nav-menu li:not(.menu-item-has-children) > a.hfe-menu-item.hfe-menu-item[href*="action=logout"] img.scs-menu-icon, body .hfe-nav-menu li:not(.menu-item-has-children) > a.hfe-menu-item.hfe-menu-item[href$="/a-minha-conta/"] img.scs-menu-icon, body .hfe-nav-menu li:not(.menu-item-has-children) > a.hfe-menu-item.hfe-menu-item[href$="/my-account/"] img.scs-menu-icon, body .hfe-nav-menu li:not(.menu-item-has-children) > a.hfe-menu-item.hfe-menu-item[href$="/mi-cuenta/"] img.scs-menu-icon { filter: none !important; opacity: 1 !important; } /* ========================================================================= "A minha conta": seta encostada à borda direita ========================================================================= */ body .hfe-nav-menu li.menu-item-has-children > .hfe-has-submenu-container { width: 100% !important; box-sizing: border-box !important; } body .hfe-nav-menu li.menu-item-has-children > .hfe-has-submenu-container > a.hfe-menu-item.hfe-menu-item { display: flex !important; align-items: center !important; justify-content: flex-start !important; flex-direction: row !important; width: 100% !important; box-sizing: border-box !important; } body .hfe-nav-menu li.menu-item-has-children .hfe-menu-toggle.sub-arrow { order: 2 !important; flex-shrink: 0 !important; margin-left: auto !important; /* caso o tema posicione a seta de forma absoluta em vez de inline */ position: static !important; left: auto !important; right: auto !important; top: auto !important; transform: none !important; } /* ========================================================================= Seletor de idioma (WPML) no menu DESKTOP — só bandeira, sem nome ------------------------------------------------------------------------- Escolha deliberada: no desktop mostra-se só a bandeira. Esta regra força isso diretamente no CSS (em vez de depender só da definição em WPML > Idiomas > Opções do Seletor de Idioma), para o nome nunca aparecer aqui mesmo que essa definição venha a mudar. A localização do menu MOBILE (a que mostra "Português"/"English"/"Español") usa uma instância diferente do widget do WPML (identificada no HTML como wpml-ls-slot-46) e não é afetada por esta regra — só a do desktop (wpml-ls-slot-35) é escondida aqui. ========================================================================= */ .wpml-ls-slot-35 .wpml-ls-native { display: none !important; } /* ========================================================================= Seletor de idioma (WPML) no menu DESKTOP — corrigir retângulos gigantes ------------------------------------------------------------------------- Sem o nome do idioma (escondido acima), cada opção do dropdown (🇬🇧/🇪🇸) ficava só com a bandeira lá dentro — mas a largura/altura de cada opção continuava a ser a do menu normal do Royal Addons (pensada para texto), o que criava caixas enormes e vazias à volta de cada bandeira pequena. Aqui reduzimos isso para um tamanho compacto, só à volta da bandeira, mantendo a mesma lógica de "só a localização do desktop" (wpml-ls-slot-35) sem tocar no menu mobile. ------------------------------------------------------------------------- CORREÇÃO REVERTIDA (v2.5.26 tinha aqui display:flex + height:100% no
  • e no , o que partiu o alinhamento — confirmado no HTML real do tema que o menu horizontal do Royal Addons (.wpr-nav-menu) NÃO usa flexbox nos itens, e forçar flex só num item, com os irmãos a usar o sistema de layout original do tema, tirou este item da linha e deixou-o a "cair" para uma posição solta na página. A abordagem correta é não mexer no display/altura da caixa, só alinhar o conteúdo (bandeira + seta) dentro do espaço que o próprio tema já dá a cada item (confirmado: .wpr-menu-item já tem padding-top/bottom de 15px, igual em todos os itens — o texto centra-se sozinho aí; a bandeira, por ser , só precisa de vertical-align para se juntar a essa mesma centragem, sem mexer em mais nada). ========================================================================= */ .wpml-ls-slot-35.wpml-ls-current-language { position: relative !important; } .wpml-ls-slot-35.wpml-ls-current-language img.wpml-ls-flag, .wpml-ls-slot-35.wpml-ls-current-language i.wpr-sub-icon { vertical-align: middle !important; } .wpml-ls-slot-35 ul.wpr-sub-menu { position: absolute !important; top: 100% !important; left: auto !important; right: 0 !important; min-width: 0 !important; width: max-content !important; } .wpml-ls-slot-35 ul.wpr-sub-menu li.wpml-ls-item { width: auto !important; } .wpml-ls-slot-35 ul.wpr-sub-menu a.wpr-sub-menu-item { display: flex !important; align-items: center !important; justify-content: center !important; width: auto !important; min-width: 0 !important; height: auto !important; min-height: 0 !important; padding: 10px 14px !important; margin: 0 !important; background-color: var(--scs-card) !important; transition: background-color 0.15s ease !important; } .wpml-ls-slot-35 ul.wpr-sub-menu a.wpr-sub-menu-item:hover, .wpml-ls-slot-35 ul.wpr-sub-menu a.wpr-sub-menu-item:focus { background-color: rgba(59, 21, 22, 0.08) !important; } .wpml-ls-slot-35 ul.wpr-sub-menu img.wpml-ls-flag { width: 22px !important; height: auto !important; margin: 0 !important; display: inline-block !important; vertical-align: middle !important; } /* ========================================================================= Seletor de idioma (WPML) no menu MOBILE — afinamento visual ------------------------------------------------------------------------- O nome do idioma (span.wpml-ls-native) já vem incluído neste local pelo próprio WPML — só a bandeira precisava de alinhamento consistente com os outros ícones do menu, e as opções dentro do submenu (Inglês/ Espanhol) não tinham nenhum estado visual ao passar o rato. ========================================================================= */ .hfe-nav-menu img.wpml-ls-flag { width: 20px !important; height: auto !important; vertical-align: middle !important; margin-right: 8px !important; border-radius: 2px !important; } .hfe-nav-menu .wpml-ls-native { vertical-align: middle !important; } .hfe-nav-menu .wpml-ls-item .wpr-sub-menu-item, .hfe-nav-menu .wpml-ls-menu-item .sub-menu a { display: flex !important; align-items: center !important; padding: 10px 20px !important; transition: background-color 0.15s ease !important; } .hfe-nav-menu .wpml-ls-item .wpr-sub-menu-item:hover, .hfe-nav-menu .wpml-ls-menu-item .sub-menu a:hover { background-color: rgba(59, 21, 22, 0.06) !important; } /* ========================================================================= Widget "Nav Menu" órfão do Royal Addons (id do elemento: 0804ddd) ------------------------------------------------------------------------- Este é um SEGUNDO menu, diferente do .hfe-nav-menu acima (que é o menu mobile real, já com todos os ícones e os links da conta). Este outro só tem Início/Loja/Sobre Nós/Contacto, sem ícones — parece ter ficado no cabeçalho de uma versão anterior do site e nunca ter sido apagado do Elementor. O problema: a versão mobile deste widget (painel "off-canvas") nunca inicializa corretamente o estado "fechado" nas nossas páginas próprias (Carrinho/Checkout/Minha Conta), e fica sempre visível com uma largura fixa em pixels e "left: 0" — confirmado nos HTMLs reais enviados. Isto é o que estava a causar o scroll horizontal em mobile/tablet, em qualquer página do site. Enquanto não for removido diretamente no Elementor (Editar cabeçalho → apagar este widget "Nav Menu"), escondemo-lo por completo aqui — a navegação real (incluindo em mobile) já está toda coberta pelo .hfe-nav-menu, por isso isto não tira nenhuma funcionalidade. */ .wpr-mobile-nav-menu-container, nav.wpr-mobile-nav-menu-container { display: none !important; } /* O