/* Páginas nativas do WooCommerce (loja, produto, carrinho, checkout, minha conta).
O container que faltava a essas páginas é reconstituído em layout.css
(`body:not(.elementor-page) #primary`) — aqui cuidamos do desenho em si.

Diretrizes aplicadas: proporção de imagem constante entre os cards, 4/3/2 colunas
conforme a largura, gap mínimo preservado em telas pequenas, hierarquia tipográfica
curta (categoria → nome → preço) e separação por borda hairline em vez de sombra,
para manter o visual flat da marca. */

/* --- Links de categoria nativos (fora do nosso mega-menu/grid) --- */

.product-category a,
.woocommerce-loop-category__title,
.woocommerce-loop-category__title a,
.posted_in a,
.woocommerce-breadcrumb a,
ul.product-categories a {
	text-decoration: none;
	color: var(--arterio-text-muted);
}

.product-category a:hover,
.woocommerce-loop-category__title a:hover,
.posted_in a:hover,
.woocommerce-breadcrumb a:hover,
ul.product-categories a:hover {
	color: var(--arterio-text);
}

/* --- Cabeçalho das páginas Woo --- */

.woocommerce .woocommerce-breadcrumb {
	font-size: 0.8125rem;
	color: var(--arterio-text-muted);
	margin-bottom: var(--arterio-space-2);
}

.woocommerce-products-header,
.woocommerce .page-title,
.woocommerce h1.entry-title {
	margin-bottom: var(--arterio-space-4);
}

/* Contagem à esquerda e ordenação à direita, na mesma linha (padrão do Woo) */
.woocommerce .woocommerce-result-count {
	float: left;
	font-size: 0.8125rem;
	color: var(--arterio-text-muted);
	margin-bottom: var(--arterio-space-4);
}

.woocommerce .woocommerce-ordering {
	float: right;
	margin-bottom: var(--arterio-space-4);
}

.woocommerce .woocommerce-ordering select {
	width: auto;
	border: 1px solid var(--arterio-border);
	border-radius: 0;
	padding: 0.5rem 0.75rem;
	font-size: 0.8125rem;
}

.woocommerce ul.products {
	clear: both;
}

/* --- Sidebar de categorias (arquivos de produto) ---
Some abaixo de 1024px, como o `hidden lg:block w-64` do original.

Dois contextos, porque a sidebar tem dois caminhos de renderização (ver
inc/woocommerce.php): dentro de uma coluna do template Elementor, onde é um bloco
comum na grade; ou injetada em .ast-woocommerce-container pelo hook de fallback,
onde precisa sair do fluxo. No fallback não dá para usar CSS Grid: um item que
ocupa várias linhas distribui a própria altura entre elas, o que esticava os
espaços entre título, contagem e vitrine. */

.arterio-shop-sidebar {
	display: none;
}

@media (min-width: 1024px) {
	.arterio-shop-sidebar {
		display: block;
	}

	/* Só no caminho de fallback. */
	.arterio-has-shop-sidebar .ast-woocommerce-container {
		position: relative;
		padding-left: 288px;
	}

	.ast-woocommerce-container .arterio-shop-sidebar {
		position: absolute;
		left: 0;
		top: 0;
		width: 240px;
	}
}

/* Sem a sidebar, a coluna do Elementor que a contém não deve ocupar espaço. */
@media (max-width: 1023px) {
	.elementor-widget-shortcode:has(.arterio-shop-sidebar) {
		display: none;
	}
}

/* Medidas do CategorySidebar.tsx: grupos `space-y-8` (32px), pai `mb-3 text-sm`
(12px abaixo, 14px), filhos `space-y-2 text-sm` (8px, 14px). O pai é preto cheio e
os filhos /60 — não o cinza-azulado que estava aqui. */

.arterio-shop-sidebar-group {
	margin-bottom: var(--arterio-space-4);
}

