/*
 * RecargaEV — Loja (WooCommerce): grid de produtos, card de produto, preço,
 * página de produto, carrinho e checkout.
 * Carregado apenas quando o WooCommerce está ativo (inc/setup.php).
 * Fase 3 expande: filtros, busca com autocomplete, mini-cart drawer.
 */

/* ----------------------------------------------------------------------------
 * Estrutura do catálogo
 * -------------------------------------------------------------------------- */
.woocommerce .site-main {
	padding-block: var(--space-6);
}

ul.products {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--space-5);
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (max-width: 1200px) {
	ul.products {
		grid-template-columns: repeat(3, 1fr);
	}
}

ul.products::before,
ul.products::after {
	display: none;
}

ul.products li.product {
	display: flex;
	flex-direction: column;
	margin: 0;
	position: relative;
}

/* WooCommerce legado (woocommerce-layout.css) define larguras de coluna e
   float nos cards — o tema usa grid; neutralizar (inclusive columns-*). */
.woocommerce ul.products li.product,
.woocommerce ul.products[class*='columns-'] li.product {
	width: 100%;
	float: none;
	margin: 0;
}

/* ----------------------------------------------------------------------------
 * Card de produto
 * -------------------------------------------------------------------------- */
ul.products li.product {
	background: var(--c-surface);
	border: 1px solid var(--c-line);
	border-radius: var(--radius-card);
	overflow: hidden;
	box-shadow: var(--shadow-sm);
	transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}

ul.products li.product:hover {
	box-shadow: var(--shadow-md);
	transform: translateY(-4px);
}

ul.products li.product .woocommerce-loop-product__link {
	display: flex;
	flex-direction: column;
	flex: 1;
	color: inherit;
}

ul.products li.product .woocommerce-loop-product__link:hover {
	color: inherit;
}

ul.products li.product img {
	aspect-ratio: 1 / 1;
	object-fit: cover;
	margin: 0;
	width: 100%;
	border-radius: 0;
}

ul.products li.product .woocommerce-loop-product__title {
	padding: var(--space-4) var(--space-4) var(--space-2);
	margin: 0;
	font-family: var(--font-head);
	font-weight: 600;
	font-size: 1rem;
	line-height: var(--lh-snug);
	color: var(--c-dark);
}

ul.products li.product .price {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 0 var(--space-4) var(--space-3);
	margin: 0;
	font-family: var(--font-head);
	color: var(--c-navy);
}

/* Selo de promoção (-X%) */
ul.products li.product .recargaev-onsale,
.recargaev-onsale {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 2;
	min-height: 0;
	min-width: 0;
	padding: 0.3rem 0.7rem;
	background: var(--c-accent);
	color: var(--c-navy-ink);
	font-family: var(--font-head);
	font-weight: 700;
	font-size: var(--fs-xs);
	line-height: 1.4;
	border-radius: var(--radius-pill);
}

/* Botão adicionar ao carrinho */
ul.products li.product .button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	margin: 0 var(--space-4) var(--space-4);
	padding: 0.7rem 1.2rem;
	font-family: var(--font-head);
	font-weight: 600;
	font-size: var(--fs-small);
	line-height: 1.2;
	color: var(--c-on-navy);
	background: var(--c-navy);
	border-radius: var(--radius-btn);
	transition: background var(--dur) var(--ease), transform var(--dur) var(--ease);
}

ul.products li.product .button:hover {
	background: var(--c-navy-mid);
	color: var(--c-on-navy);
	transform: translateY(-1px);
}

ul.products li.product .button.loading {
	opacity: 0.6;
}

ul.products li.product .added_to_cart {
	display: block;
	text-align: center;
	padding: 0 var(--space-4) var(--space-4);
	font-size: var(--fs-small);
	font-weight: 600;
}

/* ----------------------------------------------------------------------------
 * Preço (extras: parcelamento + PIX)
 * -------------------------------------------------------------------------- */
.price-extras {
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin-top: 2px;
	font-family: var(--font-body);
	font-weight: 400;
	font-size: var(--fs-small);
}

.price-installments {
	color: var(--c-text-soft);
}

.price-pix {
	color: var(--c-success);
}

.price-pix strong {
	font-weight: 700;
}

/* ----------------------------------------------------------------------------
 * Página do produto
 * -------------------------------------------------------------------------- */
.single-product div.product {
	/* O grid de 2 colunas (galeria + resumo) fica no .product-layout interno;
	   aqui o produto é bloco para as abas/upsells ocuparem a largura total. */
	display: block;
}

.single-product div.product .woocommerce-product-gallery {
	margin: 0;
	width: 100% !important;
}

.single-product div.product .woocommerce-product-gallery__image img {
	border-radius: var(--radius-card);
}

.single-product div.product .product_title {
	font-size: var(--fs-h2);
	margin-bottom: var(--space-2);
}

.single-product div.product .sku_wrapper {
	display: block;
	font-size: var(--fs-small);
	color: var(--c-muted);
	margin-bottom: var(--space-3);
}

.single-product div.product .price {
	font-family: var(--font-head);
	font-size: clamp(1.6rem, 2.5vw, 2.25rem);
	color: var(--c-navy);
	margin-bottom: var(--space-4);
}

.single-product div.product .price del {
	color: var(--c-muted);
	font-size: 0.7em;
}

.single-product div.product .price ins {
	text-decoration: none;
}

.single-product div.product form.cart {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
	align-items: center;
	margin-bottom: var(--space-4);
}

.single-product div.product form.cart .quantity input.qty {
	width: 74px;
	height: 48px;
	text-align: center;
	font-family: var(--font-head);
	font-weight: 600;
}

/* Stepper de quantidade (botões + / − injetados por assets/js/shop.js) */
.quantity {
	display: inline-flex;
	align-items: center;
}

