/**
 * Página do produto — layout do design da Loja (Claude Design).
 *
 * Carrega só em is_product(). Assume o markup clássico do single-product do
 * WooCommerce: galeria à esquerda, .summary à direita, .woocommerce-tabs e
 * .related abaixo, ocupando as duas colunas.
 *
 * Complementa o loja.css (que traz os tokens --bpc-*). Onde os dois falam da
 * mesma propriedade, este arquivo ganha por carregar depois — em especial nos
 * botões, que aqui são pílula e não retângulo arredondado.
 *
 * Medidas tiradas dos prints do design (capturados a ~1,44×, divididos de
 * volta): container de 1180 px, colunas de 572 px com 36 px entre elas.
 */

/* O fundo areia da página é declarado no loja.css, para todas as telas de uma
 * vez — não repetir aqui é o que impede a cor de divergir entre elas. */

/* Container de 1180 px, como no design. O hello-elementor trava o .site-main
 * em 1140 com `body:not([class*=elementor-page-]) .site-main` — (0,2,1); o
 * `main` a mais aqui passa na frente. */
@media (min-width: 1200px) {
	body.single-product main.site-main {
		max-width: 1180px;
	}
}

/* Colunas realmente meio a meio.
 *
 * O loja.css usa `1fr 1fr`, e `1fr` é `minmax(auto, 1fr)`: o `auto` deixa o
 * min-content da coluna da direita empurrar a régua. Medido em produção, dava
 * 223px na galeria contra 529px no resumo — daí a imagem apertada e o título
 * quebrando em três linhas. `minmax(0, 1fr)` trava a divisão. */
.single-product div.product {
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 0 36px;
	align-items: start;
}

/* Galeria e resumo ocupam a coluna inteira.
 *
 * O Woo monta esta página com float e porcentagem — `div.images` e `.summary`
 * saem com `width: 48%` cada. Como aqui o layout virou grade de duas colunas,
 * os 48% viram metade de metade: medido em produção, 262px dentro de uma
 * coluna de 546px.
 *
 * O `!important` é deliberado. Escalar especificidade contra essas duas regras
 * não se mostrou confiável neste site, e o que está em jogo não é um ajuste de
 * estilo: é trocar o modelo de layout. A largura tem de ser incondicional. */
.single-product div.product div.images,
.single-product div.product div.summary {
	width: 100% !important;
	max-width: 100%;
	float: none !important;
	margin: 0;
}

/* ── Breadcrumb ───────────────────────────────── */

/*
 * Respiro entre o header e o breadcrumb. Medido em produção: 0 px, o
 * breadcrumb encostava no header. Padding e não margin: a margem atravessaria
 * os containers sem padding do tema e empurraria o fundo junto.
 */
.single-product .woocommerce-breadcrumb {
	padding-top: 28px;
	margin: 0 0 20px;
	font-family: var(--bpc-apoio);
	font-size: 13.5px;
	color: var(--bpc-texto); /* o item atual, que é texto e não link */
}

.single-product .woocommerce-breadcrumb a { color: #8A7A66; text-decoration: none; }
.single-product .woocommerce-breadcrumb a:hover { color: var(--bpc-verde); }

.single-product .woocommerce-breadcrumb .bpc-bc-sep {
	margin: 0 6px;
	color: #8A7A66;
}

@media (max-width: 767px) {
	.single-product .woocommerce-breadcrumb {
		padding-top: 18px;
	}
}

/* ── Galeria ───────────────────────────────────── */

/* O Woo nasce a galeria com opacity:0 e só a revela pelo JS dele — que o
 * LiteSpeed segura até a primeira interação do visitante. Sem carrossel não
 * há salto de layout a esconder, então a foto aparece de cara. */
.single-product .woocommerce-product-gallery {
	position: relative;
	opacity: 1 !important;
}

/* O design não tem a lupa. O lightbox continua: com o slider desligado, o
 * Woo abre a foto ampliada no clique da própria foto. */
.single-product .woocommerce-product-gallery__trigger {
	display: none !important;
}

.single-product div.product div.images .woocommerce-product-gallery__wrapper {
	position: relative;
	width: 100%;
	display: block;
	margin: 0;
}

.single-product div.product div.images .woocommerce-product-gallery__wrapper > div.woocommerce-product-gallery__image {
	width: 100%;
	margin: 0;
	float: none;
}

/* Uma foto à mostra por vez: a primeira, até o script assumir; depois, a que
 * a miniatura escolheu. Sem JS, a página mostra a principal e as miniaturas
 * ficam inertes — nada quebra.
 *
 * Seletores longos de propósito: o CSS do Woo põe as fotos extras em
 * `inline-block` e 25% com `.woocommerce div.product div.images
 * .woocommerce-product-gallery__image:nth-child(n+2)` — (0,5,2). Medido na
 * simulação: com seletor menor elas apareciam empilhadas embaixo da principal. */
.single-product.woocommerce div.product div.images .woocommerce-product-gallery__wrapper > .woocommerce-product-gallery__image:not(:first-child),
.single-product.woocommerce div.product div.images.bpc-galeria-js .woocommerce-product-gallery__wrapper > .woocommerce-product-gallery__image {
	display: none;
}

.single-product.woocommerce div.product div.images.bpc-galeria-js .woocommerce-product-gallery__wrapper > .woocommerce-product-gallery__image.is-bpc-ativa {
	display: block;
	width: 100%;
}

/* A foto se ajusta à caixa 4:3 do design, não o contrário.
 *
 * Sem isto, uma foto em retrato (a atual é 600×1025) estica a coluna inteira e
 * a página fica desproporcional. O `cover` recorta para preencher: se em algum
 * produto o recorte cortar o que importa, troque por `contain` — aí a foto
 * aparece inteira com faixa areia nas laterais. */
.single-product div.product div.images .woocommerce-product-gallery__image img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	object-position: center;
	border-radius: 20px;
	background: var(--bpc-areia);
}