.arterio-shop-sidebar-parent {
	display: block;
	margin-bottom: 0.75rem;
	font-size: 0.875rem;
	font-weight: var(--arterio-weight-normal);
	letter-spacing: 0.025em;
	text-transform: uppercase;
	color: var(--arterio-text);
	text-decoration: none;
}

.arterio-shop-sidebar-parent:hover {
	color: var(--arterio-text-60);
}

.arterio-shop-sidebar-parent.is-current {
	color: var(--arterio-text);
	font-weight: var(--arterio-weight-medium);
}

.arterio-shop-sidebar ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.arterio-shop-sidebar li {
	margin-bottom: 0.5rem;
}

.arterio-shop-sidebar li:last-child {
	margin-bottom: 0;
}

.arterio-shop-sidebar li a {
	font-size: 0.875rem;
	color: var(--arterio-text-60);
	text-decoration: none;
}

.arterio-shop-sidebar li a:hover,
.arterio-shop-sidebar li a.is-current {
	color: var(--arterio-text);
}

.arterio-shop-sidebar li a.is-current {
	font-weight: var(--arterio-weight-medium);
}

/* --- Grade e card de produto ---

Réplica do ProductCard.tsx + ProductListing.tsx do arterio-next.

A diferença estrutural em relação ao que havia aqui: o card não tem borda nem
padding. A moldura e o fundo cinza pertencem à IMAGEM (`aspect-square
bg-neutral-100 border-black/5`), e o card em si é só uma pilha de texto. Por isso
o envoltório `.arterio-product-media`, criado por hook em inc/woocommerce.php.

Grade do original: 1 coluna no celular, 4 a partir de 640px, 5 a partir de 1024px,
com vãos `gap-x-6 gap-y-12` / `sm:gap-x-8 sm:gap-y-16`. Colunas estreitas (~160px
com a sidebar) são intencionais — é assim que o catálogo é apresentado lá. */

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

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

.woocommerce ul.products li.product {
	width: auto !important;
	max-width: none;
	float: none !important;
	clear: none !important;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	border: none;
	box-shadow: none;
	padding: 0;
	margin: 0 !important;
	text-align: left;
	background: none;
}

/* A moldura: quadrada, fundo cinza claro, borda quase invisível que escurece no
hover. O `overflow: hidden` é o que permite o zoom da foto sem vazar. */
.arterio-product-media {
	position: relative;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background-color: var(--arterio-surface-image);
	border: 1px solid var(--arterio-border-soft);
	transition: border-color 0.2s;
}

.woocommerce ul.products li.product:hover .arterio-product-media {
	border-color: var(--arterio-border-strong);
}

.woocommerce ul.products li.product .arterio-product-media img {
	width: 100%;
	height: 100%;
	/* `contain`, não `cover`: as fotos do catálogo são de embalagem, e recortar
	corta justamente a marca e a quantidade. O original usa `cover` porque as fotos
	dele são enquadradas para isso. */
	object-fit: contain;
	margin: 0;
	border-radius: 0;
	transition: transform 0.5s;
}

/* Único zoom de hover do site, como no original (`group-hover:scale-105`). */
.woocommerce ul.products li.product:hover .arterio-product-media img {
	transform: scale(1.05);
}

