/**
 * product-summary.css — Componentes do resumo do produto.
 *
 * Aplica-se ao conteúdo do wrap do BeBuilder que tem o
 * `.mcb-wrap-background-overlay` (coluna de preço e detalhes do produto,
 * template "Simple product template"). Os estilos herdados do tema e dos
 * plugins são normalizados aqui para que o cartão siga o design system:
 *
 *   contexto (breadcrumb) → título → preço → compra → ações → suporte →
 *   meios de pagamento → descrição → meta
 *
 * Regras:
 *   - só variáveis de tokens.css — nenhum valor mágico;
 *   - hierarquia por tipografia e espaço, não por cor decorativa;
 *   - um único CTA primário (compra); todo o resto é secundário/ghost;
 *   - `!important` apenas onde o tema/box do WooCommerce força o valor.
 *
 * @package arthome
 */

/* ==========================================================================
   0. Cartão — o wrap branco que envolve todo o resumo
   ========================================================================== */

#Content .mfn-single-product-tmpl-builder .mcb-wrap-inner:has(.column_product_price) {
	box-sizing: border-box;
	max-width: 100%;
	display: flex;
	flex-direction: column;
	gap: var(--ah-space-4);
	padding: var(--ah-card-pad);
	background: var(--ah-surface);
	border: 1px solid var(--ah-line);
	border-radius: var(--ah-radius-lg);
	box-shadow: var(--ah-shadow-sm);
}

/* O overlay do wrap é absoluto; garante que não entra no fluxo. */
#Content .mfn-single-product-tmpl-builder .mcb-wrap-inner:has(.column_product_price) > .mcb-wrap-background-overlay {
	pointer-events: none;
}

#Content .mfn-single-product-tmpl-builder .mcb-wrap-inner:has(.column_product_price) .mcb-column-inner {
	margin: 0;
}

/* Separação entre grupos (ritmo: 16px base, 24–32px entre blocos). */
#Content .mfn-single-product-tmpl-builder .column_product_price,
#Content .mfn-single-product-tmpl-builder .column_product_cart_button {
	margin-top: var(--ah-space-2);
}

#Content .mfn-single-product-tmpl-builder .column_product_content,
#Content .mfn-single-product-tmpl-builder .column_product_meta {
	margin-top: var(--ah-space-4);
}

/* ==========================================================================
   1. Contexto — breadcrumb
   ========================================================================== */

#Content .mfn-single-product-tmpl-builder .mfn-woocommerce-breadcrumb,
#Content .mfn-single-product-tmpl-builder nav.woocommerce-breadcrumb {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--ah-space-2);
	margin: 0;
	font-family: var(--ah-font-sans);
	font-size: var(--ah-text-sm);
	line-height: var(--ah-leading-snug);
	color: var(--ah-muted);
}

#Content .mfn-single-product-tmpl-builder .mfn-woocommerce-breadcrumb a,
#Content .mfn-single-product-tmpl-builder nav.woocommerce-breadcrumb a {
	color: var(--ah-body);
	text-decoration: none;
	transition: color var(--ah-motion);
}

#Content .mfn-single-product-tmpl-builder .mfn-woocommerce-breadcrumb a:hover,
#Content .mfn-single-product-tmpl-builder nav.woocommerce-breadcrumb a:hover {
	color: var(--ah-brand);
}

#Content .mfn-single-product-tmpl-builder .mfn-woocommerce-breadcrumb span,
#Content .mfn-single-product-tmpl-builder nav.woocommerce-breadcrumb span {
	color: var(--ah-muted);
	opacity: 0.7;
}

/* ==========================================================================
   2. Título
   ========================================================================== */

#Content .mfn-single-product-tmpl-builder .column_product_title .title {
	margin: 0;
	font-family: var(--ah-font-display);
	font-size: clamp(1.75rem, 1.35rem + 1.6vw, 2.25rem);
	font-weight: var(--ah-weight-medium);
	line-height: var(--ah-leading-tight);
	letter-spacing: -0.01em;
	color: var(--ah-ink);
	overflow-wrap: break-word;
}

