/**
 * Página de produto.
 *
 * Prioridade no mobile (§8): foto, nome, preço, resumo objetivo e CTA aparecem
 * antes de qualquer texto longo.
 */

.single-product div.product {
	display: grid;
	gap: var(--jf-space-lg);
	grid-template-columns: 1fr;
	padding-top: var(--jf-space-lg);
}

/* O Storefront aplica clearfix em `div.product`, como faz em `ul.products`.
 * Num container grid os pseudo-elementos viram itens e ocupam a primeira
 * célula — a galeria era empurrada para a coluna 2 e o resumo caía na linha
 * de baixo. Vale a regra geral: todo container do tema pai que virar grid
 * precisa desta limpeza. */
.single-product div.product::before,
.single-product div.product::after {
	content: none;
	display: none;
}

@media (min-width: 56em) {
	.single-product div.product {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		align-items: start;
		gap: var(--jf-space-2xl);
	}

	.single-product div.product .woocommerce-product-gallery {
		position: sticky;
		top: var(--jf-space-md);
	}
}

/* Neutraliza o layout de duas colunas por float do tema pai.
 *
 * Mesmo caso já documentado em catalogo.css: o Storefront usa
 * `.storefront-full-width-content.single-product div.product .woocommerce-product-gallery`
 * — especificidade (0,4,1) — contra os (0,3,1) de um seletor natural aqui.
 * Como a coluna passa a ser definida pelo grid do container, o que se pede aos
 * filhos é apenas que parem de se dimensionar sozinhos. */
.single-product div.product .woocommerce-product-gallery,
.single-product div.product .summary {
	width: 100% !important;
	float: none !important;
	margin: 0 !important;
}

/* As seções abaixo da dobra ocupam a largura inteira da grade. */
.single-product div.product > .jf-produto__descricao,
.single-product div.product > .jf-produto__faq {
	grid-column: 1 / -1;
}

.single-product div.product .woocommerce-product-gallery img {
	border-radius: var(--jf-radius-lg);
	background-color: var(--jf-color-surface-alt);
}

/* ---------- Cabeçalho ---------- */

.single-product .product_title {
	font-size: var(--jf-size-3xl);
	margin: 0 0 var(--jf-space-2xs);
}

.single-product div.product p.price,
.single-product div.product span.price {
	display: block;
	margin: 0 0 var(--jf-space-md);
	color: var(--jf-color-text);
	font-size: var(--jf-size-2xl);
	font-weight: var(--jf-weight-semibold);
}

.single-product .woocommerce-product-details__short-description {
	margin-bottom: var(--jf-space-md);
	color: var(--jf-color-text-muted);
	font-size: var(--jf-size-lg);
	line-height: var(--jf-leading-snug);
}

/* ---------- Resumo objetivo ---------- */

.jf-produto__resumo {
	margin: 0 0 var(--jf-space-md);
	padding: var(--jf-space-sm) var(--jf-space-md);
	background-color: var(--jf-color-surface-alt);
	border-radius: var(--jf-radius-lg);
}

.jf-produto__resumo-linha {
	display: flex;
	flex-wrap: wrap;
	gap: var(--jf-space-2xs);
	padding: var(--jf-space-3xs) 0;
}

.jf-produto__resumo dt {
	flex: 0 0 9.5rem;
	color: var(--jf-color-text-muted);
	font-size: var(--jf-size-sm);
}

.jf-produto__resumo dd {
	flex: 1 1 12rem;
	margin: 0;
	font-size: var(--jf-size-sm);
	font-weight: var(--jf-weight-semibold);
}

.jf-produto__substituicao {
	max-width: var(--jf-measure);
	margin: 0 0 var(--jf-space-md);
	color: var(--jf-color-text-muted);
	font-size: var(--jf-size-sm);
	line-height: var(--jf-leading-normal);
}

/* ---------- CTA ---------- */

