/**
 * Estilos da página de UM produto.
 *
 * Carregado apenas em is_product(), por inc/assets.php, e depois de
 * assets/css/main.css — que é depois das folhas do WooCommerce, conferido no
 * HTML servido. Vocabulário Bootstrap 5, como o resto da loja: as páginas de
 * venda é que usam o build do Tailwind.
 *
 * OS TOKENS SÃO OS MESMOS DE assets/css/archive-product.css
 * =========================================================
 * Repetidos, e não importados: as duas folhas nunca são servidas juntas — uma
 * atende is_product(), a outra is_shop()/is_product_taxonomy() —, e um @import
 * custaria uma requisição em série no caminho crítico. Os valores são idênticos
 * de propósito: o card da listagem e o bloco de oferta da página do produto
 * mostram o mesmo produto, e não podem ter azuis diferentes.
 */

:root {
	--shop-primary: #0b60e0;
	--shop-primary-hover: #064eba;
	--shop-primary-soft: rgba(11, 96, 224, 0.08);
	--shop-text: #0f172a;
	--shop-text-muted: #475569;
	--shop-surface: #fff;
	--shop-border: #e2e8f0;
	--shop-price: #0f766e;
	--shop-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04), 0 1px 3px rgba(15, 23, 42, 0.06);
	--shop-shadow-lg: 0 12px 24px rgba(15, 23, 42, 0.10), 0 2px 6px rgba(15, 23, 42, 0.05);
	--shop-radius: 12px;
	--shop-transition: 220ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ==========================================================================
   Bloco de oferta

   Envolve a saída NATIVA do WooCommerce — o preço da prioridade 10 e o
   `form.cart` da prioridade 15 nascem aqui dentro. Ver o cabeçalho de
   inc/shop/product-offer.php: existe UM `form.cart` no documento, e este bloco
   não recria nenhum dos dois.
   ========================================================================== */
.product-offer {
	margin: 0 0 1.5rem;
	padding: 1.25rem;
	background: linear-gradient(180deg, #fff 0%, #f8fafc 100%);
	border: 1px solid var(--shop-border);
	border-radius: var(--shop-radius);
	box-shadow: var(--shop-shadow-sm);
}

/* O preço é do WooCommerce, e `.woocommerce div.product p.price` pesa (0,3,2).
   A classe do bloco entra no seletor para vencer por especificidade, e não por
   ordem de enfileiramento — que muda quando um plugin reordena os handles. */
.woocommerce div.product .product-offer p.price {
	margin: 0 0 1rem;
	color: var(--shop-price);
	font-size: 2rem;
	font-weight: 800;
	line-height: 1.1;
}

.woocommerce div.product .product-offer p.price del {
	margin-right: 0.5rem;
	color: var(--shop-text-muted);
	font-size: 1.125rem;
	font-weight: 600;
	opacity: 1;
}

.woocommerce div.product .product-offer p.price ins {
	background: none;
	text-decoration: none;
}

/* ==========================================================================
   O que está incluído
   ========================================================================== */
.product-offer__included {
	margin: 0 0 1.25rem;
}

.product-offer__included-title {
	margin: 0 0 0.625rem;
	color: var(--shop-text);
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: 0;
}

.product-offer__included-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.product-offer li.product-offer__included-item {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
	margin: 0 0 0.375rem;
	color: var(--shop-text-muted);
	font-size: 0.9375rem;
	line-height: 1.45;
}

.product-offer__check {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	margin-top: 0.125rem;
	color: var(--shop-primary);
}

/* ==========================================================================
   Os dois CTAs

   Empilhados abaixo de 576px e lado a lado a partir dali, que é o que a
   linha de base do Bootstrap chama de `sm`. O `form.cart` do WooCommerce é um
   dos itens flexíveis — ele não foi recriado, foi reposicionado.
   ========================================================================== */
.product-offer__actions {
	display: flex;
	flex-wrap: wrap;

	/* `stretch`, e não `center`: com a coluna do resumo estreita, um dos dois
	   rótulos costuma ocupar duas linhas, e centralizar deixaria os botões com
	   alturas diferentes lado a lado. */
	align-items: stretch;
	gap: 0.75rem;
}

.woocommerce div.product .product-offer__actions form.cart {
	flex: 1 1 100%;
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0;
}

.woocommerce div.product .product-offer__actions form.cart .quantity {
	flex: 0 0 auto;
	margin: 0;
}

.woocommerce div.product .product-offer__actions form.cart .quantity .qty {
	width: 3.5rem;
	height: 100%;
	min-height: 3rem;
	padding: 0.5rem 0.25rem;
	border: 1px solid var(--shop-border);
	border-radius: 8px;
	text-align: center;
}

.woocommerce div.product .product-offer__actions form.cart .single_add_to_cart_button {
	flex: 1 1 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 3rem;
	padding: 0.75rem 0.875rem;
	background-color: var(--shop-primary);
	color: #fff;
	border: 1px solid var(--shop-primary);
	border-radius: 8px;
	font-size: 0.9375rem;
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	cursor: pointer;
	transition: background-color var(--shop-transition), box-shadow var(--shop-transition), transform var(--shop-transition);
}

.woocommerce div.product .product-offer__actions form.cart .single_add_to_cart_button:hover,
.woocommerce div.product .product-offer__actions form.cart .single_add_to_cart_button:focus-visible {
	background-color: var(--shop-primary-hover);
	border-color: var(--shop-primary-hover);
	box-shadow: 0 6px 14px rgba(11, 96, 224, 0.30);
	transform: translateY(-1px);
}

/* ==========================================================================
   Botão de demonstração

   A classe pedida pelo padrão é `btn-primary`, a da cor de marca. O
   PREENCHIMENTO sólido fica com o CTA primário — o "Adicionar ao carrinho",
   logo acima —, porque dois botões sólidos e quase da mesma cor, lado a lado,
   apagam a hierarquia entre a ação principal e a secundária. Este usa a MESMA
   cor no traço e no texto, que é o tratamento de `.shop-card__demo-link` no
   card da listagem.

   As quatro cores que ele substitui — 12 `btn-primary`, 1 `btn-danger`, 1
   `btn-success` e 1 `btn-secondary`, coladas à mão no WYSIWYG de cada um dos 16
   produtos — deixam de ser possíveis: a cor não é mais escolha por produto.
   ========================================================================== */
.product-offer__demo.btn.btn-primary {
	flex: 1 1 100%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	min-height: 3rem;
	padding: 0.75rem 0.875rem;
	background-color: transparent;
	color: var(--shop-primary);
	border: 1px solid var(--shop-primary);
	border-radius: 8px;
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--shop-transition), color var(--shop-transition), border-color var(--shop-transition);
}