/* ==========================================================================
   3. Painel de preço (woo-custom-installments)
      preço principal → parcelamento → Pix → economia
   ========================================================================== */

#Content .mfn-single-product-tmpl-builder .column_product_price .price {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--ah-space-2);
	margin: 0;
	font-family: var(--ah-font-sans);
}

#Content .mfn-single-product-tmpl-builder .woo-custom-installments-group {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--ah-space-2);
}

#Content .mfn-single-product-tmpl-builder .woo-custom-installments-price {
	font-family: var(--ah-font-sans);
	font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.25rem);
	font-weight: var(--ah-weight-semibold);
	line-height: var(--ah-leading-tight);
	color: var(--ah-ink);
}

/* Preço antigo/riscado em promoções */
#Content .mfn-single-product-tmpl-builder .price del {
	color: var(--ah-muted);
	font-size: var(--ah-text-md);
}

/* Linha de parcelamento + badges numa única linha de informação */
#Content .mfn-single-product-tmpl-builder .woo-custom-installments-card-container {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--ah-space-2) var(--ah-space-3);
}

#Content .mfn-single-product-tmpl-builder .woo-custom-installments-details-without-fee {
	display: inline-flex;
	align-items: center;
	gap: var(--ah-space-2);
	font-size: var(--ah-text-sm);
	line-height: var(--ah-leading-snug);
	color: var(--ah-muted);
}

#Content .mfn-single-product-tmpl-builder .woo-custom-installments-details-without-fee .icon-class {
	color: var(--ah-muted);
	opacity: 0.85;
}

/* Badge "À vista … no Pix" — informação, não ação */
#Content .mfn-single-product-tmpl-builder .woo-custom-installments-offer {
	display: inline-flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: var(--ah-space-1) var(--ah-space-2);
	padding: var(--ah-space-2) var(--ah-space-3);
	border-radius: var(--ah-radius-md);
	background: var(--ah-brand-soft);
	color: var(--ah-brand);
	font-size: var(--ah-text-sm);
	font-weight: var(--ah-weight-medium);
	line-height: var(--ah-leading-snug);
	white-space: nowrap;
}

#Content .mfn-single-product-tmpl-builder .woo-custom-installments-offer .icon-class {
	color: var(--ah-brand);
}

/* Badge "Economize …" — selo pequeno; não pode competir com o CTA de compra */
#Content .mfn-single-product-tmpl-builder .woo-custom-installments-economy-pix-badge {
	display: inline-flex;
	align-items: center;
	gap: var(--ah-space-1);
	padding: var(--ah-space-1) var(--ah-space-3);
	border-radius: var(--ah-radius-pill);
	background: var(--ah-brand);
	color: var(--ah-on-brand);
	font-size: var(--ah-text-xs);
	font-weight: var(--ah-weight-medium);
	line-height: var(--ah-leading-snug);
}

/* ==========================================================================
   4. Disponibilidade
   ========================================================================== */

#Content .mfn-single-product-tmpl-builder .mfn-product-add-to-cart {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--ah-space-3);
}

#Content .mfn-single-product-tmpl-builder .mfn-product-add-to-cart .stock {
	order: 1;
	flex: 1 1 100%;
	display: inline-flex;
	align-items: center;
	gap: var(--ah-space-2);
	margin: 0;
	font-family: var(--ah-font-sans);
	font-size: var(--ah-text-sm);
	line-height: var(--ah-leading-snug);
	color: var(--ah-muted);
}

#Content .mfn-single-product-tmpl-builder .mfn-product-add-to-cart .stock::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: var(--ah-radius-pill);
	background: var(--ah-brand);
}

