/**
 * ShopTop Design System — Cards e Selos (badges)
 * ------------------------------------------------------------------
 * Card genérico reutilizável (produto, parceiro, achadinho, benefício).
 * Este arquivo NÃO define o layout de nenhuma página específica —
 * apenas o componente visual base, que será usado nas Etapas 5-7.
 *
 * Classe base: .shoptop-card
 * Selos:       .shoptop-badge  + modificador de tipo de venda:
 *              --proprio   (verde)  "Vendido e entregue pela ShopTop"
 *              --parceiro  (laranja) "Vendido e entregue pelo parceiro"
 *              --afiliado  (azul)   "Produto afiliado"
 *              --promo     (amarelo) "Promoção / Achadinho"
 *
 * Depende de: tokens.css, variables.css
 */

.shoptop-card,
li.product {
	background-color: var(--shoptop-card-bg);
	border: 1px solid var(--shoptop-card-border);
	border-radius: var(--shoptop-card-radius);
	box-shadow: var(--shoptop-card-shadow);
	padding: var(--shoptop-card-padding);
	position: relative;
	transition: box-shadow 0.15s ease, transform 0.15s ease;
}

/* Uso opcional: cards clicáveis (ex.: card de produto) ganham leve
 * elevação ao passar o mouse, para indicar interatividade. Seletor
 * "li.product" (sem exigir ancestral "ul.products") porque o
 * WooCommerce Blocks (Loja/categoria/busca) não usa essa classe no
 * <ul> — ver nota completa mais abaixo, antes do bloco "Card de
 * produto premium". */
.shoptop-card--hoverable:hover {
	box-shadow: var(--shoptop-card-shadow-hover);
	transform: translateY(-2px);
}

/* Card de produto: elevação mais forte que o card genérico — é o
 * elemento mais "clicável" da grade, precisa se destacar mais. Sprint
 * F: sombra mais suave/difusa (mais blur, menos opacidade) e elevação
 * mais discreta que a versão original da Sprint E. */
li.product:hover {
	box-shadow: 0 14px 28px rgba(17, 24, 39, 0.10);
	transform: translateY(-3px);
}

.shoptop-card__title {
	font-size: var(--shoptop-font-size-md);
	font-weight: var(--shoptop-font-weight-semibold);
	margin: 0 0 var(--shoptop-space-1) 0;
}

.shoptop-card__meta {
	font-size: var(--shoptop-font-size-sm);
	color: var(--shoptop-color-text-secondary);
}

/* -------------------------------------------------------------------
 * Selos (badges) de identificação de vendedor/entrega
 * ------------------------------------------------------------------- */

.shoptop-badge {
	display: inline-flex;
	align-items: center;
	gap: var(--shoptop-space-1);
	font-size: var(--shoptop-font-size-xs);
	font-weight: var(--shoptop-font-weight-semibold);
	line-height: 1.4;
	padding: 2px var(--shoptop-space-2);
	border-radius: var(--shoptop-radius-full);
	border: 1px solid transparent;
	white-space: nowrap;
}

.shoptop-badge--proprio {
	background-color: var(--shoptop-badge-proprio-bg);
	color: var(--shoptop-badge-proprio-text);
	border-color: var(--shoptop-badge-proprio-border);
}

.shoptop-badge--parceiro {
	background-color: var(--shoptop-badge-parceiro-bg);
	color: var(--shoptop-badge-parceiro-text);
	border-color: var(--shoptop-badge-parceiro-border);
}

.shoptop-badge--afiliado {
	background-color: var(--shoptop-badge-afiliado-bg);
	color: var(--shoptop-badge-afiliado-text);
	border-color: var(--shoptop-badge-afiliado-border);
}

.shoptop-badge--promo {
	background-color: var(--shoptop-badge-promo-bg);
	color: var(--shoptop-badge-promo-text);
	border-color: var(--shoptop-badge-promo-border);
}

