/* ============================================================
   INTER.PLANAR · PONTE WOOCOMMERCE
   Arquivo: /wp-content/themes/interplanar/interplanar-woo.css

   Não declara paleta nem fonte. Usa os tokens que já estão no
   :root do style.css (--accent, --surface-2, --border,
   --font-display, --font-mono, --radius) e aplica o mesmo
   visual do design system no markup que o WooCommerce gera.

   Equivalências:
     ul.products li.product   ->  .product-card
     a.button / #place_order  ->  .btn
     table.shop_table         ->  .cart-table
     .cart_totals             ->  .cart-summary
     .form-row input          ->  .field input
     .woocommerce-ordering    ->  select.sort

   Carregar DEPOIS do style.css e DEPOIS do woocommerce.css.
   ============================================================ */

/* ── 1. Botões (espelha .btn) ────────────────────────────── */

.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce-page a.button,
.woocommerce-page button.button,
.woocommerce-page input.button,
.wp-element-button,
.wp-block-button__link {
	display: inline-block;
	font-family: var(--font-mono);
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	padding: var(--s-3) var(--s-6);
	border: 1px solid var(--accent);
	background: transparent;
	color: var(--accent);
	cursor: pointer;
	border-radius: var(--radius);
	line-height: 1.2;
	text-shadow: none;
	transition: background .15s ease, color .15s ease, box-shadow .15s ease;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce-page a.button:hover,
.woocommerce-page button.button:hover,
.woocommerce-page input.button:hover,
.wp-element-button:hover,
.wp-block-button__link:hover {
	background: var(--accent);
	color: var(--preto);
	text-decoration: none;
	box-shadow: 0 0 24px var(--accent-glow);
}

/* Ações principais nascem sólidas, como .btn--solid */
.woocommerce .single_add_to_cart_button,
.woocommerce .checkout-button,
.woocommerce #place_order,
.woocommerce .wc-forward.checkout {
	background: var(--accent);
	color: var(--preto);
	border-color: var(--accent);
}

.woocommerce .single_add_to_cart_button:hover,
.woocommerce .checkout-button:hover,
.woocommerce #place_order:hover {
	box-shadow: 0 0 32px var(--accent-glow);
}

/* Ações secundárias ficam fantasma, como .btn--ghost */
.woocommerce button[name="update_cart"],
.woocommerce button[name="apply_coupon"] {
	border-color: var(--border-strong);
	color: var(--text);
}

.woocommerce button[name="update_cart"]:hover,
.woocommerce button[name="apply_coupon"]:hover {
	background: transparent;
	border-color: var(--accent);
	color: var(--accent);
	box-shadow: none;
}

.woocommerce a.button.disabled,
.woocommerce button.button:disabled,
.woocommerce button.button:disabled[disabled] {
	border-color: var(--cinza);
	color: var(--cinza);
	background: transparent;
	box-shadow: none;
	opacity: 1;
	cursor: not-allowed;
}

/* ── 2. Grade da loja (espelha .products-grid + .product-card) */

.woocommerce ul.products,
.woocommerce-page ul.products {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: var(--s-5);
	margin: 0 0 var(--s-7);
	padding: 0;
	list-style: none;
}

.woocommerce ul.products::before,
.woocommerce ul.products::after { content: none; }

.woocommerce ul.products li.product {
	width: 100%;
	margin: 0;
	float: none;
	background: var(--surface-2);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	padding: 0 0 var(--s-5);
	transition: border-color .15s ease, transform .15s ease;
}

.woocommerce ul.products li.product:hover {
	border-color: var(--accent);
	transform: translateY(-2px);
}

.woocommerce ul.products li.product a img {
	width: 100%;
	height: auto;
	margin: 0 0 var(--s-4);
	background: var(--preto);
	border-radius: 0;
	transition: transform .3s ease;
}

.woocommerce ul.products li.product:hover a img { transform: scale(1.04); }