.single-product div.product form.cart {
	margin: 0;
}

/* Quantidade não faz sentido: o produto é vendido individualmente e cada
   homenagem é única. */
.single-product div.product form.cart .quantity {
	display: none;
}

.single-product div.product form.cart button.single_add_to_cart_button {
	width: 100%;
	min-height: var(--jf-control-height-lg);
	font-size: var(--jf-size-lg);
	margin: 0;
	float: none;
}

.jf-produto__ajuda {
	margin: var(--jf-space-sm) 0 0;
	text-align: center;
}

.jf-produto__ajuda-link {
	display: inline-flex;
	align-items: center;
	min-height: var(--jf-tap-min);
	color: var(--jf-color-primary);
	font-size: var(--jf-size-sm);
	font-weight: var(--jf-weight-semibold);
}

/* ---------- Descrição e FAQ ---------- */

.jf-produto__descricao,
.jf-produto__faq {
	padding-top: var(--jf-space-lg);
	border-top: 1px solid var(--jf-color-border);
}

.jf-produto__descricao h3 {
	font-size: var(--jf-size-lg);
	margin: var(--jf-space-md) 0 var(--jf-space-2xs);
}

.jf-produto__descricao p,
.jf-produto__descricao li {
	max-width: var(--jf-measure);
	color: var(--jf-color-text-muted);
}

.jf-produto__faq h2 {
	font-size: var(--jf-size-xl);
	margin: 0 0 var(--jf-space-sm);
}

.jf-produto__faq .jf-faq__item {
	max-width: var(--jf-measure);
	margin: 0 0 var(--jf-space-2xs);
	background-color: var(--jf-color-surface);
	border: 1px solid var(--jf-color-border);
	border-radius: var(--jf-radius-md);
}

.jf-produto__faq summary {
	padding: var(--jf-space-sm);
	min-height: var(--jf-tap-min);
	font-weight: var(--jf-weight-semibold);
	cursor: pointer;
}

.jf-produto__faq .jf-faq__item p {
	margin: 0;
	padding: 0 var(--jf-space-sm) var(--jf-space-sm);
	color: var(--jf-color-text-muted);
}

/* Sem seta de "sale" nem meta de categoria/SKU poluindo a coluna de decisão. */
.single-product div.product .product_meta {
	display: none;
}

.jf-produto__descricao > h2 {
	font-size: var(--jf-size-xl);
	margin: 0 0 var(--jf-space-sm);
}

/* ---------- Galeria com miniaturas ----------
 * As coroas importadas têm três fotos cada e só a primeira aparecia. Ângulos
 * diferentes são o que o §16 pede para permitir comparação real.
 */

.single-product .woocommerce-product-gallery__wrapper {
	margin: 0;
}

.single-product .flex-control-thumbs {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(4.5rem, 1fr));
	gap: var(--jf-space-2xs);
	margin: var(--jf-space-2xs) 0 0;
	padding: 0;
	list-style: none;
}

.single-product .flex-control-thumbs li {
	margin: 0;
	max-width: none;
	width: auto;
	float: none;
}

.single-product .flex-control-thumbs img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border: 1px solid var(--jf-color-border);
	border-radius: var(--jf-radius-md);
	opacity: 0.65;
	cursor: pointer;
	transition: opacity var(--jf-transition), border-color var(--jf-transition);
}

.single-product .flex-control-thumbs img:hover,
.single-product .flex-control-thumbs img.flex-active {
	opacity: 1;
	border-color: var(--jf-color-primary);
}

/* ---------- Selos junto ao CTA ---------- */

.jf-produto__selos {
	display: flex;
	flex-wrap: wrap;
	gap: var(--jf-space-2xs) var(--jf-space-md);
	margin: var(--jf-space-md) 0 0;
	padding: var(--jf-space-sm) 0 0;
	border-top: 1px solid var(--jf-color-border);
	list-style: none;
}