/* Categoria acima do nome — sai do Astra, no nível /40 do original. */
.woocommerce ul.products li.product .ast-woo-product-category {
	font-size: 0.75rem;
	letter-spacing: 0.025em;
	color: var(--arterio-text-40);
	margin: 0 0 0.25rem;
	line-height: 1.4;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product h2 {
	font-size: 0.875rem;
	font-weight: var(--arterio-weight-normal);
	letter-spacing: -0.01em;
	line-height: 1.4;
	padding: 0;
	margin: 0;
	color: var(--arterio-text);
}

.woocommerce ul.products li.product a:hover .woocommerce-loop-product__title {
	color: var(--arterio-text-60);
}

.woocommerce ul.products li.product .price {
	font-size: 0.875rem;
	font-weight: var(--arterio-weight-normal);
	color: var(--arterio-text);
	margin: 0;
}

/* Ação encostada na base para que as linhas da grade terminem alinhadas, mesmo
com nomes de produto de alturas diferentes. */
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product a.added_to_cart {
	margin-top: auto;
}

.woocommerce ul.products li.product .price del {
	color: var(--arterio-text-40);
	font-weight: var(--arterio-weight-normal);
	margin-right: 0.375rem;
}

.woocommerce ul.products li.product .price ins {
	text-decoration: none;
}

/* "ADICIONAR" é link de texto, não botão — precisa desfazer o sistema de botões
declarado em layout.css, que casa com `.woocommerce a.button`. */
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product a.button,
.woocommerce ul.products li.product a.added_to_cart {
	display: inline;
	width: auto;
	min-height: 0;
	padding: 0;
	border: none;
	background: none;
	color: var(--arterio-text);
	font-size: 0.75rem;
	font-weight: var(--arterio-weight-normal);
	letter-spacing: 0.025em;
	text-transform: uppercase;
	text-decoration: none;
	margin: 0;
}

.woocommerce ul.products li.product .button:hover,
.woocommerce ul.products li.product a.added_to_cart:hover {
	background: none;
	color: var(--arterio-text-60);
}

/* Selo de esgotado: sobreposto à foto, como no original. */
.woocommerce ul.products li.product .ast-shop-product-out-of-stock,
.woocommerce ul.products li.product .out-of-stock,
.woocommerce ul.products li.product span.onsale {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: rgba(255, 255, 255, 0.9);
	color: var(--arterio-text-60);
	border-radius: 0;
	font-size: 0.75rem;
	font-weight: var(--arterio-weight-normal);
	letter-spacing: 0.025em;
	text-transform: uppercase;
	margin: 0;
	padding: 0;
	min-height: 0;
	line-height: 1.4;
}

.woocommerce ul.products li.product .star-rating {
	margin: 0;
	font-size: 0.75rem;
}

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

@media (max-width: 767px) {
	.woocommerce ul.products {
		grid-template-columns: repeat(2, 1fr);
		column-gap: var(--arterio-space-3);
		row-gap: var(--arterio-space-5);
	}
}

/* --- Caixas de categoria na vitrine ---

Mesma técnica do grid da home (ver inc/category-tiles.css): o vão de 1px sobre um
fundo escuro faz as divisórias, então não há bordas somando espessura entre
caixas. Alinhamento à esquerda com respiro interno de 2rem, como o `p-8` do
original — o que havia antes centralizava o texto numa caixa de altura mínima
fixa, e era isso que deixava o rótulo descolado da caixa. */

.woocommerce ul.products:has(li.product-category) {
	gap: 1px;
	background-color: var(--arterio-border);
	border: 1px solid var(--arterio-border);
}

.woocommerce ul.products li.product.product-category {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	background-color: #ffffff;
	padding: var(--arterio-space-4);
	gap: 0;
	min-height: 140px;
	transition: background-color 0.2s;
}

.woocommerce ul.products li.product.product-category:hover {
	background-color: #fafafa;
}

.woocommerce ul.products li.product.product-category a img,
.woocommerce ul.products li.product.product-category .arterio-product-media {
	display: none;
}

.woocommerce ul.products li.product-category > a {
	text-decoration: none;
	display: flex;
	flex-direction: column;
	height: 100%;
}

.woocommerce ul.products li.product-category .woocommerce-loop-category__title {
	font-size: 0.875rem;
	font-weight: var(--arterio-weight-normal);
	letter-spacing: -0.01em;
	color: var(--arterio-text);
	margin: 0;
	padding: 0;
}

.woocommerce ul.products li.product-category .count {
	display: block;
	font-size: 0.75rem;
	font-weight: var(--arterio-weight-normal);
	letter-spacing: 0;
	text-transform: none;
	color: var(--arterio-text-40);
	background: none;
	margin: 0.5rem 0 0;
	padding: 0;
}

/* --- Paginação --- */

.woocommerce nav.woocommerce-pagination {
	margin-top: var(--arterio-space-5);
}

.woocommerce nav.woocommerce-pagination ul {
	border: none;
	display: flex;
	gap: 0.375rem;
}

.woocommerce nav.woocommerce-pagination ul li {
	border: none;
}

.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
	border: 1px solid var(--arterio-border);
	border-radius: 0;
	min-width: 40px;
	padding: 0.5rem;
	font-size: 0.875rem;
}