.single-product div.product div.images .woocommerce-product-gallery__image a {
	display: block;
	cursor: zoom-in;
}

/* Camada do tamanho da foto principal (4:3), por cima dela: é o que põe a
 * legenda no pé da foto, e não no pé da fileira de miniaturas. */
.single-product .bpc-foto-camada {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 3;
	width: 100%;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: 20px;
	pointer-events: none;
}

/* Sombra no pé da foto só quando há legenda: texto branco em foto clara
 * sumiria. */
.single-product .bpc-foto-camada:has(.bpc-legenda-foto:not([hidden]))::after {
	content: "";
	position: absolute;
	inset: auto 0 0;
	height: 38%;
	background: linear-gradient(to top, rgba(30, 20, 12, .5), transparent);
}

/* Selos da foto numa fileira: tipo e, em promoção, "Oferta". */
.single-product .bpc-foto-selos {
	position: absolute;
	top: 17px;
	left: 17px;
	z-index: 1;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.single-product .bpc-selo-oferta {
	padding: 7px 13px;
	border-radius: 999px;
	background: var(--bpc-coral);
	color: #fff;
	font-family: var(--bpc-apoio);
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.single-product .bpc-selo-tipo {
	padding: 7px 13px;
	border-radius: 999px;
	background: #F2DFB4;
	color: #6B4423;
	font-family: var(--bpc-apoio);
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.single-product .bpc-legenda-foto {
	position: absolute;
	right: 19px;
	bottom: 20px;
	left: 19px;
	z-index: 1;
	color: #fff;
	font-family: var(--bpc-apoio);
	font-size: 12.5px;
	font-weight: 500;
	text-shadow: 0 1px 3px rgba(0, 0, 0, .35);
}

.single-product .bpc-legenda-foto[hidden] { display: none; }

/* Miniaturas: quatro por linha, quadradas; a ativa com borda verde. */
.single-product .bpc-miniaturas {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 12px;
	margin: 12px 0 0;
}

.single-product .bpc-miniatura {
	display: block;
	width: 100%;
	margin: 0;
	padding: 0;
	overflow: hidden;
	aspect-ratio: 1 / 1;
	border: 2px solid transparent;
	border-radius: 12px;
	background: var(--bpc-areia);
	cursor: pointer;
	transition: border-color .15s ease;
}

.single-product .bpc-miniatura:hover { border-color: rgba(47, 107, 67, .45); }

.single-product .bpc-miniatura.is-ativa { border-color: var(--bpc-verde); }

.single-product .bpc-miniatura:focus-visible {
	outline: 2px solid var(--bpc-verde);
	outline-offset: 2px;
}

.single-product .bpc-miniatura img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 10px;
}

/* ── Coluna da direita ─────────────────────────── */

/* Linha do parceiro, acima do título: "Sítio Bela Vista · Parceiro Ouro". */
.single-product .bpc-parceiro {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 0 0 8px;
	font-family: var(--bpc-apoio);
	font-size: 13.5px;
	font-weight: 600;
	color: #9A6622;
}

.single-product .bpc-parceiro a { color: #9A6622; text-decoration: none; }
.single-product .bpc-parceiro a:hover { text-decoration: underline; }

.single-product .bpc-parceiro .bpc-plano { color: #9A6622; }
.single-product .bpc-parceiro .bpc-plano::before { content: "·"; margin-right: 6px; }

.single-product .summary .product_title {
	margin: 0 0 10px;
	color: var(--bpc-texto);
	font-size: clamp(27px, 3.2vw, 34px);
	line-height: 1.12;
	text-align: left;
	/* Distribui as linhas em vez de deixar uma órfã com duas palavras. */
	text-wrap: balance;
}

/* Estrelas, nota e disponibilidade na mesma linha. */
.single-product .bpc-avaliacao {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 12px;
	margin: 0 0 22px;
	font-family: var(--bpc-apoio);
}

.single-product .bpc-avaliacao .star-rating {
	float: none;
	margin: 0;
	font-size: 14px;
}

.single-product .bpc-avaliacao .star-rating span::before { color: var(--bpc-ocre); }

.single-product .bpc-avaliacao__texto {
	color: #6B5D49;
	font-size: 14.5px;
	text-decoration: none;
}

.single-product .bpc-avaliacao__texto:hover { color: var(--bpc-verde); }

.single-product .summary .stock {
	display: inline-block;
	margin: 0;
	padding: 4px 12px;
	border: 1px solid #CDD9CC;
	border-radius: 999px;
	background: #EAF1E8;
	color: var(--bpc-verde);
	font-family: var(--bpc-apoio);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.3;
}

.single-product .summary .stock.out-of-stock {
	border-color: #EBC9BF;
	background: #F7E8E4;
	color: #8A2F22;
}

.single-product .summary .stock.available-on-backorder {
	border-color: #E6D2A6;
	background: #F6ECD6;
	color: #6B4423;
}

/* Preço grande em slab, com a linha de parcelas ao lado.
 *
 * O `div.product` não é decoração: o loja.css usa
 * `.single-product div.product p.price` — (0,3,2) — e um seletor menor aqui
 * perde. Tamanho medido no design: "R$ 38,00" ocupa ~155 px, o que em Zilla
 * Slab 700 dá 40 px. */
.single-product div.product .summary p.price {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 6px 14px;
	margin: 0 0 24px;
	color: var(--bpc-verde-escuro);
	font-family: var(--bpc-titulo);
	font-size: 40px;
	font-weight: 700;
	line-height: 1.1;
}

/* Promoção: preço antigo riscado e menor; o novo sem o sublinhado que o
 * navegador põe em <ins> (medido: "R$ 18,00" saía sublinhado). */
.single-product div.product .summary p.price ins {
	background: none;
	text-decoration: none;
}

.single-product div.product .summary p.price del {
	color: #8A7A66;
	font-size: 20px;
	font-weight: 400;
	opacity: 1;
}

.single-product .bpc-parcelas {
	color: #8A7A66;
	font-family: var(--bpc-apoio);
	font-size: 14.5px;
	font-weight: 400;
}

/* Rótulo de seção: MOAGEM, COMO RECEBER, SIMULAÇÃO DE FRETE */
.single-product .bpc-rotulo,
.single-product form.cart .variations th.label label {
	display: block;
	margin: 0 0 12px;
	color: #6B4423;
	font-family: var(--bpc-apoio);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
}

/* ── Variações como pílulas (MOAGEM) ──────────── */

.single-product form.cart .variations {
	margin: 0 0 22px;
	border: 0;
}

.single-product form.cart .variations tr,
.single-product form.cart .variations td,
.single-product form.cart .variations th {
	display: block;
	padding: 0;
	border: 0;
	background: transparent;
	text-align: left;
}

.single-product form.cart .variations tr + tr { margin-top: 18px; }

/* O select continua no formulário (é ele que o Woo lê); só sai de vista. */
.single-product .bpc-variacao { position: relative; }

.single-product .bpc-variacao select {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}

.single-product .bpc-opcoes {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.single-product .bpc-opcoes .bpc-opcao {
	min-height: 42px;
	margin: 0;
	padding: 0 18px;
	border: 1.5px solid #E6DCCB;
	border-radius: 10px;
	background: #fff;
	color: var(--bpc-texto);
	font-family: var(--bpc-apoio);
	font-size: 15.5px;
	font-weight: 500;
	cursor: pointer;
	transition: border-color .15s ease, background .15s ease, color .15s ease;
}

.single-product .bpc-opcoes .bpc-opcao:hover { border-color: var(--bpc-verde); background: #fff; color: var(--bpc-texto); }

.single-product .bpc-opcoes .bpc-opcao.is-ativa,
.single-product .bpc-opcoes .bpc-opcao.is-ativa:hover {
	border-color: var(--bpc-verde);
	background: var(--bpc-verde);
	color: #fff;
	font-weight: 600;
}

.single-product .bpc-opcoes .bpc-opcao:disabled {
	opacity: .4;
	cursor: not-allowed;
	text-decoration: line-through;
}

.single-product form.cart .reset_variations {
	display: inline-block;
	margin-top: 8px;
	color: #8A7A66;
	font-family: var(--bpc-apoio);
	font-size: 13px;
}

/* ── Opções de recebimento ─────────────────────── */

/* O rótulo e a lista são filhos do form.cart (é o que faz o radio ser
 * enviado com o formulário). Como o form é uma linha flex, os dois precisam
 * pedir a largura inteira, e o `order` os recoloca acima da calculadora
 * (order -1) e da ação de compra. */
.single-product form.cart .bpc-rotulo {
	flex: 1 1 100%;
	order: -3;
}

.single-product .bpc-entregas {
	display: grid;
	flex: 1 1 100%;
	order: -2;
	gap: 12px;
	margin: 0;
}

/* Mesma ordem das entregas: a nota vem logo embaixo delas (vem depois no
 * DOM), antes da calculadora. */
.single-product form.cart .bpc-entregas__nota {
	flex: 1 1 100%;
	order: -2;
	margin: 10px 0 20px;
	color: #8A7A66;
	font-family: var(--bpc-apoio);
	font-size: 12.5px;
}

.single-product .bpc-entrega {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: 14px;
	min-height: 66px;
	margin: 0;
	padding: 12px 20px 12px 17px;
	border: 1.5px solid #E6DCCB;
	border-radius: 12px;
	background: #FFFDF9;
	cursor: pointer;
	transition: border-color .15s ease, background .15s ease;
}

/* O radio nativo sai de vista mas continua existindo — é ele que recebe o
 * clique do label, responde ao teclado e é anunciado pelo leitor de tela. A
 * bolinha visível é a .bpc-entrega__marca. */
.single-product .bpc-entrega input[type="radio"] {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: 0;
	opacity: 0;
	pointer-events: none;
}

.single-product .bpc-entrega:hover { border-color: rgba(47, 107, 67, .5); }

/* Estado ativo por CSS puro (funciona sem JS) e pela classe que o script
 * mantém — os dois caminhos levam ao mesmo visual. A sombra soma meio pixel à
 * borda sem mexer no tamanho da caixa. */
.single-product .bpc-entrega:has(input[type="radio"]:checked),
.single-product .bpc-entrega.is-ativa {
	border-color: var(--bpc-verde);
	background: #EAF1E8;
	box-shadow: 0 0 0 .5px var(--bpc-verde);
}

/* Foco visível para quem navega por teclado. */
.single-product .bpc-entrega:has(input[type="radio"]:focus-visible) {
	box-shadow: 0 0 0 3px rgba(47, 107, 67, .25);
}

.single-product .bpc-entrega__marca {
	width: 20px;
	height: 20px;
	border: 2px solid #CFC4B2;
	border-radius: 50%;
	background: #fff;
}

.single-product .bpc-entrega:has(input[type="radio"]:checked) .bpc-entrega__marca,
.single-product .bpc-entrega.is-ativa .bpc-entrega__marca {
	border-color: var(--bpc-verde);
	box-shadow: inset 0 0 0 3px #fff, inset 0 0 0 10px var(--bpc-verde);
}

.single-product .bpc-entrega__nome {
	display: block;
	color: var(--bpc-texto);
	font-family: var(--bpc-apoio);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.3;
}

.single-product .bpc-entrega__obs {
	display: block;
	margin-top: 3px;
	color: #6B5D49;
	font-family: var(--bpc-apoio);
	font-size: 13px;
	line-height: 1.3;
}

.single-product .bpc-entrega__obs:empty { display: none; }

.single-product .bpc-entrega__valor {
	color: var(--bpc-verde-escuro);
	font-family: var(--bpc-apoio);
	font-size: 15px;
	font-weight: 700;
	white-space: nowrap;
}

/* ── Calculadora de frete do Melhor Envio ──────
 *
 * Markup real, conferido em produção:
 *   form.cart > .containerCalculator > .calculatorRow > .row > .col-75
 *     > p "Simulação de frete" + input#inputCep
 *   + #calcular-frete-loader + .resultado-frete > table
 *
 * Ela não tem botão: calcula sozinha conforme o CEP é digitado. E é impressa
 * DENTRO do form.cart, que aqui é uma linha flex — sem `flex-basis: 100%` ela
 * seria esmagada ao lado do stepper. O `order: -1` a coloca logo abaixo do
 * bloco "Como receber" e acima da ação de compra: primeiro você entende as
 * formas de entrega, depois calcula, depois compra. */
.single-product form.cart .containerCalculator {
	flex: 1 1 100%;
	order: -1;
	margin: 0 0 24px;
	padding: 0; /* o plugin põe uma caixa cinza com 20 px; o design não tem caixa */
	border-radius: 0;
	background: transparent;
	font-family: var(--bpc-apoio);
}

.single-product form.cart .containerCalculator .row,
.single-product form.cart .containerCalculator .col-75 {
	width: auto;
	max-width: 100%;
	margin: 0;
	padding: 0;
	float: none;
}

/* "Simulação de frete" com o mesmo tratamento dos rótulos de seção. */
.single-product form.cart .containerCalculator > .calculatorRow p {
	margin: 0 0 10px;
	color: #6B4423;
	font-family: var(--bpc-apoio);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
}

.single-product form.cart .containerCalculator input#inputCep {
	width: 100%;
	max-width: 240px;
	min-height: 48px;
	padding: 10px 16px;
	border: 1.5px solid #E6DCCB;
	border-radius: 12px;
	background: #fff;
	color: var(--bpc-texto);
	font-family: var(--bpc-apoio);
	font-size: 15px;
}

.single-product form.cart .containerCalculator input#inputCep:focus {
	outline: 0;
	border-color: var(--bpc-verde);
	box-shadow: 0 0 0 3px rgba(47, 107, 67, .15);
}

/* O loader vem como GIF em tamanho natural; sem limite ele salta na tela. */
.single-product form.cart #calcular-frete-loader img {
	width: 26px;
	height: 26px;
	margin: 10px 0 0;
}

/* Com a cotação espelhada nas linhas do "Como receber", a lista própria do
 * plugin sai de cena — duas listas com o mesmo preço só confundem. A classe
 * é posta pelo script apenas quando o espelhamento deu certo; se falhar, a
 * tabela continua visível e o cliente não perde a informação.
 *
 * A nota "Frete para … (CEP)" fica: ela confirma para qual destino o cálculo
 * valeu, e isso não está duplicado em nenhum outro lugar. */
.single-product form.cart .resultado-frete.bpc-espelhado table { display: none; }

.single-product form.cart .resultado-frete table {
	width: 100%;
	margin: 12px 0 0;
	border-collapse: collapse;
	font-size: 14px;
}

.single-product form.cart .resultado-frete table:empty { display: none; }

.single-product form.cart .resultado-frete td,
.single-product form.cart .resultado-frete th {
	padding: 10px 6px;
	border-top: 1px solid rgba(42, 29, 18, .12);
	text-align: left;
}

.single-product form.cart .resultado-frete th {
	border-top: 0;
	color: #8A7A66;
	font-size: 11px;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.single-product form.cart .resultado-frete small {
	display: block;
	margin-top: 6px;
	color: #8A7A66;
	font-size: 12px;
}

/* ── Ação: stepper + cesta + ver cesta ────────── */

.single-product form.cart {
	display: flex;
	align-items: center;
	/* Só na horizontal: na vertical o gap somava 14 px a cada linha quebrada
	 * (rótulo, entregas, nota, calculadora), e o espaçamento sai das margens. */
	gap: 0 14px;
	margin: 0 0 20px;
	/* O wrap não é detalhe: a calculadora de frete é impressa dentro deste
	 * form e pede a linha inteira. Sem wrap, o `flex-basis: 100%` dela é
	 * comprimido pelos outros itens e ela sai com 110px — medido em produção. */
	flex-wrap: wrap;
}

/* O clearfix do Woo (::before/::after com display:table) vira item flex
 * invisível e empurrava o stepper 14 px para dentro — medido na simulação. */
.single-product.woocommerce div.product form.cart::before,
.single-product.woocommerce div.product form.cart::after {
	content: none;
}

.single-product .bpc-stepper {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-width: 129px;
	height: 52px;
	padding: 0 8px;
	border: 1.5px solid #E6DCCB;
	border-radius: 999px;
	background: #fff;
}

.single-product .bpc-stepper button {
	width: 34px;
	height: 34px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--bpc-texto);
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
}

.single-product .bpc-stepper button:hover { background: var(--bpc-areia); color: var(--bpc-texto); }

.single-product form.cart .quantity input.qty {
	width: 40px;
	min-height: 34px;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: var(--bpc-texto);
	font-family: var(--bpc-apoio);
	font-size: 17px;
	font-weight: 600;
	-moz-appearance: textfield;
}

.single-product form.cart .quantity input.qty::-webkit-outer-spin-button,
.single-product form.cart .quantity input.qty::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/* CTA em pílula coral, com o total embutido.
 *
 * O `.alt` no fim é obrigatório. O botão sai do Woo com
 * `class="single_add_to_cart_button button alt"`, e a regra roxa dele é
 *
 *   .woocommerce:where(body:not(…)) button.button.alt { background-color:#7f54b3 }
 *
 * O `:where()` não soma especificidade, mas `.woocommerce` + `.button` +
 * `.alt` somam: (0,3,1). Sem o `.alt` aqui o seletor fica (0,3,0) e perde por
 * uma classe — o botão sai roxo. Verificado em produção. */
.single-product form.cart .single_add_to_cart_button.alt {
	flex: 1;
	min-height: 52px;
	padding: 14px 26px;
	border-radius: 999px;
	background: var(--bpc-coral);
	color: #fff;
	font-family: var(--bpc-apoio);
	font-size: 16.5px;
	font-weight: 700;
}

.single-product form.cart .single_add_to_cart_button.alt:hover { background: #C74A33; }

.single-product .bpc-ver-cesta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 52px;
	padding: 0 26px;
	border: 2px solid var(--bpc-verde);
	border-radius: 999px;
	background: transparent;
	color: var(--bpc-verde);
	font-family: var(--bpc-apoio);
	font-size: 16px;
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
}

.single-product .bpc-ver-cesta:hover { background: var(--bpc-verde); color: #fff; }

/* Chips de reforço, abaixo da ação: as tags do produto. */
.single-product .bpc-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.single-product .bpc-chips li {
	margin: 0;
	padding: 6px 14px;
	border: 1.5px solid #E6DCCB;
	border-radius: 999px;
	background: #F8F4EC;
	color: #6B5D49;
	font-family: var(--bpc-apoio);
	font-size: 14px;
}

/* ── Abas dentro de um cartão branco ──────────── */

.single-product div.product .woocommerce-tabs {
	margin-top: 46px;
	padding: 0;
	overflow: hidden;
	border: 1.5px solid #E6DCCB;
	border-radius: 20px;
	background: #fff;
}

/* `.woocommerce` + `div.product` aqui porque o loja.css pinta as abas com
 * `.woocommerce div.product .woocommerce-tabs ul.tabs li.active a` — (0,5,4).
 * Com seletor menor a aba ativa sairia verde, e não coral. */
.single-product.woocommerce div.product .woocommerce-tabs ul.tabs {
	display: flex;
	gap: 0;
	margin: 0;
	padding: 0;
	overflow-x: auto;
	border-bottom: 1px solid #EFE7DA;
	scrollbar-width: none;
}

.single-product.woocommerce div.product .woocommerce-tabs ul.tabs li {
	flex: none;
	margin: 0;
	padding: 0;
}

.single-product.woocommerce div.product .woocommerce-tabs ul.tabs li a {
	display: block;
	padding: 17px 26px 15px;
	border-bottom: 3px solid transparent;
	color: #8A7A66;
	font-family: var(--bpc-apoio);
	font-size: 15.5px;
	font-weight: 600;
	white-space: nowrap;
}

.single-product.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover { color: var(--bpc-texto); }

.single-product.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
	border-bottom-color: var(--bpc-coral);
	color: var(--bpc-texto);
}

.single-product.woocommerce div.product .woocommerce-tabs .panel {
	margin: 0;
	padding: 30px 30px 32px;
}

.single-product div.product .woocommerce-tabs .panel h2,
.single-product div.product .woocommerce-tabs .panel h3 {
	margin: 0 0 12px;
	color: var(--bpc-verde-escuro);
	font-family: var(--bpc-titulo);
	font-size: 22px;
	font-weight: 700;
	line-height: 1.25;
}

.single-product div.product .woocommerce-tabs .panel * + h2,
.single-product div.product .woocommerce-tabs .panel * + h3 { margin-top: 26px; }

.single-product div.product .woocommerce-tabs .panel p,
.single-product div.product .woocommerce-tabs .panel li {
	max-width: 700px;
	color: #5A4A39;
	font-family: var(--bpc-apoio);
	font-size: 16.5px;
	line-height: 1.7;
}

.single-product div.product .woocommerce-tabs .panel p { margin: 0 0 14px; }

.single-product .bpc-aba-link {
	color: var(--bpc-verde);
	font-weight: 600;
	text-decoration: none;
}

.single-product .bpc-aba-link:hover { color: var(--bpc-coral); }

/* Abas centralizadas no cartão (Descrição, O produtor, Entrega e trocas): a
 * coluna de texto fica no meio, títulos e parágrafos centralizados.
 *
 * Listas e caixas escritas na descrição ficam no meio como bloco, mas com o
 * texto de dentro à esquerda — lista com marcador centralizada fica difícil
 * de ler. Pelo mesmo motivo as linhas da lista de entregas mantêm nome à
 * esquerda e valor à direita. */
.single-product div.product .woocommerce-tabs #tab-description,
.single-product div.product .woocommerce-tabs #tab-bpc_produtor,
.single-product div.product .woocommerce-tabs #tab-bpc_entrega {
	text-align: center;
}

/* Em qualquer profundidade, e não só nos filhos diretos: descrição colada de
 * outro lugar costuma vir inteira dentro de um <div> (a do sabonete de café
 * vem em div.product-description-seo, com uma caixa cinza dentro). */
.single-product div.product .woocommerce-tabs #tab-description :is(h1, h2, h3, h4, h5, h6, p, div, table, figure, blockquote),
.single-product div.product .woocommerce-tabs #tab-bpc_produtor :is(h1, h2, h3, h4, h5, h6, p, div, table, figure, blockquote),
.single-product div.product .woocommerce-tabs #tab-bpc_entrega > * {
	max-width: 760px;
	margin-right: auto;
	margin-left: auto;
}

.single-product div.product .woocommerce-tabs #tab-description :is(ul, ol),
.single-product div.product .woocommerce-tabs #tab-bpc_produtor :is(ul, ol) {
	display: table;
	margin-right: auto;
	margin-left: auto;
	padding-left: 1.2em;
	text-align: left;
}

