/*
Theme Name: Hello Moticristo Child
Theme URI: https://moticristo.codenumber.pt/
Description: Tema child do Hello Elementor para a Moticristo.
Author: codenumber.pt
Author URI: https://codenumber.pt/
Template: hello-elementor
Version: 1.15.5
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: moticristo-child
*/

/* ========================================================================
 * MENU PRINCIPAL — SUBMENU (dropdown)
 *
 * Override do styling default do Elementor Nav Menu widget para harmonizar
 * com o header dark + acento red #E52528 + tipografia Montserrat.
 * Aplica-se globalmente a todos os submenus do Nav Menu no frontend.
 * ======================================================================== */

/* Stacking context: o UL.elementor-nav-menu cria stacking context próprio
 * com z-index baixo (2) por defeito do Elementor. Sem elevar o UL inteiro,
 * o submenu fica preso a esse contexto e secções com z-index > 2 (heroes,
 * banners) sobrepõem-no.
 *
 * Solução: elevar TANTO o header como o UL para z-index muito alto, garantindo
 * que todo o conteúdo do menu (incluindo dropdowns) fica acima das secções. */
header.elementor-location-header,
.elementor-location-header,
[data-elementor-type="header"] {
	position: relative !important;
	z-index: 9999 !important;
}

.elementor-nav-menu {
	position: relative !important;
	z-index: 9999 !important;
}

.elementor-nav-menu .sub-menu.elementor-nav-menu--dropdown {
	background: #1a1a1a !important;
	border: none !important;
	border-top: 2px solid #E52528 !important;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35) !important;
	min-width: 220px !important;
	padding: 4px 0 !important;
	z-index: 9999 !important;
}

/* Garantir que o LI parent cria stacking context para o submenu absolute. */
.elementor-nav-menu .menu-item-has-children {
	position: relative !important;
	z-index: 9998;
}

.elementor-nav-menu .sub-menu.elementor-nav-menu--dropdown li {
	background: transparent !important;
}

.elementor-nav-menu .sub-menu.elementor-nav-menu--dropdown li > a {
	color: #fff !important;
	background: transparent !important;
	padding: 12px 20px !important;
	font-family: "Montserrat", sans-serif !important;
	font-size: 13px !important;
	font-weight: 500 !important;
	letter-spacing: 0.3px !important;
	border-left: 3px solid transparent !important;
	transition: background 0.18s, color 0.18s, border-color 0.18s !important;
}

.elementor-nav-menu .sub-menu.elementor-nav-menu--dropdown li > a:hover,
.elementor-nav-menu .sub-menu.elementor-nav-menu--dropdown li > a:focus,
.elementor-nav-menu .sub-menu.elementor-nav-menu--dropdown li.current-menu-item > a,
.elementor-nav-menu .sub-menu.elementor-nav-menu--dropdown li.current-menu-ancestor > a {
	color: #fff !important;
	background: #2a2a2a !important;
	border-left-color: #E52528 !important;
}

/* Separador subtle entre items */
.elementor-nav-menu .sub-menu.elementor-nav-menu--dropdown li + li {
	border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
}

/* Ícone do "chevron" do parent — alinhar com o branco do texto */
.elementor-nav-menu .menu-item-has-children > a > .sub-arrow {
	color: inherit !important;
}

/* ---------------------------------------------------------------------------
 * Carrinho no header (widget Elementor "Menu Cart")
 *
 * Remove o aspeto "caixa" (borda + fundo cinzentos do botão por defeito do
 * Elementor) e alinha com a identidade: ícone/subtotal a branco (o menu tem
 * fundo escuro), hover vermelho e bolha do contador a vermelho.
 * Carrega globalmente porque o header aparece em todas as páginas.
 * ------------------------------------------------------------------------- */
.elementor-menu-cart__toggle .elementor-button {
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	padding: 8px !important;
	color: #fff !important;
	transition: color 0.2s ease;
}

.elementor-menu-cart__toggle .elementor-button .elementor-button-icon,
.elementor-menu-cart__toggle .elementor-button .elementor-button-text {
	color: #fff !important;
	fill: #fff !important;
}

/* O eicon do carrinho é um SVG inline com fill próprio (cinzento #69727D do
 * Elementor). Sem pintar o svg/path diretamente, o branco do wrapper não chega. */
.elementor-menu-cart__toggle .elementor-button .elementor-button-icon svg,
.elementor-menu-cart__toggle .elementor-button .elementor-button-icon svg path {
	fill: #fff !important;
}

.elementor-menu-cart__toggle .elementor-button-text {
	font-weight: 600;
}