.woocommerce ul.products li.product > *:not(a:first-of-type):not(.onsale) {
	padding-left: var(--s-5);
	padding-right: var(--s-5);
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-family: var(--font-display);
	font-size: 0.95rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	color: var(--text-bright);
	line-height: 1.25;
	margin: 0 0 var(--s-3);
	padding-top: 0;
	padding-bottom: 0;
}

.woocommerce ul.products li.product .price,
.woocommerce div.product p.price,
.woocommerce div.product span.price {
	font-size: 0.92rem;
	font-weight: 700;
	color: var(--accent);
	margin: 0 0 var(--s-3);
}

.woocommerce ul.products li.product .price del,
.woocommerce div.product p.price del {
	color: var(--text-dim);
	font-size: 0.8em;
	margin-right: var(--s-2);
	opacity: 1;
}

.woocommerce ul.products li.product .price ins,
.woocommerce div.product p.price ins {
	background: transparent;
	color: var(--accent);
	text-decoration: none;
}

.woocommerce ul.products li.product .button {
	margin-top: auto;
	width: calc(100% - (var(--caixa) * 2));
	text-align: center;
	padding: var(--s-3) 0;
	font-size: 0.72rem;
}

.woocommerce span.onsale {
	background: var(--accent);
	color: var(--preto);
	font-family: var(--font-mono);
	font-size: 0.62rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	border-radius: 2px;
	min-height: 0;
	min-width: 0;
	line-height: 1;
	padding: var(--s-2) var(--s-3);
	top: 12px;
	left: 12px;
	right: auto;
	margin: 0;
	z-index: 2;
}

/* ── 3. Toolbar da loja (espelha .shop-toolbar) ──────────── */

.woocommerce .woocommerce-result-count {
	font-family: var(--font-mono);
	font-size: 0.7rem;
	letter-spacing: 0.1em;
	color: var(--text-dim);
	margin-bottom: var(--s-6);
}

.woocommerce .woocommerce-ordering select {
	font-family: var(--font-mono);
	font-size: 0.72rem;
	background: var(--surface-2);
	color: var(--text);
	border: 1px solid var(--border-strong);
	padding: var(--s-2) var(--s-3);
	border-radius: 2px;
}

.woocommerce-breadcrumb {
	font-family: var(--font-mono);
	font-size: 0.68rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--text-dim);
	margin: 0 0 var(--s-5);
}

.woocommerce-breadcrumb a { color: var(--text-dim); }
.woocommerce-breadcrumb a:hover { color: var(--accent); text-decoration: none; }

/* ── 4. Produto individual ───────────────────────────────── */

.woocommerce div.product .product_title {
	font-family: var(--font-display);
	font-weight: 800;
	text-transform: uppercase;
	color: var(--text-bright);
	margin-bottom: var(--s-4);
}

.woocommerce div.product div.images img {
	background: var(--preto);
	border: 1px solid var(--border);
	border-radius: var(--radius);
}

.woocommerce div.product .product_meta {
	font-family: var(--font-mono);
	font-size: 0.7rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--text-dim);
	border-top: 1px solid var(--border);
	padding-top: var(--s-5);
	margin-top: var(--s-5);
}

.woocommerce div.product .product_meta a { color: var(--text); }
.woocommerce div.product .product_meta a:hover { color: var(--accent); }

.woocommerce .quantity input.qty {
	background: var(--surface-2);
	border: 1px solid var(--border-strong);
	border-radius: var(--radius);
	color: var(--text-bright);
	font-family: var(--font-mono);
	padding: var(--s-3) var(--s-2);
	height: auto;
}

/* Variações */
.woocommerce div.product form.cart .variations label {
	font-size: 0.7rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--text-dim);
}

.woocommerce div.product form.cart .variations td { border: 0; }

.woocommerce div.product form.cart .variations select {
	background: var(--surface-2);
	border: 1px solid var(--border-strong);
	border-radius: var(--radius);
	color: var(--text-bright);
	font-family: var(--font-mono);
	padding: var(--s-3) var(--s-3);
}