.single-product div.product .woocommerce-tabs #tab-bpc_entrega .bpc-aba-lista li {
	text-align: left;
}

/* Ficha técnica (cartões de atributo) centralizada junto. */
.single-product div.product .woocommerce-tabs #tab-description table.shop_attributes {
	max-width: 760px;
	justify-content: center;
	text-align: left;
}

/* Lista de formas de entrega dentro da aba "Entrega e trocas". */
.single-product .bpc-aba-lista {
	display: grid;
	gap: 10px;
	max-width: 700px;
	margin: 0 0 6px;
	padding: 0;
	list-style: none;
}

.single-product div.product .woocommerce-tabs .panel .bpc-aba-lista li {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	max-width: none;
	margin: 0;
	padding: 12px 17px;
	border: 1px solid #EDE4D3;
	border-radius: 12px;
	background: #F6F1E7;
	font-size: 15px;
	line-height: 1.35;
}

.single-product .bpc-aba-lista strong { display: block; color: var(--bpc-texto); font-weight: 600; }
.single-product .bpc-aba-lista small { display: block; color: #6B5D49; font-size: 13px; }
.single-product .bpc-aba-lista__valor { color: var(--bpc-verde-escuro); font-weight: 700; white-space: nowrap; }

/* Ficha técnica em cartões: VARIEDADE / Catuaí Amarelo. Três por linha, como
 * no design, dentro dos mesmos 750 px do texto. */
.single-product div.product .woocommerce-tabs table.shop_attributes {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 15px;
	max-width: 750px;
	margin: 24px 0 0;
	border: 0;
}

/* Produto sem texto de descrição: os cartões abrem a aba, sem margem extra. */
.single-product div.product .woocommerce-tabs table.shop_attributes:first-child { margin-top: 0; }

.single-product div.product .woocommerce-tabs table.shop_attributes tbody { display: contents; }

.single-product div.product .woocommerce-tabs table.shop_attributes tr {
	display: block;
	padding: 16px 17px;
	border: 1px solid #EDE4D3;
	border-radius: 12px;
	background: #F6F1E7;
}

.single-product div.product .woocommerce-tabs table.shop_attributes th,
.single-product div.product .woocommerce-tabs table.shop_attributes td {
	display: block;
	width: auto;
	padding: 0;
	border: 0;
	background: transparent;
	font-style: normal;
	text-align: left;
}

.single-product div.product .woocommerce-tabs table.shop_attributes th {
	margin-bottom: 5px;
	color: #9A6622;
	font-family: var(--bpc-apoio);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
}

.single-product div.product .woocommerce-tabs table.shop_attributes td,
.single-product div.product .woocommerce-tabs table.shop_attributes td p {
	margin: 0;
	max-width: none;
	color: var(--bpc-texto);
	font-family: var(--bpc-apoio);
	font-size: 16px;
	font-weight: 500;
	line-height: 1.35;
}

/* ── "Combina com" ────────────────────────────── */

.single-product div.product .related,
.single-product div.product .up-sells {
	margin-top: 58px;
}

.single-product div.product .related > h2,
.single-product div.product .up-sells > h2 {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 22px;
	color: var(--bpc-verde-escuro);
	font-family: var(--bpc-titulo);
	font-size: 25px;
	font-weight: 700;
}

.single-product div.product .related > h2::before,
.single-product div.product .up-sells > h2::before {
	content: "";
	flex: none;
	width: 8px;
	height: 25px;
	border-radius: 3px;
	background: var(--bpc-ocre);
}

.single-product div.product .related ul.products,
.single-product div.product .up-sells ul.products {
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 21px;
}

.single-product div.product .related ul.products li.product,
.single-product div.product .up-sells ul.products li.product {
	border: 1.5px solid #E6DCCB;
	border-radius: 14px;
	background: #fff;
}

.single-product div.product .related ul.products li.product a img,
.single-product div.product .up-sells ul.products li.product a img {
	width: 100%;
	height: 125px;
	aspect-ratio: auto;
	margin: 0;
	border-radius: 0;
	object-fit: cover;
}

/* O cartão do design é enxuto: foto, nome, preço e "+ Cesta". O selo,
 * parceiro, chips e unidade que a vitrine põe no cartão ficam para a /loja. */
.single-product div.product .related .bpc-card__selo,
.single-product div.product .related .bpc-card__esgotado,
.single-product div.product .related .bpc-card__legenda,
.single-product div.product .related .bpc-card__parceiro,
.single-product div.product .related .bpc-card__chips,
.single-product div.product .related .bpc-card__unidade,
.single-product div.product .up-sells .bpc-card__selo,
.single-product div.product .up-sells .bpc-card__esgotado,
.single-product div.product .up-sells .bpc-card__legenda,
.single-product div.product .up-sells .bpc-card__parceiro,
.single-product div.product .up-sells .bpc-card__chips,
.single-product div.product .up-sells .bpc-card__unidade {
	display: none;
}

.single-product div.product .related ul.products li.product .woocommerce-loop-product__title,
.single-product div.product .up-sells ul.products li.product .woocommerce-loop-product__title {
	margin: 0;
	padding: 17px 17px 0;
	color: var(--bpc-texto);
	font-family: var(--bpc-titulo);
	font-size: 16.5px;
	font-weight: 700;
	line-height: 1.25;
}

.single-product div.product .related .bpc-card__rodape,
.single-product div.product .up-sells .bpc-card__rodape {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-top: auto;
	padding: 10px 17px 17px;
}

.single-product div.product .related ul.products li.product .price,
.single-product div.product .up-sells ul.products li.product .price {
	margin: 0;
	padding: 0;
	color: var(--bpc-verde-escuro);
	font-family: var(--bpc-titulo);
	font-size: 17px;
	font-weight: 700;
}

.single-product div.product .related ul.products li.product .button,
.single-product div.product .up-sells ul.products li.product .button {
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: var(--bpc-coral);
	font-family: var(--bpc-apoio);
	font-size: 13px;
	font-weight: 600;
	text-align: right;
}

.single-product div.product .related ul.products li.product .button:hover,
.single-product div.product .up-sells ul.products li.product .button:hover {
	background: transparent;
	color: #C74A33;
	transform: none;
}

/* ── Telas menores ────────────────────────────── */

@media (max-width: 900px) {
	.single-product div.product {
		grid-template-columns: minmax(0, 1fr);
		gap: 24px;
	}

	.single-product div.product .related ul.products,
	.single-product div.product .up-sells ul.products {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.single-product div.product .woocommerce-tabs table.shop_attributes {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 640px) {
	.single-product form.cart .single_add_to_cart_button.alt { flex: 1 1 100%; order: 3; margin-top: 12px; }
	.single-product .bpc-ver-cesta { flex: 1; }
	.single-product .bpc-miniaturas { gap: 8px; }
	.single-product div.product .summary p.price { font-size: 32px; }
	.single-product.woocommerce div.product .woocommerce-tabs ul.tabs li a { padding: 15px 16px 13px; font-size: 14.5px; }
	.single-product.woocommerce div.product .woocommerce-tabs .panel { padding: 22px 18px 24px; }
	.single-product div.product .woocommerce-tabs table.shop_attributes { grid-template-columns: minmax(0, 1fr); }
}