.jf-produto__selos li {
	display: flex;
	align-items: center;
	gap: var(--jf-space-3xs);
	max-width: none;
	margin: 0;
	color: var(--jf-color-text-muted);
	font-size: var(--jf-size-sm);
}

.jf-produto__selo-icone {
	display: inline-flex;
	color: var(--jf-color-success);
}

/* ================================================================
   Coluna de decisão — padrão da referência
   ================================================================ */

.jf-produto__categoria {
	display: block;
	margin: 0 0 var(--jf-space-2xs);
	color: var(--jf-color-primary);
	text-decoration: none;
}

.single-product div.product p.price,
.single-product div.product span.price {
	margin: 0;
	font-family: var(--jf-font-heading);
	font-size: var(--jf-size-3xl);
	line-height: var(--jf-leading-tight);
	letter-spacing: var(--jf-tracking-tight);
}

.jf-produto__parcelas {
	margin: var(--jf-space-3xs) 0 var(--jf-space-md);
	max-width: none;
	color: var(--jf-color-text-muted);
	font-size: var(--jf-size-sm);
}

/* ---------- Bloco da faixa, como o "cartão com mensagem" da referência ----------
 * Lá é um checkbox numa caixa de borda, antes do botão. Aqui o conteúdo é
 * maior — frases prontas e assinatura —, então continua dobrável; o que muda é
 * a moldura, que passa a ser a mesma. */

.jf-homenagem {
	border-radius: var(--jf-radius-md);
	margin: 0 0 var(--jf-space-md);
}

/* ---------- Garantias ---------- */

.jf-produto__garantias {
	margin: var(--jf-space-md) 0 0;
	padding: 0;
	list-style: none;
}

.jf-produto__garantias li {
	display: flex;
	align-items: flex-start;
	gap: var(--jf-space-2xs);
	max-width: none;
	margin: 0 0 var(--jf-space-2xs);
	color: var(--jf-color-text-muted);
	font-size: var(--jf-size-sm);
	line-height: var(--jf-leading-snug);
}

.jf-produto__garantias svg {
	flex: 0 0 auto;
	margin-top: 1px;
	color: var(--jf-color-success);
}

/* ---------- Acordeões ---------- */

.jf-detalhes {
	margin-top: var(--jf-space-lg);
	border-top: 1px solid var(--jf-color-border);
}

.jf-detalhe {
	border-bottom: 1px solid var(--jf-color-border);
}

.jf-detalhe > summary {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-height: var(--jf-tap-min);
	padding: var(--jf-space-sm) 2rem var(--jf-space-sm) 0;
	position: relative;
	cursor: pointer;
	list-style: none;
}

.jf-detalhe > summary::-webkit-details-marker {
	display: none;
}

/* Marcador próprio: um "+" que vira "−". O triângulo nativo não alinha com a
   coluna e muda de desenho entre navegadores. */
.jf-detalhe > summary::after {
	content: "+";
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	color: var(--jf-color-text-muted);
	font-size: var(--jf-size-xl);
	font-weight: var(--jf-weight-regular);
	line-height: 1;
}

.jf-detalhe[open] > summary::after {
	content: "−";
}

.jf-detalhe__titulo {
	margin: 0;
	font-family: var(--jf-font-heading);
	font-size: var(--jf-size-base);
	font-weight: var(--jf-weight-semibold);
	color: var(--jf-color-text);
}

.jf-detalhe__resumo {
	color: var(--jf-color-text-muted);
	font-size: var(--jf-size-sm);
}

.jf-detalhe__corpo {
	padding-bottom: var(--jf-space-md);
}

.jf-detalhe__corpo p,
.jf-detalhe__corpo li {
	max-width: var(--jf-measure);
	color: var(--jf-color-text-muted);
	font-size: var(--jf-size-sm);
	line-height: var(--jf-leading-normal);
}

