/* ============================================================
 * Bela Produções — woocommerce.css
 *
 * Ajustes visuais sobre o CSS nativo do Woo. Não recriar funcionalidade.
 * Carrega só quando o plugin WooCommerce está ativo.
 *
 * Ver docs/woocommerce/CHECKOUT_FLOW.md.
 * ============================================================ */

/* ============================================================
 * Layout da página da loja — full width centralizado.
 * Mata a sidebar fantasma (#secondary / .widget-area) que o WC
 * herdaria de temas tradicionais.
 * ============================================================ */
.bela-section--shop .widget-area,
.bela-section--shop #secondary,
.bela-section--shop .sidebar,
.woocommerce-page #secondary,
.woocommerce-page .widget-area {
	display: none !important;
}

.woocommerce-products-header,
.woocommerce-notices-wrapper {
	max-width: var(--bela-container);
	margin-left: auto;
	margin-right: auto;
}
.woocommerce-products-header__title.page-title {
	font-family: var(--bela-font-display);
	font-weight: 800;
	color: var(--bela-roxo-escuro);
	font-size: var(--bela-text-3xl);
	letter-spacing: -0.02em;
	margin: var(--bela-space-2) 0 var(--bela-space-5);
}

/* Toolbar (ordenação + resultado) */
.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-ordering {
	color: var(--bela-texto-suave);
	font-size: var(--bela-text-sm);
}
.woocommerce .woocommerce-ordering select {
	border: 1px solid var(--bela-borda);
	border-radius: var(--bela-radius-sm);
	padding: 8px 12px;
	background: #fff;
	font-family: var(--bela-font-ui);
	font-size: var(--bela-text-sm);
}

/* ============================================================
 * BELA_SHOP_TOOLBAR — Etapa 11.3
 *
 * O core do WooCommerce aplica `float:left` em .woocommerce-result-count
 * e `float:right` em .woocommerce-ordering. Esses floats interagiam com
 * o `display:grid` do ul.products causando um desalinhamento visual
 * (primeira coluna aparentemente vazia). Aqui zeramos os floats e
 * agrupamos os dois blocos num wrapper flex acima do grid. Ver também
 * `belaprod_wc_reorganize_shop_toolbar` em functions.php.
 * ============================================================ */
.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-ordering {
	float: none !important;
	margin: 0 !important;
}
.bela-shop-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--bela-space-2);
	margin: 0 0 var(--bela-space-4);
}
.bela-shop-toolbar .woocommerce-result-count {
	margin: 0 !important;
}
.bela-shop-toolbar .woocommerce-ordering {
	margin: 0 !important;
}
.woocommerce ul.products {
	clear: both;
}
.woocommerce ul.products li.first,
.woocommerce ul.products li.product.first {
	clear: none !important;
	grid-column-start: auto !important;
}
@media (max-width: 480px) {
	.bela-shop-toolbar {
		flex-direction: column;
		align-items: flex-start;
	}
	.bela-shop-toolbar .woocommerce-ordering {
		width: 100%;
	}
	.bela-shop-toolbar .woocommerce-ordering select {
		width: 100%;
	}
}
/* END BELA_SHOP_TOOLBAR */

/* ============================================================
 * BELA_WC_PRODUCTS_GRID_FIX — Etapa 11.4
 *
 * O CSS core do WooCommerce injeta clearfix legado em
 * `ul.products::before/::after` (content: " "; display: table; clear: both).
 * Isso fazia sentido na época do layout em `float`. Como agora usamos
 * `display: grid`, esses pseudo-elementos viram grid-items e ocupam
 * células invisíveis — a primeira e a última posição da grade ficam
 * "vazias". Cancelamos aqui os três seletores possíveis:
 *   1. `.woocommerce ul.products` (loja/categoria)
 *   2. `.woocommerce-page ul.products` (variantes com body class do WC)
 *   3. `ul.products.bela-grid--produtos` (vitrines do tema, defensivo)
 * ============================================================ */
.woocommerce ul.products::before,
.woocommerce ul.products::after,
.woocommerce-page ul.products::before,
.woocommerce-page ul.products::after,
ul.products.bela-grid--produtos::before,
ul.products.bela-grid--produtos::after {
	content: none !important;
	display: none !important;
}
/* END BELA_WC_PRODUCTS_GRID_FIX */

/* Breadcrumb */
.woocommerce-breadcrumb {
	font-size: var(--bela-text-xs);
	color: var(--bela-texto-suave);
	margin-bottom: var(--bela-space-4);
	letter-spacing: 0.02em;
}
.woocommerce-breadcrumb a {
	color: var(--bela-roxo);
}

/* ============================================================
 * Listagem de produtos (loja, categorias, busca, home).
 * ============================================================ */
.woocommerce ul.products,
ul.products.bela-grid--produtos {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--bela-space-5);
	margin: 0;
	padding: 0;
	list-style: none;
}
.woocommerce ul.products li.product,
ul.products.bela-grid--produtos li.product {
	width: auto !important;
	margin: 0 !important;
	float: none !important;
	background: #fff;
	border: 1px solid var(--bela-borda);
	border-radius: var(--bela-radius-lg);
	padding: var(--bela-space-4);
	transition: box-shadow var(--bela-dur-fast) var(--bela-ease), transform var(--bela-dur-fast) var(--bela-ease);
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--bela-space-2);
}
.woocommerce ul.products li.product:hover {
	box-shadow: var(--bela-shadow-md);
	transform: translateY(-2px);
}

