/*
 * Página de produto — ajustes de marca sobre o template nativo do WooCommerce/Kadence.
 *
 * A página deixou de ser um layout montado no Elementor e passou a ser o template nativo, que já
 * entrega o essencial (galeria, variações, adicionar ao carrinho, abas com dados reais). Aqui só
 * alinhamos tipografia e cor à marca.
 *
 * O que NÃO voltou de propósito, por decisão do cliente: o bloco fixo "Altura: 89 cm | Largura:
 * 95 cm | Profundidade: 78 cm" e a nota "Avaliações do produto: 4.8 / 5". Os dois eram texto
 * estático no template do Elementor, idênticos em todos os produtos — medidas erradas para
 * qualquer item que não fosse aquele, e uma nota inventada (o WooCommerce reporta 0 avaliações).
 * As medidas reais agora vêm da aba "Informação adicional" e a nota, das avaliações de verdade.
 */

.single-product {
	--ip-verde: #223829;
	--ip-verde-mid: #3A7D4E;
	--ip-terracota: #904B2C;
	--ip-terracota-mid: #B35A32;
	--ip-salvia: #BFBB9B;
	--ip-creme: #EAE4D3;
	--ip-offwhite: #F2EEE4;

	--ip-display: var(--inloft-font-display, "Poppins", "Helvetica Neue", Arial, sans-serif);
	--ip-body: var(--inloft-font-body, "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
}

/*
 * Cor declarada no próprio elemento, não herdada: o Kadence define cor nos h1–h6 (#1A202C, um
 * azul-marinho) e uma declaração no elemento vence a herança, independente de especificidade.
 * É a mesma armadilha que já apareceu quatro vezes nesta migração — ver README.
 */
.single-product .product_title,
.single-product .woocommerce-tabs .panel > h2,
.single-product .related > h2,
.single-product .up-sells > h2 {
	font-family: var(--ip-display);
	font-weight: 400;
	color: var(--ip-verde);
}

/* Briefing: nome do produto menor e em SF Pro Regular (slides 11 e 15). */
.single-product .product_title {
	font-family: var(--ip-body);
	font-size: clamp(1.3rem, 2.4vw, 1.75rem);
	line-height: 1.2;
	margin-bottom: 12px;
}

/* ── Preço ────────────────────────────────────────────────────────────────── */

/* Briefing: preço em Poppins Regular, um pouco menor. */
.single-product div.product .price,
.single-product div.product .price ins {
	font-family: var(--ip-display);
	font-size: 1.125rem;
	font-weight: 400;
	color: var(--ip-verde);
	text-decoration: none;
}

.single-product div.product .price del {
	color: rgba(34, 56, 41, .72);
	font-weight: 400;
}

/* ── Variações ────────────────────────────────────────────────────────────── */

/* Briefing: o resto da página em SF Pro — Medium nos destaques, espaçamento normal. */
.single-product .variations th,
.single-product .variations label {
	font-family: var(--ip-body);
	font-weight: 500;
	font-size: .875rem;
	letter-spacing: 0;
	color: var(--ip-verde);
}

/* Briefing: filtros de produto quadrados, fundo branco, contorno laranja, maiores. */
.single-product .variations select {
	font-family: var(--ip-body);
	border: 1px solid var(--ip-terracota);
	border-radius: 0;
	padding: 14px 44px 14px 16px;
	/* `min()`: no celular a coluna do select é mais estreita que 240px, e um mínimo fixo criaria
	   rolagem lateral. */
	min-width: min(240px, 100%);
	background-color: #fff;
	color: var(--ip-verde);
}

.single-product .variations select:focus-visible {
	outline: 2px solid var(--ip-terracota);
	outline-offset: 2px;
}

.single-product .reset_variations {
	font-size: .8125rem;
	color: var(--ip-terracota);
}

/* ── Adicionar ao carrinho ────────────────────────────────────────────────── */

/* Botão padrão: SF Pro Regular em caixa alta a .15em, hover laranja. */
.single-product .single_add_to_cart_button {
	font-family: var(--inloft-btn-font, var(--ip-body));
	font-weight: var(--inloft-btn-weight, 400);
	letter-spacing: var(--inloft-btn-tracking, .15em);
	text-transform: uppercase;
	border-radius: 0;
	padding: 14px 30px;
	background-color: var(--ip-verde);
	color: var(--ip-creme);
	border: 0;
	transition: background-color .18s ease;
}

.single-product .single_add_to_cart_button:hover:not(:disabled),
.single-product .single_add_to_cart_button:focus:not(:disabled) {
	background-color: var(--inloft-btn-hover-bg, var(--ip-terracota));
	color: var(--ip-creme);
}

.single-product .single_add_to_cart_button:disabled,
.single-product .single_add_to_cart_button.disabled {
	background-color: var(--ip-salvia);
	color: #fff;
	cursor: not-allowed;
}

.single-product .quantity input.qty {
	border: 1px solid var(--ip-salvia);
	border-radius: 0;
	padding: 12px 8px;
	font-family: var(--ip-body);
	color: var(--ip-verde);
}

/* ── Abas ─────────────────────────────────────────────────────────────────── */

.single-product .woocommerce-tabs ul.tabs li a {
	font-family: var(--ip-body);
	font-weight: 500;
	font-size: .875rem;
	letter-spacing: 0;
	color: rgba(34, 56, 41, .72);
}

.single-product .woocommerce-tabs ul.tabs li.active a,
.single-product .woocommerce-tabs ul.tabs li a:hover {
	color: var(--ip-terracota);
}

/*
 * Até 719px o Kadence põe `opacity: .7` na aba inativa: 3,3:1 sobre o fundo dela, reprovado em
 * contraste no PageSpeed de 09/10/2026. Sem a opacidade ela fica igual à aba inativa do desktop
 * (6,5:1), e a ativa continua marcada pelo fundo branco. O seletor longo é para vencer o do
 * Kadence (`.woocommerce div.product .woocommerce-tabs ul.tabs li a`) — que também vence as cores
 * da regra acima.
 */
.woocommerce.single-product div.product .woocommerce-tabs ul.tabs li a {
	opacity: 1;
}

/* Tabela de atributos: é onde as medidas REAIS de cada produto aparecem. */
.single-product .woocommerce-product-attributes th {
	font-family: var(--ip-body);
	font-weight: 500;
	color: var(--ip-verde);
}

.single-product .woocommerce-product-attributes td {
	font-family: var(--ip-body);
	color: rgba(34, 56, 41, .82);
}

/* ── Meta (SKU, categoria) ────────────────────────────────────────────────── */

.single-product .product_meta {
	font-size: .8125rem;
	color: rgba(34, 56, 41, .72);
	border-top: 1px solid rgba(191, 187, 155, .45);
	padding-top: 14px;
	margin-top: 18px;
}

.single-product .product_meta a {
	color: var(--ip-terracota);
}

/*
 * O Kadence pinta cada linha do meta ("SKU", "Categoria") com --global-palette6 (#718096) em 70%
 * do tamanho: 4,0:1 no branco, reprovado no PageSpeed de 09/10/2026. `inherit` devolve a cor que o
 * .product_meta declara acima (5,2:1). O link continua herdando, como já saía.
 */
.woocommerce.single-product div.product .product_meta > span {
	color: inherit;
}

/* ── Galeria sem foto ─────────────────────────────────────────────────────── */

/*
 * A galeria do WooCommerce nasce com `style="opacity: 0"` e só aparece quando o JavaScript dela
 * roda — proteção contra o salto do slider, que num produto sem foto não existe (é só a imagem de
 * espera). Era o LCP da página esperando o JS (406 dos 445 produtos em 09/10/2026). `!important`
 * porque o 0 é inline. Com foto, a proteção fica como o WooCommerce faz.
 */
.single-product div.product .woocommerce-product-gallery--without-images {
	opacity: 1 !important;
}

/* ── Relacionados ─────────────────────────────────────────────────────────── */

.single-product .related > h2,
.single-product .up-sells > h2 {
	font-size: clamp(1.05rem, 2.2vw, 1.4rem);
	text-transform: uppercase;
	letter-spacing: .12em;
	margin-bottom: 22px;
}

/*
 * Os relacionados usam o card da vitrine (ver inc/produtos-relacionados.php). Só duas coisas
 * precisam de ajuste local — todo o resto do card, inclusive as 2 colunas abaixo de 900px e de
 * 480px, vem pronto do CSS do `plugin-catalogo`.
 */

/*
 * Quatro colunas aqui, contra três na vitrine: a página de produto não tem barra lateral, então a
 * faixa é ~200px mais larga. É o mecanismo próprio da grade (`repeat( var(--stella-columns, 3),
 * minmax(0, 1fr) )`), e não um `grid-template-columns` à parte — assim os breakpoints do catálogo
 * continuam vencendo por cima e o celular segue com 2 colunas.
 */
.single-product .related .stella-catalog__grid {
	--stella-columns: 4;
}

/*
 * Briefing (slide 15, "Sugestão de produto"): o botão de carrinho do card sai de cima da foto e
 * vira uma faixa verde "COMPRE TAMBÉM" logo abaixo dela, sempre visível. Só aqui — na listagem o
 * card segue com o ícone sobre a foto. O botão é o do próprio card, então o comportamento não
 * muda: produto simples à venda vai para o carrinho, o resto abre a página do produto. O texto
 * vem do CSS, e o nome acessível continua o aria-label do plugin ("Adicionar X ao carrinho").
 */
.single-product .related .stella-catalog__card-img-cta {
	position: static;
	display: flex;
	width: 100%;
	height: auto;
	margin-top: 8px;
	padding: 10px 12px;
	background: var(--ip-verde);
	color: var(--ip-creme);
	border-radius: 0;
	opacity: 1;
	transform: none;
	font-family: var(--inloft-btn-font, var(--ip-body));
	font-weight: var(--inloft-btn-weight, 400);
	font-size: .75rem;
	text-transform: uppercase;
	letter-spacing: var(--inloft-btn-tracking, .15em);
	transition: background-color .18s ease;
}

.single-product .related .stella-catalog__card-img-cta svg {
	display: none;
}

.single-product .related .stella-catalog__card-img-cta::after {
	content: "Compre tamb\00E9m";
}

.single-product .related .stella-catalog__card-img-cta:hover,
.single-product .related .stella-catalog__card-img-cta:focus-visible {
	background: var(--inloft-btn-hover-bg, var(--ip-terracota));
	color: var(--ip-creme);
}

/* ── Foco visível ─────────────────────────────────────────────────────────── */

.single-product a:focus-visible,
.single-product button:focus-visible {
	outline: 2px solid var(--ip-terracota);
	outline-offset: 3px;
	border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
	.single-product .single_add_to_cart_button {
		transition: none;
	}
}