.qty-btn {
	width: 44px;
	height: 48px;
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 1.25rem;
	font-weight: 600;
	color: var(--c-navy);
	background: var(--c-surface-soft);
	border: 1.5px solid var(--c-line);
	cursor: pointer;
	transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.qty-btn:hover {
	background: var(--c-accent-soft);
	border-color: var(--c-accent);
}

.qty-btn--minus {
	border-radius: var(--radius-sm) 0 0 var(--radius-sm);
	border-right: 0;
}

.qty-btn--plus {
	border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
	border-left: 0;
}

.quantity .qty-btn + input.qty {
	border-radius: 0;
	border-left: 0;
	border-right: 0;
	width: 64px;
	height: 48px;
	margin: 0;
}

.single-product div.product form.cart .button {
	flex: 1;
	min-width: 200px;
	padding: 0.9rem 1.5rem;
	font-family: var(--font-head);
	font-weight: 600;
	background: var(--c-navy);
	color: var(--c-on-navy);
	border-radius: var(--radius-btn);
}

.single-product div.product .product_meta {
	font-size: var(--fs-small);
	color: var(--c-muted);
}

.single-product div.product .product_meta > span {
	display: block;
	margin-bottom: var(--space-1);
}

/* Abas (descrição / specs / avaliações) */
.woocommerce div.product .woocommerce-tabs ul.tabs {
	padding: 0;
	margin: var(--space-7) 0 var(--space-4);
	border-bottom: 1px solid var(--c-line);
}

.woocommerce div.product .woocommerce-tabs ul.tabs::before {
	border-bottom: 1px solid var(--c-line);
}

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

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

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
	font-family: var(--font-head);
	font-weight: 600;
	font-size: var(--fs-small);
	color: var(--c-muted);
	padding: var(--space-3) 0;
	border-bottom: 3px solid transparent;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
	color: var(--c-navy);
	border-bottom-color: var(--c-accent);
}

/* ----------------------------------------------------------------------------
 * Carrinho
 * -------------------------------------------------------------------------- */
.woocommerce table.shop_table {
	border: 1px solid var(--c-line);
	border-radius: var(--radius-card);
	overflow: hidden;
	border-collapse: separate;
	border-spacing: 0;
}

.woocommerce table.shop_table th {
	background: var(--c-surface-soft);
}

.woocommerce table.shop_table td {
	vertical-align: middle;
}

.woocommerce table.shop_table .product-thumbnail img {
	width: 72px;
	height: 72px;
	object-fit: cover;
	border-radius: var(--radius-sm);
}

.woocommerce table.shop_table .quantity input.qty {
	width: 64px;
	height: 40px;
	text-align: center;
}

.woocommerce a.remove {
	color: var(--c-danger) !important;
}

.woocommerce a.remove:hover {
	background: var(--c-danger);
	color: #fff !important;
}

.woocommerce-cart-form .actions .button,
.cart_totals .button {
	background: var(--c-navy);
	color: var(--c-on-navy);
	border-radius: var(--radius-btn);
	padding: 0.8rem 1.5rem;
	font-family: var(--font-head);
	font-weight: 600;
}

.woocommerce-cart-form .actions .button:hover,
.cart_totals .button:hover {
	background: var(--c-navy-mid);
	color: var(--c-on-navy);
}

.woocommerce .cart_totals {
	background: var(--c-surface-soft);
	border-radius: var(--radius-card);
	padding: var(--space-6);
}

/* ----------------------------------------------------------------------------
 * Checkout
 * -------------------------------------------------------------------------- */

/* Páginas WooCommerce (carrinho, checkout, conta) saem da coluna de leitura
 * e ocupam o container largo. */
.woocommerce-cart .entry-content--page,
.woocommerce-checkout .entry-content--page,
.woocommerce-account .entry-content--page {
	max-width: none;
}

/* O grid de duas colunas é aplicado no <form>: no markup padrão do
 * WooCommerce o único filho direto de .woocommerce é o próprio form,
 * e as colunas ficam dentro dele (#customer_details + #order_review). */
.woocommerce-checkout form.checkout {
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
	grid-template-rows: auto auto;
	gap: var(--space-7);
	align-items: start;
}

/* O resumo do pedido (título + caixa) empilha no topo da coluna direita.
 * #customer_details ocupa as duas linhas: assim as linhas são dimensionadas
 * pela coluna direita e a caixa fica logo abaixo do título "Seu pedido",
 * em vez de ser empurrada para depois do fim da coluna de cobrança. */
.woocommerce-checkout form.checkout #customer_details {
	grid-column: 1;
	grid-row: 1 / 3;
	align-self: start;
	min-width: 0;
	background: var(--c-surface);
	border: 1px solid var(--c-line);
	border-radius: var(--radius-card);
	padding: var(--space-6);
}

.woocommerce-checkout form.checkout #order_review_heading {
	grid-column: 2;
	grid-row: 1;
	margin: 0;
}

.woocommerce-checkout form.checkout #order_review {
	grid-column: 2;
	grid-row: 2;
	min-width: 0;
	background: var(--c-surface-soft);
	border-radius: var(--radius-card);
	padding: var(--space-6);
}

.woocommerce-checkout .woocommerce .woocommerce-input-wrapper input,
.woocommerce-checkout .woocommerce select.input-text {
	border-radius: var(--radius-sm);
}

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

.woocommerce-checkout #payment ul.payment_methods {
	border-bottom: 1px solid var(--c-line);
	padding: var(--space-4);
	border-radius: var(--radius-sm);
}

.woocommerce-checkout #place_order {
	width: 100%;
	padding: 1rem;
	background: var(--c-navy);
	color: var(--c-on-navy);
	border-radius: var(--radius-btn);
	font-family: var(--font-head);
	font-weight: 600;
	font-size: 1rem;
}

.woocommerce-checkout #place_order:hover {
	background: var(--c-navy-mid);
}

/* ----------------------------------------------------------------------------
 * Avisos e mensagens
 * -------------------------------------------------------------------------- */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	border-radius: var(--radius-sm);
	border-top-color: var(--c-accent);
	padding: var(--space-4) var(--space-5);
	background: var(--c-surface-soft);
}

/* O woocommerce.css injeta ::before nos avisos com um glifo da fonte
   "WooCommerce", que não é carregada no front — no navegador vira um
   retângulo vazio ("mini janela") posicionado sobre a primeira letra do
   texto (o tema trocou o padding original do WooCommerce que dava espaço
   ao ícone). Remove o ícone em todos os avisos (loja, carrinho, checkout,
   conta). */
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before {
	content: none;
}

.woocommerce-error {
	border-top-color: var(--c-danger);
}

