/*
Theme Name: Hello Elementor Child (MiraCosmética)
Template: hello-elementor
Description: Child theme do site da MiraCosmética. Regista o tipo de conteúdo Produto e as taxonomias Marca e Gama.
Author: Mediaon
Version: 1.0.0
Text Domain: hello-elementor-child
*/

/* Imagem dinâmica sem ficheiro (produto ainda sem imagem): não mostrar um <img> vazio. */
img.e-image-base:not([src]) {
	display: none;
}

/* Separador ativo (estado "selected" dos separadores atómicos).
   O MCP só converte :hover/:focus/:active; passar para o estado "Selected" da classe med-separador no editor. */
.med-separador.e--selected {
	color: var(--med-petroleo);
	border-bottom: 2px solid var(--med-petroleo);
}
.abs-separador.e--selected {
	color: var(--abs-branco);
	border-bottom: 2px solid var(--abs-teal);
}
.gama-separador.e--selected {
	color: var(--gama-branco);
	border-bottom: 1px solid var(--gama-champagne);
}
.drj-separador.e--selected {
	color: var(--drj-latao);
	border-bottom: 1px solid var(--drj-latao);
}

/* Filtros do catálogo ([mira_filtros_catalogo], classe global mira-filtros no elemento). */
.mira-filtros > span {
	display: block;
	margin: 0 0 0.5rem;
	font-family: var(--mira-fonte);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--mira-azul);
}
.mira-filtros ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0 0 1.25rem;
	padding: 0;
	list-style: none;
}
.mira-filtros a {
	display: inline-block;
	padding: 0.5rem 1rem;
	border: 1px solid var(--mira-azul);
	color: var(--mira-azul);
	font-family: var(--mira-fonte);
	font-size: 0.875rem;
	font-weight: 500;
	text-decoration: none;
}
.mira-filtros a:hover,
.mira-filtros a:has(strong) {
	background-color: var(--mira-azul);
	color: var(--mira-branco);
}
.mira-filtros a strong { font-weight: 600; }
.mira-filtros a:focus-visible {
	outline: 2px solid var(--mira-azul);
	outline-offset: 3px;
}

/* Palavra de destaque dentro de um título (ex.: "mais cor" no convite Absoluk). */
.abs-secao h2 span { color: var(--abs-teal); }
.gama-secao h1 em, .gama-secao h2 em { color: var(--gama-champagne); }

/* Produtos sem imagem: o contentor da imagem mostra um painel da marca com o nome
   do produto (.mira-sem-imagem, aria-hidden). Com imagem, o painel fica escondido. */