.product-offer__demo.btn.btn-primary:hover,
.product-offer__demo.btn.btn-primary:focus-visible {
	background-color: var(--shop-primary-soft);
	color: var(--shop-primary-hover);
	border-color: var(--shop-primary-hover);
}

.product-offer__demo svg {
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
}

/* ==========================================================================
   Frase de segurança

   O texto vem do painel e reflete a política publicada em /termos-de-compra/:
   reembolso quando o suporte não resolve o problema. Não há prazo de
   arrependimento nem garantia incondicional a anunciar aqui — ver o docblock de
   templatesavenda_render_product_assurance().
   ========================================================================== */
.product-offer p.product-offer__assurance {
	flex: 1 1 100%;
	display: flex;
	align-items: flex-start;
	gap: 0.4375rem;
	margin: 0;
	color: var(--shop-text-muted);
	font-size: 0.8125rem;
	line-height: 1.4;
}

.product-offer__assurance-icon {
	flex: 0 0 auto;
	width: 15px;
	height: 15px;
	margin-top: 0.0625rem;
	color: var(--shop-primary);
}

/* ==========================================================================
   Seção de avaliações do produto
   ========================================================================== */
.product-reviews {
	margin: 2rem 0;
	padding: 1.5rem;
	background-color: var(--shop-surface);
	border: 1px solid var(--shop-border);
	border-radius: var(--shop-radius);
	box-shadow: var(--shop-shadow-sm);
}

.product-reviews__title {
	margin: 0 0 1rem;
	color: var(--shop-text);
	font-size: 1.375rem;
	font-weight: 700;
	line-height: 1.25;
}

/* ==========================================================================
   Barra fixa de compra

   `bottom` vem de `--product-cta-gap`, publicada por assets/js/product-cta.js a
   partir da ALTURA MEDIDA da outra barra fixa do tema — a de busca e carrinho,
   `.fixed-bottom` em footer.php, visível abaixo de 992px. A altura dela varia
   com a largura da tela (medido: 74,8px a 390px e 88,3px a 991px), então
   constante escrita à mão aqui erraria numa das duas pontas.

   A reserva `0` cobre o caso de o JavaScript não rodar — e nesse caso a barra
   nem chega a aparecer, porque quem acrescenta `is-visible` é ele.
   ========================================================================== */
.product-sticky-cta {
	position: fixed;
	right: 0;
	bottom: var(--product-cta-gap, 0);
	left: 0;

	/* Abaixo do botão de WhatsApp, que é 1040 em
	   assets/css/whatsapp-button.css: entre os dois, quem cede é a barra. */
	z-index: 1030;
	visibility: hidden;
	opacity: 0;
	transform: translateY(100%);
	background-color: var(--shop-surface);
	border-top: 1px solid var(--shop-border);
	box-shadow: 0 -6px 18px rgba(15, 23, 42, 0.12);
	transition: opacity var(--shop-transition), transform var(--shop-transition), visibility var(--shop-transition);
}