/* Link em volta da imagem — vira o container 3:4 */
.woocommerce ul.products li.product a {
	text-decoration: none;
	color: inherit;
}
.woocommerce ul.products li.product > a:first-of-type {
	display: block;
}

/* === Tratamento crítico das imagens 3:4 com object-fit: contain === */
.woocommerce ul.products li.product img,
.woocommerce ul.products li.product a img {
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 4;
	object-fit: contain;
	background: var(--bela-lilas);
	border-radius: var(--bela-radius-md);
	margin: 0 0 var(--bela-space-3);
	padding: var(--bela-space-2);
	display: block;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product .woocommerce-loop-category__title {
	font-family: var(--bela-font-ui);
	font-weight: 700;
	font-size: var(--bela-text-base);
	color: var(--bela-texto);
	padding: 0;
	margin: 0 0 var(--bela-space-1);
	line-height: 1.3;
	min-height: 2.6em;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.woocommerce ul.products li.product .price {
	font-family: var(--bela-font-ui);
	font-weight: 800;
	font-size: var(--bela-text-lg);
	color: var(--bela-roxo-escuro);
	display: block;
	margin-bottom: var(--bela-space-3);
}
.woocommerce ul.products li.product .price del {
	color: var(--bela-texto-suave);
	font-weight: 400;
	margin-right: var(--bela-space-2);
}
.woocommerce ul.products li.product .price ins {
	background: transparent;
	color: var(--bela-laranja);
	text-decoration: none;
}

/* Botão "adicionar ao carrinho" como botão real, alinhado no rodapé */
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .add_to_cart_button {
	margin-top: auto;
	width: 100%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

/* Esconde badge "Oferta" nativo do WC — usamos o badge custom */
.woocommerce span.onsale,
.woocommerce ul.products li.product .onsale {
	display: none !important;
}

/* ============================================================
 * Cards de produto na HOME (front-page.php) — escopo paralelo.
 *
 * O body da home não recebe a classe `.woocommerce` (não é tela do
 * plugin), então as regras acima com prefixo `.woocommerce` não pegam.
 * Espelhamos o que importa visualmente: imagem 3:4, título, preço e
 * botão "Adicionar ao carrinho" como botão real.
 * ============================================================ */
ul.products.bela-grid--produtos li.product img,
ul.products.bela-grid--produtos li.product a img {
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 4;
	object-fit: contain;
	background: var(--bela-lilas);
	border-radius: var(--bela-radius-md);
	margin: 0 0 var(--bela-space-3);
	padding: var(--bela-space-2);
	display: block;
}
ul.products.bela-grid--produtos li.product a {
	text-decoration: none;
	color: inherit;
}
ul.products.bela-grid--produtos li.product > a:first-of-type {
	display: block;
}
ul.products.bela-grid--produtos li.product .woocommerce-loop-product__title,
ul.products.bela-grid--produtos li.product .woocommerce-loop-category__title {
	font-family: var(--bela-font-ui);
	font-weight: 700;
	font-size: var(--bela-text-base);
	color: var(--bela-texto);
	padding: 0;
	margin: 0 0 var(--bela-space-1);
	line-height: 1.3;
	min-height: 2.6em;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
ul.products.bela-grid--produtos li.product .price {
	font-family: var(--bela-font-ui);
	font-weight: 800;
	font-size: var(--bela-text-lg);
	color: var(--bela-roxo-escuro);
	display: block;
	margin-bottom: var(--bela-space-3);
}
ul.products.bela-grid--produtos li.product .price del {
	color: var(--bela-texto-suave);
	font-weight: 400;
	margin-right: var(--bela-space-2);
}
ul.products.bela-grid--produtos li.product .price ins {
	background: transparent;
	color: var(--bela-laranja);
	text-decoration: none;
}
ul.products.bela-grid--produtos li.product .button,
ul.products.bela-grid--produtos li.product .add_to_cart_button {
	margin-top: auto;
	width: 100%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--bela-roxo);
	color: #fff;
	font-family: var(--bela-font-ui);
	font-weight: 700;
	border: 0;
	border-radius: var(--bela-radius-md);
	padding: 14px 24px;
	min-height: 48px;
	letter-spacing: 0.01em;
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--bela-dur-fast) var(--bela-ease), transform var(--bela-dur-fast) var(--bela-ease);
}
ul.products.bela-grid--produtos li.product .button:hover,
ul.products.bela-grid--produtos li.product .add_to_cart_button:hover {
	background: var(--bela-roxo-escuro);
	transform: translateY(-1px);
	color: #fff;
}
ul.products.bela-grid--produtos li.product .added_to_cart {
	margin-top: var(--bela-space-2);
	font-size: var(--bela-text-xs);
	color: var(--bela-roxo);
	text-align: center;
}
/* Esconde badge "Oferta" nativo também na home (sem .woocommerce wrapper) */
ul.products.bela-grid--produtos li.product .onsale {
	display: none !important;
}

/* Badge custom (plugin belaproducoes-core) — empilha sem sobrepor */
.bela-badges {
	position: absolute;
	top: var(--bela-space-3);
	left: var(--bela-space-3);
	z-index: 2;
	display: flex;
	flex-direction: column;
	gap: var(--bela-space-1);
	align-items: flex-start;
	pointer-events: none;
}
.bela-badge {
	display: inline-flex;
	align-items: center;
	font-family: var(--bela-font-ui);
	font-weight: 700;
	font-size: var(--bela-text-xs);
	padding: 4px 10px;
	border-radius: 999px;
	letter-spacing: 0.02em;
	box-shadow: var(--bela-shadow-sm);
}
.bela-badge--lancamento    { background: var(--bela-amarelo);     color: var(--bela-texto); }
.bela-badge--oferta        { background: var(--bela-laranja);     color: #fff; }
.bela-badge--esgotando     { background: var(--bela-roxo-escuro); color: #fff; }
.bela-badge--esgotado      { background: var(--bela-texto-suave); color: #fff; }
.bela-badge--golden        { background: var(--bela-dourado);     color: var(--bela-texto); }
.bela-badge--especial      { background: var(--bela-roxo);        color: #fff; }
.bela-badge--personalizado { background: var(--bela-azul);        color: #fff; }

/* ============================================================
 * Página de produto único
 * ============================================================ */
.woocommerce div.product {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--bela-space-7);
	margin-top: var(--bela-space-5);
}
.woocommerce div.product .woocommerce-product-gallery {
	width: 100% !important;
	float: none !important;
	margin: 0 !important;
}
.woocommerce div.product .summary {
	width: 100% !important;
	float: none !important;
	margin: 0 !important;
}
.woocommerce div.product .woocommerce-tabs,
.woocommerce div.product .related,
.woocommerce div.product .upsells {
	grid-column: 1 / -1;
}

/* Galeria — imagem principal 3:4 com contain */
.woocommerce div.product .woocommerce-product-gallery__image,
.woocommerce div.product .woocommerce-product-gallery__wrapper {
	border-radius: var(--bela-radius-lg);
	background: var(--bela-lilas);
	overflow: hidden;
}
.woocommerce div.product .woocommerce-product-gallery__image a,
.woocommerce div.product .woocommerce-product-gallery__image img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 4;
	object-fit: contain;
	background: transparent;
	padding: var(--bela-space-4);
}
.woocommerce div.product .flex-control-thumbs {
	margin-top: var(--bela-space-3);
	display: grid !important;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--bela-space-2);
}
.woocommerce div.product .flex-control-thumbs li {
	width: auto !important;
	margin: 0 !important;
	float: none !important;
}
.woocommerce div.product .flex-control-thumbs li img {
	width: 100% !important;
	height: auto !important;
	aspect-ratio: 1 / 1;
	object-fit: contain;
	background: var(--bela-lilas);
	border-radius: var(--bela-radius-sm);
	padding: 4px;
	opacity: 0.7;
	transition: opacity var(--bela-dur-fast) var(--bela-ease);
}
.woocommerce div.product .flex-control-thumbs li img.flex-active,
.woocommerce div.product .flex-control-thumbs li img:hover {
	opacity: 1;
}

.woocommerce div.product .product_title {
	font-family: var(--bela-font-display);
	font-weight: 800;
	color: var(--bela-roxo-escuro);
	letter-spacing: -0.02em;
	font-size: var(--bela-text-3xl);
	line-height: 1.15;
	margin: 0 0 var(--bela-space-3);
}
.woocommerce div.product p.price,
.woocommerce div.product span.price {
	font-family: var(--bela-font-ui);
	font-weight: 800;
	font-size: var(--bela-text-2xl);
	color: var(--bela-roxo-escuro);
	display: block;
	margin: var(--bela-space-2) 0 var(--bela-space-4);
}
.woocommerce div.product .woocommerce-product-details__short-description {
	color: var(--bela-texto);
	font-size: var(--bela-text-base);
	line-height: 1.6;
	margin-bottom: var(--bela-space-5);
}
.woocommerce div.product .product_meta {
	border-top: 1px solid var(--bela-borda);
	padding-top: var(--bela-space-4);
	margin-top: var(--bela-space-5);
	color: var(--bela-texto-suave);
	font-size: var(--bela-text-sm);
}

/* Quantity input */
.woocommerce div.product form.cart .quantity input.qty {
	border: 1px solid var(--bela-borda);
	border-radius: var(--bela-radius-sm);
	padding: 10px 12px;
	min-height: 48px;
	width: 72px;
	font-size: var(--bela-text-base);
}

/* Tabs de descrição */
.woocommerce div.product .woocommerce-tabs ul.tabs {
	border-bottom: 1px solid var(--bela-borda);
	padding: 0;
	margin: var(--bela-space-6) 0 var(--bela-space-5);
}
.woocommerce div.product .woocommerce-tabs ul.tabs li {
	background: transparent;
	border: 0;
	border-radius: 0;
	padding: 0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after {
	display: none !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
	font-family: var(--bela-font-ui);
	font-weight: 700;
	color: var(--bela-texto-suave);
	padding: var(--bela-space-3) var(--bela-space-4);
	border-bottom: 2px solid transparent;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
	color: var(--bela-roxo-escuro);
	border-bottom-color: var(--bela-roxo);
}

/* ============================================================
 * Botões nativos do Woo — sempre roxo Bela
 * ============================================================ */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce ul.products li.product .button,
.woocommerce div.product form.cart .button,
.woocommerce div.product .single_add_to_cart_button {
	background: var(--bela-roxo) !important;
	color: #fff !important;
	font-family: var(--bela-font-ui);
	font-weight: 700;
	border: 0;
	border-radius: var(--bela-radius-md);
	padding: 14px 24px;
	min-height: 48px;
	letter-spacing: 0.01em;
	transition: background-color var(--bela-dur-fast) var(--bela-ease), transform var(--bela-dur-fast) var(--bela-ease);
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce ul.products li.product .button:hover,
.woocommerce div.product form.cart .button:hover,
.woocommerce div.product .single_add_to_cart_button:hover {
	background: var(--bela-roxo-escuro) !important;
	transform: translateY(-1px);
}

/* "Alt" do WC herda laranja apenas em contextos secundários (ex.: continuar comprando) */
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #respond input#submit.alt {
	background: var(--bela-roxo) !important;
}
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover { background: var(--bela-roxo-escuro) !important; }

/* Mensagens */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	border-top-color: var(--bela-roxo);
	border-radius: var(--bela-radius-md);
}
.woocommerce-message::before,
.woocommerce-info::before { color: var(--bela-roxo); }

/* Carrinho — apenas visual */
.woocommerce-cart table.shop_table,
.woocommerce-checkout table.shop_table {
	border-radius: var(--bela-radius-md);
	border-color: var(--bela-borda);
}
.woocommerce-cart .cart-collaterals .cart_totals h2,
.woocommerce-checkout #order_review_heading {
	font-family: var(--bela-font-display);
	color: var(--bela-roxo-escuro);
}
.woocommerce-cart .cart-collaterals .shop_table img,
.woocommerce-cart table.shop_table img {
	aspect-ratio: 1 / 1;
	object-fit: contain;
	background: var(--bela-lilas);
	border-radius: var(--bela-radius-sm);
	padding: 4px;
}

/* Checkout */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select {
	border: 1px solid var(--bela-borda);
	border-radius: var(--bela-radius-sm);
	padding: 10px 12px;
	font-size: 16px; /* evita zoom iOS */
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus {
	border-color: var(--bela-roxo);
	outline: 2px solid var(--bela-lilas);
}

/* ============================================================
 * Responsivo
 * ============================================================ */
@media (max-width: 1024px) {
	.woocommerce ul.products,
	ul.products.bela-grid--produtos { grid-template-columns: repeat(3, 1fr); }
	.woocommerce div.product { grid-template-columns: 1fr; gap: var(--bela-space-5); }
}
@media (max-width: 768px) {
	.woocommerce ul.products,
	ul.products.bela-grid--produtos { grid-template-columns: repeat(2, 1fr); }
	.woocommerce ul.products li.product,
	ul.products.bela-grid--produtos li.product { padding: var(--bela-space-3); }
	.woocommerce ul.products li.product .button,
	ul.products.bela-grid--produtos li.product .button { width: 100%; }
	.woocommerce ul.products li.product .woocommerce-loop-product__title,
	ul.products.bela-grid--produtos li.product .woocommerce-loop-product__title {
		font-size: var(--bela-text-sm);
		min-height: 2.4em;
	}
	.woocommerce div.product .product_title { font-size: var(--bela-text-2xl); }
}
@media (max-width: 430px) {
	.woocommerce ul.products,
	ul.products.bela-grid--produtos { grid-template-columns: 1fr 1fr; gap: var(--bela-space-3); }
}

/* ============================================================
 * BELA_CART_12_1A — Carrinho (Etapa 12.1A)
 *
 * Cobre AMBAS as implementações:
 *  - Clássico  (shortcode [woocommerce_cart])       → .woocommerce-cart
 *  - Cart Block (Gutenberg, WC 8+)                  → .wp-block-woocommerce-cart / .wc-block-cart
 *
 * Só ajusta visual. Não altera:
 *   - cálculo de preço, frete, quantidade;
 *   - lógica de cupom;
 *   - estrutura HTML/PHP dos templates.
 * ============================================================ */

/* Página do carrinho — respira melhor */
.woocommerce-cart .woocommerce,
.wp-block-woocommerce-cart {
	max-width: var(--bela-container);
	margin-left: auto;
	margin-right: auto;
	padding: var(--bela-space-5) var(--bela-space-4);
}

/* Título "Carrinho" — clássico e block */
.woocommerce-cart .entry-title,
.woocommerce-cart .page-title,
.wp-block-woocommerce-cart .wc-block-cart__main-title {
	font-family: var(--bela-font-display);
	font-weight: 800;
	color: var(--bela-roxo-escuro);
	font-size: var(--bela-text-3xl);
	letter-spacing: -0.02em;
	margin-bottom: var(--bela-space-5);
}

/* Card do resumo do carrinho (block) */
.wc-block-cart .wc-block-cart-items,
.wc-block-cart .wc-block-cart__sidebar,
.wc-block-components-sidebar {
	background: var(--bela-branco);
	border: 1px solid var(--bela-borda);
	border-radius: var(--bela-radius-md);
	padding: var(--bela-space-5);
	box-shadow: var(--bela-shadow-sm);
}

/* Linhas de itens — clássico */
.woocommerce-cart table.shop_table.cart {
	background: var(--bela-branco);
	border: 1px solid var(--bela-borda);
	border-radius: var(--bela-radius-md);
	overflow: hidden;
	border-collapse: separate;
	border-spacing: 0;
}
.woocommerce-cart table.shop_table.cart thead th {
	background: var(--bela-lilas);
	color: var(--bela-roxo-escuro);
	font-family: var(--bela-font-display);
	font-weight: 800;
	border: 0;
	padding: 14px 12px;
	font-size: var(--bela-text-sm);
	text-transform: uppercase;
	letter-spacing: 0.03em;
}
.woocommerce-cart table.shop_table.cart tbody td {
	border-top: 1px solid var(--bela-borda);
	padding: 14px 12px;
	vertical-align: middle;
}
.woocommerce-cart table.shop_table.cart .product-thumbnail img {
	width: 64px;
	height: 64px;
	object-fit: contain;
	background: var(--bela-lilas);
	border-radius: var(--bela-radius-sm);
	padding: 4px;
}
.woocommerce-cart table.shop_table.cart .product-name a {
	color: var(--bela-roxo-escuro);
	font-weight: 700;
}
.woocommerce-cart table.shop_table.cart .product-name a:hover {
	color: var(--bela-roxo);
	text-decoration: none;
}

/* Botão "remover item" (× no clássico) */
.woocommerce-cart table.shop_table .product-remove a.remove {
	background: var(--bela-lilas);
	color: var(--bela-roxo) !important;
	border-radius: 999px;
	width: 24px;
	height: 24px;
	line-height: 24px;
	font-size: 14px;
	font-weight: 700;
	display: inline-block;
	text-align: center;
	transition: background var(--bela-dur-fast) var(--bela-ease);
}
.woocommerce-cart table.shop_table .product-remove a.remove:hover {
	background: var(--bela-roxo);
	color: var(--bela-branco) !important;
}
/* Block equivalent (lixeira) */
.wc-block-cart-item__remove-link {
	color: var(--bela-roxo) !important;
	text-decoration: underline;
}

/* Input quantidade — clássico */
.woocommerce-cart .quantity input.qty {
	width: 64px;
	padding: 8px 6px;
	border: 1px solid var(--bela-borda);
	border-radius: var(--bela-radius-sm);
	font-family: var(--bela-font-ui);
	font-size: var(--bela-text-base);
	text-align: center;
	background: var(--bela-branco);
}
.woocommerce-cart .quantity input.qty:focus {
	border-color: var(--bela-roxo);
	outline: 2px solid var(--bela-lilas);
	outline-offset: 0;
}
/* Block quantity selector */
.wc-block-components-quantity-selector {
	border: 1px solid var(--bela-borda) !important;
	border-radius: var(--bela-radius-sm) !important;
	background: var(--bela-branco);
}
.wc-block-components-quantity-selector__button {
	color: var(--bela-roxo) !important;
	font-weight: 700;
}

/* Cupom — clássico */
.woocommerce-cart .checkout_coupon,
.woocommerce-cart .coupon {
	background: var(--bela-lilas);
	border: 1px solid var(--bela-borda);
	border-radius: var(--bela-radius-md);
	padding: var(--bela-space-4);
	margin-bottom: var(--bela-space-4);
}
.woocommerce-cart .coupon label,
.woocommerce-cart .checkout_coupon label {
	color: var(--bela-roxo-escuro);
	font-weight: 700;
}
.woocommerce-cart .coupon input#coupon_code {
	border: 1px solid var(--bela-borda);
	border-radius: var(--bela-radius-sm);
	padding: 10px 12px;
	background: var(--bela-branco);
	font-family: var(--bela-font-ui);
	font-size: var(--bela-text-base);
}

/* Totais — clássico */
.woocommerce-cart .cart-collaterals .cart_totals {
	background: var(--bela-branco);
	border: 1px solid var(--bela-borda);
	border-radius: var(--bela-radius-md);
	padding: var(--bela-space-5);
	box-shadow: var(--bela-shadow-sm);
}
.woocommerce-cart .cart-collaterals .cart_totals h2 {
	font-family: var(--bela-font-display);
	color: var(--bela-roxo-escuro);
	font-weight: 800;
	font-size: var(--bela-text-xl);
	margin-bottom: var(--bela-space-4);
}
.woocommerce-cart .cart-collaterals .cart_totals .shop_table {
	border: 0;
}
.woocommerce-cart .cart-collaterals .cart_totals .shop_table th,
.woocommerce-cart .cart-collaterals .cart_totals .shop_table td {
	background: transparent;
	border: 0;
	border-bottom: 1px dashed var(--bela-borda);
	padding: 10px 0;
}
.woocommerce-cart .cart-collaterals .cart_totals .order-total .amount {
	color: var(--bela-roxo-escuro);
	font-weight: 800;
	font-size: var(--bela-text-lg);
}

/* Aviso "frete calculado no checkout" */
.woocommerce-shipping-destination,
.wc-block-components-totals-shipping__via-flat-rate,
.wc-block-cart .wc-block-components-shipping-calculator-address {
	color: var(--bela-texto-suave);
	font-size: var(--bela-text-sm);
}

/* Botão principal "Finalizar compra" — clássico e block */
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button,
.wp-block-woocommerce-cart .wc-block-cart__submit-container .wc-block-components-button,
.wc-block-cart__submit-button {
	background: var(--bela-roxo) !important;
	color: var(--bela-branco) !important;
	font-family: var(--bela-font-ui) !important;
	font-weight: 700 !important;
	font-size: var(--bela-text-base) !important;
	padding: 14px 24px !important;
	border-radius: var(--bela-radius-md) !important;
	border: 0 !important;
	width: 100% !important;
	display: block !important;
	text-align: center !important;
	box-shadow: var(--bela-shadow-sm) !important;
	transition: background var(--bela-dur-fast) var(--bela-ease), transform var(--bela-dur-fast) var(--bela-ease) !important;
}
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover,
.wp-block-woocommerce-cart .wc-block-cart__submit-container .wc-block-components-button:hover,
.wc-block-cart__submit-button:hover {
	background: var(--bela-roxo-escuro) !important;
	transform: translateY(-1px);
}

/* Botão secundário "voltar/atualizar" */
.woocommerce-cart .button[name="update_cart"],
.woocommerce-cart .actions .button:not(.checkout-button) {
	background: var(--bela-branco) !important;
	color: var(--bela-roxo-escuro) !important;
	border: 1px solid var(--bela-borda) !important;
	border-radius: var(--bela-radius-md) !important;
	padding: 12px 20px !important;
	font-weight: 700 !important;
}
.woocommerce-cart .button[name="update_cart"]:hover,
.woocommerce-cart .actions .button:not(.checkout-button):hover {
	background: var(--bela-lilas) !important;
	color: var(--bela-roxo) !important;
}

/* Mensagens de erro/sucesso do carrinho */
.woocommerce-cart .woocommerce-message,
.woocommerce-cart .woocommerce-info,
.woocommerce-cart .woocommerce-error,
.wp-block-woocommerce-cart .wc-block-components-notice-banner {
	border-radius: var(--bela-radius-md);
	border-left-width: 4px;
}
.woocommerce-cart .woocommerce-message {
	background: #F0FDF4;
	border-left-color: #16A34A;
	color: #14532D;
}
.woocommerce-cart .woocommerce-info {
	background: var(--bela-lilas);
	border-left-color: var(--bela-roxo);
	color: var(--bela-roxo-escuro);
}

/* Responsivo carrinho */
@media (max-width: 768px) {
	.woocommerce-cart table.shop_table.cart thead {
		display: none; /* WC stack por linha no mobile */
	}
	.woocommerce-cart table.shop_table.cart tbody tr {
		display: block;
		border: 1px solid var(--bela-borda);
		border-radius: var(--bela-radius-md);
		padding: var(--bela-space-3);
		margin-bottom: var(--bela-space-3);
		background: var(--bela-branco);
	}
	.woocommerce-cart table.shop_table.cart tbody td {
		display: block;
		border: 0;
		padding: 6px 0;
	}
	.woocommerce-cart .wc-proceed-to-checkout {
		padding: 0;
	}
}

/* ============================================================
 * BELA_CHECKOUT_12_1B — Checkout (Etapa 12.1B)
 *
 * Cobre AMBAS:
 *  - Clássico  ([woocommerce_checkout])           → .woocommerce-checkout, #order_review
 *  - Checkout Block (WC 8+)                       → .wp-block-woocommerce-checkout / .wc-block-checkout
 *
 * ATENÇÃO Mercado Pago 8.8.1:
 *   - NÃO ajustar visual dentro dos containers de gateway
 *     (.mp-checkout-container, iframes .payment_method_*).
 *   - Ajustar apenas o SELECT/BOX que envolve o gateway, nunca
 *     os controles internos do MP (podem depender de posicionamento).
 * ============================================================ */

/* Container do checkout */
.woocommerce-checkout .woocommerce,
.wp-block-woocommerce-checkout {
	max-width: var(--bela-container);
	margin-left: auto;
	margin-right: auto;
	padding: var(--bela-space-5) var(--bela-space-4);
}

/* Título "Finalizar compra" */
.woocommerce-checkout .entry-title,
.woocommerce-checkout .page-title,
.wp-block-woocommerce-checkout .wc-block-checkout__main-title {
	font-family: var(--bela-font-display);
	font-weight: 800;
	color: var(--bela-roxo-escuro);
	font-size: var(--bela-text-3xl);
	letter-spacing: -0.02em;
	margin-bottom: var(--bela-space-5);
}

/* Cabeçalhos de seção do checkout — âncoras visuais (Contato/Entrega/Pagamento/Revisão) */
.woocommerce-checkout .woocommerce-billing-fields > h3,
.woocommerce-checkout .woocommerce-shipping-fields > h3,
.woocommerce-checkout .woocommerce-additional-fields > h3,
.woocommerce-checkout #order_review_heading,
.wp-block-woocommerce-checkout .wc-block-components-checkout-step__title {
	font-family: var(--bela-font-display);
	font-weight: 800;
	color: var(--bela-roxo-escuro);
	font-size: var(--bela-text-xl);
	letter-spacing: -0.01em;
	margin: var(--bela-space-6) 0 var(--bela-space-3);
	padding-bottom: var(--bela-space-2);
	border-bottom: 2px solid var(--bela-lilas);
}

/* Numeração das seções — só nos títulos clássicos (Block já tem seu próprio badge) */
.woocommerce-checkout .woocommerce-billing-fields > h3::before,
.woocommerce-checkout .woocommerce-shipping-fields > h3::before,
.woocommerce-checkout #order_review_heading::before {
	content: "";
	display: inline-block;
	width: 8px;
	height: 8px;
	background: var(--bela-roxo);
	border-radius: 999px;
	margin-right: 10px;
	vertical-align: middle;
	transform: translateY(-2px);
}

/* Campos — clássico (já parcialmente estilizado antes; refino) */
.woocommerce-checkout form .form-row {
	margin-bottom: var(--bela-space-4);
}
.woocommerce-checkout form .form-row label {
	color: var(--bela-texto);
	font-weight: 600;
	font-size: var(--bela-text-sm);
	margin-bottom: 4px;
	display: inline-block;
}
.woocommerce-checkout form .form-row .required {
	color: var(--bela-roxo);
	text-decoration: none;
	font-weight: 700;
}
.woocommerce-checkout form .form-row input.input-text,
.woocommerce-checkout form .form-row textarea,
.woocommerce-checkout form .form-row select,
.woocommerce-checkout .select2-container .select2-selection {
	border: 1px solid var(--bela-borda) !important;
	border-radius: var(--bela-radius-sm) !important;
	padding: 12px 14px !important;
	font-size: 16px !important; /* evita zoom iOS */
	font-family: var(--bela-font-ui);
	background: var(--bela-branco);
	color: var(--bela-texto);
	min-height: 44px;
}
.woocommerce-checkout form .form-row input.input-text:focus,
.woocommerce-checkout form .form-row textarea:focus,
.woocommerce-checkout form .form-row select:focus,
.woocommerce-checkout .select2-container--focus .select2-selection {
	border-color: var(--bela-roxo) !important;
	outline: 2px solid var(--bela-lilas) !important;
	outline-offset: 0;
}
.woocommerce-checkout form .form-row.woocommerce-invalid input.input-text {
	border-color: #DC2626 !important;
}
.woocommerce-checkout form .form-row.woocommerce-validated input.input-text {
	border-color: #16A34A !important;
}

/* Campos — Checkout Block */
.wc-block-components-text-input input,
.wc-block-components-select select,
.wc-block-components-country-input select,
.wc-block-components-state-input select {
	border: 1px solid var(--bela-borda) !important;
	border-radius: var(--bela-radius-sm) !important;
	font-size: 16px !important;
	background: var(--bela-branco);
	min-height: 44px;
}
.wc-block-components-text-input input:focus,
.wc-block-components-select select:focus {
	border-color: var(--bela-roxo) !important;
	box-shadow: 0 0 0 2px var(--bela-lilas) !important;
	outline: 0 !important;
}
.wc-block-components-text-input label,
.wc-block-components-select label {
	color: var(--bela-texto) !important;
}

/* Card do resumo do pedido — clássico (#order_review) */
.woocommerce-checkout #order_review {
	background: var(--bela-branco);
	border: 1px solid var(--bela-borda);
	border-radius: var(--bela-radius-md);
	padding: var(--bela-space-5);
	box-shadow: var(--bela-shadow-sm);
}
.woocommerce-checkout #order_review table.shop_table {
	border: 0;
}
.woocommerce-checkout #order_review table.shop_table th,
.woocommerce-checkout #order_review table.shop_table td {
	border: 0;
	border-bottom: 1px dashed var(--bela-borda);
	padding: 10px 0;
}
.woocommerce-checkout #order_review .order-total .amount {
	color: var(--bela-roxo-escuro);
	font-weight: 800;
	font-size: var(--bela-text-lg);
}