/* Abas */
.woocommerce div.product .woocommerce-tabs ul.tabs {
	padding: 0;
	margin: 0 0 var(--s-5);
	border-bottom: 1px solid var(--border);
}

.woocommerce div.product .woocommerce-tabs ul.tabs::before { border: 0; }

.woocommerce div.product .woocommerce-tabs ul.tabs li {
	background: transparent;
	border: 0;
	border-radius: 0;
	margin: 0 var(--s-5) 0 0;
	padding: 0;
	box-shadow: none;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after { content: none; }

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
	display: inline-block;
	font-family: var(--font-mono);
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--text-dim);
	padding: var(--s-3) 0;
	border-bottom: 2px solid transparent;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a,
.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover {
	color: var(--accent);
	border-bottom-color: var(--accent);
	text-decoration: none;
}

.woocommerce .related > h2,
.woocommerce .upsells > h2,
.woocommerce .cross-sells > h2 {
	border-top: 1px solid var(--border);
	padding-top: var(--s-7);
	margin-bottom: var(--s-5);
}

/* ── 5. Tabelas (espelha .cart-table) ────────────────────── */

.woocommerce table.shop_table,
.woocommerce-page table.shop_table,
.woocommerce table.shop_attributes {
	width: 100%;
	border-collapse: collapse;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: var(--text);
}

.woocommerce table.shop_table th {
	text-align: left;
	font-family: var(--font-mono);
	font-size: 0.66rem;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--text-dim);
	padding: var(--s-3) var(--s-3);
	border-bottom: 1px solid var(--border-strong);
	border-top: 0;
}

.woocommerce table.shop_table td,
.woocommerce table.shop_attributes td,
.woocommerce table.shop_attributes th {
	padding: var(--s-4) var(--s-3);
	border-top: 0;
	border-bottom: 1px solid var(--border);
	vertical-align: middle;
	font-size: 0.85rem;
}

.woocommerce table.shop_table .product-name a {
	color: var(--text-bright);
	font-weight: 700;
}

.woocommerce table.shop_table .product-name a:hover { color: var(--accent); }

.woocommerce table.shop_table img {
	width: 56px;
	height: 56px;
	object-fit: cover;
	border: 1px solid var(--border);
	border-radius: 2px;
}

.woocommerce table.shop_table .amount { color: var(--accent); font-weight: 700; }

.woocommerce table.shop_table td.actions {
	background: transparent;
	padding-top: var(--s-5);
}

.woocommerce a.remove {
	color: var(--text-dim) !important;
	font-weight: 400;
	line-height: 1;
}

.woocommerce a.remove:hover {
	background: transparent !important;
	color: var(--accent) !important;
}

/* ── 6. Totais e caixas (espelha .cart-summary) ──────────── */

.woocommerce .cart_totals,
.woocommerce-checkout #order_review,
.woocommerce .woocommerce-customer-details address,
.woocommerce form.checkout_coupon,
.woocommerce form.login,
.woocommerce form.register {
	border: 1px solid var(--border);
	background: var(--surface-2);
	border-radius: var(--radius);
	padding: var(--caixa);
}

.woocommerce .cart_totals h2,
.woocommerce-checkout #order_review_heading {
	font-family: var(--font-display);
	font-size: 1.1rem;
	text-transform: uppercase;
	color: var(--text-bright);
	margin-bottom: var(--s-4);
}

.woocommerce .cart_totals table.shop_table td,
.woocommerce .cart_totals table.shop_table th {
	padding: var(--s-2) 0;
	border-bottom: 0;
}

.woocommerce .cart_totals .order-total th,
.woocommerce .cart_totals .order-total td {
	border-top: 1px solid var(--border-strong);
	padding-top: var(--s-4);
	font-size: 1.05rem;
}

.woocommerce .cart_totals .order-total .amount { color: var(--accent); }

.woocommerce-checkout #payment {
	background: transparent;
	border-radius: 0;
}