/* ----------------------------------------------------------------------------
 * Responsivo
 * -------------------------------------------------------------------------- */
@media (max-width: 992px) {
	ul.products {
		grid-template-columns: repeat(2, 1fr);
	}

	.product-layout {
		grid-template-columns: 1fr;
		gap: var(--space-6);
	}

	.woocommerce-checkout form.checkout {
		grid-template-columns: 1fr;
	}

	/* Com uma única coluna explícita, o grid-column: 2 do resumo criava uma
	 * faixa implícita (auto) que tomava a largura e deixava os detalhes em
	 * ~66px. Os três itens voltam para a coluna 1 (e o grid-row volta ao
	 * fluxo normal — sem o reset, o #customer_details abrangeria as duas
	 * linhas e se sobreporia ao resumo). */
	.woocommerce-checkout form.checkout #customer_details,
	.woocommerce-checkout form.checkout #order_review_heading,
	.woocommerce-checkout form.checkout #order_review {
		grid-column: 1;
		grid-row: auto;
	}
}

@media (max-width: 480px) {
	ul.products {
		grid-template-columns: 1fr;
		gap: var(--space-4);
	}

	.woocommerce table.shop_table td.actions {
		display: flex;
		flex-direction: column;
		gap: var(--space-3);
	}
}

/* ============================================================================
 * FASE 3 — Catálogo: layout, categorias, toolbar, filtros
 * ========================================================================== */
.woocommerce .site-main {
	padding-top: var(--space-5);
}

/* Lista lateral de categorias (sidebar da loja) */
.cat-list {
	list-style: none;
	margin: var(--space-2) 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.cat-list__link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-2);
	padding: var(--space-2) var(--space-3);
	border-radius: var(--radius-sm);
	font-size: var(--fs-small);
	font-weight: 500;
	color: var(--c-text);
	transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}

.cat-list__link:hover {
	background: var(--c-surface-soft);
	color: var(--c-navy);
}

.cat-list__link.is-active {
	background: var(--c-accent-soft);
	color: var(--c-navy);
	font-weight: 600;
}

.cat-list__count {
	font-size: var(--fs-xs);
	font-weight: 600;
	color: var(--c-muted);
	background: var(--c-surface-soft);
	border-radius: var(--radius-pill);
	padding: 1px 8px;
	min-width: 24px;
	text-align: center;
}

.cat-list__link.is-active .cat-list__count {
	background: var(--c-accent);
	color: var(--c-navy-ink);
}

/* Layout catálogo: sidebar de filtros + grade */
.catalog-layout {
	display: grid;
	grid-template-columns: 260px 1fr;
	gap: var(--space-6);
	align-items: start;
	padding-block: var(--space-6);
}

.catalog-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-4);
	justify-content: space-between;
	margin-bottom: var(--space-5);
}

.catalog-toolbar .woocommerce-result-count {
	margin: 0;
	color: var(--c-muted);
	font-size: var(--fs-small);
	flex: 1;
}

.catalog-toolbar select.orderby {
	width: auto;
	padding: 0.5rem 2.2rem 0.5rem 0.9rem;
	font-size: var(--fs-small);
	border-radius: var(--radius-sm);
}

.catalog-filters__open {
	display: none;
}

/* Painel de filtros */
.catalog-filters__head {
	display: none;
	align-items: center;
	justify-content: space-between;
	margin-bottom: var(--space-4);
}

.catalog-filters__title {
	font-family: var(--font-head);
	font-weight: 600;
}

.catalog-filters__close {
	background: none;
	border: 0;
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
	color: var(--c-text-soft);
}

.filter-group {
	display: block;
	padding: var(--space-4);
	background: var(--c-surface);
	border: 1px solid var(--c-line);
	border-radius: var(--radius-sm);
}

.filter-group + .filter-group {
	margin-top: var(--space-3);
}

.filter-group summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	cursor: pointer;
	list-style: none;
	font-family: var(--font-head);
	font-weight: 600;
	font-size: var(--fs-small);
	color: var(--c-dark);
}

.filter-group summary::-webkit-details-marker {
	display: none;
}

.filter-group summary .accordion__icon {
	width: 22px;
	height: 22px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--c-accent-soft);
	color: var(--c-navy);
	transition: transform var(--dur) var(--ease);
}

.filter-group summary .accordion__icon svg {
	width: 12px;
	height: 12px;
	fill: currentColor;
}

.filter-group[open] summary .accordion__icon {
	transform: rotate(180deg);
}

.filter-group__title {
	font-family: var(--font-head);
	font-weight: 600;
	font-size: var(--fs-small);
	color: var(--c-dark);
}

.filter-group--price {
	display: block;
}

.filter-group__list {
	list-style: none;
	margin: var(--space-3) 0 0;
	padding: 0;
	max-height: 220px;
	overflow-y: auto;
}

.filter-group__list li {
	margin: 0;
}

.filter-option {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	padding: var(--space-2) 0;
	font-size: var(--fs-small);
	color: var(--c-text-soft);
}

.filter-option:hover {
	color: var(--c-navy);
}

.filter-option small {
	color: var(--c-muted);
	font-size: var(--fs-xs);
}

.filter-option__check {
	width: 16px;
	height: 16px;
	flex: none;
	border: 1.5px solid var(--c-line);
	border-radius: 4px;
	transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.filter-option.is-active {
	color: var(--c-navy);
	font-weight: 500;
}

.filter-option.is-active .filter-option__check {
	background: var(--c-navy);
	border-color: var(--c-navy);
	box-shadow: inset 0 0 0 3px var(--c-surface);
}

/* Chips de filtros ativos */
.filter-chips {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	margin-top: var(--space-3);
}

.filter-chip {
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
	padding: 0.3rem 0.7rem;
	font-size: var(--fs-xs);
	font-weight: 500;
	background: var(--c-accent-soft);
	color: var(--c-navy);
	border-radius: var(--radius-pill);
}

.filter-chip--clear {
	background: transparent;
	border: 1px solid var(--c-line);
	color: var(--c-muted);
}

.filter-price__inputs {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	margin: var(--space-3) 0;
}

.filter-price__inputs input {
	padding: 0.5rem 0.7rem;
	font-size: var(--fs-small);
}

.filter-group--price .btn {
	width: 100%;
}

/* Card de produto (override content-product.php) */
ul.products li.product-card {
	border: 1px solid var(--c-line);
	border-radius: var(--radius-card);
	overflow: hidden;
	background: var(--c-surface);
	box-shadow: var(--shadow-sm);
	transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}

ul.products li.product-card:hover {
	box-shadow: var(--shadow-md);
	transform: translateY(-4px);
}

.product-card__media {
	position: relative;
	display: block;
}

.product-card__media img {
	aspect-ratio: 1 / 1;
	object-fit: cover;
	width: 100%;
	border-radius: 0;
}

.product-card__media .recargaev-onsale {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 2;
}

.product-card__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: var(--space-4);
}