/* Card do resumo do pedido — Block */
.wp-block-woocommerce-checkout .wc-block-components-sidebar,
.wp-block-woocommerce-checkout .wp-block-woocommerce-checkout-order-summary-block {
	background: var(--bela-branco);
	border: 1px solid var(--bela-borda);
	border-radius: var(--bela-radius-md);
	padding: var(--bela-space-5);
	box-shadow: var(--bela-shadow-sm);
}

/* Seleção de pagamento (Mercado Pago) — só a moldura, nunca o interior */
.woocommerce-checkout #payment {
	background: transparent;
	border: 0;
	padding: 0;
}
.woocommerce-checkout #payment ul.payment_methods {
	background: var(--bela-branco);
	border: 1px solid var(--bela-borda);
	border-radius: var(--bela-radius-md);
	padding: var(--bela-space-3);
	margin-bottom: var(--bela-space-4);
	list-style: none;
}
.woocommerce-checkout #payment ul.payment_methods li {
	padding: var(--bela-space-3);
	border-bottom: 1px solid var(--bela-borda);
}
.woocommerce-checkout #payment ul.payment_methods li:last-child {
	border-bottom: 0;
}
.woocommerce-checkout #payment ul.payment_methods li label {
	color: var(--bela-texto);
	font-weight: 700;
	cursor: pointer;
}
.woocommerce-checkout #payment ul.payment_methods li input[type="radio"]:checked + label {
	color: var(--bela-roxo-escuro);
}
/* Caixa de instruções do gateway (Pix/cartão/boleto Mercado Pago) — apenas margem/borda,
   NÃO estilizar cor de fundo nem tipografia interna para não brigar com o CSS do MP. */