.woocommerce nav.woocommerce-pagination ul li span.current {
	background-color: #000000;
	color: #ffffff;
	border-color: #000000;
}

/* --- Produto único --- */

.woocommerce div.product {
	margin-bottom: var(--arterio-space-6);
}

.woocommerce div.product .product_title {
	font-size: 1.875rem;
	margin-bottom: var(--arterio-space-2);
}

.woocommerce div.product .woocommerce-product-gallery img {
	border-radius: 0;
	border: 1px solid var(--arterio-border);
}

.woocommerce div.product p.price,
.woocommerce div.product span.price {
	font-size: 1.5rem;
	font-weight: var(--arterio-weight-medium);
	color: var(--arterio-text);
	margin-bottom: var(--arterio-space-3);
}

.woocommerce div.product .woocommerce-product-details__short-description {
	color: var(--arterio-text-muted);
	margin-bottom: var(--arterio-space-3);
}

.woocommerce div.product .stock {
	color: var(--arterio-text-muted);
	font-size: 0.875rem;
}

.woocommerce div.product form.cart {
	margin-bottom: var(--arterio-space-4);
	display: flex;
	flex-wrap: wrap;
	gap: var(--arterio-space-1);
	align-items: stretch;
}

.woocommerce div.product form.cart .quantity .qty {
	border: 1px solid var(--arterio-border);
	border-radius: 0;
	height: 48px;
	width: 72px;
	text-align: center;
}

.woocommerce div.product .product_meta {
	font-size: 0.8125rem;
	color: var(--arterio-text-muted);
	padding-top: var(--arterio-space-3);
	border-top: 1px solid var(--arterio-border);
}

.woocommerce .star-rating {
	color: var(--arterio-text);
}

.woocommerce .star-rating::before {
	color: var(--arterio-border);
}

/* Abas do produto */

.woocommerce div.product .woocommerce-tabs {
	margin-top: var(--arterio-space-5);
}

.woocommerce div.product .woocommerce-tabs ul.tabs {
	border-bottom: 1px solid var(--arterio-border);
	padding: 0;
	margin: 0 0 var(--arterio-space-3);
	display: flex;
	gap: var(--arterio-space-3);
}

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

.woocommerce div.product .woocommerce-tabs ul.tabs li {
	background: none;
	border: none;
	border-radius: 0;
	margin: 0;
	padding: 0;
}

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

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
	padding: 0.75rem 0;
	font-size: 0.8125rem;
	font-weight: var(--arterio-weight-medium);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--arterio-text-muted);
	border-bottom: 2px solid transparent;
	display: block;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
	color: var(--arterio-text);
	border-bottom-color: #000000;
}

.woocommerce section.related,
.woocommerce section.up-sells {
	margin-top: var(--arterio-space-6);
	padding-top: var(--arterio-space-5);
	border-top: 1px solid var(--arterio-border);
}

/* --- Tabelas (carrinho, pedidos) --- */

.woocommerce table.shop_table {
	border: 1px solid var(--arterio-border);
	border-radius: 0;
	border-collapse: collapse;
}

.woocommerce table.shop_table th {
	font-size: 0.75rem;
	font-weight: var(--arterio-weight-medium);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--arterio-text-muted);
	padding: var(--arterio-space-2);
}

.woocommerce table.shop_table td {
	padding: var(--arterio-space-2);
	border-top: 1px solid var(--arterio-border);
}