.mira-sem-imagem { display: none !important; }
:is(.abs-halo, .gama-produto-media, .drj-produto-media, .drj-painel, .med-produto-media, .mira-produto-media):not(:has(img[src])) {
	display: block;
	padding: 0;
	aspect-ratio: auto;
	background-color: transparent;
}
:is(.abs-halo, .gama-produto-media, .drj-produto-media, .drj-painel, .med-produto-media, .mira-produto-media):not(:has(img[src])) .mira-sem-imagem {
	display: flex !important;
}
/* Catálogo: o painel toma a cor da marca do cartão (classe acrescentada à saída). */
.marca-medavita .mira-sem-imagem { background-color: var(--med-marfim); color: var(--med-tinta); font-family: var(--med-fonte-titulos); font-weight: 400; text-transform: uppercase; border-bottom: 1px solid var(--med-dourado); }
.marca-absoluk .mira-sem-imagem { background-color: var(--abs-branco); color: var(--abs-preto, #000); font-family: var(--abs-fonte-titulos); text-transform: uppercase; border-bottom: 3px solid var(--abs-teal); }
.marca-gama .mira-sem-imagem { background-color: var(--gama-carvao); color: var(--gama-branco); font-family: var(--gama-fonte-titulos); font-weight: 400; border: 1px solid color-mix(in srgb, var(--gama-champagne) 45%, transparent); border-bottom-color: var(--gama-champagne); }
/* Nas páginas da marca o nome no painel ganha corpo, para o painel não parecer vazio. */
:is(.marca-absoluk, .marca-gama) .mira-sem-imagem { font-size: clamp(1.125rem, 1.6vw, 1.5rem); }
.marca-dr-jackson .mira-sem-imagem { background-color: var(--drj-bege); color: var(--drj-carvao); font-family: var(--drj-fonte-titulos); font-weight: 400; border-bottom: 2px solid var(--drj-latao); }

/* Ligações dentro de texto corrido: sublinhadas para se distinguirem do texto. */
:is(.mira-texto, .med-texto, .abs-texto, .gama-texto, .drj-texto) a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 3px;
}
:is(.mira-texto, .med-texto, .abs-texto, .gama-texto, .drj-texto) a:hover { text-decoration: none; }
:is(.mira-texto, .med-texto, .abs-texto, .gama-texto, .drj-texto) a:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

/* Movimento discreto: entrada das secções ao deslizar e resposta dos cartões ao cursor.
   Só para quem não pediu menos movimento; sem JavaScript. */
@media (prefers-reduced-motion: no-preference) {
	@supports (animation-timeline: view()) {
		.elementor section.e-div-block-base {
			animation: mira-entrar linear both;
			animation-timeline: view();
			animation-range: entry 0% entry 30%;
		}
	}
	:is(.mira-vitrine, .mira-catalogo-cartao, .mira-produto, .med-produto-cartao, .med-cartao-linha, .abs-produto-cartao, .gama-produto-cartao, .drj-produto-cartao) {
		transition: transform 0.25s ease, background-color 0.2s ease, border-color 0.2s ease;
	}
	:is(.mira-vitrine, .mira-catalogo-cartao, .mira-produto, .med-produto-cartao, .med-cartao-linha, .abs-produto-cartao, .gama-produto-cartao, .drj-produto-cartao):hover {
		transform: translateY(-4px);
	}
}
@keyframes mira-entrar {
	from { opacity: 0; transform: translateY(1.5rem); }
	to { opacity: 1; transform: none; }
}

/* Pesquisa do catálogo. */
.mira-pesquisa { display: grid; gap: 0.5rem; max-width: 36rem; margin: 0 0 1.75rem; font-family: var(--mira-fonte); color: var(--mira-azul); }
.mira-pesquisa label { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; }
.mira-pesquisa-campo { display: flex; gap: 0; }
.mira-pesquisa input[type="search"] { flex: 1; min-width: 0; padding: 0.875rem 1rem; border: 1px solid var(--mira-azul); border-right: 0; border-radius: 0; font: inherit; font-size: 1rem; color: var(--mira-azul); background: var(--mira-branco); }
.mira-pesquisa button { padding: 0 1.5rem; border: 1px solid var(--mira-azul); border-radius: 0; background: var(--mira-azul); color: var(--mira-branco); font: inherit; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; }
.mira-pesquisa input:focus-visible, .mira-pesquisa button:focus-visible { outline: 2px solid var(--mira-azul); outline-offset: 2px; }
.mira-pesquisa-resultado { margin: 0.25rem 0 0; font-size: 0.875rem; }
.mira-pesquisa-resultado a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }

/* Catálogo: moldura quadrada igual para todas as imagens, com o fundo da marca. */
.mira-catalogo-cartao .mira-produto-media { position: relative; display: block; width: 100%; aspect-ratio: 1 / 1; padding: 0; overflow: hidden; background-color: var(--mira-branco); }
.mira-catalogo-cartao .mira-catalogo-imagem { position: absolute; inset: 0; width: 100%; height: 100%; padding: 10%; object-fit: contain; }
.mira-catalogo-cartao .mira-produto-media:not(:has(img[src])) { aspect-ratio: 1 / 1; }
.mira-catalogo-cartao .mira-produto-media .mira-sem-imagem { height: 100%; aspect-ratio: auto !important; }
.mira-catalogo-cartao.marca-medavita .mira-produto-media { background-color: var(--med-marfim); }
.mira-catalogo-cartao.marca-absoluk .mira-produto-media { background-color: var(--abs-branco); outline: 1px solid var(--abs-linha); outline-offset: -1px; }
.mira-catalogo-cartao.marca-gama .mira-produto-media { background-color: var(--gama-preto); }
.mira-catalogo-cartao.marca-gama .mira-catalogo-imagem { padding: 4%; }
.mira-catalogo-cartao.marca-dr-jackson .mira-produto-media { background-color: var(--drj-bege); }
.mira-catalogo-cartao.marca-dr-jackson .mira-catalogo-imagem { padding: 0; object-fit: cover; }

