/* =============================================================================
 * PAGINA DE PRODUTO (modelo de teste)
 *
 * Mesma linguagem do resto do site: Exo 2 nos titulos, olho em cobre, cartoes
 * brancos de canto 14px, faixa de numeros em azul-marinho. Os tokens repetem
 * os da home de proposito — as duas paginas carregam CSS separado, e depender
 * de uma variavel declarada na outra deixaria esta pagina sem cor.
 * ========================================================================== */

/*
 * Os tokens valem nos DOIS embrulhos que usam esta folha.
 *
 * `equipamento.css` empresta a galeria, a chamada e o bloco do especialista
 * daqui, mas a página dele é `.ez-pagina--equipamento` — e os tokens estavam
 * declarados só em `.ez-produto`. Resultado medido: `--pr-wrap` vazio fazia
 * `width: min(100% - 32px, var(--pr-wrap))` virar declaração inválida, e a
 * seção "Fale com um especialista" sangrava de borda a borda em vez de ficar
 * dentro da caixa do site. As cores caíam junto.
 *
 * Terceiro caso do mesmo defeito neste projeto (ver o `:root` de site.css):
 * token declarado dentro de um embrulho só serve a quem está dentro dele.
 */
.ez-produto,
.ez-pagina--equipamento {
	--pr-creme:       #F5F3EF;
	--pr-areia:       #EEEFE9;
	--pr-azul:        #1A2B3B;
	--pr-azul-escuro: #152538;
	--pr-cobre:       #CA7441;
	--pr-cobre-texto: #A65628;
	--pr-cinza:       #5A6472;
	--pr-linha:       rgba(16, 30, 44, .10);

	--pr-exo:    "Exo 2", sans-serif;
	--pr-mao:    "Caveat", "Segoe Script", cursive;

	--pr-raio:   14px;
	--pr-wrap:   1180px;

	font-family: var(--pr-exo);
	color: #17202B;
	background: #FFFFFF;
	overflow-x: clip;
}

.ez-produto img {
	max-width: 100%;
	height: auto;
	display: block;
}

.pr-wrap {
	width: min(100% - 48px, var(--pr-wrap));
	margin-inline: auto;
}

.pr-olho {
	margin: 0 0 10px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 1.6px;
	text-transform: uppercase;
	color: var(--pr-cobre-texto);
}

/* --- botoes ---------------------------------------------------------------- */

.pr-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 15px 26px;
	border-radius: 10px;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: .7px;
	text-transform: uppercase;
	text-decoration: none;
	transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}

.pr-btn__icone svg {
	width: 19px;
	height: 19px;
	display: block;
}

.pr-btn--principal {
	background: var(--pr-cobre);
	color: #FFFFFF;
}

.pr-btn--principal:hover {
	background: #B4663A;
	color: #FFFFFF;
}

.pr-btn--secundario {
	background: #FFFFFF;
	border: 1px solid var(--pr-linha);
	color: var(--pr-azul);
}

.pr-btn--secundario:hover {
	border-color: var(--pr-cobre-texto);
	color: var(--pr-cobre-texto);
}

/*
 * O terceiro nivel: nem cheio, nem com contorno.
 *
 * "Especificacoes" nao e uma decisao de compra — e um atalho para uma faixa
 * mais abaixo da MESMA pagina. Dar a ele a mesma moldura do botao de falar com
 * um especialista colocava os dois no mesmo degrau, e a pessoa tinha de ler os
 * tres botoes inteiros para descobrir qual era qual.
 */
.pr-btn--discreto {
	padding: 12px 20px;
	background: none;
	color: var(--pr-cinza);
	font-size: 14px;
	letter-spacing: .5px;
}

.pr-btn--discreto:hover {
	color: var(--pr-cobre-texto);
}

.pr-btn--discreto .pr-btn__icone svg {
	width: 17px;
	height: 17px;
}

/* =============================================================================
 * TOPO
 * ========================================================================== */

.pr-topo {
	padding: 26px 0 40px;
	background: var(--pr-creme);
}

.pr-trilha ol {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 22px;
	padding: 0;
	list-style: none;
	font-size: 13px;
	color: var(--pr-cinza);
}

/* O separador e decorativo: entra pelo CSS para nao ser lido em voz alta. */
.pr-trilha li + li::before {
	content: '›';
	margin-right: 8px;
	color: rgba(90, 100, 114, .6);
}

.pr-trilha a {
	color: var(--pr-cinza);
	text-decoration: none;
}

.pr-trilha a:hover {
	color: var(--pr-cobre-texto);
}

.pr-topo__grade {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 46px;
	align-items: start;
}

/* --- galeria --------------------------------------------------------------- */

/*
 * A GALERIA ACOMPANHA A ROLAGEM.
 *
 * Medido nesta ficha a 1440 px: a coluna da foto tem 487 px de altura e a da
 * direita tem 857 — com preco, compra, frete e os dois botoes. Sobravam 370 px
 * de creme vazio embaixo da foto, e era exatamente o "descompensado" que se
 * enxerga sem precisar medir.
 *
 * Esticar a foto para 857 seria pior: a imagem do produto tem proporcao
 * propria e ia nadar dentro de um quadro alto demais. Entao quem se mexe e a
 * coluna curta — ela fica na tela enquanto a outra rola, que e o que loja boa
 * faz e o que resolve o vazio sem deformar nada.
 *
 * `top` sai do cabecalho grudado: menos que isso e a foto entra por baixo do
 * menu.
 */
/* O invólucro estica ate a altura da linha; a galeria gruda dentro dele.
   Ver o comentario em `components/produto/galeria.php`. */
.pr-galeria__grude {
	align-self: stretch;
}