.woocommerce-checkout #payment div.payment_box {
	background: var(--bela-lilas);
	border: 0;
	border-radius: var(--bela-radius-sm);
	margin: var(--bela-space-3) 0 0;
	padding: var(--bela-space-3);
	color: var(--bela-roxo-escuro);
}
.woocommerce-checkout #payment div.payment_box::before {
	display: none; /* remove seta cinza padrão do Woo */
}

/* Botão "Finalizar pedido" — clássico e Block */
.woocommerce-checkout #place_order,
.wp-block-woocommerce-checkout .wc-block-components-checkout-place-order-button {
	background: var(--bela-roxo) !important;
	color: var(--bela-branco) !important;
	font-family: var(--bela-font-ui) !important;
	font-weight: 700 !important;
	font-size: var(--bela-text-base) !important;
	padding: 16px 24px !important;
	border-radius: var(--bela-radius-md) !important;
	border: 0 !important;
	width: 100% !important;
	display: block !important;
	text-align: center !important;
	box-shadow: var(--bela-shadow-sm) !important;
	transition: background var(--bela-dur-fast) var(--bela-ease), transform var(--bela-dur-fast) var(--bela-ease) !important;
	margin-top: var(--bela-space-4) !important;
}
.woocommerce-checkout #place_order:hover,
.wp-block-woocommerce-checkout .wc-block-components-checkout-place-order-button:hover {
	background: var(--bela-roxo-escuro) !important;
	transform: translateY(-1px);
}