/* -------------------------------------------------------------------
 * Card de produto premium (Sprint D) — retargeting do markup nativo
 * do WooCommerce (nenhum template é sobrescrito, só CSS mirando nas
 * classes que o WooCommerce já gera).
 *
 * IMPORTANTE: o WooCommerce renderiza produtos de DUAS formas
 * diferentes neste site, e os seletores abaixo cobrem as duas:
 *   1) Template clássico (wc_get_template_part('content','product')),
 *      usado por Home e pelos shortcodes do ShopTop Core (Achadinhos,
 *      Parceiros) — <ul class="products"><li class="product">,
 *      título ".woocommerce-loop-product__title", preço ".price",
 *      botão ".button".
 *   2) WooCommerce Blocks (bloco "Product Template"), usado por Loja,
 *      categoria e busca neste tema — <li class="wc-block-product
 *      product ...">, título ".wp-block-post-title", preço
 *      ".wc-block-components-product-price", botão
 *      ".wc-block-components-product-button__button".
 * Em ambos os casos o WooCommerce sempre inclui a classe "product" no
 * <li> (via post_class()), por isso o seletor de card usa "li.product"
 * puro, sem exigir um ancestral "ul.products" (que só existe no
 * template clássico).
 *
 * Escopo: Home, Loja, categoria, busca, produtos relacionados,
 * Achadinhos, Parceiros e qualquer shortcode público do ShopTop Core.
 * Carrinho, Checkout, Minha Conta e wp-admin nunca renderizam
 * "li.product", então nunca são afetados por este bloco — não precisa
 * de exclusão manual (confirmado por teste manual, ver
 * docs/VISUAL-REFINEMENT.md).
 *
 * Seletor primário: classes semânticas do ShopTop Core
 * (shoptop-product--own/--marketplace/--affiliate, aplicadas via
 * post_class()/body_class() em shoptop-core/modules/products/
 * tipo-venda.php — funcionam nos dois sistemas de template). Classes
 * nativas do WooCommerce (product_type_external,
 * form.cart[method="get"]) continuam listadas como fallback —
 * conferir após atualizações do WooCommerce (ver
 * docs/ADR-0002-css-retargeting.md).
 * ------------------------------------------------------------------- */

/* Grade padrão para qualquer `.products` (grade nativa do WooCommerce)
 * que apareça FORA de `.shoptop-home-grid` (Sprint G.9.1) — cobre
 * `/achadinhos/` (shortcode `[shoptop_achadinhos]`, que não carrega
 * home-products.css: esse arquivo só é enfileirado em is_front_page())
 * e qualquer outro ponto do site que use a listagem nativa de produtos
 * sem o wrapper da Home.
 *
 * Causa raiz corrigida aqui: sem nenhuma largura própria definida,
 * `.products` ficava com o dimensionamento nativo do WooCommerce (uma
 * `<li>` bem mais larga que a imagem do produto, que não tem width:100%
 * definido em nenhum CSS deste tema) — o botão de comprar/parceiro
 * (que corretamente ocupa 100% da largura do card) parecia "maior que
 * o produto" só porque o card em si estava maior que a imagem.
 *
 * auto-fill + minmax (em vez da escala fixa por breakpoint de viewport
 * usada em `.shoptop-home-grid .products`, home-products.css) de
 * propósito: esta regra não sabe, de antemão, a largura do container
 * onde vai cair — a Home sempre envolve a grade em `.shoptop-container`
 * (max-width:1200px), mas a página `/achadinhos/` usa a largura
 * "constrained" padrão do bloco (~620-650px, definida pelo tema). Colunas
 * fixas por viewport (copiadas de home-products.css numa primeira
 * tentativa) davam cards minúsculos (~150px) nesse container mais
 * estreito, menores que a própria imagem do produto (300px) — o oposto
 * do problema original. minmax(240px, 1fr) deixa cada card nunca menor
 * que 240px (nunca menor que a imagem depois de encolher) nem maior que
 * o necessário para preencher as colunas que cabem — se sobrar espaço
 * (grade com só 1 produto, caso comum de Achadinhos hoje), esse espaço
 * fica em branco ao lado do card, sem esticar o card sozinho.
 *
 * Especificidade menor que `.shoptop-home-grid .products` (1 classe vs
 * 2) — a regra da Home continua no controle lá, sem conflito; esta é
 * só o padrão para todo o resto do site. */
.products {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: var(--shoptop-space-3);
	list-style: none;
	margin: 0;
	padding: 0;
}

.products li.product {
	margin: 0;
}

/* Card de produto premium (Sprint E): raio maior que o card genérico
 * (só em li.product, nunca no .shoptop-card base — não afeta card de
 * categoria/benefício) e imagem "sangrando" até a borda em vez de ficar
 * dentro do padding do card, efeito comum em marketplace. */