.pr-galeria {
	display: grid;
	grid-template-columns: 64px minmax(0, 1fr);
	gap: 16px;
	align-items: start;
	position: sticky;
	top: calc(var(--ez-cabecalho, 149px) + 20px);
}

/*
 * `align-items: start` no PAI e o que permite o sticky funcionar.
 *
 * Com o padrao `stretch`, o item de grade tem a altura da linha inteira — e um
 * elemento que ja ocupa toda a altura disponivel nao tem para onde grudar.
 * O pai `.pr-topo__grade` ja declara `start`; esta nota existe para que
 * ninguem "conserte" aquilo e quebre isto sem entender por que.
 */

@media (max-width: 980px) {
	/* Coluna unica: nao ha o que acompanhar, e grudar so faria a foto cobrir
	   o texto enquanto se rola. */
	.pr-galeria {
		position: static;
	}

	.pr-galeria__grude {
		align-self: auto;
	}
}

/*
 * Uma foto só: sem régua de miniaturas, sem a coluna dela.
 *
 * O template não imprime as miniaturas quando há uma foto — certo — mas o grid
 * continuava com duas colunas, e o palco, sendo o único filho, caía na
 * primeira: 64px de largura para a foto do produto. Atingia 142 dos 317
 * produtos publicados.
 */
.pr-galeria--sozinha {
	grid-template-columns: minmax(0, 1fr);
}

/*
 * A coluna das miniaturas: setas em cima e embaixo, régua no meio.
 *
 * `minmax(0, 1fr)` na régua para ela poder encolher: sem isso a trilha do
 * meio teria mínimo de `min-content` — a altura das doze — e as setas seriam
 * empurradas para fora.
 */
.pr-galeria__coluna {
	display: grid;
	gap: 8px;
}

.pr-galeria__coluna--rolavel {
	grid-template-rows: auto minmax(0, 1fr) auto;
}

.pr-galeria__miniaturas {
	display: flex;
	flex-direction: column;
	gap: 10px;

	/*
	 * Quatro por vez. A altura exata vem do JS, que mede uma miniatura de
	 * verdade; o valor aqui é a estimativa que vale enquanto o script não
	 * rodou — e que vale PARA SEMPRE se ele não rodar.
	 *
	 * `overflow-y: auto` e não `hidden`: sem JavaScript as setas não
	 * aparecem, e a régua precisa continuar rolável no dedo e na roda. Foto
	 * de produto que fica inalcançável é foto perdida.
	 */
	max-height: var(--pr-minis-altura, 336px);
	overflow-y: auto;
	scrollbar-width: none;
	scroll-behavior: smooth;
}

.pr-galeria__miniaturas::-webkit-scrollbar {
	width: 0;
	height: 0;
}

.pr-galeria__rolar {
	display: grid;
	place-items: center;
	width: 100%;
	height: 26px;
	padding: 0;
	border: 1px solid var(--pr-linha);
	border-radius: 8px;
	background: #FFFFFF;
	color: var(--pr-azul);
	cursor: pointer;
	transition: border-color .18s ease, color .18s ease, opacity .18s ease;
}

.pr-galeria__rolar svg {
	width: 16px;
	height: 16px;
}

.pr-galeria__rolar:hover:not(:disabled) {
	/* Borda no cobre da marca; a SETA no cobre de texto, que passa no
	   contraste. Ver o topo desta folha. */
	border-color: var(--pr-cobre);
	color: var(--pr-cobre-texto);
}

/* Desativada em vez de escondida: botão que some faz a régua pular de
   tamanho e o dedo errar o alvo seguinte. */
.pr-galeria__rolar:disabled {
	opacity: .3;
	cursor: default;
}

.pr-galeria__mini {
	padding: 4px;
	border: 1px solid var(--pr-linha);
	border-radius: 8px;
	background: #FFFFFF;
	cursor: pointer;
	transition: border-color .18s ease;
}

/*
 * A miniatura tem tamanho ANTES de a foto chegar.
 *
 * Sem isto o `<img>` mede zero até carregar, e a régua nasce com 70px em vez
 * de 286 — o JS conserta quando a foto chega, mas o primeiro quadro pisca.
 * `aspect-ratio` resolve no CSS, sem depender de script, e de quebra dá a
 * todas as miniaturas o mesmo quadro, mesmo quando a foto não é quadrada.
 */
.pr-galeria__mini img {
	width: 100%;
	aspect-ratio: 1;
	object-fit: contain;
}

.pr-galeria__mini.is-ativa {
	border-color: var(--pr-cobre-texto);
}

.pr-galeria__mini:focus {
	outline: none;
}

.pr-galeria__mini:focus-visible {
	outline: 2px solid var(--pr-cobre);
	outline-offset: 2px;
}

.pr-galeria__palco {
	position: relative;
	border-radius: var(--pr-raio);
	background: #FFFFFF;
	overflow: hidden;
}

/* As fotos ficam empilhadas no mesmo lugar; so a ativa aparece. Assim o
   palco nao muda de altura ao trocar de foto. */
.pr-galeria__foto {
	margin: 0;
	opacity: 0;
	visibility: hidden;
	transition: opacity .22s ease;
}

.pr-galeria__foto:not(:first-child) {
	position: absolute;
	inset: 0;
}

.pr-galeria__foto.is-ativa {
	opacity: 1;
	visibility: visible;
}

.pr-galeria__foto img {
	width: 100%;
	aspect-ratio: 1;
	object-fit: contain;
}

/* Setas no padrao do site: circulo branco, chevron azul, cobre no hover. */
.pr-galeria__seta {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid var(--pr-linha);
	border-radius: 50%;
	background: #FFFFFF;
	color: var(--pr-azul);
	box-shadow: 0 8px 20px rgba(16, 30, 44, .12);
	cursor: pointer;
	transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}