/* Cupom no checkout — clássico */
.woocommerce-checkout .woocommerce-form-coupon-toggle {
	background: var(--bela-lilas);
	border-left: 4px solid var(--bela-roxo);
	border-radius: var(--bela-radius-sm);
	padding: 12px 14px;
	color: var(--bela-roxo-escuro);
	margin-bottom: var(--bela-space-4);
}
.woocommerce-checkout .woocommerce-form-coupon-toggle a {
	color: var(--bela-roxo);
	font-weight: 700;
}
.woocommerce-checkout .checkout_coupon {
	background: var(--bela-branco);
	border: 1px solid var(--bela-borda);
	border-radius: var(--bela-radius-md);
	padding: var(--bela-space-4);
	margin-bottom: var(--bela-space-4);
}

/* Termos e condições */
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper {
	background: var(--bela-lilas);
	border-radius: var(--bela-radius-sm);
	padding: var(--bela-space-3);
	margin: var(--bela-space-4) 0;
	color: var(--bela-roxo-escuro);
	font-size: var(--bela-text-sm);
}

/* Notícias/avisos do checkout */
.woocommerce-checkout .woocommerce-notices-wrapper .woocommerce-error,
.woocommerce-checkout .woocommerce-notices-wrapper .woocommerce-info,
.woocommerce-checkout .woocommerce-notices-wrapper .woocommerce-message,
.wp-block-woocommerce-checkout .wc-block-components-notice-banner {
	border-radius: var(--bela-radius-md);
	border-left-width: 4px;
}