.jf-detalhe__corpo ul {
	margin: 0;
	padding-left: var(--jf-space-md);
}

/* ---------- Faixa de entrega ---------- */

.jf-produto__entrega {
	display: flex;
	align-items: flex-start;
	gap: var(--jf-space-2xs);
	margin-top: var(--jf-space-md);
	padding: var(--jf-pad-md);
	background-color: var(--jf-color-surface-alt);
	border-radius: var(--jf-radius-md);
}

.jf-produto__entrega svg {
	flex: 0 0 auto;
	margin-top: 2px;
	color: var(--jf-color-primary);
}

.jf-produto__entrega div {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.jf-produto__entrega strong {
	font-size: var(--jf-size-sm);
}

.jf-produto__entrega span {
	color: var(--jf-color-text-muted);
	font-size: var(--jf-size-sm);
	line-height: var(--jf-leading-snug);
}

/* O carrossel de relacionadas ocupa a largura inteira da grade do produto. */
.single-product div.product > .jf-produto__relacionados {
	grid-column: 1 / -1;
	margin-top: var(--jf-space-xl);
	padding-top: var(--jf-space-xl);
	border-top: 1px solid var(--jf-color-border);
}

/* ================================================================
   Proporções da referência
   ================================================================ */

/* O título tinha o tamanho de um h1 de página (44px) e o preço também. Na
   referência a coluna de decisão é compacta: título ~22px, preço ~28px. */
.single-product .product_title {
	font-size: var(--jf-size-2xl);
	line-height: var(--jf-leading-tight);
	margin: 0 0 var(--jf-space-2xs);
}

.single-product div.product p.price,
.single-product div.product span.price {
	font-size: var(--jf-size-2xl);
}

.single-product .woocommerce-product-details__short-description {
	font-size: var(--jf-size-base);
	line-height: var(--jf-leading-normal);
}

/* Vão entre o fio de navegação e o produto. */
.single-product div.product {
	padding-top: 0;
}

.single-product .woocommerce-breadcrumb {
	margin-bottom: var(--jf-space-md);
}

/* A foto ocupa a coluna inteira; antes ficava mais estreita que ela e a lupa
   do zoom sobrava solta à direita. */
.single-product .woocommerce-product-gallery .flex-viewport,
.single-product .woocommerce-product-gallery__wrapper,
.single-product .woocommerce-product-gallery__image,
.single-product .woocommerce-product-gallery__image a,
.single-product .woocommerce-product-gallery__image img {
	display: block;
	width: 100%;
}

.single-product .woocommerce-product-gallery__image img {
	height: auto;
	aspect-ratio: 4 / 5;
	object-fit: cover;
}

.single-product .woocommerce-product-gallery__trigger {
	top: var(--jf-space-sm);
	right: var(--jf-space-sm);
	background-color: var(--jf-color-surface);
	border-radius: var(--jf-radius-pill);
}

/* Miniaturas numa fileira, com a ativa marcada. */
.single-product .flex-control-thumbs {
	grid-template-columns: repeat(6, minmax(0, 1fr));
}

/* As miniaturas existiam, mas com 7px de largura: o Storefront dá aos `li` uma
   largura percentual com especificidade alta, pensada para o layout de float.
   Numa célula de grid, esse percentual encolhe a miniatura a um ponto. Mesma
   neutralização do catálogo (armadilha nº 2 do CLAUDE.md). */
.single-product div.product .woocommerce-product-gallery .flex-control-thumbs li {
	width: 100% !important;
	margin: 0 !important;
	float: none !important;
}

/* Clearfix do Storefront na lista de miniaturas: no grid, o `::before` ocupava
   a primeira célula e as miniaturas começavam deslocadas para a direita.
   Armadilha nº 5 do CLAUDE.md, de novo. */
.single-product .flex-control-thumbs::before,
.single-product .flex-control-thumbs::after {
	content: none;
	display: none;
}