.elementor-menu-cart__toggle .elementor-button:hover,
.elementor-menu-cart__toggle .elementor-button:hover .elementor-button-icon,
.elementor-menu-cart__toggle .elementor-button:hover .elementor-button-text {
	color: #E52528 !important;
	fill: #E52528 !important;
}

.elementor-menu-cart__toggle .elementor-button:hover .elementor-button-icon svg,
.elementor-menu-cart__toggle .elementor-button:hover .elementor-button-icon svg path {
	fill: #E52528 !important;
}

/* Bolha do contador de itens — vermelho Moticristo com texto branco */
.elementor-menu-cart__toggle .elementor-button-icon-qty {
	background-color: #E52528 !important;
	color: #fff !important;
	border: 0 !important;
}

/* ---------------------------------------------------------------------------
 * Carrinho + ícone de utilizador no header — TAMANHO
 *
 * As definições dos widgets no Elementor renderizavam o carrinho a 40px
 * (ícone E subtotal) e o ícone de utilizador a 24px. Aqui harmoniza-se o
 * cluster utilitário: ícones a 22px, subtotal a 15px, em linha com a navegação.
 * Seletores presos ao header para não afetar ícones do topbar nem do resto do
 * site. (Trocar 22px por 24px se preferires os ícones ligeiramente maiores.)
 * ------------------------------------------------------------------------- */

/* Ícone do carrinho — o SVG é 1em, logo controla-se pelo font-size do wrapper */
header.elementor-location-header .elementor-widget-woocommerce-menu-cart .elementor-menu-cart__toggle .elementor-button-icon {
	font-size: 22px !important;
}
header.elementor-location-header .elementor-widget-woocommerce-menu-cart .elementor-menu-cart__toggle .elementor-button-icon svg {
	width: 22px !important;
	height: 22px !important;
}

/* Subtotal "0,00 €" */
header.elementor-location-header .elementor-widget-woocommerce-menu-cart .elementor-menu-cart__toggle .elementor-button-text {
	font-size: 15px !important;
	line-height: 1 !important;
}

/* Ícone de utilizador (widget Icon ligado a /minha-conta/ — cobre PT e EN, e
 * ambas as variantes de marcação: âncora-ícone ou .elementor-icon descendente) */
header.elementor-location-header a.elementor-icon[href*="minha-conta"],
header.elementor-location-header a.elementor-icon[href*="my-account"],
header.elementor-location-header a[href*="minha-conta"] .elementor-icon,
header.elementor-location-header a[href*="my-account"] .elementor-icon {
	font-size: 22px !important;
}
header.elementor-location-header a.elementor-icon[href*="minha-conta"] svg,
header.elementor-location-header a.elementor-icon[href*="my-account"] svg,
header.elementor-location-header a[href*="minha-conta"] .elementor-icon svg,
header.elementor-location-header a[href*="my-account"] .elementor-icon svg {
	width: 22px !important;
	height: 22px !important;
}

/* ---------------------------------------------------------------------------
 * Carrinho no header — TROCA DE ÍCONE (eicon cart-medium → "saco"/shopping-bag)
 *
 * O eicon do Elementor é um SVG inline cuja forma não se altera por CSS. Logo:
 * esconde-se esse SVG e injeta-se o ícone novo via mask num ::before. Como a
 * cor passa a vir de background-color, o ícone herda automaticamente o branco
 * (base) e o vermelho (hover) já definidos acima, e fica nos 22px do cluster.
 * Ícone: Tabler "shopping-bag" (MIT), traçado 2px, viewBox 24.
 * ------------------------------------------------------------------------- */
.elementor-menu-cart__toggle .elementor-button-icon svg {
	display: none !important;
}
.elementor-menu-cart__toggle .elementor-button-icon::before {
	content: "";
	display: inline-block;
	width: 22px;
	height: 22px;
	background-color: #fff;
	-webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M6.331%208h11.339a2%202%200%200%201%201.977%202.304l-1.255%208.152a3%203%200%200%201%20-2.966%202.544h-6.852a3%203%200%200%201%20-2.966%20-2.544l-1.255%20-8.152a2%202%200%200%201%201.977%20-2.304z%27%2F%3E%3Cpath%20d%3D%27M9%2011v-5a3%203%200%200%201%206%200v5%27%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
	        mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M6.331%208h11.339a2%202%200%200%201%201.977%202.304l-1.255%208.152a3%203%200%200%201%20-2.966%202.544h-6.852a3%203%200%200%201%20-2.966%20-2.544l-1.255%20-8.152a2%202%200%200%201%201.977%20-2.304z%27%2F%3E%3Cpath%20d%3D%27M9%2011v-5a3%203%200%200%201%206%200v5%27%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
}
.elementor-menu-cart__toggle .elementor-button:hover .elementor-button-icon::before {
	background-color: #E52528 !important;
}