/* Telemóvel: grelhas de produto em duas colunas. Com uma coluna, a Medavita
   ocupava quase 20 000 px de painéis claros. */
@media (max-width: 767px) {
	:is(.med-loop-grelha, .abs-loop-grelha, .gama-loop-grelha, .drj-loop-grelha, .mira-catalogo-grelha) {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		gap: 0.75rem !important;
	}
	:is(.med-loop-grelha, .abs-loop-grelha, .gama-loop-grelha, .drj-loop-grelha, .mira-catalogo-grelha) > * > * {
		padding: 0.75rem !important;
	}
	:is(.med-loop-grelha, .abs-loop-grelha, .gama-loop-grelha, .drj-loop-grelha, .mira-catalogo-grelha) :is(h2, h3) {
		font-size: 1rem !important;
		overflow-wrap: anywhere;
	}
	:is(.med-loop-grelha, .abs-loop-grelha, .gama-loop-grelha, .drj-loop-grelha, .mira-catalogo-grelha) p {
		font-size: 0.8125rem !important;
	}
	.mira-sem-imagem { font-size: 0.9375rem !important; padding: 0.75rem !important; }
}

/* Início: os três cartões escuros das marcas com a mesma ordem; o corpo ocupa a
   altura restante e a nota de distribuição fica sempre no fundo. */
:is(.e-vabs-corpo, .e-vdrj-corpo, .elementor-element-14e13d61) { flex-grow: 1; }
:is([data-id="2e3d078e"], [data-id="62af4eda"], [data-id="2b662e4a"]) { margin-top: auto !important; padding-top: 0.5rem; }
[data-id="2fba2345"] { height: 3.25rem !important; width: auto !important; align-self: flex-start; }

/* Painel sem imagem: o nome do produto já está no título do cartão. O painel mostra
   só a assinatura da marca, pequena e espaçada, para a grelha não repetir o nome. */