#Content .mfn-single-product-tmpl-builder .mfn-product-add-to-cart .stock.out-of-stock::before {
	background: var(--ah-line-strong);
}

/* ==========================================================================
   5. Linha de compra — quantidade + CTA primário + lista de desejos
   ========================================================================== */

#Content .mfn-single-product-tmpl-builder .mfn-product-add-to-cart form.cart {
	order: 2;
	flex: 1 1 100%;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--ah-space-3);
	margin: 0;
}

/* Quantidade */
#Content .mfn-single-product-tmpl-builder .mfn-product-add-to-cart .quantity {
	order: 1;
	flex: 0 0 auto;
	width: auto;
	height: var(--ah-control-h);
	display: inline-flex;
	align-items: stretch;
	border: 1px solid var(--ah-line-strong);
	border-radius: var(--ah-radius-md);
	background: var(--ah-surface);
	overflow: hidden;
}

/* O tema posiciona os +/− absolutamente dentro do stepper; aqui são itens
   normais do flex para o controle ter largura previsível. */
#Content .mfn-single-product-tmpl-builder .mfn-product-add-to-cart .quantity .quantity-change {
	position: static;
	top: auto;
	left: auto;
	right: auto;
	width: var(--ah-space-7);
	height: 100%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--ah-body);
	text-decoration: none;
	transition: color var(--ah-motion), background var(--ah-motion);
}

#Content .mfn-single-product-tmpl-builder .mfn-product-add-to-cart .quantity .quantity-change:hover {
	color: var(--ah-brand);
	background: var(--ah-sand);
}

#Content .mfn-single-product-tmpl-builder .mfn-product-add-to-cart .quantity .qty {
	order: 0;
	width: 48px;
	height: 100%;
	padding: 0 !important;
	border: 0;
	background: transparent;
	text-align: center;
	font-family: var(--ah-font-sans);
	font-size: var(--ah-text-md);
	color: var(--ah-ink);
	appearance: textfield;
	-moz-appearance: textfield;
}

#Content .mfn-single-product-tmpl-builder .mfn-product-add-to-cart .quantity .qty::-webkit-outer-spin-button,
#Content .mfn-single-product-tmpl-builder .mfn-product-add-to-cart .quantity .qty::-webkit-inner-spin-button {
	appearance: none;
	-webkit-appearance: none;
	margin: 0;
}

/* CTA primário — única ação sólida do cartão. */
#Content .mfn-single-product-tmpl-builder .mfn-product-add-to-cart .single_add_to_cart_button {
	order: 3;
	flex: 1 1 auto;
	height: var(--ah-control-h);
	padding: 0 var(--ah-space-4) !important;
	border: 0;
	border-radius: var(--ah-radius-md);
	background: var(--ah-brand) !important;
	color: var(--ah-on-brand) !important;
	font-family: var(--ah-font-sans);
	font-size: var(--ah-text-md);
	font-weight: var(--ah-weight-medium);
	line-height: 1;
	letter-spacing: 0.01em;
	white-space: nowrap;
	cursor: pointer;
	transition: background var(--ah-motion), transform var(--ah-motion);
}

#Content .mfn-single-product-tmpl-builder .mfn-product-add-to-cart .single_add_to_cart_button:hover {
	background: var(--ah-brand-deep) !important;
	color: var(--ah-on-brand) !important;
}

#Content .mfn-single-product-tmpl-builder .mfn-product-add-to-cart .single_add_to_cart_button:active {
	transform: translateY(1px);
}

/* Lista de desejos (wishlist por cookie do tema) — botão de ícone.
   Legado: a wishlist activa é a do YITH (ver secção 6); estas regras ficam
   como fallback caso a wishlist do tema volte a ser activada. */
#Content .mfn-single-product-tmpl-builder .mfn-product-add-to-cart a.mfn-wish-button {
	order: 2;
	flex: 0 0 auto;
	width: var(--ah-control-h);
	height: var(--ah-control-h);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--ah-line-strong);
	border-radius: var(--ah-radius-pill);
	background: var(--ah-surface);
	text-decoration: none;
	transition: border-color var(--ah-motion), background var(--ah-motion);
}