/* Sprint F: borda mais refinada/discreta — a definição do card já vem
 * da sombra (acima), a borda só precisa evitar que o card "flutue" sem
 * limite sobre fundos claros. */
/* Sprint G.4: coluna flex — os cards de uma mesma linha já ficam com a
 * mesma altura (comportamento padrão de grid/flex do WooCommerce), mas
 * o botão de compra ficava em alturas diferentes dentro de cada card
 * conforme o conteúdo acima dele variava (ex.: produto em promoção tem
 * uma linha extra de preço "de/por" que os sem promoção não têm). Com
 * coluna flex + botão com margin-top:auto (mais abaixo neste arquivo),
 * o botão sempre fica colado na base do card, alinhado com os outros
 * botões da mesma linha, qualquer que seja o conteúdo acima dele. */
li.product {
	display: flex;
	flex-direction: column;
	list-style: none;
	border-radius: var(--shoptop-radius-lg);
	border-color: var(--shoptop-gray-100);
	overflow: hidden;
}

/* Wrapper da imagem: o overflow:hidden fica AQUI, não na própria
 * imagem — se o zoom no hover ficasse só na tag <img>, o conteúdo
 * "vazaria" visualmente para fora do card. Margem negativa igual ao
 * padding do card faz a imagem ocupar a largura total do card (só
 * arredondada em cima, para acompanhar o raio do card). */
li.product a.woocommerce-LoopProduct-link,
li.product .wc-block-components-product-image {
	display: block;
	overflow: hidden;
	margin: calc(-1 * var(--shoptop-card-padding)) calc(-1 * var(--shoptop-card-padding)) var(--shoptop-space-2);
	border-radius: var(--shoptop-radius-lg) var(--shoptop-radius-lg) 0 0;
}

li.product img {
	aspect-ratio: 1 / 1;
	object-fit: cover;
	display: block;
	transition: transform 0.2s ease;
}

li.product:hover img {
	transform: scale(1.04);
}

/* Selo (impresso por shoptop_child_selo_tipo_venda_no_loop, em
 * inc/home-product-badges.php) posicionado sobre a imagem. */
li.product .shoptop-badge {
	position: absolute;
	top: var(--shoptop-space-2);
	left: var(--shoptop-space-2);
	z-index: 1;
	/* Sombra leve: o selo agora fica sobre a imagem sangrando até a borda,
	 * precisa de contraste garantido em fotos de qualquer cor de fundo. */
	box-shadow: var(--shoptop-shadow-sm);
}

/* Título: limite de 2 linhas, evita cards com alturas desiguais. */
li.product .woocommerce-loop-product__title,
li.product .wp-block-post-title {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-size: var(--shoptop-font-size-md);
	font-weight: var(--shoptop-font-weight-semibold);
}

/* Preço: valor anterior discreto, valor atual em destaque. */
li.product .price del,
li.product .wc-block-components-product-price del {
	color: var(--shoptop-color-text-muted);
	font-size: var(--shoptop-font-size-sm);
	opacity: 1;
}

/* Sprint F: preço atual em cor de marca (era só texto neutro em negrito)
 * — mais destacado, padrão comum em marketplace. */
li.product .price ins,
li.product .wc-block-components-product-price ins {
	text-decoration: none;
	font-weight: var(--shoptop-font-weight-bold);
	color: var(--shoptop-color-primary-700);
}

/* Sprint F: cor de marca também no preço "simples" (sem promoção, sem
 * <ins>/<del>) — ver regra de <ins> logo acima para o caso com desconto. */
li.product .price,
li.product .wc-block-components-product-price {
	font-size: var(--shoptop-font-size-xl);
	font-weight: var(--shoptop-font-weight-bold);
	color: var(--shoptop-color-primary-700);
}

/* Cola o botão (de qualquer tipo — próprio/marketplace/afiliado) na
 * base do card, ver comentário em "li.product { display:flex... }" no
 * topo do arquivo. Seletor por filho direto: no template clássico o
 * <a class="button"> é filho direto do <li>; nos blocos, o filho direto
 * é o <div class="wc-block-components-product-button">. */
li.product > a.button,
li.product > .wc-block-components-product-button {
	margin-top: auto;
}