.product-sticky-cta.is-visible {
	visibility: visible;
	opacity: 1;
	transform: translateY(0);
}

.product-sticky-cta__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding-top: 0.625rem;
	padding-bottom: 0.625rem;
}

.product-sticky-cta__info {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.product-sticky-cta__name {
	overflow: hidden;
	color: var(--shop-text);
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1.25;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.product-sticky-cta__price {
	color: var(--shop-price);
	font-size: 1.125rem;
	font-weight: 800;
	line-height: 1.2;
}

/* O preço de antes fica de fora da barra: ela é um lembrete compacto, e o valor
   riscado já está no bloco de oferta. O texto para leitor de tela que o
   WooCommerce imprime ao lado (`.screen-reader-text`) continua anunciando os
   dois valores, então nada se perde para quem não vê a tela. */
.product-sticky-cta__price del {
	display: none;
}

/* O `ins` do preço promocional vem sublinhado por padrão do navegador, e com
   fundo amarelo em alguns temas do WooCommerce. Mesmo reset do bloco de oferta. */
.product-sticky-cta__price ins {
	background: none;
	text-decoration: none;
}

.product-sticky-cta__button.btn {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 2.75rem;
	padding: 0.625rem 1.25rem;
	background-color: var(--shop-primary);
	color: #fff;
	border: 1px solid var(--shop-primary);
	border-radius: 8px;
	font-size: 0.9375rem;
	font-weight: 700;
	line-height: 1.2;
	cursor: pointer;
	transition: background-color var(--shop-transition);
}

.product-sticky-cta__button.btn:hover,
.product-sticky-cta__button.btn:focus-visible {
	background-color: var(--shop-primary-hover);
	border-color: var(--shop-primary-hover);
	color: #fff;
}

/* ==========================================================================
   Convivência com o botão flutuante de WhatsApp

   Os dois são fixos e ancorados embaixo. O irmão adjacente funciona porque
   inc/shop/product-sticky-cta.php entra em `templatesavenda_footer` na
   prioridade 30 e inc/blocks/whatsapp.php na 40 — os dois filhos diretos de
   <body>, nesta ordem.

   `--product-cta-clearance` também vem do JavaScript, já somada: deslocamento
   da barra + altura dela + respiro. `!important` porque é o que
   assets/css/whatsapp-button.css usa nos dois formatos, e a especificidade
   maior daqui é o que decide o empate.
   ========================================================================== */
.product-sticky-cta.is-visible ~ .btn_whatsapp--pill,
.product-sticky-cta.is-visible ~ .btn_whatsapp--circle {
	bottom: var(--product-cta-clearance, 9rem) !important;
}

/* ==========================================================================
   Movimento reduzido — WCAG 2.3.3

   assets/css/global.css já neutraliza toda transição do site sob esta
   preferência, com `!important`. A regra abaixo é redundante de propósito, pelo
   mesmo critério que aquele arquivo registra para outras redundâncias do tema:
   quem lê ESTA folha precisa ver que a barra respeita a preferência, sem ter de
   confiar numa regra global escrita em outro arquivo.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {

	.product-sticky-cta {
		transition: none;
	}
}

/* ==========================================================================
   Telas grandes

   A frase de segurança sobe para a mesma linha dos dois CTAs quando há largura
   para isso; abaixo daí ela ocupa a linha inteira, logo abaixo deles.
   ========================================================================== */
@media (min-width: 576px) {

	/*
	 * AS BASES SÃO PERCENTUAIS, E `min-width: 0` NÃO É DETALHE.
	 *
	 * A coluna do resumo do produto é estreita: o WooCommerce a declara com
	 * `width: 48%` a partir de 768px, o que dá cerca de 420px úteis a 1440px. Com
	 * `flex-basis: auto`, o tamanho mínimo automático de um item flexível é o
	 * min-content dele — e o `form.cart` sozinho pede ~280px por causa do seletor
	 * de quantidade mais o rótulo do botão. Os dois somados estouravam a linha e
	 * o segundo caía para baixo, medido a 1440px antes desta regra.
	 *
	 * `min-width: 0` devolve ao flexbox a permissão de encolher abaixo do
	 * min-content, e as bases percentuais dividem a linha em proporção estável em
	 * qualquer largura de coluna.
	 */
	.woocommerce div.product .product-offer__actions form.cart {
		flex: 1 1 58%;
		min-width: 0;
	}

	.product-offer__demo.btn.btn-primary {
		flex: 1 1 38%;
		min-width: 0;
	}
}

@media (min-width: 992px) {

	.product-offer {
		padding: 1.5rem;
	}
}