.product-card__brand {
	margin: 0 0 var(--space-1);
	font-size: var(--fs-xs);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--c-muted);
}

.product-card__title {
	font-family: var(--font-head);
	font-weight: 600;
	font-size: 1rem;
	line-height: var(--lh-snug);
	margin-bottom: var(--space-2);
}

.product-card__title a {
	color: var(--c-dark);
}

.product-card__title a:hover {
	color: var(--c-navy);
}

.product-card__stock {
	margin: 0 0 var(--space-2);
	font-size: var(--fs-xs);
	font-weight: 600;
	color: var(--c-muted);
}

.product-card__stock.is-instock {
	color: var(--c-success);
}

.product-card__stock.is-instock::before {
	content: '● ';
	font-size: 0.7em;
}

.product-card__body .price {
	margin-bottom: var(--space-3);
	font-family: var(--font-head);
	color: var(--c-navy);
}

.product-card__actions {
	margin-top: auto;
}

.product-card__actions .button {
	width: 100%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	padding: 0.7rem 1.2rem;
	font-family: var(--font-head);
	font-weight: 600;
	font-size: var(--fs-small);
	line-height: 1.2;
	color: var(--c-on-navy);
	background: var(--c-navy);
	border-radius: var(--radius-btn);
	transition: background var(--dur) var(--ease);
}

.product-card__actions .button:hover {
	background: var(--c-navy-mid);
	color: var(--c-on-navy);
}

.product-card__actions .added_to_cart {
	display: block;
	text-align: center;
	margin-top: var(--space-2);
	font-size: var(--fs-xs);
	font-weight: 600;
}

/* Sem resultados */
.woocommerce-info.no-products,
.woocommerce .no-products-found {
	background: var(--c-surface-soft);
	border-radius: var(--radius-card);
	padding: var(--space-7);
	text-align: center;
}

/* ============================================================================
 * FASE 3 — Página de produto (PDP)
 * ========================================================================== */
.product-layout {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-8);
	align-items: start;
	padding-block: var(--space-6);
}

.product-layout > * {
	min-width: 0;
}

/* WooCommerce legado define width:48% + float no resumo — neutralizar
   (as colunas são definidas pelo grid do .product-layout). */
.woocommerce.single-product div.product div.summary {
	width: 100%;
	float: none;
	margin: 0;
}

.product-layout .woocommerce-product-gallery {
	margin: 0;
	width: 100% !important;
	position: sticky;
	top: calc(var(--header-h) + var(--space-4));
}

.product-layout .woocommerce-product-gallery__image img {
	border-radius: var(--radius-card);
}

.product-layout .summary .product_title {
	font-size: var(--fs-h2);
	margin-bottom: var(--space-2);
}

.product-brand {
	margin: 0 0 var(--space-1);
	font-size: var(--fs-xs);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--c-muted);
}

.product-layout .summary .price {
	font-family: var(--font-head);
	font-size: clamp(1.6rem, 2.5vw, 2.25rem);
	color: var(--c-navy);
	margin: var(--space-3) 0;
}

.product-layout .summary .price del {
	color: var(--c-muted);
	font-size: 0.7em;
}

.product-layout .summary .price ins {
	text-decoration: none;
}

.product-shipping-note {
	display: flex;
	gap: var(--space-3);
	align-items: flex-start;
	padding: var(--space-4);
	margin-top: var(--space-4);
	background: var(--c-surface-soft);
	border: 1px solid var(--c-line);
	border-radius: var(--radius-sm);
	font-size: var(--fs-small);
	color: var(--c-text-soft);
}

.product-shipping-note svg {
	width: 20px;
	height: 20px;
	fill: var(--c-accent);
	flex: none;
	margin-top: 2px;
}

.product-shipping-note p {
	margin: 0;
}

/* Barra fixa de compra (mobile) */
.pdp-sticky-bar {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 950;
	width: 100%;
	max-width: 100vw;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	gap: var(--space-4);
	padding: var(--space-3) var(--gutter);
	background: var(--c-surface);
	border-top: 1px solid var(--c-line);
	box-shadow: 0 -6px 24px rgba(0, 14, 39, 0.12);
}

.pdp-sticky-bar__price {
	font-family: var(--font-head);
	font-weight: 600;
	color: var(--c-navy);
	font-size: var(--fs-small);
	flex: 1;
}

.pdp-sticky-bar__price del {
	display: none;
}

.pdp-sticky-bar .single_add_to_cart_button,
.pdp-sticky-bar button[type='submit'] {
	padding: 0.7rem 1.4rem;
	background: var(--c-navy);
	color: var(--c-on-navy);
	border: 0;
	border-radius: var(--radius-btn);
	font-family: var(--font-head);
	font-weight: 600;
	font-size: var(--fs-small);
	cursor: pointer;
}

@media (max-width: 480px) {
	.pdp-sticky-bar {
		flex-wrap: wrap;
	}

	.pdp-sticky-bar__price {
		flex: 1 1 100%;
		min-width: 0;
	}

	.pdp-sticky-bar .single_add_to_cart_button,
	.pdp-sticky-bar button[type='submit'] {
		flex: 1;
		min-width: 0;
	}
}

/* ============================================================================
 * FASE 3 — Busca da loja (painel + autocomplete)
 * ========================================================================== */
.search-overlay {
	position: fixed;
	inset: 0;
	z-index: 1200;
	background: rgba(0, 14, 39, 0.6);
	backdrop-filter: blur(4px);
	opacity: 0;
	transition: opacity var(--dur) var(--ease);
}

.search-overlay.is-open {
	opacity: 1;
}