#Content .mfn-single-product-tmpl-builder .mfn-product-add-to-cart a.mfn-wish-button:hover {
	border-color: var(--ah-brand);
	background: var(--ah-brand-soft);
}

/* Vence o <style> inline do SVG do tema. */
#Content .mfn-single-product-tmpl-builder .mfn-product-add-to-cart a.mfn-wish-button .path {
	fill: none;
	stroke: var(--ah-body);
}

#Content .mfn-single-product-tmpl-builder .mfn-product-add-to-cart a.mfn-wish-button:hover .path {
	stroke: var(--ah-brand);
}

#Content .mfn-single-product-tmpl-builder .mfn-product-add-to-cart a.mfn-wish-button.loved .path {
	fill: var(--ah-brand);
	stroke: var(--ah-brand);
}

/* ==========================================================================
   6. Ações secundárias — "Parcelamento" e "Comparar" (ghost)
   ========================================================================== */

#Content .mfn-single-product-tmpl-builder .mfn-product-add-to-cart button.wci-open-popup {
	order: 3;
	flex: 0 1 auto;
	height: var(--ah-control-h-sm);
	margin: 0;
	padding: 0 var(--ah-space-5);
	border: 1px solid var(--ah-brand-line);
	border-radius: var(--ah-radius-md);
	background: var(--ah-surface);
	color: var(--ah-brand);
	font-family: var(--ah-font-sans);
	font-size: var(--ah-text-sm);
	font-weight: var(--ah-weight-medium);
	line-height: 1;
	letter-spacing: 0.02em;
	cursor: pointer;
	transition: background var(--ah-motion), border-color var(--ah-motion), color var(--ah-motion);
}

#Content .mfn-single-product-tmpl-builder .mfn-product-add-to-cart button.wci-open-popup:hover {
	background: var(--ah-brand-soft);
	border-color: var(--ah-brand);
}

#Content .mfn-single-product-tmpl-builder .mfn-product-add-to-cart a.compare.button {
	order: 4;
	flex: 0 1 auto;
	height: var(--ah-control-h-sm);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: 0 var(--ah-space-5) !important;
	border: 1px solid var(--ah-line-strong);
	border-radius: var(--ah-radius-md);
	background: var(--ah-surface) !important;
	color: var(--ah-ink) !important;
	font-family: var(--ah-font-sans);
	font-size: var(--ah-text-sm);
	font-weight: var(--ah-weight-medium);
	line-height: 1;
	text-decoration: none;
	transition: background var(--ah-motion), border-color var(--ah-motion), color var(--ah-motion);
}

#Content .mfn-single-product-tmpl-builder .mfn-product-add-to-cart a.compare.button:hover {
	background: var(--ah-sand) !important;
	border-color: var(--ah-line-strong);
	color: var(--ah-ink) !important;
}

/* Lista de desejos (YITH Wishlist) — mesmo tratamento das ações secundárias */
#Content .mfn-single-product-tmpl-builder .mfn-product-add-to-cart .yith-wcwl-add-to-wishlist {
	order: 5;
	flex: 0 1 auto;
	margin: 0;
	line-height: 0;
}

#Content .mfn-single-product-tmpl-builder .mfn-product-add-to-cart .yith-wcwl-add-to-wishlist a.add_to_wishlist,
#Content .mfn-single-product-tmpl-builder .mfn-product-add-to-cart .yith-wcwl-add-to-wishlist a.button {
	height: var(--ah-control-h-sm);
	display: inline-flex;
	align-items: center;
	gap: var(--ah-space-2);
	margin: 0;
	padding: 0 var(--ah-space-5);
	border: 1px solid var(--ah-line-strong);
	border-radius: var(--ah-radius-md);
	background: var(--ah-surface) !important;
	color: var(--ah-ink) !important;
	font-family: var(--ah-font-sans);
	font-size: var(--ah-text-sm);
	font-weight: var(--ah-weight-medium);
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
	transition: background var(--ah-motion), border-color var(--ah-motion), color var(--ah-motion);
}