.woocommerce-checkout #payment ul.payment_methods {
	border-bottom: 1px solid var(--border);
	padding: 0 0 var(--s-5);
}

.woocommerce-checkout #payment ul.payment_methods li {
	font-family: var(--font-mono);
	font-size: 0.82rem;
	color: var(--text-bright);
	list-style: none;
}

.woocommerce-checkout #payment div.payment_box {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	color: var(--text);
	font-size: 0.8rem;
}

.woocommerce-checkout #payment div.payment_box::before {
	border-bottom-color: var(--surface);
}

.woocommerce-checkout #payment div.form-row.place-order { padding: var(--s-5) 0 0; }

/* ── 7. Formulários (espelha .field) ─────────────────────── */

.woocommerce form .form-row label,
.woocommerce-page form .form-row label,
.woocommerce legend {
	display: block;
	font-family: var(--font-mono);
	font-size: 0.7rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--text-dim);
	margin-bottom: var(--s-2);
}

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce-page form .form-row input.input-text,
.select2-container--default .select2-selection--single {
	width: 100%;
	background: var(--surface-2);
	border: 1px solid var(--border-strong);
	border-radius: var(--radius);
	color: var(--text-bright);
	font-family: var(--font-mono);
	font-size: 0.9rem;
	padding: var(--s-3) var(--s-4);
	height: auto;
}

.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus {
	outline: none;
	border-color: var(--accent);
	box-shadow: 0 0 0 1px var(--accent);
}

.woocommerce form .form-row.woocommerce-invalid input.input-text { border-color: #ff3b3b; }
.woocommerce form .form-row.woocommerce-validated input.input-text { border-color: var(--accent); }

.select2-container--default .select2-selection--single .select2-selection__rendered {
	color: var(--text-bright);
	line-height: 1.6;
	padding-left: 0;
}

.select2-dropdown,
.select2-container--default .select2-search--dropdown .select2-search__field {
	background: var(--surface-2);
	border-color: var(--border-strong);
	color: var(--text-bright);
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
	background: var(--accent);
	color: var(--preto);
}

/* ── 8. Avisos (espelha .form-feedback) ──────────────────── */

.woocommerce-info,
.woocommerce-message,
.woocommerce-error,
.woocommerce-noreviews {
	border: 1px solid var(--accent);
	border-top-width: 1px;
	background: var(--accent-dim);
	color: var(--accent);
	border-radius: var(--radius);
	font-family: var(--font-mono);
	font-size: 0.82rem;
	padding: var(--s-4) var(--s-5) var(--s-4) 46px;
	list-style: none;
}

.woocommerce-info::before,
.woocommerce-message::before,
.woocommerce-noreviews::before {
	color: var(--accent);
	top: 14px;
	left: 18px;
}

.woocommerce-error {
	border-color: #ff3b3b;
	background: rgba(255, 59, 59, 0.1);
	color: #ff6b6b;
}

.woocommerce-error::before { color: #ff6b6b; top: 14px; left: 18px; }

.woocommerce-info .button,
.woocommerce-message .button {
	font-size: 0.68rem;
	padding: var(--s-2) var(--s-4);
}

/* Carrinho vazio (espelha .cart-empty) */
.woocommerce .cart-empty,
.woocommerce .wc-empty-cart-message {
	border: 1px dashed var(--border-strong);
	border-radius: var(--radius);
	background: transparent;
	padding: var(--s-7) var(--s-5);
	text-align: center;
	color: var(--text-dim);
}

.woocommerce .cart-empty::before,
.woocommerce .wc-empty-cart-message::before { content: none; }

/* ── 9. Minha conta ──────────────────────────────────────── */

.woocommerce-account .woocommerce-MyAccount-navigation ul {
	list-style: none;
	margin: 0;
	padding: 0;
	border: 1px solid var(--border);
	background: var(--surface-2);
	border-radius: var(--radius);
	overflow: hidden;
}

.woocommerce-account .woocommerce-MyAccount-navigation li {
	border-bottom: 1px solid var(--border);
}

.woocommerce-account .woocommerce-MyAccount-navigation li:last-child { border-bottom: 0; }

.woocommerce-account .woocommerce-MyAccount-navigation li a {
	display: block;
	font-family: var(--font-mono);
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--text-dim);
	padding: var(--s-4) var(--s-4);
}

.woocommerce-account .woocommerce-MyAccount-navigation li a:hover,
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a {
	background: var(--accent-dim);
	color: var(--accent);
	text-decoration: none;
}

/* ── 10. Paginação ───────────────────────────────────────── */

.woocommerce nav.woocommerce-pagination ul {
	border: 0;
	display: flex;
	gap: var(--s-2);
	justify-content: center;
}

.woocommerce nav.woocommerce-pagination ul li {
	border: 0;
	margin: 0;
	overflow: visible;
}

.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
	background: transparent;
	border: 1px solid var(--border-strong);
	border-radius: 2px;
	color: var(--text);
	font-family: var(--font-mono);
	font-size: 0.72rem;
	padding: var(--s-3) var(--s-4);
	min-width: 40px;
}