.search-overlay__panel {
	position: relative;
	max-width: 680px;
	margin: 12vh auto 0;
	padding: var(--space-6);
}

.search-overlay__close {
	position: absolute;
	top: -44px;
	right: 0;
	width: 40px;
	height: 40px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--c-surface);
	border: 0;
	border-radius: 50%;
	cursor: pointer;
	color: var(--c-dark);
}

.search-overlay__close svg {
	width: 18px;
	height: 18px;
	fill: currentColor;
}

.product-search {
	position: relative;
}

.product-search__input {
	width: 100%;
	padding: 1rem 3.2rem 1rem 1.25rem !important;
	font-size: 1.0625rem;
	border-radius: var(--radius-card) !important;
	box-shadow: var(--shadow-lg);
}

.product-search__submit {
	position: absolute;
	right: 8px;
	top: 50%;
	transform: translateY(-50%);
	width: 40px;
	height: 40px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--c-navy);
	border: 0;
	border-radius: var(--radius-sm);
	cursor: pointer;
	color: var(--c-on-navy);
}

.product-search__submit svg {
	width: 18px;
	height: 18px;
	fill: currentColor;
}

.product-search__results {
	position: absolute;
	top: calc(100% + 8px);
	left: 0;
	right: 0;
	z-index: 10;
	background: var(--c-surface);
	border: 1px solid var(--c-line);
	border-radius: var(--radius-card);
	box-shadow: var(--shadow-lg);
	overflow: hidden;
	max-height: 420px;
	overflow-y: auto;
}

.product-search__list {
	list-style: none;
	margin: 0;
	padding: var(--space-2);
}

.product-search__list li {
	margin: 0;
}

.product-search__item {
	display: flex;
	gap: var(--space-3);
	align-items: center;
	padding: var(--space-2) var(--space-3);
	border-radius: var(--radius-sm);
	color: var(--c-dark);
}

.product-search__item:hover {
	background: var(--c-surface-soft);
	color: var(--c-navy);
}

.product-search__thumb img {
	width: 48px;
	height: 48px;
	object-fit: cover;
	border-radius: var(--radius-sm);
}

.product-search__info {
	display: flex;
	flex-direction: column;
	gap: 2px;
	font-size: var(--fs-small);
}

.product-search__info small {
	color: var(--c-navy);
	font-weight: 600;
}

.product-search__empty {
	padding: var(--space-4);
	margin: 0;
	font-size: var(--fs-small);
	color: var(--c-text-soft);
}

/* ============================================================================
 * FASE 3 — Mini-cart drawer
 * ========================================================================== */
.minicart-drawer {
	position: fixed;
	inset: 0;
	z-index: 1200;
	background: rgba(0, 14, 39, 0.6);
	opacity: 0;
	transition: opacity var(--dur) var(--ease);
}

.minicart-drawer.is-open {
	opacity: 1;
}

.minicart-drawer .minicart {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: min(420px, 92vw);
	display: flex;
	flex-direction: column;
	background: var(--c-surface);
	transform: translateX(100%);
	transition: transform var(--dur-slow) var(--ease);
	box-shadow: var(--shadow-lg);
}

.minicart-drawer.is-open .minicart {
	transform: none;
}

.minicart__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--space-4) var(--space-5);
	border-bottom: 1px solid var(--c-line);
}

.minicart__title {
	font-family: var(--font-head);
	font-weight: 600;
	font-size: 1.0625rem;
	color: var(--c-dark);
}

.minicart__close {
	width: 36px;
	height: 36px;
	background: none;
	border: 0;
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
	color: var(--c-text-soft);
	border-radius: 50%;
}

.minicart__close:hover {
	background: var(--c-surface-soft);
}

.minicart__empty {
	padding: var(--space-7);
	text-align: center;
	display: grid;
	gap: var(--space-4);
	place-items: center;
}

.minicart__items {
	flex: 1;
	overflow-y: auto;
	list-style: none;
	margin: 0;
	padding: var(--space-4) var(--space-5);
}

.minicart__item {
	display: flex;
	gap: var(--space-3);
	align-items: center;
	padding: var(--space-3) 0;
	border-bottom: 1px solid var(--c-line);
	margin: 0;
}

.minicart__thumb img {
	width: 56px;
	height: 56px;
	object-fit: cover;
	border-radius: var(--radius-sm);
}