.woocommerce table.shop_table img {
	border-radius: 0;
}

.woocommerce-cart .cart-collaterals .cart_totals {
	border: 1px solid var(--arterio-border);
	padding: var(--arterio-space-3);
}

.woocommerce-cart .cart-collaterals .cart_totals h2 {
	font-size: 1rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	margin-bottom: var(--arterio-space-2);
}

/* --- Formulários (checkout, conta) --- */

.woocommerce form .form-row {
	margin-bottom: var(--arterio-space-2);
}

.woocommerce form .form-row label {
	font-size: 0.8125rem;
	color: var(--arterio-text-muted);
	margin-bottom: 0.25rem;
	display: block;
}

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce-checkout select,
.select2-container .select2-selection--single {
	border: 1px solid var(--arterio-border);
	border-radius: 0;
	min-height: 48px;
	padding: 0.5rem 0.75rem;
	background-color: #ffffff;
}

.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(--arterio-text);
}

.woocommerce-checkout h3,
.woocommerce-billing-fields h3 {
	font-size: 1rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	margin-bottom: var(--arterio-space-2);
}

.woocommerce-checkout #payment {
	background-color: var(--arterio-surface-muted);
	border-radius: 0;
}

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

/* --- Minha conta --- */

.woocommerce-account .woocommerce-MyAccount-navigation {
	width: 25%;
}

.woocommerce-account .woocommerce-MyAccount-content {
	width: 71%;
}

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

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

.woocommerce-MyAccount-navigation ul li a {
	color: var(--arterio-text-muted);
	text-decoration: none;
	display: block;
	padding: 0.75rem 0;
	font-size: 0.875rem;
}

.woocommerce-MyAccount-navigation ul li.is-active a,
.woocommerce-MyAccount-navigation ul li a:hover {
	font-weight: var(--arterio-weight-medium);
	color: var(--arterio-text);
}

@media (max-width: 767px) {
	.woocommerce-account .woocommerce-MyAccount-navigation,
	.woocommerce-account .woocommerce-MyAccount-content {
		width: 100%;
		float: none;
	}
}

/* --- Avisos --- */

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	border-radius: 0;
	padding: var(--arterio-space-2) var(--arterio-space-3);
	border-top-color: var(--arterio-text);
	font-size: 0.875rem;
}

/* O Astra põe uma dica flutuante nos botões sobrepostos ao card. Ela nasce fora
da tela (esquerda negativa) e criava barra de rolagem horizontal em 390px — além
de não existir no original. */
.ast-card-action-tooltip {
	display: none;
}

/* --- Rodapé do card: preço e ação na mesma linha ---

Na rodada anterior desisti disso dizendo que o Astra duplicava o preço. O
diagnóstico estava errado: eu tentei mover o preço de gancho, e o problema era
esse. A estrutura real do Astra é

  div.astra-shop-summary-wrap
    span.ast-woo-product-category
    a.ast-loop-product__link > h2
    span.price
    a.button

ou seja, preço e botão já são irmãos adjacentes. Basta uma grade de duas colunas
— nenhum hook, nenhuma remoção. */

.astra-shop-summary-wrap {
	display: grid;
	/* `minmax(0, 1fr)` e não `1fr`: por padrão uma trilha de grade não encolhe
	abaixo do conteúdo, então em telas estreitas o rótulo da ação empurrava a
	coluna e o card inteiro vazava da tela. */
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: baseline;
	gap: 0.25rem var(--arterio-space-1);
	min-width: 0;
}

.astra-shop-summary-wrap > * {
	min-width: 0;
}

.astra-shop-summary-wrap > .ast-woo-product-category,
.astra-shop-summary-wrap > .ast-loop-product__link,
.astra-shop-summary-wrap > .woocommerce-loop-product__title {
	grid-column: 1 / -1;
}

.astra-shop-summary-wrap > .price {
	grid-column: 1;
}