/* Botão "comprar" em largura total — visual preenchido por padrão
 * (produto próprio/marketplace, ambos concluem a compra na loja). Sprint
 * White Label G.16: texto passou a incluir o nome comercial da empresa
 * ("Comprar na {nome}"), que varia de tamanho por instalação — corrigido
 * para nunca desalinhar/estourar com um nome maior (align-items para
 * centralização vertical, min-height para nunca colapsar com texto de 2
 * linhas, white-space+overflow-wrap para quebrar em vez de vazar). */
li.product .button,
li.product .wc-block-components-product-button__button {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 44px;
	padding: var(--shoptop-space-2) var(--shoptop-space-3);
	margin-top: var(--shoptop-space-2);
	background-color: var(--shoptop-btn-primary-bg);
	color: var(--shoptop-btn-primary-text);
	border-radius: var(--shoptop-radius-sm);
	font-weight: var(--shoptop-font-weight-semibold);
	text-align: center;
	line-height: 1.25;
	white-space: normal;
	overflow-wrap: break-word;
	transition: background-color 0.15s ease;
}

li.product .button:hover,
li.product .wc-block-components-product-button__button:hover {
	background-color: var(--shoptop-btn-primary-bg-hover);
	box-shadow: var(--shoptop-shadow-sm);
}

/* Botão de afiliado: visual outline, deliberadamente diferente do
 * botão preenchido, para nunca parecer igual ao produto próprio.
 * Seletor primário: classe semântica do ShopTop Core (funciona nos
 * dois sistemas de template, pois post_class() roda nos dois).
 * Fallback: classe nativa "product_type_external" (presente em ambos
 * os templates) e o atributo method="get" do formulário (página
 * individual), que só produtos externos usam. */
.shoptop-product--affiliate .button,
.shoptop-product--affiliate .wc-block-components-product-button__button,
li.product .product_type_external,
form.cart[method="get"] .single_add_to_cart_button {
	background-color: transparent;
	color: var(--shoptop-btn-affiliate-text);
	border: 1px solid var(--shoptop-btn-affiliate-border);
}

.shoptop-product--affiliate .button:hover,
.shoptop-product--affiliate .wc-block-components-product-button__button:hover,
li.product .product_type_external:hover,
form.cart[method="get"] .single_add_to_cart_button:hover {
	background-color: var(--shoptop-btn-affiliate-bg-hover);
}

/* -------------------------------------------------------------------
 * Padrão Oficial dos Botões de Parceiros — ofertas afiliadas
 * (complemento visual da Sprint G.3, especificação do responsável).
 *
 * Componente único: .shoptop-btn-parceiro, com 2 áreas internas —
 * ícone (largura fixa) e texto (centralizado só na própria área, nunca
 * no botão inteiro, para nomes longos como "Mercado Livre" não
 * desequilibrarem o botão). O HTML é montado uma única vez por
 * shoptop-core/modules/products/botao-parceiro.php, via o filtro
 * nativo woocommerce_loop_add_to_cart_link — o mesmo filtro é aplicado
 * pelo template clássico (Home/Achadinhos/relacionados) e pelo bloco
 * nativo "Product Button" (Loja/categoria/busca), então este único
 * bloco de CSS cobre as duas formas de listagem, sem seletor
 * duplicado por sistema de template.
 *
 * Sobrescreve, de propósito, as propriedades de borda/raio/altura da
 * regra genérica de botão de afiliado acima (mesma origem de cor —
 * var(--shoptop-btn-affiliate-*) — só o layout muda).
 * ------------------------------------------------------------------- */

/* O bloco nativo "Product Button" do WooCommerce embrulha o <a> num
 * <div class="wp-block-button wc-block-components-product-button">
 * que, por padrão, encolhe para o conteúdo (herança do bloco nativo
 * "Botão" do WordPress, que só ocupa 100% quando uma largura é
 * definida no editor) — sem isso, width:100% no <a> vale 100% de um
 * contêiner já pequeno, deixando o botão estreito. Só existe no
 * sistema de blocos (Loja/categoria/busca); o template clássico
 * (Home/Achadinhos/relacionados) não tem esse wrapper, então esta
 * regra não afeta nada lá. */
li.product .wc-block-components-product-button {
	width: 100%;
}

/* Sangra até a borda esquerda/direita do card (mesma técnica de margem
 * negativa já usada na imagem do produto, Sprint E/F) — no mockup de
 * referência o botão ocupa a MESMA largura da imagem/card, não só o
 * espaço interno com padding. Só horizontal — em cima/embaixo o botão
 * mantém o respiro normal do card, como no mockup. li.product já tem
 * overflow:hidden (cards.css, acima), então o sangramento lateral é
 * recortado certinho no raio arredondado do card. */