.pr-galeria__seta svg {
	width: 18px;
	height: 18px;
}

.pr-galeria__seta:hover {
	background: var(--pr-cobre);
	border-color: var(--pr-cobre-texto);
	color: #FFFFFF;
}

.pr-galeria__seta:focus {
	outline: none;
}

.pr-galeria__seta:focus-visible {
	outline: 2px solid var(--pr-cobre);
	outline-offset: 3px;
}

.pr-galeria__seta--prev { left: 12px; }
.pr-galeria__seta--next { right: 12px; }

/* --- ficha ---------------------------------------------------------------- */

.pr-ficha__marca {
	margin: 0 0 6px;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 1.4px;
	text-transform: uppercase;
	color: var(--pr-cobre-texto);
}

.pr-ficha__nome {
	margin: 0 0 16px;
	font-size: 40px;
	font-weight: 700;
	line-height: 1.12;
	color: var(--pr-azul);
}

.pr-ficha__resumo {
	margin: 0 0 22px;
	max-width: 46ch;
	font-size: 16px;
	line-height: 1.62;
	color: var(--pr-cinza);
}

.pr-destaque {
	display: flex;
	gap: 14px;
	align-items: flex-start;
	margin: 0 0 24px;
	padding: 16px 20px;
	border-left: 3px solid var(--pr-cobre);
	border-radius: 0 10px 10px 0;
	background: #FBF3E9;
	font-size: 15px;
	line-height: 1.58;
	color: #4A3A2C;
}

.pr-destaque__icone {
	flex: none;
	color: var(--pr-cobre-texto);
}

.pr-destaque__icone svg {
	width: 26px;
	height: 26px;
}

.pr-acoes {
	display: grid;
	gap: 12px;
}

/* =============================================================================
 * FAIXA DE NUMEROS
 * ========================================================================== */

.pr-numeros {
	padding: 0 0 44px;
	background: var(--pr-creme);
}

