/**
 * Coisas de Casa — página de produto (single-product.html).
 *
 * Redesign 2026-08-28 (spec docs/superpowers/specs/2026-08-28-single-product-redesign-design.md):
 * a loja opera em modo catálogo, então a página deixou de ser "vitrine de
 * e-commerce" (galeria + coluna de compra + abas) e virou ficha de catálogo,
 * no formato do concorrente Kodilar adaptado à nossa realidade.
 *
 * A adaptação central está no hero: a Kodilar flutua a embalagem recortada em
 * PNG transparente sobre uma faixa de cor. Nossas fotos são quadradas com
 * fundo branco, então quem flutua é um CARD BRANCO com a foto dentro — como
 * os dois são brancos, não há emenda visível e o efeito de profundidade se
 * mantém sem depender de recorte. Bônus: foto ruim fica contida pelo card em
 * vez de denunciar o defeito.
 *
 * A cor da faixa/título/botões vem da classe de linha no <body>
 * (coisasdecasa-linha-casa / -campo, ver coisasdecasa_product_linha_body_class).
 */

.wc-block-breadcrumbs .woocommerce-breadcrumb a {
	color: var(--wp--preset--color--cinza-texto, #6B655C);
	text-decoration: none;
}

.wc-block-breadcrumbs .woocommerce-breadcrumb a:hover {
	color: var(--wp--preset--color--vermelho-marca, #C81E2C);
}

/* ------------------------------------------------------------------ HERO */

/**
 * A faixa é o próprio ::before, e o card sobe sobre ela com margin-top
 * negativa. Fazer a faixa como pseudo-elemento (em vez de um bloco de fundo)
 * evita um wrapper a mais no template e mantém o hero editável no editor.
 */
.coisasdecasa-product__hero {
	position: relative;
	margin-bottom: var(--wp--preset--spacing--40, 1.5rem);
	padding-bottom: 0;
}

.coisasdecasa-product__hero::before {
	content: "";
	display: block;
	height: 190px;
	background: var(--wp--preset--color--amarelo-marca, #F5C518);
}

.coisasdecasa-linha-campo .coisasdecasa-product__hero::before {
	background: var(--wp--preset--color--verde-campo, #3F6B3D);
}

/* O card branco: a imagem do produto vira o card, centrada e puxada para
   cima de modo a cavalgar a faixa e vazar para baixo dela. */
.coisasdecasa-product__hero .coisasdecasa-product__hero-image {
	position: relative;
	width: 290px;
	max-width: 72vw;
	margin: -150px auto 0;
	background: #fff;
	border-radius: 18px;
	box-shadow: 0 16px 40px rgba(34, 37, 42, 0.18);
	overflow: hidden;
}

.coisasdecasa-product__hero .coisasdecasa-product__hero-image img {
	display: block;
	width: 100%;
	aspect-ratio: 1;
	object-fit: contain;
	background: #fff;
}

/* ------------------------------------------------------- TÍTULO E AÇÕES */

/**
 * A foto do hero é centrada, então o bloco de informações acompanha: coluna
 * de medida de leitura, centrada na página. Os elementos curtos (selo, título,
 * meta, ações) ficam centrados; o texto corrido continua alinhado à esquerda,
 * mesmo padrão das seções de baixo (Ingredientes, Receitas).
 */
/* .wp-block-group junto: o layout "constrained" do WP impõe max-width aos
   filhos com especificidade 0,2,0 — uma classe sozinha perde essa disputa. */
.wp-block-group.coisasdecasa-product__head {
	max-width: 46rem;
	margin-inline: auto;
	margin-top: var(--wp--preset--spacing--40, 1.5rem);
	text-align: center;
}

.coisasdecasa-product__head .coisasdecasa-product__meta-row,
.coisasdecasa-product__head .coisasdecasa-product-actions {
	justify-content: center;
}

.coisasdecasa-product__title {
	margin: 0 0 0.35rem;
	color: var(--wp--preset--color--vermelho-casa, #C81E2C);
}

.coisasdecasa-linha-campo .coisasdecasa-product__title {
	color: var(--wp--preset--color--verde-campo, #3F6B3D);
}

/* H1 padrão do tema é 3rem (xx-large); 30% menor só no desktop. */
@media (min-width: 783px) {
	.coisasdecasa-product__title {
		font-size: 2.1rem;
	}
}

.coisasdecasa-product__linha-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	margin: 0 0 0.6rem;
	padding: 0.3rem 0.8rem 0.3rem 0.6rem;
	border-radius: 999px;
	background: var(--wp--preset--color--fundo-casa, #FBF3E4);
	font-size: 0.8125rem;
	font-weight: 600;
}

.coisasdecasa-product__linha-badge--campo {
	background: var(--wp--preset--color--fundo-campo, #F1EDE3);
}

.coisasdecasa-product__linha-badge--casa .coisasdecasa-product__linha-badge-label {
	color: var(--wp--preset--color--vermelho-casa, #C81E2C);
}

.coisasdecasa-product__linha-badge--campo .coisasdecasa-product__linha-badge-label {
	color: var(--wp--preset--color--verde-campo, #3F6B3D);
}

.coisasdecasa-product__category {
	margin: 0;
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--wp--preset--color--cinza-texto, #6B655C);
}

.coisasdecasa-product__meta-row {
	align-items: center;
	gap: 1rem !important;
	font-size: 0.875rem;
	color: var(--wp--preset--color--cinza-texto, #6B655C);
}

/* SKU vem com classes clássicas do WooCommerce (product_meta) — zera a
   margem que essas classes trazem, pra ficar inline igual ao resto da linha. */
.coisasdecasa-product__meta-row .coisasdecasa-product__sku {
	margin: 0;
	font-size: inherit;
	color: inherit;
}

.coisasdecasa-product__meta-row .coisasdecasa-product__sku .sku {
	font-weight: 500;
	color: var(--wp--preset--color--grafite, #22252A);
}

.coisasdecasa-product__meta-row .coisasdecasa-product__tags a {
	color: inherit;
}

.coisasdecasa-product-actions {
	display: flex;
	align-items: center;
	gap: 1.5rem;
	margin-top: 1.25rem;
	flex-wrap: wrap;
}

/* O botão de favoritar aqui não é mais um ícone flutuante sobre imagem — some
   o position:absolute herdado do contexto de card e volta ao fluxo normal. */
.coisasdecasa-product-actions .coisasdecasa-product-card__wishlist {
	position: static;
	width: auto;
	height: auto;
	background: none;
	gap: 0.4rem;
}

.coisasdecasa-product-actions__share-row {
	display: flex;
	gap: 0.75rem;
}

.coisasdecasa-product-actions__share {
	font-size: 0.8125rem;
	text-transform: capitalize;
	color: var(--wp--preset--color--cinza-texto, #6B655C);
	text-decoration: none;
	border-bottom: 1px solid transparent;
}

.coisasdecasa-product-actions__share:hover {
	color: var(--wp--preset--color--vermelho-marca, #C81E2C);
	border-bottom-color: currentColor;
}

/* -------------------------------------------- DESCRIÇÃO + FICHA TÉCNICA */

/**
 * Empilhado: descrição e, abaixo dela, a ficha técnica — não mais lado a lado.
 * Ambas ficam limitadas a uma medida de leitura confortável em vez de
 * esparramar na largura do alignwide: uma tabela de duas colunas ocupando
 * 1200px deixa um vão enorme entre o rótulo e o valor.
 */
.wp-block-group.coisasdecasa-product__body {
	max-width: 46rem;
	margin-inline: auto;
	margin-top: var(--wp--preset--spacing--50, 2.5rem);
	padding-bottom: var(--wp--preset--spacing--60, 4rem);
}

.coisasdecasa-product__summary {
	margin: 0 0 var(--wp--preset--spacing--50, 2.5rem);
	font-size: 1rem;
	line-height: 1.65;
}

/* A ficha perdeu a caixa cinza do layout antigo: agora ela é a coluna da
   direita, e a régua superior grossa é o que a ancora visualmente. */
/* text-align:center só alcança o CTA e a nota — as células da tabela têm
   alinhamento próprio declarado logo abaixo e não são afetadas. */
.coisasdecasa-product__fichatecnica {
	border-top: 2px solid var(--wp--preset--color--grafite, #22252A);
	text-align: center;
}

.coisasdecasa-product__fichatecnica-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.9375rem;
}

.coisasdecasa-product__fichatecnica-table th,
.coisasdecasa-product__fichatecnica-table td {
	padding: 0.7rem 0.15rem;
	border-bottom: 1px solid var(--wp--preset--color--linha, #E6E1D8);
}

.coisasdecasa-product__fichatecnica-table th {
	width: 45%;
	text-align: left;
	font-weight: 600;
	color: var(--wp--preset--color--grafite, #22252A);
}

.coisasdecasa-product__fichatecnica-table td {
	text-align: right;
	color: var(--wp--preset--color--cinza-texto, #6B655C);
}

/**
 * Linha de ações da ficha técnica: CTA de PDF + botões "Comprar"
 * (Mercado Livre/Shopee, opcionais — ver coisasdecasa_render_buy_links() em
 * inc/single-product.php). Flex em vez de inline-block solto porque agora
 * pode ter até 3 botões lado a lado; quebra linha em telas estreitas.
 */
.coisasdecasa-product__fichatecnica-actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 0.75rem;
	margin-top: 1.25rem;
}

.coisasdecasa-product__fichatecnica-cta {
	display: inline-block;
	padding: 0.65rem 1.5rem;
	border-radius: 999px;
	background: var(--wp--preset--color--vermelho-casa, #C81E2C);
	color: var(--wp--preset--color--branco-papel, #FBF9F5);
	font-family: var(--wp--preset--font-family--heading, sans-serif);
	font-weight: 500;
	font-size: 0.9375rem;
	text-decoration: none;
	border: 1px solid transparent;
	cursor: pointer;
}

.coisasdecasa-linha-campo .coisasdecasa-product__fichatecnica-cta {
	background: var(--wp--preset--color--verde-campo, #3F6B3D);
}

.coisasdecasa-product__fichatecnica-cta:hover {
	background: var(--wp--preset--color--grafite, #22252A);
}

.coisasdecasa-product__fichatecnica-cta.is-disabled {
	background: transparent;
	color: var(--wp--preset--color--cinza-texto, #6B655C);
	border-color: var(--wp--preset--color--linha, #E6E1D8);
	cursor: not-allowed;
}

/**
 * Botões "Comprar" externos — cor de marca do marketplace, não da linha do
 * produto (Casa/Campo): o ponto aqui é reconhecimento imediato de
 * "isso me leva pro Mercado Livre/Shopee", não harmonia com o resto da
 * página. Mesmo formato de pílula do CTA de PDF ao lado, pra ficarem no
 * mesmo grupo visual de ações.
 */
.coisasdecasa-product__buy-btn {
	display: inline-block;
	padding: 0.65rem 1.5rem;
	border-radius: 999px;
	font-family: var(--wp--preset--font-family--heading, sans-serif);
	font-weight: 600;
	font-size: 0.9375rem;
	text-decoration: none;
	border: 1px solid transparent;
}

.coisasdecasa-product__buy-btn--mercadolivre {
	background: #fee52c;
	color: #1c1c1c;
}

.coisasdecasa-product__buy-btn--mercadolivre:hover {
	background: #ffd400;
}

.coisasdecasa-product__buy-btn--shopee {
	background: #ee4d2d;
	color: #ffffff;
}

.coisasdecasa-product__buy-btn--shopee:hover {
	background: #d8431f;
}

.coisasdecasa-product__fichatecnica-note {
	margin: 0.75rem 0 0;
	font-size: 0.75rem;
	color: var(--wp--preset--color--cinza-texto, #6B655C);
}

/* ------------------------- INGREDIENTES | INFORMAÇÃO NUTRICIONAL (faixa) */

/**
 * Faixa tingida sangrando na largura toda. O full-bleed vem da classe
 * .alignfull que o render PHP já aplica (ver o comentário lá) — nada de
 * 100vw aqui: dentro do layout "constrained" o max-width dos filhos vence
 * width e o conteúdo vazava da tela no mobile.
 */
.coisasdecasa-product__info-band {
	box-sizing: border-box;
	padding: var(--wp--preset--spacing--60, 4rem) var(--wp--preset--spacing--40, 1.5rem);
	background: var(--wp--preset--color--fundo-casa, #FBF3E4);
}

.coisasdecasa-linha-campo .coisasdecasa-product__info-band {
	background: var(--wp--preset--color--fundo-campo, #F1EDE3);
}

.coisasdecasa-product__info-band-inner {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: var(--wp--preset--spacing--60, 4rem);
	max-width: 1100px;
	margin-inline: auto;
}

.coisasdecasa-product__dash {
	display: block;
	width: 44px;
	height: 4px;
	margin: 0 auto 1rem;
	border-radius: 2px;
	background: var(--wp--preset--color--amarelo-marca, #F5C518);
}

.coisasdecasa-linha-campo .coisasdecasa-product__dash {
	background: var(--wp--preset--color--argila-campo, #A66A3A);
}

.coisasdecasa-product__infocell-title {
	margin: 0 0 1.25rem;
	text-align: center;
	font-size: 1.6rem;
	color: var(--wp--preset--color--vermelho-casa, #C81E2C);
}

.coisasdecasa-linha-campo .coisasdecasa-product__infocell-title {
	color: var(--wp--preset--color--verde-campo, #3F6B3D);
}

.coisasdecasa-product__infocell-body p {
	margin: 0 0 0.9rem;
	font-size: 0.9375rem;
	line-height: 1.7;
}

.coisasdecasa-product__infocell-body p:last-child {
	margin-bottom: 0;
}

/* ------------------------------------------------------------ CROSS-LINK */

.coisasdecasa-product__crosslink-wrap {
	margin-top: var(--wp--preset--spacing--60, 4rem);
}

/**
 * O título de "Produtos relacionados" briga com uma regra que o próprio
 * WooCommerce injeta inline na página:
 *
 *   .wp-block-woocommerce-product-collection h2.wp-block-heading { font-size: small }
 *
 * Isso é especificidade 0,2,1 — vence qualquer seletor de uma ou duas classes
 * puras e deixava o título em 14px. O seletor abaixo empilha wrapper +
 * elemento + as duas classes do h2 (0,3,1) para ganhar sem !important.
 */
.coisasdecasa-product__crosslink h2,
.coisasdecasa-product__related h2.wp-block-heading.coisasdecasa-product__section-title {
	margin: 0 0 1.5rem;
	text-align: center;
	font-size: 1.6rem;
	line-height: 1.25;
	color: var(--wp--preset--color--vermelho-casa, #C81E2C);
}

.coisasdecasa-linha-campo .coisasdecasa-product__crosslink h2,
.coisasdecasa-linha-campo .coisasdecasa-product__related h2.wp-block-heading.coisasdecasa-product__section-title {
	color: var(--wp--preset--color--verde-campo, #3F6B3D);
}

.coisasdecasa-product__crosslink {
	padding: 0;
	border-radius: 0;
	background: none;
}

/* "Modo de aplicação" é um <p> solto no crosslink — sem isso ele esparrama na
   largura toda enquanto o título fica centralizado. */
.coisasdecasa-product__crosslink > p {
	max-width: 46rem;
	margin: 0 auto;
	text-align: center;
	font-size: 0.9375rem;
	line-height: 1.7;
}

.coisasdecasa-product__crosslink-list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.coisasdecasa-product__crosslink-item a {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	width: 11rem;
	text-decoration: none;
	color: var(--wp--preset--color--grafite, #22252A);
	font-size: 0.875rem;
	font-weight: 500;
}

.coisasdecasa-product__crosslink-thumb {
	width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
	border-radius: 12px;
}

.coisasdecasa-product__crosslink-empty {
	margin: 0;
	text-align: center;
	color: var(--wp--preset--color--cinza-texto, #6B655C);
	font-size: 0.9375rem;
}

/* --------------------------------------------------------- RELACIONADOS */

.coisasdecasa-product__related {
	margin-top: var(--wp--preset--spacing--60, 4rem);
	padding-bottom: var(--wp--preset--spacing--60, 4rem);
}

/* ------------------------------------------------------------ RESPONSIVO */

/* Sem breakpoint em 900px: descrição e ficha já nascem empilhadas, então não
   há grade de colunas para desmontar. */

@media (max-width: 600px) {
	.coisasdecasa-product__hero::before {
		height: 120px;
	}

	.coisasdecasa-product__hero .coisasdecasa-product__hero-image {
		width: 200px;
		margin-top: -100px;
	}

	.coisasdecasa-product__info-band {
		padding-top: var(--wp--preset--spacing--50, 2.5rem);
		padding-bottom: var(--wp--preset--spacing--50, 2.5rem);
	}

	.coisasdecasa-product__infocell-title,
	.coisasdecasa-product__crosslink h2,
	.coisasdecasa-product__section-title {
		font-size: 1.35rem;
	}

	.coisasdecasa-product__crosslink-item a {
		width: 8.5rem;
	}
}