.minicart__info {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.minicart__name {
	font-weight: 500;
	font-size: var(--fs-small);
	color: var(--c-dark);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.minicart__qty {
	font-size: var(--fs-xs);
	color: var(--c-muted);
}

.minicart__remove {
	font-size: 1.25rem;
	line-height: 1;
	color: var(--c-muted);
	padding: var(--space-2);
}

.minicart__remove:hover {
	color: var(--c-danger);
}

.minicart__foot {
	padding: var(--space-5);
	border-top: 1px solid var(--c-line);
	display: grid;
	gap: var(--space-3);
}

.minicart__subtotal {
	display: flex;
	justify-content: space-between;
	font-family: var(--font-head);
	font-weight: 600;
	color: var(--c-dark);
	margin: 0;
}

.minicart__foot .btn {
	width: 100%;
}

/* ============================================================================
 * FASE 3 — Responsivo do catálogo/PDP
 * ========================================================================== */
@media (max-width: 992px) {
	.catalog-layout {
		grid-template-columns: 1fr;
	}

	.catalog-filters__open {
		display: inline-flex;
	}

	.catalog-filters {
		position: fixed;
		inset: 0;
		top: auto;
		z-index: 1100;
		background: var(--c-surface);
		padding: var(--space-5) var(--gutter);
		border-radius: var(--radius-card) var(--radius-card) 0 0;
		box-shadow: var(--shadow-lg);
		transform: translateY(100%);
		transition: transform var(--dur-slow) var(--ease);
		max-height: 85vh;
		overflow-y: auto;
	}

	.catalog-filters.is-open {
		transform: none;
	}

	.catalog-filters__head {
		display: flex;
	}

	.product-layout {
		grid-template-columns: 1fr;
		gap: var(--space-6);
	}

	.product-layout .woocommerce-product-gallery {
		position: static;
	}
}

/* ============================================================================
 * Manual do equipamento (aba da PDP)
 * ========================================================================== */
.product-manual {
	max-width: 640px;
}

.product-manual p {
	color: var(--c-text-soft);
}

.product-manual .btn svg {
	width: 16px;
	height: 16px;
}

/* ============================================================================
 * FASE 4 — Favoritos
 * ========================================================================== */
.favorite-btn {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	margin-top: var(--space-3);
	padding: 0.55rem 1.1rem;
	background: none;
	border: 1.5px solid var(--c-line);
	border-radius: var(--radius-btn);
	font-family: var(--font-head);
	font-weight: 600;
	font-size: var(--fs-small);
	color: var(--c-text-soft);
	cursor: pointer;
	transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease), background var(--dur) var(--ease);
}

.favorite-btn:hover,
.favorite-btn.is-active {
	border-color: #e0245e;
	color: #e0245e;
	background: rgba(224, 36, 94, 0.06);
}

.favorite-btn.is-active .favorite-btn__icon {
	transform: scale(1.15);
}

.favorite-btn__icon {
	color: #e0245e;
	transition: transform var(--dur) var(--ease);
}

/* ============================================================================
 * FASE 4 — Minha conta
 * ========================================================================== */
.woocommerce-account .woocommerce {
	display: grid;
	grid-template-columns: 240px 1fr;
	gap: var(--space-6);
	align-items: start;
	padding-block: var(--space-6);
}

/* Tela de login/cadastro (não logado): sem a nav lateral, o grid de
   240px + 1fr jogava os dois formulários na coluna fina. Uma coluna
   larga, centralizada, com largura confortável de leitura. */
.woocommerce-account:not(.logged-in) .woocommerce {
	grid-template-columns: 1fr;
}

/* O woocommerce.css injeta ::before/::after com content:" " (clearfix) em
   quase tudo — dentro do grid da área de conta eles viram itens vazios e
   deslocam tudo: logado, a nav lateral vai para a coluna da direita e o
   conteúdo fica espremido em 163px na coluna de 240px, na linha de baixo
   (o mesmo bug dos cards de login, que é o ::before do .u-columns).
   Remove na área de conta inteira (logada ou não). */
.woocommerce-account .woocommerce::before,
.woocommerce-account .woocommerce::after {
	content: none;
}

.woocommerce-account:not(.logged-in) .u-columns {
	max-width: 1100px;
	margin-inline: auto;
	/* O woocommerce-layout.css legado injeta ::before/::after com content:" "
	   (clearfix do col2-set) — em grid eles viram itens vazios e empurram o
	   card de login para a coluna da direita e o de cadastro para a linha de
	   baixo (quadros em diagonal). Matar os pseudo-elementos e refazer o grid
	   aqui, com especificidade maior que a regra do tema (1fr 1fr + gap). */
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-6);
	align-items: stretch;
}

.woocommerce-account:not(.logged-in) .u-columns::before,
.woocommerce-account:not(.logged-in) .u-columns::after {
	content: none;
}

/* O woocommerce-layout.css legado impõe width:48% nas colunas (herança de
   floats). Em grid, o % resolve contra o track e espreme os formulários.
   Sobrepõe para usar a largura total da coluna do grid; o form interno
   estica junto com a coluna (stretch): os dois cards com a mesma altura,
   alinhados no topo. */
.woocommerce-account:not(.logged-in) .u-columns > .u-column1,
.woocommerce-account:not(.logged-in) .u-columns > .u-column2 {
	width: 100%;
	display: flex;
	flex-direction: column;
}

@media (max-width: 992px) {
	/* Empilhamento no mobile — media query própria porque a do tema
	   (grid-template-columns: 1fr) perde para a especificidade maior
	   desta regra e os dois cards ficariam lado a lado espremidos. */
	.woocommerce-account:not(.logged-in) .u-columns {
		grid-template-columns: 1fr;
	}
}

/* Visual completo da tela de login/cadastro no padrão da identidade
   (substitui a caixa crua do WooCommerce: borda cinza-arroxeada, fundo
   transparente e botão cinza de 3px que parece desabilitado). */
.woocommerce-account:not(.logged-in) .u-columns .woocommerce-form {
	background: var(--c-surface);
	border: 1px solid var(--c-line);
	border-radius: var(--radius-card);
	box-shadow: var(--shadow-sm);
	padding: var(--space-6);
	/* Estica até o fim da coluna (a coluna já estica pelo grid): os dois
	   cards de login/cadastro ficam com a MESMA altura, topo alinhado. */
	flex: 1;
}

.woocommerce-account:not(.logged-in) .u-columns h2 {
	font-size: var(--fs-h3);
	color: var(--c-navy);
	margin-bottom: var(--space-5);
}

.woocommerce-account:not(.logged-in) .u-columns form button[type='submit'] {
	width: 100%;
	background: var(--c-navy);
	color: var(--c-on-navy);
	border: none;
	border-radius: var(--radius-btn);
	padding: 0.75rem 1.5rem;
	font-family: var(--font-head);
	font-weight: 600;
	cursor: pointer;
	transition: background var(--dur) var(--ease);
}

.woocommerce-account:not(.logged-in) .u-columns form button[type='submit']:hover {
	background: var(--c-navy-mid);
}

.woocommerce-account:not(.logged-in) .u-columns .woocommerce-form__label-for-checkbox {
	display: flex;
	align-items: center;
	gap: var(--space-2);
}

/* Campos de texto no padrão do tema (o woocommerce.css legado impõe
   borda escura translúcida e raio de 4px). */
.woocommerce-account:not(.logged-in) .u-columns .woocommerce-form-row input.input-text {
	border: 1.5px solid var(--c-line);
	border-radius: var(--radius-sm);
}

.woocommerce-account nav.woocommerce-MyAccount-navigation {
	/* O woocommerce-layout.css legado impõe width:30% (herança de floats) —
	   em grid o % resolve contra o track de 240px e espreme a nav para 72px.
	   Usa a largura total do track. */
	width: 100%;
	background: var(--c-surface);
	border: 1px solid var(--c-line);
	border-radius: var(--radius-card);
	padding: var(--space-4);
}

.woocommerce-account nav.woocommerce-MyAccount-navigation ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.woocommerce-account nav.woocommerce-MyAccount-navigation li {
	margin: 0;
}