.pr-numeros__lista {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 18px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.pr-numero {
	display: flex;
	gap: 14px;
	align-items: center;
	padding: 20px 22px;
	border-radius: var(--pr-raio);
	background: var(--pr-azul);
	color: #FFFFFF;
}

.pr-numero__icone {
	flex: none;
	color: var(--pr-cobre-texto);
}

.pr-numero__icone svg {
	width: 26px;
	height: 26px;
}

.pr-numero__texto strong {
	display: block;
	font-size: 22px;
	font-weight: 700;
	line-height: 1.2;
}

.pr-numero__texto small {
	display: block;
	margin-top: 2px;
	font-size: 13px;
	color: rgba(255, 255, 255, .68);
}

/* =============================================================================
 * BLOCOS DE TEXTO E IMAGEM
 * ========================================================================== */

.pr-bloco {
	padding: 62px 0;
	background: #FFFFFF;
}

.pr-bloco--areia {
	background: var(--pr-areia);
}

.pr-bloco__grade {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 48px;
	align-items: center;
}

/* A ordem visual muda; a ordem no HTML fica sempre texto e depois imagem,
   para quem le com leitor de tela receber o texto primeiro. */
.pr-bloco--imagem-esquerda .pr-bloco__texto { order: 2; }
.pr-bloco--imagem-esquerda .pr-bloco__arte  { order: 1; }

.pr-bloco__texto h2 {
	margin: 0 0 16px;
	font-size: 32px;
	font-weight: 700;
	line-height: 1.2;
	color: var(--pr-azul);
}

.pr-bloco__texto p {
	margin: 0 0 14px;
	font-size: 16px;
	line-height: 1.68;
	color: var(--pr-cinza);
}

.pr-bloco__texto p b {
	color: #17202B;
}

.pr-bloco__arte {
	position: relative;
	margin: 0;
	border-radius: var(--pr-raio);
	overflow: hidden;
}

.pr-bloco__arte img {
	width: 100%;
	aspect-ratio: 16 / 11;
	object-fit: cover;
}

/* Frase manuscrita sobre a foto, como na referencia. O degrade garante
   contraste sem escurecer a imagem inteira. */
.pr-manuscrito {
	position: absolute;
	inset: auto 0 0 0;
	margin: 0;
	padding: 48px 26px 22px;
	background: linear-gradient(to top, rgba(10, 18, 28, .72), transparent);
	font-family: var(--pr-mao);
	font-size: 26px;
	line-height: 1.24;
	color: #FFFFFF;
}

.pr-legenda {
	position: absolute;
	inset: auto 0 0 0;
	margin: 0;
	padding: 20px 26px;
	background: rgba(21, 37, 56, .92);
	font-size: 16px;
	font-weight: 600;
	line-height: 1.34;
	color: #FFFFFF;
}

/* --- cartoes de recurso --------------------------------------------------- */

.pr-recursos {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
	margin: 30px 0 0;
	padding: 0;
	list-style: none;
}

.pr-recurso {
	display: flex;
	gap: 14px;
	align-items: flex-start;
	padding: 20px 22px;
	border: 1px solid var(--pr-linha);
	border-radius: var(--pr-raio);
	background: #FFFFFF;
}

.pr-recurso__icone {
	flex: none;
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: 10px;
	background: #FBF3E9;
	color: var(--pr-cobre-texto);
}

.pr-recurso__icone svg {
	width: 21px;
	height: 21px;
}

.pr-recurso h3 {
	margin: 0 0 5px;
	font-size: 16px;
	font-weight: 700;
	color: var(--pr-azul);
}

.pr-recurso p {
	margin: 0;
	font-size: 14px;
	line-height: 1.56;
	color: var(--pr-cinza);
}

/* =============================================================================
 * VANTAGENS DO CONTROLADOR
 * ========================================================================== */

.pr-vantagens {
	padding: 62px 0 70px;
	background: #FFFFFF;
}

.pr-vantagens__titulo {
	margin: 0 0 34px;
	font-size: 32px;
	font-weight: 700;
	text-align: center;
	color: var(--pr-azul);
}

.pr-vantagens__grade {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
	align-items: start;
}

.pr-grupo {
	padding: 24px 26px;
	border: 1px solid var(--pr-linha);
	border-radius: var(--pr-raio);
	background: #FFFFFF;
}

.pr-grupo header {
	display: flex;
	gap: 12px;
	align-items: center;
	margin-bottom: 16px;
}

.pr-grupo__icone {
	flex: none;
	color: var(--pr-cobre-texto);
}

.pr-grupo__icone svg {
	width: 24px;
	height: 24px;
}

.pr-grupo h3 {
	margin: 0;
	font-size: 17px;
	font-weight: 700;
	color: var(--pr-azul);
}

.pr-grupo__lista {
	display: grid;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: none;
}

.pr-grupo__lista li {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	font-size: 14px;
	line-height: 1.56;
	color: var(--pr-cinza);
}

.pr-grupo__num {
	flex: none;
	display: grid;
	place-items: center;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: var(--pr-cobre);
	font-size: 12px;
	font-weight: 700;
	color: #FFFFFF;
}

/* =============================================================================
 * CHAMADA FINAL
 * ========================================================================== */

.pr-chamada {
	position: relative;
	padding: 66px 0;
	background: var(--pr-azul-escuro);
	color: #FFFFFF;
	overflow: hidden;
}

.pr-chamada__fundo {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: .34;
}

/* O wrap sobe acima do fundo e ganha a grade de duas colunas. */
.pr-chamada .pr-wrap {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 30px;
	align-items: end;
}

/*
 * Olho e linha de apoio da chamada.
 *
 * A COR mora na regra da faixa escura, logo abaixo, e não aqui. Estas duas
 * classes nasceram dentro de `.pr-chamada` — que é escura — e ganharam branco
 * como se fosse propriedade delas. Quando o bloco "Fale com um especialista"
 * reusou os mesmos nomes sobre o fundo claro da ficha, o texto saiu branco
 * sobre bege: contraste de 1,11 onde o mínimo legível é 4,5. Medido no
 * navegador, e reportado por quem não conseguiu ler.
 *
 * O padrão agora é o texto escuro, que serve em qualquer fundo claro; o
 * branco é exceção de quem está dentro da faixa.
 */
.pr-chamada__olho {
	margin: 0 0 12px;
	max-width: 30ch;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 1.6px;
	text-transform: uppercase;
	color: var(--pr-cobre-texto, #A65628);
}

.pr-chamada h2 {
	margin: 0 0 14px;
	font-size: 38px;
	font-weight: 700;
	line-height: 1.14;
}

.pr-chamada__lead {
	margin: 0 0 26px;
	max-width: 52ch;
	font-size: 16px;
	line-height: 1.64;
	color: var(--pr-cinza, #5A6472);
}

/* Dentro da faixa escura, e só lá, os dois viram claros. */
.pr-chamada .pr-chamada__olho {
	color: rgba(255, 255, 255, .72);
}

.pr-chamada .pr-chamada__lead {
	color: rgba(255, 255, 255, .84);
}

.pr-manuscrito--claro {
	position: static;
	padding: 0;
	max-width: 12ch;
	background: none;
	text-align: right;
	color: rgba(255, 255, 255, .9);
}

/* =============================================================================
 * RESPONSIVO
 * ========================================================================== */

@media (max-width: 1024px) {
	.pr-ficha__nome      { font-size: 34px; }
	.pr-bloco__texto h2,
	.pr-vantagens__titulo { font-size: 27px; }
	.pr-chamada h2       { font-size: 31px; }

	.pr-numeros__lista { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
	.pr-wrap { width: min(100% - 32px, var(--pr-wrap)); }

	.pr-topo__grade,
	.pr-bloco__grade {
		grid-template-columns: 1fr;
		gap: 30px;
	}

	/* No empilhado a imagem vem sempre depois do texto. */
	.pr-bloco--imagem-esquerda .pr-bloco__texto,
	.pr-bloco--imagem-esquerda .pr-bloco__arte { order: initial; }

	.pr-vantagens__grade,
	.pr-recursos { grid-template-columns: 1fr; }

	.pr-chamada .pr-wrap { grid-template-columns: 1fr; }

	.pr-manuscrito--claro {
		max-width: none;
		text-align: left;
	}
}

@media (max-width: 620px) {
	.pr-ficha__nome { font-size: 28px; }

	.pr-numeros__lista { grid-template-columns: 1fr; }

	/*
	 * Miniaturas passam para baixo do palco, em linha.
	 *
	 * `minmax(0, 1fr)` e não `1fr`: uma trilha `1fr` tem mínimo automático de
	 * `min-content`, então ela não encolhe abaixo do filho mais largo. Com 12
	 * miniaturas a régua mede 782px — e era isso que esticava a página
	 * inteira para 810 no celular, com a foto do produto saindo pela direita.
	 * A regra de desktop, logo acima, já usava `minmax`; a de celular tinha
	 * perdido.
	 */
	.pr-galeria {
		grid-template-columns: minmax(0, 1fr);
	}

	/*
	 * E a régua rola na horizontal em vez de empurrar o layout. Doze fotos
	 * quebradas em três linhas empurrariam o preço para fora da primeira
	 * tela; rolar de lado é o gesto que a pessoa já faz em galeria.
	 */
	.pr-galeria__miniaturas {
		order: 2;
		flex-direction: row;
		justify-content: flex-start;
		max-width: 100%;
		overflow-x: auto;
		scrollbar-width: thin;
		-webkit-overflow-scrolling: touch;
	}

	.pr-galeria__mini {
		flex: none;
		width: 56px;
	}

	/*
	 * No celular a régua é horizontal e rola no dedo — as setas viram
	 * enfeite, e ocupariam duas faixas da altura útil.
	 */
	.pr-galeria__coluna {
		display: contents;
	}

	.pr-galeria__rolar {
		display: none;
	}

	.pr-galeria__miniaturas {
		max-height: none;
		overflow-y: visible;
	}

	.pr-galeria__seta { display: none; }

	.pr-acoes .pr-btn { width: 100%; }

	.pr-manuscrito { font-size: 22px; }
}

/* =============================================================================
 * CATALOGO
 *
 * O modelo de teste desenhava UM produto, com texto escrito a mao. Estas
 * pecas sao as que faltavam para o catalogo inteiro sair do banco: a descricao
 * que vem do WooCommerce em HTML, a lista de versoes, a grade de cartoes, a
 * barra de ordenacao e a paginacao.
 *
 * Mesmos tokens, mesmo raio de 14px, mesma familia. Nada de variavel nova.
 * ========================================================================== */

/* --- o reset que faltava -------------------------------------------------- */

/*
 * `border-box` dentro do escopo da ficha.
 *
 * O CSS portado foi escrito para um tema que declara isso globalmente; aqui o
 * reset global vive em base.css, que SO o painel carrega — a moldura publica
 * nao carrega base.css, e home.css escopa o reset em `.ez-home *`.
 *
 * Achado com o inspetor: a foto do cartao media 206.9px dentro de uma moldura
 * de 172.7px, porque `height: 100%` somava os 10px de padding de cada lado e o
 * `overflow: hidden` cortava a diferenca. Em `content-box`, toda regra que
 * junta largura e padding sai errada.
 *
 * O mesmo vale para `.sb-sobre`, `.ct-contato` e o blog, que tambem nao tem
 * reset — esta anotado em FEATURE-PARITY.md como divida, porque mexer no box
 * model de tres telas ja conferidas pede conferir as tres de novo.
 */
.ez-produto *,
.ez-produto *::before,
.ez-produto *::after {
	box-sizing: border-box;
}

/* --- descricao vinda do WooCommerce -------------------------------------- */

.pr-descricao {
	padding: 62px 0 10px;
}

.pr-descricao__corpo {
	max-width: 760px;
	font-size: 16px;
	line-height: 1.72;
	color: #3C4653;
}

.pr-descricao__corpo > *:first-child {
	margin-top: 0;
}

.pr-descricao__corpo h2,
.pr-descricao__corpo h3,
.pr-descricao__corpo h4 {
	margin: 34px 0 12px;
	font-weight: 700;
	color: var(--pr-azul);
	line-height: 1.24;
}

.pr-descricao__corpo h2 { font-size: 25px; }
.pr-descricao__corpo h3 { font-size: 20px; }
.pr-descricao__corpo h4 { font-size: 17px; }

.pr-descricao__corpo p {
	margin: 0 0 16px;
}

.pr-descricao__corpo ul,
.pr-descricao__corpo ol {
	margin: 0 0 18px;
	padding-left: 22px;
}

.pr-descricao__corpo li {
	margin-bottom: 8px;
}

.pr-descricao__corpo a {
	color: var(--pr-cobre-texto);
	text-underline-offset: 3px;
}

.pr-descricao__corpo img {
	border-radius: var(--pr-raio);
	margin: 12px 0;
}

/* Tabela de especificacao do WooCommerce: cabe na largura do celular. */
.pr-descricao__corpo table {
	width: 100%;
	margin: 0 0 20px;
	border-collapse: collapse;
	font-size: 14px;
}

.pr-descricao__corpo th,
.pr-descricao__corpo td {
	padding: 10px 12px;
	border: 1px solid var(--pr-linha);
	text-align: left;
	vertical-align: top;
}

.pr-descricao__corpo th {
	background: var(--pr-areia);
	color: var(--pr-azul);
	font-weight: 700;
}

/* --- versoes (variacoes) -------------------------------------------------- */

.pr-versoes {
	margin: 26px 0 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.pr-versao {
	display: inline-flex;
	align-items: baseline;
	gap: 8px;
	padding: 9px 15px;
	border: 1px solid var(--pr-linha);
	border-radius: 999px;
	background: #FFFFFF;
	font-size: 14px;
	color: var(--pr-azul);
}

.pr-versao small {
	font-size: 12px;
	color: var(--pr-cinza);
}

/* --- marcadores (tags) ---------------------------------------------------- */

.pr-marcadores {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 22px 0 0;
	padding: 0;
	list-style: none;
}

.pr-marcador {
	display: inline-block;
	padding: 6px 13px;
	border-radius: 999px;
	background: var(--pr-areia);
	color: var(--pr-cinza);
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: .2px;
	text-decoration: none;
}

.pr-marcador:hover {
	background: #FBF3E9;
	color: var(--pr-cobre-texto);
}

/* --- disponibilidade ------------------------------------------------------ */

.pr-estoque {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 18px;
	font-size: 13.5px;
	font-weight: 600;
	color: #2F7D4F;
}

.pr-estoque::before {
	content: '';
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: currentColor;
}

.pr-estoque--fora  { color: var(--pr-cinza); }
.pr-estoque--breve { color: var(--pr-cobre-texto); }

/* --- topo das listagens --------------------------------------------------- */

.pr-hero {
	padding: 54px 0 0;
}

.pr-hero__titulo {
	margin: 0;
	font-size: clamp(30px, 4.4vw, 46px);
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -.5px;
	color: var(--pr-azul);
}

.pr-hero__texto {
	max-width: 620px;
	margin: 14px 0 0;
	font-size: 16.5px;
	line-height: 1.66;
	color: var(--pr-cinza);
}

/* --- atalhos de categoria ------------------------------------------------- */

.pr-atalhos {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 26px 0 0;
	padding: 0;
	list-style: none;
}

.pr-atalho {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 17px;
	border: 1px solid var(--pr-linha);
	border-radius: 999px;
	background: #FFFFFF;
	color: var(--pr-azul);
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
}

.pr-atalho:hover {
	border-color: rgba(202, 116, 65, .45);
	color: var(--pr-cobre-texto);
}

.pr-atalho span {
	font-size: 12px;
	font-weight: 700;
	color: var(--pr-cinza);
}

/* --- barra de ordenacao --------------------------------------------------- */

.pr-barra {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	margin: 34px 0 0;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--pr-linha);
}

.pr-barra__conta {
	margin: 0;
	font-size: 14px;
	color: var(--pr-cinza);
}

.pr-barra__ordem {
	display: flex;
	align-items: center;
	gap: 9px;
	font-size: 14px;
	color: var(--pr-cinza);
}

.pr-barra__ordem select {
	padding: 9px 13px;
	border: 1px solid var(--pr-linha);
	border-radius: 10px;
	background: #FFFFFF;
	font-family: inherit;
	font-size: 14px;
	color: var(--pr-azul);
}

/* --- grade de produtos ---------------------------------------------------- */

/*
 * `minmax(0, 1fr)`, e nao `1fr`.
 *
 * `1fr` e `minmax(auto, 1fr)`: a coluna nunca encolhe abaixo do min-content do
 * que esta dentro dela, e ai ela cresce e esmaga a vizinha. Medido no celular:
 * dois cartoes na mesma fileira sairam com 174.7px e 140.3px. O `0` deixa a
 * coluna encolher, e as duas ficam iguais.
 */
.pr-grade {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 20px;
	margin: 30px 0 0;
	padding: 0;
	list-style: none;
}

.pr-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	border: 1px solid var(--pr-linha);
	border-radius: var(--pr-raio);
	background: #FFFFFF;
	overflow: hidden;
	text-decoration: none;
	transition: border-color .18s ease, transform .18s ease;
}

.pr-card:hover {
	border-color: rgba(202, 116, 65, .45);
	transform: translateY(-2px);
}

/*
 * SO A FOTO. Sem moldura em volta.
 *
 * Antes havia 10 px de padding e fundo `--pr-areia` — uma moldura bege em
 * volta de fotos que, na maioria, JA vem com fundo branco proprio. O olho lia
 * duas molduras encaixadas e a foto parecia recortada e colada dentro do
 * cartao, em vez de ser o cartao.
 *
 * Fundo branco e nao transparente: os PNGs recortados do catalogo precisam de
 * algo atras, e o creme da pagina por tras de um recorte branco deixava um
 * halo na borda do produto.
 *
 * `contain` continua: cortar a foto para preencher o quadrado tiraria pedaco
 * de produto, e e exatamente a queixa que esta regra veio resolver.
 */
.pr-card__foto {
	margin: 0;
	aspect-ratio: 1 / 1;
	padding: 0;
	background: #FFFFFF;
	display: grid;
	place-items: center;
	overflow: hidden;
}

/*
 * A SEGUNDA FOTO, no passar do mouse.
 *
 * As duas ficam na MESMA celula da grade (`grid-area: 1 / 1`), empilhadas; o
 * que muda e a opacidade. A segunda ja veio no HTML, entao a troca e
 * instantanea — trocar o `src` no hover faria o cartao piscar em branco
 * enquanto a imagem nova baixa.
 *
 * So entra quando o produto TEM segunda foto: a classe `--dupla` vem do PHP.
 * Medido no catalogo: a maioria tem uma foto so, e um efeito que "funciona"
 * mostrando a mesma imagem parece defeito.
 */
.pr-card__foto--dupla > img {
	grid-area: 1 / 1;
	transition: opacity .3s ease;
}

.pr-card__foto2 {
	opacity: 0;
}

/*
 * `hover: hover` deixa o dedo de fora.
 *
 * No celular o toque conta como hover ate o proximo toque: sem esta condicao,
 * tocar no cartao trocaria a foto e a pessoa sairia da loja com a imagem
 * errada na cabeca — ou pior, acharia que tocou na coisa errada.
 */
@media (hover: hover) and (pointer: fine) {
	.pr-card:hover .pr-card__foto2,
	.pr-card:focus-visible .pr-card__foto2 {
		opacity: 1;
	}

	.pr-card:hover .pr-card__foto--dupla > img:not(.pr-card__foto2),
	.pr-card:focus-visible .pr-card__foto--dupla > img:not(.pr-card__foto2) {
		opacity: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.pr-card__foto--dupla > img {
		transition: none;
	}
}

/*
 * A foto preenche a moldura sem cortar e sem distorcer.
 *
 * `object-fit: contain` e quem garante isso; o que cortava a legenda impressa
 * na arte era o padding de 10px somando 20px a uma altura de 100% em
 * `content-box`. O padding passou para a moldura e o reset acima poe
 * `border-box`, entao os 100% agora cabem.
 *
 * `width/height: 100%` (e nao `max-*` com dimensao automatica) porque foto de
 * 265px de largura numa moldura de 172px deve ocupa-la — com dimensao
 * automatica ela sairia no tamanho intrinseco e a grade ficaria irregular.
 */
.pr-card__foto img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* Produto sem foto: a inicial da marca, e nao uma caixa cinza vazia. */
.pr-card__sem-foto {
	font-size: 30px;
	font-weight: 800;
	color: rgba(26, 43, 59, .22);
}

.pr-card__corpo {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 16px 18px 20px;
}

.pr-card__marca {
	margin: 0 0 7px;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 1.3px;
	text-transform: uppercase;
	color: var(--pr-cobre-texto);
}

.pr-card__nome {
	margin: 0;
	font-size: 15.5px;
	font-weight: 700;
	line-height: 1.34;
	color: var(--pr-azul);
}

.pr-card__resumo {
	margin: 9px 0 0;
	font-size: 13.5px;
	line-height: 1.55;
	color: var(--pr-cinza);
}

.pr-card__pe {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-top: auto;
	padding-top: 16px;
}

.pr-card__ver {
	font-size: 13.5px;
	font-weight: 700;
	color: var(--pr-cobre-texto);
}

.pr-card__fora {
	font-size: 12px;
	font-weight: 600;
	color: var(--pr-cinza);
}

.pr-vazio {
	margin: 40px 0 0;
	padding: 34px;
	border: 1px dashed var(--pr-linha);
	border-radius: var(--pr-raio);
	text-align: center;
	color: var(--pr-cinza);
}

/* --- paginacao ------------------------------------------------------------ */

.pr-paginacao {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin: 42px 0 0;
	padding: 0;
	list-style: none;
}

.pr-paginacao a,
.pr-paginacao span {
	display: grid;
	place-items: center;
	min-width: 40px;
	height: 40px;
	padding: 0 12px;
	border: 1px solid var(--pr-linha);
	border-radius: 10px;
	background: #FFFFFF;
	font-size: 14px;
	font-weight: 600;
	color: var(--pr-azul);
	text-decoration: none;
}

.pr-paginacao a:hover {
	border-color: rgba(202, 116, 65, .45);
	color: var(--pr-cobre-texto);
}

.pr-paginacao [aria-current='page'] {
	background: var(--pr-azul);
	border-color: var(--pr-azul);
	color: #FFFFFF;
}

.pr-paginacao .pr-paginacao__oco {
	border: 0;
	background: none;
	color: var(--pr-cinza);
}

/* --- relacionados --------------------------------------------------------- */

.pr-relacionados {
	padding: 64px 0 10px;
	background: var(--pr-creme);
}

.pr-relacionados__titulo {
	margin: 0 0 4px;
	font-size: clamp(24px, 3vw, 32px);
	font-weight: 800;
	color: var(--pr-azul);
}

/* --- respiro final -------------------------------------------------------- */

.pr-fim {
	padding-bottom: 72px;
}

/* =============================================================================
 * TELAS ESTREITAS
 * ========================================================================== */

@media (max-width: 1100px) {
	.pr-grade { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 820px) {
	.pr-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.pr-descricao { padding-top: 40px; }
	.pr-relacionados { padding-top: 44px; }
}

@media (max-width: 520px) {
	.pr-hero { padding-top: 36px; }

	.pr-barra {
		align-items: flex-start;
		flex-direction: column;
	}

	/* Dois cartoes continuam caber: um por linha viraria rolagem infinita
	   numa grade de 24. */
	.pr-grade { gap: 12px; }
	.pr-card__corpo { padding: 13px 14px 16px; }
	.pr-card__nome { font-size: 14.5px; }
	.pr-card__resumo { display: none; }
}

/* --- falar com um especialista -------------------------------------------- *
 *
 * Duas colunas: o convite à esquerda, o formulário à direita. O equipamento
 * aparece por escrito no convite — campo oculto que a pessoa não vê é campo
 * que ela não consentiu em mandar.
 */

.pr-especialista {
	background: var(--pr-creme);
	padding-block: clamp(34px, 4vw, 56px);
	scroll-margin-top: calc(var(--ez-cabecalho, 149px) + 16px);
}

.pr-especialista__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
	gap: clamp(24px, 3vw, 46px);
	align-items: start;
}

.pr-especialista__texto h2 {
	margin: 6px 0 0;
	font-size: clamp(24px, 2.4vw, 31px);
	font-weight: 600;
	color: var(--pr-azul);
}

.pr-especialista__sobre {
	margin-top: 16px;
	padding: 13px 16px;
	border-left: 3px solid var(--pr-cobre);
	background: #FFFFFF;
	font-size: 14.5px;
	line-height: 1.6;
	color: var(--pr-azul);
}

.pr-especialista__form {
	padding: clamp(20px, 2.4vw, 30px);
	border-radius: var(--pr-raio);
	background: #FFFFFF;
	box-shadow: 0 4px 22px rgba(26, 43, 59, .08);
}

@media (max-width: 860px) {
	.pr-especialista__inner {
		grid-template-columns: minmax(0, 1fr);
	}
}


/*
 * Tem preco, mas nao da para comprar.
 *
 * Acontece em 56 produtos publicados do catalogo migrado: o pai esta "em
 * estoque" e todas as variacoes ofertaveis estao fora. Antes a ficha mostrava
 * um <select> VAZIO e obrigatorio ao lado de "Adicionar ao carrinho" — um
 * botao que nao tinha como funcionar. Agora a caixa diz o que houve.
 */
.pr-compra__aviso {
	display: flex;
	gap: 8px;
	margin: 0;
	padding: 12px 14px;
	border-radius: 10px;
	background: #FDF3DC;
	font-size: 14px;
	line-height: 1.55;
	color: #6B4E00;
}

/* Chamada do diagnóstico, só na vitrine (/loja/). */
.pr-diag {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	grid-template-areas: "olho botao" "titulo botao" "texto botao";
	column-gap: 28px;
	align-items: center;
	margin: 30px 0 0;
	padding: 22px 26px;
	border-radius: var(--pr-raio);
	background: var(--pr-azul);
	color: #fff;
	text-decoration: none;
	transition: background-color .2s;
}

.pr-diag:hover { background: var(--pr-azul-escuro); }
.pr-diag:focus-visible { outline: 3px solid var(--pr-cobre); outline-offset: 3px; }

.pr-diag__olho {
	grid-area: olho;
	font: 600 12px/1.4 var(--pr-exo);
	letter-spacing: .08em;
	text-transform: uppercase;
	color: #F0B38C;
}

.pr-diag__titulo { grid-area: titulo; margin: 4px 0; font: 700 22px/1.25 var(--pr-exo); }
.pr-diag__texto { grid-area: texto; font-size: 15px; line-height: 1.5; color: rgba(255, 255, 255, .82); }

.pr-diag__botao {
	grid-area: botao;
	padding: 13px 22px;
	border-radius: 999px;
	background: var(--pr-cobre);
	color: #1A2B3B;
	font: 700 15px/1 var(--pr-exo);
	white-space: nowrap;
}

@media (max-width: 700px) {
	.pr-diag { grid-template-columns: minmax(0, 1fr); grid-template-areas: "olho" "titulo" "texto" "botao"; row-gap: 4px; padding: 20px; }
	.pr-diag__botao { justify-self: start; margin-top: 12px; }
}

/* ===================================================== banner da loja (bn-) ===
 * Carrossel do topo de /loja/. Sem JavaScript, só o primeiro slide aparece —
 * os outros ficam escondidos por CSS, e não empilhados.
 */
/*
 * De ponta a ponta, e alto o bastante para ser visto.
 *
 * A referência que o cliente mandou tem proporção de faixa (4:1) e, numa tela
 * de 1600px, vira uma tira de 400px de altura com o produto minúsculo. Aqui a
 * altura é uma faixa entre 300 e 460 pixels: grande o suficiente para a arte
 * respirar, sem empurrar a lista de produtos para fora da primeira tela.
 */
.bn {
	position: relative;
	width: 100%;
	margin: 0 0 30px;
	background: var(--pr-areia);
	overflow: hidden;
}

.bn-palco {
	display: grid;
}

/* Todos os slides na mesma célula da grade: trocar é só mudar a opacidade,
   sem o pulo de layout que `display: none` causaria. */
.bn-slide {
	grid-area: 1 / 1;
	position: relative;
	display: block;
	opacity: 0;
	visibility: hidden;
	transition: opacity .45s ease;
	text-decoration: none;
	color: inherit;
}

.bn-slide.is-atual {
	opacity: 1;
	visibility: visible;
}

.bn-slide img {
	display: block;
	width: 100%;
	height: clamp(300px, 31vw, 460px);
	object-fit: cover;
	object-position: center;
}

.bn-slide__texto {
	position: absolute;
	inset: auto auto 0 0;
	display: grid;
	justify-items: start;
	gap: 6px;
	/* O texto acompanha a caixa central da página: sem isso ele encosta na
	   borda da tela em monitor largo. */
	max-width: min(560px, 92%);
	padding: clamp(22px, 3vw, 40px) max(clamp(22px, 3vw, 40px), calc((100vw - var(--pr-wrap)) / 2 + 20px));
	color: #fff;
	/* O texto tem fundo próprio: foto clara com letra branca é aposta, e a
	   foto muda toda semana. */
	background: linear-gradient(90deg, rgba(16, 26, 38, .78), rgba(16, 26, 38, 0));
	width: 100%;
}

.bn-slide__texto strong {
	font: 700 clamp(20px, 2.6vw, 30px)/1.15 var(--pr-exo);
	text-shadow: 0 2px 10px rgba(0, 0, 0, .35);
}

.bn-slide__texto span {
	font-size: clamp(14px, 1.5vw, 16.5px);
	line-height: 1.45;
	color: rgba(255, 255, 255, .92);
}

.bn-slide__botao {
	margin-top: 6px;
	padding: 10px 20px;
	border-radius: 999px;
	background: var(--pr-cobre);
	color: #1A2B3B !important;
	font-weight: 700;
	font-size: 14.5px;
}

.bn-seta {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .88);
	color: var(--pr-azul);
	cursor: pointer;
	transition: background-color .15s;
}

.bn-seta:hover { background: #fff; }
.bn-seta--antes { left: 14px; }
.bn-seta--depois { right: 14px; }

.bn-bolinhas {
	position: absolute;
	right: 16px;
	bottom: 14px;
	display: flex;
	gap: 8px;
}

.bn-bolinha {
	width: 10px;
	height: 10px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .55);
	cursor: pointer;
	transition: background-color .15s, width .15s;
}

.bn-bolinha.is-atual {
	width: 26px;
	border-radius: 999px;
	background: #fff;
}

@media (max-width: 720px) {
	/* No celular a arte deitada perde o assunto: mais alta, e o corte acontece
	   nas laterais em vez de decepar o produto. */
	.bn-slide img { height: clamp(320px, 86vw, 480px); }
	.bn-slide__texto { padding: 22px 20px; }
	.bn-seta { display: none; }
	.bn-slide__texto { max-width: 100%; background: linear-gradient(0deg, rgba(16, 26, 38, .85), rgba(16, 26, 38, 0)); }
	.bn-bolinhas { right: 50%; transform: translateX(50%); }
}