/* ---------------------------------------------------------------------------
 * Ícone de utilizador no header — TROCA PARA VERSÃO DE LINHA
 *
 * O glifo atual é Font Awesome solid (fas-user), cheio — pesa mais à vista do
 * que o saco de linha ao mesmo tamanho. Mesmo padrão do carrinho: esconde-se o
 * SVG cheio e injeta-se um user de linha (Tabler "user", traçado 2px) via mask,
 * a herdar branco/vermelho e os 22px do cluster. Cobre PT/EN e ambas as
 * variantes de marcação (âncora-ícone ou .elementor-icon descendente).
 * ------------------------------------------------------------------------- */
header.elementor-location-header a.elementor-icon[href*="minha-conta"] svg,
header.elementor-location-header a.elementor-icon[href*="my-account"] svg,
header.elementor-location-header a[href*="minha-conta"] .elementor-icon svg,
header.elementor-location-header a[href*="my-account"] .elementor-icon svg {
	display: none !important;
}
header.elementor-location-header a.elementor-icon[href*="minha-conta"]::before,
header.elementor-location-header a.elementor-icon[href*="my-account"]::before,
header.elementor-location-header a[href*="minha-conta"] .elementor-icon::before,
header.elementor-location-header a[href*="my-account"] .elementor-icon::before {
	content: "";
	display: inline-block;
	width: 22px;
	height: 22px;
	vertical-align: middle;
	background-color: #fff;
	-webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M8%207a4%204%200%201%200%208%200a4%204%200%200%200%20-8%200%27%2F%3E%3Cpath%20d%3D%27M6%2021v-2a4%204%200%200%201%204%20-4h4a4%204%200%200%201%204%204v2%27%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
	        mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M8%207a4%204%200%201%200%208%200a4%204%200%200%200%20-8%200%27%2F%3E%3Cpath%20d%3D%27M6%2021v-2a4%204%200%200%201%204%20-4h4a4%204%200%200%201%204%204v2%27%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
}
header.elementor-location-header a.elementor-icon[href*="minha-conta"]:hover::before,
header.elementor-location-header a.elementor-icon[href*="my-account"]:hover::before,
header.elementor-location-header a[href*="minha-conta"] .elementor-icon:hover::before,
header.elementor-location-header a[href*="my-account"] .elementor-icon:hover::before {
	background-color: #E52528 !important;
}

/* -------------------------------------------------------------------------
 * Empilhamento do rodapé (mobile)
 *
 * O widget de menu do Elementor traz z-index:9999 por defeito. No mobile, o
 * header torna-se sticky (clone fixo) e ficava POR BAIXO desse menu do rodapé,
 * que se sobrepunha aos botões do header. Isolar o rodapé num contexto de
 * empilhamento próprio (z-index baixo) impede que o seu conteúdo concorra com
 * o header. Os popups e a barra flutuante ficam fora do rodapé, pelo que
 * continuam acima do header quando abertos.
 * ------------------------------------------------------------------------- */
.elementor-location-footer {
	position: relative;
	z-index: 1;
}

/* ---------------------------------------------------------------------------
 * Mini-carrinho (side-cart) — TAMANHO DO CONTEÚDO DO PAINEL
 *
 * O conteúdo do painel lateral (nome do produto, quantidade/preço e os botões
 * "Ver carrinho"/"Finalizar compras") herdava a tipografia global "Primary"
 * (40px, a dos títulos) por defeito do widget: o nome saía gigante e vermelho,
 * o preço gigante, e os botões saltavam para fora do painel de 350px. Aqui
 * redefine-se essa variável em todo o painel (__main), devolvendo o conteúdo a
 * um tamanho normal (14px). Não precisa de !important: vence por herança da
 * custom property. O subtotal mantém o seu tamanho (não usa esta variável) e o
 * toggle do header tem o seu próprio tamanho.
 * ------------------------------------------------------------------------- */
.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__main {
	--e-global-typography-primary-font-size: 14px;
}

/* Texto dos botões a branco TAMBÉM no hover. Existe uma regra global de tema
 * (a:hover) que pinta os links de vermelho ao passar o rato; nos botões do
 * carrinho isso tirava o branco. Esta regra cobre o <a> e o <span> do texto. */
.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__footer-buttons .elementor-button:hover,
.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__footer-buttons .elementor-button:hover .elementor-button-text {
	color: #fff !important;
}