.woocommerce nav.woocommerce-pagination ul li a:hover,
.woocommerce nav.woocommerce-pagination ul li span.current {
	background: var(--accent);
	border-color: var(--accent);
	color: var(--preto);
}

/* ── 11. Responsivo ──────────────────────────────────────── */

@media (max-width: 700px) {
	.woocommerce ul.products {
		grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
		gap: var(--s-4);
	}

	.woocommerce table.shop_table th,
	.woocommerce table.shop_table td { padding: var(--s-3) var(--s-2); font-size: 0.8rem; }

	.woocommerce .cart_totals,
	.woocommerce-checkout #order_review { padding: var(--s-5); }
}

/* ============================================================
   12. CART / CHECKOUT BLOCKS (Gutenberg)
   O carrinho e o checkout do site usam os blocos novos do Woo
   (wc-block-*), nao o shortcode classico. As regras de
   table.shop_table e .cart_totals la em cima NAO alcancam
   estas telas. Este bloco cobre elas.
   ============================================================ */

.wc-block-components-title,
.wp-block-woocommerce-cart-order-summary-block h2,
.wc-block-cart__submit-container + *,
.wc-block-components-checkout-step__title {
	font-family: var(--font-display) !important;
	color: var(--text-bright);
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

/* Caixa do resumo do pedido */
.wp-block-woocommerce-cart-order-summary-block,
.wc-block-components-sidebar .wc-block-components-panel,
.wc-block-checkout__sidebar .wc-block-components-totals-wrapper {
	background: var(--surface-2);
	border: 1px solid var(--border);
	border-radius: var(--radius);
}

.wc-block-components-totals-wrapper {
	border-top-color: var(--border);
	padding: var(--caixa);
}

/* Linhas de total */
.wc-block-components-totals-item {
	color: var(--text);
	font-family: var(--font-mono);
}

.wc-block-components-totals-item__label { color: var(--text-dim); }

.wc-block-components-totals-item__value,
.wc-block-components-formatted-money-amount,
.wc-block-components-product-price {
	color: var(--accent);
	font-weight: 700;
}

.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
	font-family: var(--font-display);
	font-size: 1.4rem;
}

/* Itens do carrinho */
.wc-block-cart-items,
.wc-block-cart-items__row {
	border-color: var(--border) !important;
	color: var(--text);
}

.wc-block-cart-items__header {
	color: var(--text-dim);
	font-family: var(--font-mono);
	font-size: 0.66rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	border-bottom: 1px solid var(--border-strong);
}

.wc-block-components-product-name {
	color: var(--text-bright) !important;
	font-weight: 700;
	text-decoration: none;
}

.wc-block-components-product-name:hover { color: var(--accent) !important; }

.wc-block-components-product-metadata,
.wc-block-components-product-details {
	color: var(--text-dim);
	font-size: 0.75rem;
}