li.product .shoptop-btn-parceiro {
	display: flex;
	align-items: stretch;
	box-sizing: border-box;
	width: calc(100% + 2 * var(--shoptop-card-padding));
	min-height: 56px;
	/* Sem margin-top aqui de propósito: o espaço acima do botão fica a
	 * cargo do margin-top:auto do elemento pai direto (ver "Cola o
	 * botão... na base do card" mais acima) — garante o mesmo
	 * espaçamento no template clássico e nos blocos, sem duplicar valor
	 * de margem em dois lugares. */
	margin-inline: calc(-1 * var(--shoptop-card-padding));
	border: 2px solid var(--shoptop-btn-affiliate-border);
	border-radius: 12px;
	background-color: transparent;
	overflow: hidden;
	text-decoration: none;
	transition: background-color 0.15s ease, box-shadow 0.15s ease;
}

/* O CSS nativo do bloco "Product Button" (wp-block-button-inline-css,
 * carregado pelo próprio WooCommerce) tem DUAS regras com 3 classes de
 * especificidade que brigam com o botão:
 *   .wp-block-button.wc-block-components-product-button .wp-block-button__link
 *     { width:auto; display:inline-flex; ... }
 *   .wp-block-button.wc-block-components-product-button .wc-block-components-product-button__button
 *     { border-style:none; display:inline-flex; ... }
 * O <a> do bloco carrega as duas classes-alvo (wp-block-button__link E
 * wc-block-components-product-button__button) além da nossa — combinar
 * cada uma com a nossa aqui iguala a especificidade em classes (3) e
 * ganha no desempate por elemento (o "li" extra), sem !important. Não
 * afeta o template clássico (Home/Achadinhos), que não usa nenhuma
 * dessas duas classes do bloco. */
li.product .shoptop-btn-parceiro.wp-block-button__link,
li.product .shoptop-btn-parceiro.wc-block-components-product-button__button {
	display: flex;
	width: calc(100% + 2 * var(--shoptop-card-padding));
	border-style: solid;
	border-width: 2px;
}

li.product .shoptop-btn-parceiro:hover {
	background-color: var(--shoptop-btn-affiliate-bg-hover);
}

li.product .shoptop-btn-parceiro:focus-visible {
	outline: 2px solid var(--shoptop-color-primary-500);
	outline-offset: 2px;
}

/* Área do ícone: largura fixa — mesmo espaço para qualquer parceiro,
 * então o início da área de texto nunca muda de posição entre botões.
 * Sem divisória visual (só espaçamento) — mesmo padrão do mockup de
 * referência. */
li.product .shoptop-btn-parceiro__icone {
	display: flex;
	flex: 0 0 64px;
	align-items: center;
	justify-content: center;
	padding: var(--shoptop-space-2);
}

/* Logo real (wp_shoptop_partners.logo_url) e fallback (inicial do nome)
 * usam exatamente a mesma "moldura" — mesmo tamanho, mesmo círculo —
 * para o ícone nunca variar de peso visual entre parceiros, mesmo que
 * o arquivo enviado pelo parceiro/admin não seja quadrado (Sprint G.4:
 * antes a logo real "flutuava" solta, com proporção própria, enquanto
 * o fallback já tinha esse círculo — o botão do Amazon (com logo)
 * parecia visualmente diferente dos demais (só fallback) mesmo com
 * posição idêntica). object-fit:cover preenche a moldura por inteiro
 * (como um avatar) em vez de "contain", que deixava logos não-quadradas
 * pequenas e descentralizadas dentro da área. */
li.product .shoptop-btn-parceiro__icone img,
li.product .shoptop-btn-parceiro__inicial {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: var(--shoptop-radius-full);
	flex-shrink: 0;
}

li.product .shoptop-btn-parceiro__icone img {
	object-fit: cover;
	background-color: var(--shoptop-color-bg);
	border: 1px solid var(--shoptop-color-border);
}

/* Fallback (parceiro sem logo cadastrado) — mesma linguagem visual do
 * fallback de categoria sem imagem (shoptop-category-card__fallback). */
li.product .shoptop-btn-parceiro__inicial {
	background-color: var(--shoptop-color-primary-100);
	color: var(--shoptop-color-primary-700);
	font-size: var(--shoptop-font-size-sm);
	font-weight: var(--shoptop-font-weight-bold);
}