#Content .mfn-single-product-tmpl-builder .mfn-product-add-to-cart .yith-wcwl-add-to-wishlist a.add_to_wishlist:hover,
#Content .mfn-single-product-tmpl-builder .mfn-product-add-to-cart .yith-wcwl-add-to-wishlist a.button:hover {
	background: var(--ah-sand) !important;
	border-color: var(--ah-line-strong);
	color: var(--ah-ink) !important;
}

#Content .mfn-single-product-tmpl-builder .mfn-product-add-to-cart .yith-wcwl-add-to-wishlist .yith-wcwl-icon {
	color: var(--ah-body);
	font-size: var(--ah-text-md);
}

/* ==========================================================================
   7. Suporte — CTA contextual de WhatsApp (uma única vez)
   ========================================================================== */

#Content .mfn-single-product-tmpl-builder .mfn-product-add-to-cart a:has(> .wa-order-button) {
	order: 6;
	flex: 1 1 100%;
	display: block;
}

#Content .mfn-single-product-tmpl-builder .mfn-product-add-to-cart button.wa-order-button {
	width: fit-content;
	max-width: 100%;
	min-width: 240px;
	height: var(--ah-control-h-sm);
	margin: 0;
	padding: 0 var(--ah-space-5) !important;
	border: 1px solid var(--ah-brand-line);
	border-radius: var(--ah-radius-md);
	background: var(--ah-sand) !important;
	color: var(--ah-brand) !important;
	font-family: var(--ah-font-sans);
	font-size: var(--ah-text-sm);
	font-weight: var(--ah-weight-medium);
	line-height: 1;
	cursor: pointer;
	transition: background var(--ah-motion), border-color var(--ah-motion);
}

/* O plugin injecta via ::before o ícone do WhatsApp em SVG branco — invisível
   sobre fundo claro; fica só o texto contextual. */
#Content .mfn-single-product-tmpl-builder .mfn-product-add-to-cart button.wa-order-button::before {
	content: none !important;
}

#Content .mfn-single-product-tmpl-builder .mfn-product-add-to-cart button.wa-order-button:hover {
	background: var(--ah-brand-soft) !important;
	border-color: var(--ah-brand);
}

/* ==========================================================================
   8. Meios de pagamento — [ah_payments]
   ========================================================================== */

#Content .mfn-single-product-tmpl-builder .column_product_content ~ .ah-payments,
#Content .mfn-single-product-tmpl-builder .ah-payments {
	display: flex;
	flex-direction: column;
	gap: var(--ah-space-3);
}

#Content .mfn-single-product-tmpl-builder .ah-payments__label {
	margin: 0;
	font-family: var(--ah-font-sans);
	font-size: var(--ah-text-sm);
	line-height: var(--ah-leading-snug);
	color: var(--ah-muted);
}

#Content .mfn-single-product-tmpl-builder .ah-payments__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--ah-space-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

#Content .mfn-single-product-tmpl-builder .ah-payments__item {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 40px;
	padding: var(--ah-space-1) var(--ah-space-3);
	background: var(--ah-surface);
	border: 1px solid var(--ah-line);
	border-radius: var(--ah-radius-sm);
}

#Content .mfn-single-product-tmpl-builder .ah-payments__item img {
	display: block;
	width: auto;
	height: 22px;
	object-fit: contain;
}

/* ==========================================================================
   9. Descrição
   ========================================================================== */

#Content .mfn-single-product-tmpl-builder .column_product_content .woocommerce-product-details__description {
	font-family: var(--ah-font-sans);
	font-size: var(--ah-text-md);
	line-height: var(--ah-leading-normal);
	color: var(--ah-body);
}