.wc-block-cart-item__image img {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: 2px;
}

/* Controle de quantidade */
.wc-block-components-quantity-selector {
	background: var(--bg);
	border: 1px solid var(--border-strong);
	border-radius: 2px;
}

.wc-block-components-quantity-selector__input {
	background: transparent;
	color: var(--text-bright);
	font-family: var(--font-mono);
}

.wc-block-components-quantity-selector__button {
	background: transparent;
	color: var(--accent);
	font-family: var(--font-mono);
}

.wc-block-cart-item__remove-link {
	color: var(--text-dim) !important;
	text-transform: uppercase;
	font-size: 0.7rem;
	letter-spacing: 0.1em;
}

.wc-block-cart-item__remove-link:hover { color: var(--accent) !important; }

/* Botoes dos blocos */
.wc-block-components-button:not(.is-link),
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button {
	background: var(--accent) !important;
	border: 1px solid var(--accent) !important;
	border-radius: var(--radius) !important;
	color: var(--preto) !important;
	font-family: var(--font-mono) !important;
	font-size: 0.8rem !important;
	font-weight: 700 !important;
	letter-spacing: 0.15em !important;
	text-transform: uppercase !important;
	padding: var(--s-3) var(--s-6) !important;
	box-shadow: none !important;
}

.wc-block-components-button:not(.is-link):hover {
	box-shadow: 0 0 32px var(--accent-glow) !important;
}

.wc-block-components-button.is-link {
	color: var(--accent) !important;
	text-decoration: none;
}

/* ── Campos dos blocos ──────────────────────────────────────
   Atencao ao prefixo: o container do select e
   .wc-blocks-components-* (com S), diferente do resto, que e
   .wc-block-components-*. Errar isso deixa o campo branco.

   O padding NAO e livre aqui: o rotulo flutua por cima do
   campo em position absolute, entao o campo precisa de folga
   no topo. Por isso 1.5em em cima e 0.5em embaixo, e nao a
   escala normal. Mexer nisso sobrepoe rotulo e valor.
   ──────────────────────────────────────────────────────── */

.wc-block-components-text-input input,
.wc-block-components-textarea,
.wc-block-components-combobox-control input,
.wc-block-components-address-form input {
	background: var(--surface-2) !important;
	border: 1px solid var(--border-strong) !important;
	border-radius: var(--radius) !important;
	color: var(--text-bright) !important;
	font-family: var(--font-mono) !important;
	padding: 1.5em var(--s-4) 0.5em !important;
}

/* Container do select: e ele que vem branco de fabrica */
.wc-blocks-components-select,
.wc-blocks-components-select__container,
.wc-block-components-combobox,
.wc-block-components-combobox-control,
.components-combobox-control,
.components-combobox-control__suggestions-container {
	background: var(--surface-2) !important;
	border-color: var(--border-strong) !important;
	border-radius: var(--radius) !important;
	color: var(--text-bright) !important;
}

.wc-blocks-components-select__container {
	border: 1px solid var(--border-strong) !important;
}

.wc-blocks-components-select__select,
.wc-blocks-components-select select,
.wc-block-components-country-input select,
.wc-block-components-state-input select {
	background: transparent !important;
	border: 0 !important;
	color: var(--text-bright) !important;
	font-family: var(--font-mono) !important;
	padding: 1.5em var(--s-4) 0.5em !important;
}

/* A lista aberta do select e desenhada pelo sistema:
   sem estas duas linhas ela volta a ser branca. */
.wc-blocks-components-select__select option,
.wc-block-components-combobox option,
select option {
	background: var(--surface) !important;
	color: var(--text-bright) !important;
}

/* Seta do select */
.wc-blocks-components-select__expand,
.wc-blocks-components-select__container svg {
	fill: var(--accent) !important;
	color: var(--accent) !important;
}

/* Sugestoes do combobox de pais */
.components-form-token-field__suggestions-list,
.wc-block-components-combobox-control__suggestions-container ul {
	background: var(--surface) !important;
	border: 1px solid var(--border-strong) !important;
	color: var(--text) !important;
}