.astra-shop-summary-wrap > .button,
.astra-shop-summary-wrap > a.added_to_cart {
	grid-column: 2;
	justify-self: end;
	align-self: center;
}

/* Sem preço (produto variável, "leia mais"), a ação ocupa a linha inteira à
esquerda em vez de ficar pendurada na coluna da direita. */
.astra-shop-summary-wrap:not(:has(.price)) > .button {
	grid-column: 1 / -1;
	justify-self: start;
}

/* Seta ao lado do nome, como no ProductCard.tsx. */
.woocommerce ul.products li.product .astra-shop-summary-wrap > .ast-loop-product__link {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--arterio-space-1);
	text-decoration: none;
}

.woocommerce ul.products li.product .astra-shop-summary-wrap > .ast-loop-product__link > * {
	flex: 1 1 auto;
	min-width: 0;
}

.woocommerce ul.products li.product .astra-shop-summary-wrap > .ast-loop-product__link::after {
	content: "›";
	flex: none;
	font-size: 1rem;
	line-height: 1;
	color: var(--arterio-text-20);
	transition: color 0.2s;
}

li.product:hover .woocommerce ul.products li.product .astra-shop-summary-wrap > .ast-loop-product__link > * {
	flex: 1 1 auto;
	min-width: 0;
}

.woocommerce ul.products li.product .astra-shop-summary-wrap > .ast-loop-product__link::after {
	color: var(--arterio-text);
}

/* O Astra sobrepõe um botão de ação à foto. Não existe no original e concorre com
a ação do rodapé do card. */
.woocommerce ul.products li.product .ast-on-card-button {
	display: none;
}

/* Nota de retirada: linha inteira, abaixo de preço e ação. O nível /40 é o mesmo
do original para este texto — é metadado, não conteúdo que precise ser lido para
decidir a compra. */
.woocommerce ul.products li.product .arterio-pickup-note {
	grid-column: 1 / -1;
	font-size: 0.75rem;
	line-height: 1.4;
	color: var(--arterio-text-40);
	margin-top: 0.25rem;
}

/* --- Escolha de variação em botões ---

O <select> continua no DOM e continua sendo quem manda (ver inc/product-variations.js);
some da tela só depois que os botões existem. A classe é posta pelo JS justamente
para que, sem JS, o campo nativo permaneça visível e o produto siga vendável. */

.arterio-select-oculto {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.woocommerce div.product table.variations {
	margin: 0 0 var(--arterio-space-3);
	border: none;
	display: block;
}

.woocommerce div.product table.variations tbody,
.woocommerce div.product table.variations tr,
.woocommerce div.product table.variations th,
.woocommerce div.product table.variations td {
	display: block;
	padding: 0;
	border: none;
	background: none;
	width: auto;
}

.woocommerce div.product table.variations th.label {
	margin-bottom: 0.625rem;
	font-size: 0.75rem;
	font-weight: var(--arterio-weight-medium);
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--arterio-text-60);
	text-align: left;
}

/* O valor escolhido ao lado do rótulo ("TAMANHO — 4x4"). */
.arterio-swatch-atual {
	margin-left: 0.375rem;
	color: var(--arterio-text);
	text-transform: none;
	letter-spacing: 0;
}

.arterio-swatches {
	display: flex;
	flex-wrap: wrap;
	gap: 0.625rem;
}

.arterio-swatch {
	position: relative;
	min-width: 62px;
	min-height: 44px;
	padding: 0 var(--arterio-space-2);
	font-size: 0.875rem;
	font-weight: var(--arterio-weight-normal);
	line-height: 1;
	color: var(--arterio-text);
	background-color: #ffffff;
	border: 1px solid var(--arterio-border-strong);
	border-radius: 0;
	cursor: pointer;
	transition: border-color 0.2s, background-color 0.2s, color 0.2s;
}

.arterio-swatch:hover {
	border-color: var(--arterio-text);
	background-color: #ffffff;
	color: var(--arterio-text);
}