/* Produtos sem descrição não deixam bloco vazio a quebrar o ritmo. */
#Content .mfn-single-product-tmpl-builder .column_product_content:has(.mfn-default-content-buider:empty):has(.the_content_wrapper:empty) {
	display: none;
}

/* ==========================================================================
   10. Meta — categorias / SKU (nota de rodapé)
   ========================================================================== */

#Content .mfn-single-product-tmpl-builder .column_product_meta .mfn_product_meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--ah-space-2) var(--ah-space-5);
	margin: 0;
	padding-top: var(--ah-space-5);
	border-top: 1px solid var(--ah-line);
	font-family: var(--ah-font-sans);
	font-size: var(--ah-text-sm);
	line-height: var(--ah-leading-snug);
	color: var(--ah-muted);
}

#Content .mfn-single-product-tmpl-builder .column_product_meta .mfn_product_meta a {
	color: var(--ah-body);
	text-decoration: none;
	transition: color var(--ah-motion);
}

#Content .mfn-single-product-tmpl-builder .column_product_meta .mfn_product_meta a:hover {
	color: var(--ah-brand);
}

/* ==========================================================================
   11. Utilitários — blocos injetados e variações
   ========================================================================== */

/* Tabela de preços por quantidade (advanced-dynamic-pricing) só quando existe.
   Nota: o span tem whitespace quando vazio, por isso :empty não serve —
   considera-se vazio enquanto não tiver conteúdo elemento (a tabela). */
#Content .mfn-single-product-tmpl-builder .mfn-product-add-to-cart .wdp_bulk_table_content:not(:has(> *)) {
	display: none;
}

#Content .mfn-single-product-tmpl-builder .mfn-product-add-to-cart .wdp_bulk_table_content:not(:empty) {
	order: 7;
	flex: 1 1 100%;
}

/* Produtos variáveis */
#Content .mfn-single-product-tmpl-builder .mfn-product-add-to-cart .mfn-variations-wrapper,
#Content .mfn-single-product-tmpl-builder .mfn-product-add-to-cart form.cart table.variations {
	flex: 1 1 100%;
}

#Content .mfn-single-product-tmpl-builder .mfn-product-add-to-cart .mfn-vr {
	border-color: var(--ah-line);
}

#Content .mfn-single-product-tmpl-builder .mfn-product-add-to-cart .mfn-vr label,
#Content .mfn-single-product-tmpl-builder .mfn-product-add-to-cart table.variations label {
	font-family: var(--ah-font-sans);
	font-weight: var(--ah-weight-medium);
	color: var(--ah-body);
}

/* Acessibilidade — foco visível em todos os controlos do cartão */
#Content .mfn-single-product-tmpl-builder :is(a, button, input):focus-visible {
	outline: 2px solid var(--ah-focus-ring);
	outline-offset: 2px;
}

/* ==========================================================================
   12. Responsivo
   ========================================================================== */

@media (max-width: 768px) {
	#Content .mfn-single-product-tmpl-builder .mfn-product-add-to-cart button.wci-open-popup,
	#Content .mfn-single-product-tmpl-builder .mfn-product-add-to-cart a.compare.button {
		flex: 1 1 calc(50% - var(--ah-space-3));
		justify-content: center;
	}

	#Content .mfn-single-product-tmpl-builder .mfn-product-add-to-cart button.wa-order-button {
		min-width: 0;
		width: 100%;
	}
}

@media (max-width: 600px) {
	/* CTA de compra em largura total quando o cartão é estreito. */
	#Content .mfn-single-product-tmpl-builder .mfn-product-add-to-cart .single_add_to_cart_button {
		flex: 1 1 100%;
	}

	#Content .mfn-single-product-tmpl-builder .column_product_meta .mfn_product_meta {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--ah-space-2);
	}
}