.components-form-token-field__suggestion:hover,
.components-form-token-field__suggestion.is-selected {
	background: var(--accent-dim) !important;
	color: var(--accent) !important;
}

/* ── Checkboxes e radios ─────────────────────────────────── */

.wc-block-components-checkbox__input,
.wc-block-components-radio-control__input,
input[type="checkbox"],
input[type="radio"] {
	appearance: none !important;
	-webkit-appearance: none !important;
	background: var(--surface-2) !important;
	border: 1px solid var(--border-strong) !important;
	border-radius: 2px !important;
	width: 20px !important;
	height: 20px !important;
	cursor: pointer !important;
	position: relative !important;
	flex-shrink: 0 !important;
}

input[type="radio"] { border-radius: 50% !important; }

.wc-block-components-checkbox__input:checked,
.wc-block-components-radio-control__input:checked,
input[type="checkbox"]:checked,
input[type="radio"]:checked {
	background: var(--accent) !important;
	border-color: var(--accent) !important;
}

.wc-block-components-checkbox__input:checked::after,
input[type="checkbox"]:checked::after {
	content: "" !important;
	position: absolute !important;
	left: 6px !important;
	top: 2px !important;
	width: 5px !important;
	height: 10px !important;
	border: solid var(--preto) !important;
	border-width: 0 2px 2px 0 !important;
	transform: rotate(45deg) !important;
}

/* A marca de check que o Woo desenha por cima */
.wc-block-components-checkbox__mark {
	fill: var(--preto) !important;
	color: var(--preto) !important;
}

.wc-block-components-checkbox__input:focus,
input[type="checkbox"]:focus,
input[type="radio"]:focus {
	outline: 2px solid var(--accent) !important;
	outline-offset: 2px !important;
}

.wc-block-components-text-input label,
.wc-block-components-select__label,
.wc-blocks-components-select__label,
.wc-block-components-checkbox__label,
.wc-block-components-radio-control__label {
	color: var(--text-dim) !important;
	font-family: var(--font-mono) !important;
	background: transparent !important;
}

/* Rotulo flutuante encolhe quando o campo tem valor.
   Sem line-height controlado ele encosta no texto digitado. */
.wc-block-components-text-input.is-active label,
.wc-blocks-components-select__label {
	font-size: 0.68rem !important;
	line-height: 1.2 !important;
	letter-spacing: 0.1em !important;
	text-transform: uppercase !important;
}

.wc-block-components-text-input.is-active label {
	color: var(--accent) !important;
}

.wc-block-components-text-input input:focus {
	border-color: var(--accent) !important;
	box-shadow: 0 0 0 1px var(--accent) !important;
	outline: none !important;
}

/* Painel de cupom */
.wc-block-components-panel__button {
	color: var(--accent) !important;
	font-family: var(--font-mono) !important;
	font-size: 0.75rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

/* Opcoes de pagamento e entrega */
.wc-block-components-radio-control__option,
.wc-block-components-shipping-rates-control__package {
	border-color: var(--border) !important;
	color: var(--text);
}

.wc-block-components-radio-control__option--checked-option-highlighted,
.wc-block-components-radio-control-accordion-option--checked-option-highlighted {
	background: var(--accent-dim) !important;
	border-color: var(--accent) !important;
}

/* Avisos dos blocos */
.wc-block-components-notice-banner {
	background: var(--accent-dim) !important;
	border-color: var(--accent) !important;
	color: var(--text-bright) !important;
	border-radius: var(--radius) !important;
}

.wc-block-components-notice-banner.is-error {
	background: rgba(255, 59, 59, 0.1) !important;
	border-color: #ff3b3b !important;
}

/* Fundo branco herdado dos blocos */
.wp-block-woocommerce-cart,
.wp-block-woocommerce-checkout,
.wc-block-cart,
.wc-block-checkout {
	background: transparent !important;
	color: var(--text);
}