.arterio-swatch.is-selected {
	background-color: var(--arterio-text);
	border-color: var(--arterio-text);
	color: #ffffff;
}

/* Fora de estoque: apagado, mas ainda clicável — o cliente precisa poder
descobrir por que aquele tamanho não serve. O ponto vermelho é o aviso. */
.arterio-swatch.is-unavailable {
	color: var(--arterio-text-40);
	border-color: var(--arterio-border);
}

.arterio-swatch.is-unavailable::after {
	content: "";
	position: absolute;
	top: -3px;
	right: -3px;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background-color: var(--arterio-destructive);
}

.arterio-swatch.is-unavailable.is-selected {
	background-color: var(--arterio-text-40);
	border-color: var(--arterio-text-40);
	color: #ffffff;
}

/* "Limpar seleção" à direita, discreto.

O link é filho do <td> da tabela de variações, e a tabela virou blocos — então
`text-align: right` no próprio link não desloca nada. Quem alinha é o <td>. */
.woocommerce div.product table.variations td.value {
	text-align: right;
}

.woocommerce div.product table.variations td.value .arterio-swatches {
	text-align: left;
}

.woocommerce div.product .reset_variations {
	display: inline-block;
	margin-top: var(--arterio-space-2);
	font-size: 0.75rem;
	color: var(--arterio-text-60);
	text-decoration: underline;
}

.woocommerce div.product .reset_variations:hover {
	color: var(--arterio-text);
}

/* O WooCommerce repete o preço da variação abaixo do seletor. Com o topo já
mostrando o preço exato (product-variations.js), esse segundo preço seria o mesmo
número duas vezes na mesma tela. */
.woocommerce div.product .woocommerce-variation-price {
	display: none;
}

/* A disponibilidade ("Em estoque") só existe dentro do bloco de variação, que o
WooCommerce revela por JS. Sem margem ela encosta nos botões de tamanho. */
.woocommerce div.product .woocommerce-variation-availability {
	margin-top: var(--arterio-space-2);
}

.woocommerce div.product .woocommerce-variation-availability .stock {
	margin-bottom: 0;
}

/* --- Estoque e retirada, na página do produto --- */

.woocommerce div.product .stock {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.875rem;
	margin: 0 0 0.5rem;
}

.woocommerce div.product .stock::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background-color: currentColor;
	flex: none;
}

.woocommerce div.product .stock.in-stock {
	color: #1a9c4b;
}

.woocommerce div.product .stock.out-of-stock {
	color: var(--arterio-destructive);
}

.woocommerce div.product .arterio-pickup-note {
	display: block;
	font-size: 0.75rem;
	color: var(--arterio-text-40);
	margin-bottom: var(--arterio-space-3);
}

/* --- Passador de quantidade --- */

.woocommerce .quantity.arterio-qty {
	display: inline-flex;
	align-items: stretch;
	border: 1px solid var(--arterio-border-strong);
}

.woocommerce .quantity.arterio-qty input.qty {
	width: 3rem;
	min-height: 44px;
	padding: 0;
	text-align: center;
	font-size: 0.875rem;
	border: none;
	border-inline: 1px solid var(--arterio-border);
	border-radius: 0;
	background: none;
	appearance: textfield;
}

.woocommerce .quantity.arterio-qty input.qty::-webkit-outer-spin-button,
.woocommerce .quantity.arterio-qty input.qty::-webkit-inner-spin-button {
	appearance: none;
	margin: 0;
}

.arterio-qty-btn {
	min-width: 42px;
	min-height: 44px;
	padding: 0;
	font-size: 1rem;
	line-height: 1;
	color: var(--arterio-text-60);
	background: none;
	border: none;
	border-radius: 0;
	cursor: pointer;
	transition: color 0.2s, background-color 0.2s;
}

.arterio-qty-btn:hover {
	color: var(--arterio-text);
	background-color: #fafafa;
}