a .mira-sem-imagem > * { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
a .mira-sem-imagem { position: relative; justify-content: center !important; align-items: center !important; text-align: center; }
a .mira-sem-imagem::after { font-size: 0.75rem; letter-spacing: 0.32em; text-transform: uppercase; opacity: 0.7; padding-left: 0.32em; }
a .med-sem-imagem::after { content: "Medavita"; }
a .abs-sem-imagem::after { content: "Absoluk"; }
a .gama-sem-imagem::after { content: "GA.MA"; }
a .drj-sem-imagem::after { content: "Dr. Jackson"; }
@media (max-width: 767px) {
	a .mira-sem-imagem::after { font-size: 0.625rem; letter-spacing: 0.24em; }
	:is(.med-loop-grelha, .abs-loop-grelha, .gama-loop-grelha, .drj-loop-grelha, .mira-catalogo-grelha) :is(h2, h3) {
		font-size: 0.875rem !important;
		letter-spacing: 0 !important;
		overflow-wrap: normal;
		hyphens: manual;
	}
}

/* Absoluk: na página da marca (fundo preto) os painéis sem imagem ficam em carvão,
   para não encandearem ao lado dos packshots. */
.abs-halo .abs-sem-imagem { background-color: #1b1b1b !important; color: var(--abs-teal) !important; border: 1px solid #2c2c2c; border-bottom: 2px solid var(--abs-teal) !important; }
/* Catálogo: o cartão traz a marca numa classe à parte. */
a.marca-medavita .mira-sem-imagem::after, .marca-medavita a .mira-sem-imagem::after { content: "Medavita"; }
a.marca-absoluk .mira-sem-imagem::after, .marca-absoluk a .mira-sem-imagem::after { content: "Absoluk"; }
a.marca-gama .mira-sem-imagem::after, .marca-gama a .mira-sem-imagem::after { content: "GA.MA"; }
a.marca-dr-jackson .mira-sem-imagem::after, .marca-dr-jackson a .mira-sem-imagem::after { content: "Dr. Jackson"; }
.mira-catalogo-cartao.marca-absoluk .mira-sem-imagem { background-color: #f2f5f5 !important; color: #2f7f86 !important; }

/* Ficha sem imagem: o painel guarda o nome do produto (funciona como rótulo);
   no telemóvel fica mais baixo para o título aparecer sem rolar. */
@media (max-width: 767px) {
	.med-grelha-2 > .med-produto-media:not(:has(img[src])), .med-grelha-2 > .med-produto-media .mira-sem-imagem,
	:is(.abs-grelha-2, .gama-grelha-2, .drj-grelha-2) .mira-sem-imagem { aspect-ratio: 16 / 9 !important; min-height: 0 !important; height: auto !important; }
}

/* Marcas revendidas (A MiraCosmética #revendemos e faixa do início #outras-marcas).
   Logótipos numa só cor, com largura própria (--w) para terem o mesmo peso visual;
   as marcas sem logótipo com qualidade aparecem em texto, no mesmo cinzento. */
#revendemos { padding-block-start: 0 !important; }
#outras-marcas { padding-block: clamp(2.5rem, 5vw, 4rem) !important; border-top: 1px solid color-mix(in srgb, var(--mira-azul) 15%, transparent); }
#outras-marcas > * { align-items: center; text-align: center; }
:is(#revendemos-logos, #outras-marcas-logos) {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 1.75rem 2.75rem;
	width: 100%;
	margin-block: 2rem 0.5rem;
}
#outras-marcas-logos { gap: 1.25rem 2.25rem; max-width: 64rem; margin-inline: auto; }
:is(#revendemos-logos, #outras-marcas-logos) > * { margin: 0; flex: 0 0 auto; }
:is(#revendemos-logos, #outras-marcas-logos) img {
	--w: 5.5rem;
	width: var(--w) !important;
	max-width: 100%;
	height: auto !important;
	max-height: 2.75rem;
	object-fit: contain;
	filter: grayscale(1) brightness(0);
	opacity: 0.55;
}
#outras-marcas-logos img { width: calc(var(--w) * 0.85) !important; }
:is(#revendemos-logos, #outras-marcas-logos) p {
	font-size: 0.75rem !important;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-align: center;
	line-height: 1.3;
	color: #000 !important;
	opacity: 0.55;
}
@media (max-width: 767px) {
	:is(#revendemos-logos, #outras-marcas-logos) { gap: 1.25rem 1.75rem; }
	:is(#revendemos-logos, #outras-marcas-logos) img { width: calc(var(--w) * 0.78) !important; }
	:is(#revendemos-logos, #outras-marcas-logos) p { font-size: 0.6875rem !important; letter-spacing: 0.08em; }
}
:is(#revendemos-logos, #outras-marcas-logos) img[src*="/loreal."] { --w: 5.82rem; }
:is(#revendemos-logos, #outras-marcas-logos) img[src*="/wella."] { --w: 4.64rem; }
:is(#revendemos-logos, #outras-marcas-logos) img[src*="/schwarzkopf."] { --w: 4.27rem; }
:is(#revendemos-logos, #outras-marcas-logos) img[src*="/revlon."] { --w: 5.62rem; }
:is(#revendemos-logos, #outras-marcas-logos) img[src*="/light-irridiance-1."] { --w: 3.79rem; }
:is(#revendemos-logos, #outras-marcas-logos) img[src*="/Kaaral."] { --w: 5.06rem; }
:is(#revendemos-logos, #outras-marcas-logos) img[src*="/360."] { --w: 2.62rem; }
:is(#revendemos-logos, #outras-marcas-logos) img[src*="/Prohall-1."] { --w: 5.82rem; }
:is(#revendemos-logos, #outras-marcas-logos) img[src*="/rickiparodi."] { --w: 6.42rem; }
:is(#revendemos-logos, #outras-marcas-logos) img[src*="/jaguar."] { --w: 6.42rem; }
:is(#revendemos-logos, #outras-marcas-logos) img[src*="/parlux."] { --w: 4.08rem; }
:is(#revendemos-logos, #outras-marcas-logos) img[src*="/barbicide."] { --w: 6.88rem; }
:is(#revendemos-logos, #outras-marcas-logos) img[src*="/artero."] { --w: 6.03rem; }
:is(#revendemos-logos, #outras-marcas-logos) img[src*="/andreia."] { --w: 1.76rem; }
:is(#revendemos-logos, #outras-marcas-logos) img[src*="/purple."] { --w: 5.13rem; }
:is(#revendemos-logos, #outras-marcas-logos) img[src*="/inocos."] { --w: 5.71rem; }
:is(#revendemos-logos, #outras-marcas-logos) img[src*="/gl-nails."] { --w: 3.60rem; }
:is(#revendemos-logos, #outras-marcas-logos) img[src*="/italwax."] { --w: 4.49rem; }
:is(#revendemos-logos, #outras-marcas-logos) img[src*="/norel."] { --w: 4.44rem; }
/* Na página A MiraCosmética os títulos estão à esquerda: os logótipos acompanham. */
#revendemos-logos { justify-content: flex-start; }
#revendemos { scroll-margin-top: 2.5rem; }
@media (max-width: 767px) { #revendemos { scroll-margin-top: 4.5rem; } }

/* Assinatura ("Um parceiro a seu lado.", "Filipe Lemos") em itálico, com um ficheiro
   reduzido às letras destas duas frases (fontes/assinatura.woff2, 4 KB). */
.mira-assinatura { font-family: 'Mira Assinatura', var(--mira-fonte) !important; font-style: italic !important; }

/* Fichas da Dr. Jackson: só duas fontes (IM Fell para títulos, Archivo para texto). */
body.single-produto.mira-pagina-dr-jackson { --drj-fonte-italico: Archivo; --drj-fonte-numeros: 'IM Fell English SC'; }

/* Páginas de marca (referência: Davines): escala mais contida e secções mais próximas,
   cerca de 25% menos. A página inicial e as institucionais ficam como estão. */
body:is(.mira-pagina-medavita, .mira-pagina-absoluk, .mira-pagina-gama, .mira-pagina-dr-jackson) {
	--med-espaco-secao: clamp(3rem, 6.5vw, 6rem);
	--mira-espaco-secao: clamp(3rem, 6.5vw, 5.25rem);
	--med-t-display: clamp(2.5rem, 4.7vw, 4.25rem);
	--med-t-h2: clamp(1.75rem, 3vw, 2.75rem);
}
body.mira-pagina-absoluk .abs-display, body.mira-pagina-dr-jackson .drj-display { font-size: clamp(2.75rem, 6vw, 5rem) !important; }
body.mira-pagina-gama .gama-display { font-size: clamp(2.5rem, 5vw, 4.5rem) !important; }

/* Fichas no telemóvel (referência: Davines): "Pedir informações" fica visível no fundo
   do ecrã enquanto se lê a ficha. */
@media (max-width: 767px) {
	body.single-produto a[href*="pedido="]:is(.med-botao, .abs-botao, .gama-botao, .drj-botao) {
		position: sticky;
		bottom: 0.75rem;
		z-index: 20;
		display: flex;
		justify-content: center;
		width: 100%;
		box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18);
	}
}
/* Medavita, "As linhas": no telemóvel as fotografias dos cartões ficam panorâmicas. */
@media (max-width: 767px) { img[data-interaction-id^="li"] { aspect-ratio: 16 / 9 !important; } }

/* ===================== Ronda Davines (página inicial e cabeçalho) ===================== */
html, body { overflow-x: clip; }
html { scroll-padding-top: 5.5rem; }

/* Cabeçalho fixo e discreto; encolhe ao deslizar (classe mira-rolou posta por um script de 1 linha). */
.elementor-location-header { position: sticky; top: 0; z-index: 60; }
.admin-bar .elementor-location-header { top: 32px; }
.elementor-location-header .mira-cabecalho { transition: padding 0.25s ease, box-shadow 0.25s ease; }
.elementor-location-header .mira-logo { transition: height 0.25s ease, max-height 0.25s ease; }
body.mira-rolou .elementor-location-header .mira-cabecalho { padding-block: 0.4rem !important; box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08), 0 8px 24px rgba(0, 0, 0, 0.06); }
body.mira-rolou .elementor-location-header .mira-logo { max-height: 2.1rem; width: auto; }
@media (max-width: 767px) {
	body.mira-rolou .elementor-location-header .mira-logo { max-height: 1.75rem; }
	body.mira-rolou .elementor-location-header .mira-cabecalho { padding-block: 0.25rem !important; }
}
@media (prefers-reduced-motion: reduce) { .elementor-location-header .mira-cabecalho, .elementor-location-header .mira-logo { transition: none; } }

/* Início · Produtos em destaque: formato compacto (miniatura + texto), diferente dos painéis das marcas. */
body.home [data-id="22c094a1"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 0 2.5rem !important; }
body.home [data-id="22c094a1"] > * {
	display: grid !important; grid-template-columns: 7.5rem minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 1.5rem; row-gap: 0.5rem;
	padding: 1.25rem 0 !important; border: 0 !important; border-bottom: 1px solid color-mix(in srgb, var(--mira-azul) 18%, transparent) !important; background: none !important; align-items: start;
}
body.home [data-id="22c094a1"] > * > img { grid-row: 1 / span 2; width: 7.5rem !important; height: 7.5rem !important; aspect-ratio: 1 / 1 !important; object-fit: contain; background: #f6f5f1; padding: 0.4rem; margin: 0 !important; }
body.home [data-id="22c094a1"] > * > :nth-child(2) { gap: 0.25rem; padding: 0 !important; }
body.home [data-id="22c094a1"] > * > :nth-child(3) { grid-column: 2; margin: 0 !important; }
@media (max-width: 767px) {
	body.home [data-id="22c094a1"] { grid-template-columns: 1fr !important; }
	body.home [data-id="22c094a1"] > * { grid-template-columns: 5.5rem minmax(0, 1fr); column-gap: 1rem; padding: 1rem 0 !important; }
	body.home [data-id="22c094a1"] > * > img { width: 5.5rem !important; height: 5.5rem !important; }
}

/* Início · Porquê: faixa azul a toda a largura, números em grande e selo dos 20 anos. */
body.home [data-id="b9290c8"] { background-color: var(--mira-azul) !important; color: var(--mira-branco); }
body.home [data-id="b9290c8"] :is(h2, h3, p, span) { color: var(--mira-branco) !important; }
body.home [data-id="b9290c8"] [data-id="7e9c47db"] { color: var(--mira-dourado) !important; }
body.home [data-id="b9290c8"] :is([data-id="53936857"], [data-id="1d6a132d"]) { color: var(--mira-dourado) !important; font-size: clamp(4rem, 9vw, 7rem) !important; line-height: 0.95; font-weight: 600; }
body.home [data-id="b9290c8"] [data-id="b13391d"] { display: flex !important; flex-wrap: wrap; align-items: center; gap: 2rem 3rem !important; margin-top: 1.5rem; }
body.home [data-id="b9290c8"] img[data-interaction-id="pq20selo"] { width: 7.5rem !important; height: auto !important; }
body.home [data-id="b9290c8"] [data-id="13f509c5"] > * { border-color: color-mix(in srgb, var(--mira-branco) 30%, transparent) !important; }
body.home [data-id="b9290c8"] :is([class*="filete"], hr) { background-color: var(--mira-dourado) !important; border-color: var(--mira-dourado) !important; }

/* Outras marcas (início e A MiraCosmética): grelha regular; os nomes sem logótipo compostos como marca. */
:is(#revendemos-logos, #outras-marcas-logos) { display: grid !important; grid-template-columns: repeat(5, minmax(0, 1fr)); grid-auto-rows: 5rem; gap: 0 !important; justify-items: center; align-items: center; max-width: 60rem; }
#outras-marcas-logos { margin-inline: auto; }
:is(#revendemos-logos, #outras-marcas-logos) p { font-family: var(--mira-fonte) !important; font-weight: 700 !important; font-size: 0.8125rem !important; letter-spacing: 0.22em !important; line-height: 1.1; text-transform: uppercase; text-align: center; max-width: 9rem; }
@media (max-width: 767px) {
	:is(#revendemos-logos, #outras-marcas-logos) { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 3.75rem; }
	:is(#revendemos-logos, #outras-marcas-logos) p { font-size: 0.6875rem !important; letter-spacing: 0.14em !important; }
}

/* Páginas de marca (referência: Davines): blocos editoriais alternados, fotografia de um
   lado e texto do outro. "Porquê Absoluk" e "Porquê Dr. Jackson" com imagem à esquerda. */
:is([data-id="550fc8ab"], [data-id="6154224b"]) { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); column-gap: clamp(2rem, 5vw, 5rem); row-gap: 1rem; align-items: start; }
:is([data-id="550fc8ab"], [data-id="6154224b"]) > img:first-child { grid-column: 1; grid-row: 1 / span 3; width: 100% !important; height: 100% !important; max-height: 44rem; object-fit: cover; margin: 0 !important; }
:is([data-id="550fc8ab"], [data-id="6154224b"]) > :not(img) { grid-column: 2; }
:is([data-id="2278fef5"], [data-id="6845c8df"]) { grid-template-columns: 1fr !important; gap: 1.75rem !important; }
[data-id="550fc8ab"] > img:first-child { object-fit: contain; background: #1b1b1b; padding: 2rem; }
@media (max-width: 767px) {
	:is([data-id="550fc8ab"], [data-id="6154224b"]) { grid-template-columns: 1fr; }
	:is([data-id="550fc8ab"], [data-id="6154224b"]) > img:first-child { grid-row: auto; aspect-ratio: 4 / 3; height: auto !important; }
	:is([data-id="550fc8ab"], [data-id="6154224b"]) > :not(img) { grid-column: 1; }
}

/* Fichas: faixa da gama com a cor da marca (inc/faixa-gama.php), a toda a largura. */
.mira-faixa-gama { width: 100vw; margin-inline: calc(50% - 50vw); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: clamp(22rem, 34vw, 30rem); margin-block: clamp(2.5rem, 5vw, 4rem); }
.mira-faixa-gama-foto { overflow: hidden; }
.mira-faixa-gama-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mira-faixa-gama-texto { display: flex; flex-direction: column; justify-content: center; gap: 0.75rem; padding: clamp(2rem, 5vw, 5rem); max-width: 36rem; }
.mira-faixa-gama-kicker { font-family: var(--mira-fonte); font-size: 0.75rem; letter-spacing: 0.2em; text-transform: uppercase; margin: 0; }
.mira-faixa-gama-titulo { font-size: clamp(2rem, 4vw, 3.25rem); line-height: 1.05; margin: 0; }
.mira-faixa-gama-numero { margin: 0; opacity: 0.85; }
.mira-faixa-gama-ligacao { align-self: flex-start; margin-top: 0.75rem; font-family: var(--mira-fonte); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; text-decoration: underline; text-underline-offset: 4px; color: inherit; }
.mira-faixa-gama-ligacao:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
.mira-faixa-marca-medavita { background: var(--med-petroleo); color: #fff; }
.mira-faixa-marca-medavita .mira-faixa-gama-titulo { font-family: var(--med-fonte-titulos); font-weight: 400; text-transform: uppercase; color: #fff; }
.mira-faixa-marca-absoluk { background: var(--abs-teal); color: var(--abs-preto); }
.mira-faixa-marca-absoluk .mira-faixa-gama-titulo { font-family: var(--abs-fonte-titulos); font-weight: 600; text-transform: uppercase; color: var(--abs-preto); }
.mira-faixa-marca-absoluk .mira-faixa-gama-foto { background: #1b1b1b; } .mira-faixa-marca-absoluk .mira-faixa-gama-img { object-fit: contain; padding: 2rem; }
.mira-faixa-marca-gama { background: var(--gama-champagne); color: var(--gama-preto); }
.mira-faixa-marca-gama .mira-faixa-gama-titulo { font-family: var(--gama-fonte-titulos); font-weight: 400; color: var(--gama-preto); }
.mira-faixa-marca-dr-jackson { background: var(--drj-latao); color: var(--drj-carvao); }
.mira-faixa-marca-dr-jackson .mira-faixa-gama-titulo { font-family: var(--drj-fonte-titulos); font-weight: 400; color: var(--drj-carvao); }
@media (max-width: 767px) {
	.mira-faixa-gama { grid-template-columns: 1fr; min-height: 0; }
	.mira-faixa-gama-foto { aspect-ratio: 4 / 3; }
	.mira-faixa-gama-texto { padding: 2rem 1.25rem 2.5rem; }
}
/* O bloco "Corpo" das fichas é estreito e encostado à esquerda: ocupa o contentor todo,
   para a faixa da gama poder ir de ponta a ponta do ecrã. */
body.single-produto :has(> .elementor-widget-theme-post-content), body.single-produto .elementor-widget-theme-post-content { max-width: none !important; width: 100% !important; margin-inline: 0 !important; align-self: stretch !important; }
/* Telemóvel: com a página a deslizar, a barra MENU também encolhe. */
@media (max-width: 767px) {
	body.mira-rolou .elementor-location-header [data-id="3ae2e462"] { gap: 0.25rem !important; row-gap: 0.25rem !important; }
	body.mira-rolou .elementor-location-header [data-id="2d694712"] { padding-block: 0.3rem !important; min-height: 0 !important; }
	body.mira-rolou .elementor-location-header [data-id="2d694712"] * { font-size: 0.8125rem; }
}
.mira-faixa-gama-descricao { margin: 0; max-width: 32rem; }

/* Políticas (páginas sem Elementor): medida de leitura e títulos na identidade da casa. */
body:is(.page-id-2397, .page-id-2399) .site-main { max-width: 46rem; margin-inline: auto; padding: clamp(2.5rem, 6vw, 5rem) 1.25rem; font-family: var(--mira-fonte); color: var(--mira-azul); line-height: 1.7; }
body:is(.page-id-2397, .page-id-2399) .site-main h1 { font-size: clamp(2rem, 4vw, 2.75rem); line-height: 1.15; margin: 0 0 1.5rem; color: var(--mira-azul); }
body:is(.page-id-2397, .page-id-2399) .site-main h2 { font-size: 1.25rem; margin: 2.25rem 0 0.5rem; color: var(--mira-azul); }
body:is(.page-id-2397, .page-id-2399) .site-main a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
form label a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }

/* Marcas revendidas: logótipos dos sites oficiais (2026/10); largura pelo mesmo peso visual. */
:is(#revendemos-logos, #outras-marcas-logos) img[src*="/2026/10/loreal."] { --w: 4.92rem; }
:is(#revendemos-logos, #outras-marcas-logos) img[src*="/2026/10/revlon."] { --w: 5.96rem; }
:is(#revendemos-logos, #outras-marcas-logos) img[src*="/2026/10/jaguar."] { --w: 4.94rem; }
:is(#revendemos-logos, #outras-marcas-logos) img[src*="/2026/10/kaaral."] { --w: 5.11rem; }
:is(#revendemos-logos, #outras-marcas-logos) img[src*="/2026/10/360."] { --w: 2.62rem; }
:is(#revendemos-logos, #outras-marcas-logos) img[src*="/2026/10/prohall."] { --w: 6.03rem; }
:is(#revendemos-logos, #outras-marcas-logos) img[src*="/2026/10/rickiparodi."] { --w: 6.45rem; }
:is(#revendemos-logos, #outras-marcas-logos) img[src*="/2026/10/parlux."] { --w: 3.78rem; }
:is(#revendemos-logos, #outras-marcas-logos) img[src*="/2026/10/andreia."] { --w: 5.03rem; }
:is(#revendemos-logos, #outras-marcas-logos) img[src*="/2026/10/italwax."] { --w: 4.45rem; }
:is(#revendemos-logos, #outras-marcas-logos) img[src*="/2026/10/realnatura."] { --w: 2.98rem; }

/* Fotografias da MiraCosmética (biblioteca do site antigo) nas secções que eram só texto. */
img:is([data-interaction-id="mfqs0001"], [data-interaction-id="mfdm0001"]) { width: 100% !important; height: auto !important; aspect-ratio: 4 / 5; object-fit: cover; max-height: 32rem; margin-top: 2rem !important; }
img[data-interaction-id="mfpr0001"] { width: 100% !important; height: auto !important; aspect-ratio: 3 / 2; object-fit: cover; margin-top: 2rem !important; }
@media (max-width: 767px) { img:is([data-interaction-id="mfqs0001"], [data-interaction-id="mfdm0001"]) { aspect-ratio: 4 / 3; } }
body:is(.page-id-2397, .page-id-2399), body:is(.page-id-2397, .page-id-2399) .site-main { background: #fff !important; }
body:is(.page-id-2397, .page-id-2399) .site-main :is(.page-header, .page-content) { padding-inline: 0 !important; margin-inline: 0 !important; max-width: none !important; }

/* Medavita, números em destaque: o dourado da marca, um pouco mais escuro, para chegar ao contraste mínimo (3:1) sobre o marfim. */
.mira-pagina-medavita :is([data-interaction-id="16867c8e"], [data-interaction-id="330102ec"], [data-interaction-id="fc6436"], [data-interaction-id="53b8fe47"]) { color: #a88b53; }

/* Separadores das gamas (página Medavita): no separador ativo, o petróleo fica um pouco mais escuro para chegar ao contraste mínimo (4,5:1) sobre o fundo cinzento. */
.mira-pagina-medavita [role="tab"]:is([aria-selected="true"], :hover, :focus-visible), .mira-pagina-medavita [role="tab"]:is([aria-selected="true"], :hover, :focus-visible) * { color: #226b6c; }