/* Área do texto: ocupa o espaço restante e centraliza SÓ dentro dela —
 * nunca no botão inteiro — para "Comprar em Amazon" e "Comprar no
 * Mercado Livre" ficarem visualmente equilibrados um em relação ao
 * outro, independente do tamanho do nome do parceiro. white-space
 * normal (não nowrap/ellipsis): nunca corta texto; só quebra linha
 * quando o espaço realmente não é suficiente (tende a acontecer só em
 * telas estreitas, nunca força quebra no desktop). */
li.product .shoptop-btn-parceiro__texto {
	display: flex;
	flex: 1 1 auto;
	align-items: center;
	justify-content: center;
	padding-inline: var(--shoptop-space-2);
	/* font-size explícito: o bloco nativo "Product Button" aplica
	 * has-small-font-size (13px) por padrão — sem sobrescrever aqui, o
	 * texto ficaria menor do que no template clássico da Home. */
	font-size: var(--shoptop-font-size-base);
	color: var(--shoptop-btn-affiliate-text);
	font-weight: var(--shoptop-font-weight-bold);
	text-align: center;
	white-space: normal;
	overflow-wrap: break-word;
	line-height: 1.2;
}

/* Card estreito (grades de 2-3 colunas em telas pequenas/médias — a
 * Loja usa colunas do bloco nativo do WooCommerce, fora do escopo
 * deste componente): ícone e texto um pouco menores, para nomes longos
 * como "Comprar em Parceiro teste Exclusão" quebrarem em menos linhas.
 * Nunca esconde/corta texto — só reduz o quanto ele precisa quebrar. */
@media (max-width: 1023px) {
	li.product .shoptop-btn-parceiro__icone {
		flex-basis: 48px;
	}

	li.product .shoptop-btn-parceiro__icone img,
	li.product .shoptop-btn-parceiro__inicial {
		width: 24px;
		height: 24px;
	}

	li.product .shoptop-btn-parceiro__texto {
		font-size: var(--shoptop-font-size-sm);
	}
}

/* -------------------------------------------------------------------
 * Card de parceiro afiliado — seção "Catálogo dos Afiliados" da Home
 * (Sprint G.10.0). Reaproveita .shoptop-card (base) e o mesmo padrão de
 * "moldura" de logo com fallback circular já usado em
 * .shoptop-category-card (patterns/home/categories.php) — card em
 * coluna flex, CTA colado na base (margin-top:auto), mesma altura
 * visual entre cards de uma linha independente do tamanho da frase.
 * ------------------------------------------------------------------- */
.shoptop-affiliate-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

/* max-height + width:auto + object-fit:contain: nunca deforma a logo
 * original, nunca ultrapassa o card (max-width:100% cobre logos muito
 * largas/horizontais). */
.shoptop-affiliate-card__logo {
	max-height: 56px;
	max-width: 100%;
	width: auto;
	object-fit: contain;
	flex-shrink: 0;
	margin-bottom: var(--shoptop-space-3);
}

.shoptop-affiliate-card__logo--fallback {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: var(--shoptop-radius-full);
	background-color: var(--shoptop-color-primary-100);
	color: var(--shoptop-color-primary-700);
	font-size: var(--shoptop-font-size-xl);
	font-weight: var(--shoptop-font-weight-bold);
}

.shoptop-affiliate-card__nome {
	font-size: var(--shoptop-font-size-md);
	margin-bottom: var(--shoptop-space-1);
}

/* flex-grow:1 empurra o CTA para a base do card mesmo quando a frase
 * está ausente ou tem tamanhos diferentes entre cards da mesma linha. */
.shoptop-affiliate-card__frase {
	color: var(--shoptop-color-text-secondary);
	font-size: var(--shoptop-font-size-sm);
	margin-bottom: var(--shoptop-space-3);
	flex-grow: 1;
}

.shoptop-affiliate-card__cta {
	margin-top: auto;
}

/* Parceiro elegível sem link de afiliado válido cadastrado ainda —
 * nunca um botão sem destino real (ver docs/STATUS-PROJETO.md, Sprint
 * G.10.0). */
.shoptop-affiliate-card__sem-link {
	margin-top: auto;
	color: var(--shoptop-color-text-secondary);
	font-size: var(--shoptop-font-size-sm);
}