.woocommerce-account nav.woocommerce-MyAccount-navigation a {
	display: block;
	padding: var(--space-3) var(--space-4);
	font-family: var(--font-head);
	font-weight: 600;
	font-size: var(--fs-small);
	color: var(--c-text-soft);
	border-radius: var(--radius-sm);
}

.woocommerce-account nav.woocommerce-MyAccount-navigation a:hover,
.woocommerce-account nav.woocommerce-MyAccount-navigation li.is-active a {
	background: var(--c-navy);
	color: var(--c-on-navy);
}

.woocommerce-account .woocommerce-MyAccount-content {
	/* Mesmo caso da nav: o legado impõe % aqui também — usa o track inteiro. */
	width: 100%;
	background: var(--c-surface);
	border: 1px solid var(--c-line);
	border-radius: var(--radius-card);
	padding: var(--space-6);
}

.woocommerce-account .woocommerce-MyAccount-content .button {
	background: var(--c-navy);
	color: var(--c-on-navy);
	border-radius: var(--radius-btn);
	padding: 0.7rem 1.4rem;
	font-family: var(--font-head);
	font-weight: 600;
}

.woocommerce-account table.woocommerce-orders-table,
.woocommerce-account table.shop_table {
	border: 1px solid var(--c-line);
	border-radius: var(--radius-sm);
}

.woocommerce-account table th {
	background: var(--c-surface-soft);
}

/* Login / cadastro */
.woocommerce-account .u-columns {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-6);
}

/* Endereços da conta (logado): os ::before/::after clearfix do
   woocommerce-layout.css também viram itens vazios neste grid e o
   width:48% legado das colunas resolve contra o track — a caixa de
   cobrança ia para a coluna da direita e a de entrega para a linha de
   baixo, espremidas em ~220px (o mesmo bug da tela de login). */
.woocommerce-account.logged-in .u-columns::before,
.woocommerce-account.logged-in .u-columns::after {
	content: none;
}

.woocommerce-account.logged-in .u-columns > .u-column1,
.woocommerce-account.logged-in .u-columns > .u-column2 {
	width: 100%;
	display: flex;
	flex-direction: column;
}

.woocommerce-account.logged-in .u-columns .address {
	flex: 1;
}

@media (max-width: 992px) {
	.woocommerce-account.logged-in .u-columns {
		grid-template-columns: 1fr;
	}
}

.woocommerce-account form.woocommerce-form-login,
.woocommerce-account form.woocommerce-form-register {
	padding: var(--space-6);
}

.woocommerce-account form .button {
	width: 100%;
	margin-top: var(--space-3);
}

@media (max-width: 992px) {
	.woocommerce-account .woocommerce {
		grid-template-columns: 1fr;
	}

	.woocommerce-account .u-columns {
		grid-template-columns: 1fr;
	}
}

/* ============================================================================
 * Página Comprar — catálogo da API do painel + checkout + sucesso
 * ========================================================================== */
.api-alert {
	padding: var(--space-5);
	border-radius: var(--radius-card);
	border: 1px solid var(--c-line);
	background: var(--c-surface-soft);
	margin-block: var(--space-6);
}

.api-alert p {
	margin: 0 0 var(--space-3);
}

.api-alert p:last-child {
	margin-bottom: 0;
}

.api-alert ul {
	margin: 0;
	padding-left: 1.2em;
}

.api-alert--error {
	background: #fdeaea;
	border-color: #f5c2c2;
	color: #8c1d1d;
}

.api-alert--warn {
	background: #fff7e6;
	border-color: #f2dcae;
}

.api-alert--info {
	background: var(--c-accent-soft);
	border-color: rgba(39, 183, 225, 0.4);
}

.api-catalog {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
	gap: var(--space-5);
	margin-top: var(--space-6);
}

.api-product {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	padding: var(--space-5);
	background: var(--c-surface);
	border: 1px solid var(--c-line);
	border-radius: var(--radius-card);
	box-shadow: var(--shadow-sm);
}

.api-product__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--space-3);
}

.api-product__name {
	margin: 0;
	font-size: 1.1rem;
}

.api-product__code {
	font-size: var(--fs-xs);
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--c-muted);
	flex: none;
}

.api-product__desc {
	margin: 0;
	font-size: var(--fs-small);
	color: var(--c-muted);
}

.api-product__price {
	margin: 0;
	font-family: var(--font-head);
	font-weight: 700;
	font-size: 1.35rem;
	color: var(--c-navy);
}

.api-product__price small {
	font-size: 0.65em;
	font-weight: 500;
	color: var(--c-muted);
}

.api-product__stock {
	margin: 0;
	font-size: var(--fs-xs);
	font-weight: 600;
	color: var(--c-danger);
}

.api-product__stock.is-instock {
	color: var(--c-success);
}

.api-product__stock.is-instock::before {
	content: '● ';
	font-size: 0.7em;
}

.api-product__qty {
	margin-top: auto;
}

.api-product__qty input {
	width: 96px;
	height: 44px;
	text-align: center;
	font-family: var(--font-head);
	font-weight: 600;
}

.api-product.is-out {
	opacity: 0.65;
}

/* Checkout da página Comprar */
.api-buy__grid {
	display: grid;
	grid-template-columns: 1.6fr 1fr;
	gap: var(--space-6);
	align-items: start;
	margin-top: var(--space-6);
}

.api-buy__form {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
	padding: var(--space-6);
	background: var(--c-surface);
	border: 1px solid var(--c-line);
	border-radius: var(--radius-card);
}

.api-buy__row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-4);
}

.api-buy__field {
	margin: 0;
}

.api-buy__field--wide {
	grid-column: 1 / -1;
}

.api-buy__field--sm {
	max-width: 120px;
}

.api-buy__field label {
	margin-bottom: var(--space-1);
	font-size: var(--fs-small);
}

.api-buy__field input,
.api-buy__field select {
	width: 100%;
}

.api-buy__submit {
	align-self: flex-start;
}

.api-buy__note {
	margin: 0;
	font-size: var(--fs-xs);
	color: var(--c-muted);
}

.api-buy__honeypot {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	opacity: 0;
}