/* Página "Pedido recebido" — apenas visual, sem tocar em botões de pagamento restante */
.woocommerce-order-received .woocommerce-order,
.woocommerce-order-received .woocommerce {
	max-width: 760px;
	margin: 0 auto;
	padding: var(--bela-space-5) var(--bela-space-4);
}
.woocommerce-order-received .woocommerce-thankyou-order-received {
	font-family: var(--bela-font-display);
	color: var(--bela-roxo-escuro);
	font-weight: 800;
	font-size: var(--bela-text-2xl);
	padding: var(--bela-space-4);
	background: var(--bela-lilas);
	border-radius: var(--bela-radius-md);
	text-align: center;
	margin-bottom: var(--bela-space-5);
}
.woocommerce-order-received ul.woocommerce-order-overview {
	background: var(--bela-branco);
	border: 1px solid var(--bela-borda);
	border-radius: var(--bela-radius-md);
	padding: var(--bela-space-4);
	list-style: none;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: var(--bela-space-3);
	margin-bottom: var(--bela-space-5);
}
.woocommerce-order-received ul.woocommerce-order-overview li {
	border: 0;
	color: var(--bela-texto-suave);
	font-size: var(--bela-text-sm);
	text-transform: uppercase;
	letter-spacing: 0.05em;
}
.woocommerce-order-received ul.woocommerce-order-overview li strong {
	display: block;
	font-family: var(--bela-font-display);
	font-size: var(--bela-text-lg);
	color: var(--bela-roxo-escuro);
	margin-top: 4px;
	letter-spacing: 0;
	text-transform: none;
}

/* Responsivo checkout */
@media (max-width: 900px) {
	.woocommerce-checkout .woocommerce-billing-fields,
	.woocommerce-checkout .woocommerce-shipping-fields,
	.woocommerce-checkout #order_review_heading,
	.woocommerce-checkout #order_review {
		width: 100%;
		float: none;
	}
	.woocommerce-checkout #order_review {
		margin-top: var(--bela-space-5);
	}
}
@media (max-width: 480px) {
	.woocommerce-checkout form .form-row {
		width: 100% !important;
		float: none !important;
	}
}