.api-summary {
	position: sticky;
	top: calc(var(--header-h) + var(--space-4));
	padding: var(--space-5);
	background: var(--c-navy-deep);
	color: var(--c-on-navy);
	border-radius: var(--radius-card);
}

.api-summary__title {
	display: block;
	font-family: var(--font-head);
	font-weight: 700;
	margin-bottom: var(--space-4);
}

.api-summary__list {
	list-style: none;
	margin: 0 0 var(--space-4);
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
}

.api-summary__list li {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--space-3);
	font-size: var(--fs-small);
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
	padding-bottom: var(--space-3);
}

.api-summary__list li:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}

.api-summary__qty {
	color: var(--c-on-navy-soft);
	flex: none;
}

.api-summary__empty {
	justify-content: flex-start !important;
	color: var(--c-on-navy-soft);
	border-bottom: 0 !important;
}

.api-summary__total {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--space-3);
	font-family: var(--font-head);
	font-weight: 600;
}

.api-summary__total strong {
	color: var(--c-accent);
	font-size: 1.25rem;
}

/* Sucesso */
.api-success {
	text-align: center;
	padding: var(--space-8) var(--space-6);
	background: var(--c-surface);
	border: 1px solid var(--c-line);
	border-radius: var(--radius-card);
	margin-block: var(--space-6);
}

.api-success__icon svg {
	width: 56px;
	height: 56px;
	fill: var(--c-success);
}

.api-success__title {
	margin: var(--space-4) 0 var(--space-2);
}

.api-success__numero {
	font-size: var(--fs-lead);
	margin-bottom: var(--space-3);
}

.api-success__numero strong {
	color: var(--c-navy);
	font-family: var(--font-head);
}

@media (max-width: 768px) {
	.api-buy__grid {
		grid-template-columns: 1fr;
	}

	.api-buy__row {
		grid-template-columns: 1fr;
	}

	.api-summary {
		position: static;
	}
}

/* Passos "Como funciona" (página Cancelamento) */
.api-summary__steps {
	margin: 0 0 var(--space-4);
	padding-left: 1.2em;
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	font-size: var(--fs-small);
}

.api-summary__steps li {
	padding-left: var(--space-1);
}

/* Foto do produto na página Comprar (vinda do painel via campo `imagem`) */
.api-product__media {
	display: block;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: var(--radius-sm);
	background: var(--c-surface-soft);
}

.api-product__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Carrinho de produtos do painel (página Comprar) */
.api-cart {
	list-style: none;
	margin: 0 0 var(--space-4);
	padding: var(--space-5);
	background: var(--c-surface);
	border: 1px solid var(--c-line);
	border-radius: var(--radius-card);
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
}

.api-cart__item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-4);
	padding-bottom: var(--space-3);
	border-bottom: 1px solid var(--c-line);
}

.api-cart__item:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}

.api-cart__name {
	font-family: var(--font-head);
	font-weight: 600;
}

.api-cart__name small {
	display: block;
	font-family: var(--font-body);
	font-weight: 400;
	color: var(--c-muted);
}

.api-cart__remove {
	font-size: var(--fs-xs);
	font-weight: 600;
	color: var(--c-danger);
	flex: none;
}

.api-cart__total {
	font-family: var(--font-head);
	font-weight: 600;
	font-size: 1.1rem;
}

.api-cart__total strong {
	color: var(--c-navy);
	font-size: 1.35rem;
}

.api-cart__note {
	font-size: var(--fs-xs);
	color: var(--c-muted);
}

.api-buy__heading {
	margin: 0;
	font-size: 1.1rem;
}

/* Formulário de quantidade no card do catálogo */
.api-product__qty-form {
	display: flex;
	gap: var(--space-2);
	margin-top: auto;
	align-items: center;
}

.api-product__qty-form input[type='number'] {
	width: 72px;
	height: 44px;
	text-align: center;
	font-family: var(--font-head);
	font-weight: 600;
}

.api-product__qty-form .btn {
	flex: 1;
	white-space: nowrap;
}

/* Página de detalhes do produto (painel) */
.api-detalhe {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-8);
	align-items: start;
	padding-block: var(--space-6);
}

.api-detalhe__foto img {
	width: 100%;
	border-radius: var(--radius-card);
}

.api-detalhe__thumbs {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
	margin-top: var(--space-3);
}

.api-detalhe__thumb img {
	width: 96px;
	height: 96px;
	object-fit: cover;
	border-radius: var(--radius-sm);
	border: 1px solid var(--c-line);
}

.api-detalhe__codigo {
	font-size: var(--fs-xs);
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--c-muted);
}

.api-detalhe__preco {
	font-family: var(--font-head);
	font-weight: 700;
	font-size: 1.6rem;
	color: var(--c-navy);
	margin-bottom: var(--space-3);
}

.api-detalhe__preco small {
	font-size: 0.65em;
	font-weight: 500;
	color: var(--c-muted);
}

.api-detalhe__stock {
	font-size: var(--fs-small);
	font-weight: 600;
	color: var(--c-danger);
	margin-bottom: var(--space-4);
}

.api-detalhe__stock.is-instock {
	color: var(--c-success);
}

.api-detalhe__comprar {
	display: flex;
	gap: var(--space-3);
	align-items: center;
	margin-bottom: var(--space-4);
}

.api-detalhe__comprar input[type='number'] {
	width: 74px;
	height: 48px;
	text-align: center;
	font-family: var(--font-head);
	font-weight: 600;
}

.api-detalhe__manual {
	margin-bottom: var(--space-4);
}

.api-detalhe__voltar {
	font-size: var(--fs-small);
}

.api-detalhe__descricao {
	max-width: 76ch;
}

.api-specs {
	width: 100%;
	max-width: 720px;
	border: 1px solid var(--c-line);
	border-radius: var(--radius-card);
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
}

.api-specs th,
.api-specs td {
	padding: var(--space-3) var(--space-4);
	font-size: var(--fs-small);
	text-align: left;
	border-bottom: 1px solid var(--c-line);
}

.api-specs tr:last-child th,
.api-specs tr:last-child td {
	border-bottom: 0;
}

.api-specs th {
	width: 40%;
	background: var(--c-surface-soft);
	font-weight: 600;
}

@media (max-width: 768px) {
	.api-detalhe {
		grid-template-columns: 1fr;
	}
}