/**
 * ShopTop — Home: grades de produto e categoria
 * ------------------------------------------------------------------
 * Grade responsiva reutilizada pelas 5 seções de produto da Home
 * (própria, marketplace, afiliados, promoção nativa, novidades) e
 * pelos cards de categoria. Cada card de produto é renderizado pelo
 * template nativo do WooCommerce (content-product.php), então aqui só
 * ajustamos o CONTAINER da grade, não o card em si (já herda estilo
 * de cards.css/buttons.css). Carregado só na página inicial.
 *
 * Depende de: tokens.css, variables.css, cards.css, utilities.css
 */

/* WooCommerce imprime <ul class="products columns-N">; sobrescrevemos
 * o número de colunas com a mesma escala responsiva do Design System
 * (tokens.css/responsive.css), retargetada para o elemento nativo. */
.shoptop-home-grid .products {
	display: grid;
	grid-template-columns: repeat(1, minmax(0, 1fr));
	gap: var(--shoptop-space-3);
	list-style: none;
	margin: 0;
	padding: 0;
}

@media (min-width: 480px) {
	.shoptop-home-grid .products {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 768px) {
	.shoptop-home-grid .products {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {
	.shoptop-home-grid .products {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.shoptop-home-grid .products li.product {
	margin: 0;
}

/* Produtos próprios: imagens menores também devem preencher a área 1:1
 * definida em cards.css. Só width — height vem do aspect-ratio herdado
 * (height:100% quebrava título/preço/botão do card). */
#shoptop-own-grid li.product img {
	width: 100%;
}

/* Botão "Comprar na {nome comercial}": texto pode ser mais longo que os
 * demais botões do site, e sem box-sizing:border-box o padding somava-se
 * por fora do width:100% (mesma causa raiz já documentada em
 * utilities.css/.shoptop-container), deslocando o texto centralizado
 * visualmente para a direita. Único ajuste — display/align-items/
 * justify-content/width/text-align já vêm corretos de cards.css. */
#shoptop-own-grid li.product .button {
	box-sizing: border-box;
}

/* Fluxo de compra sem sair da vitrine (Sprint Refinamento Carrinho) —
 * escopado só a #shoptop-own-grid (vitrine de produtos próprios), nunca
 * global: Loja/categoria/busca usam o mesmo template de card mas
 * continuam com o comportamento padrão do WooCommerce ("Ver carrinho"
 * incluído), decisão de UX só para esta vitrine (ver docs/HOME.md).
 * Todo o mecanismo é 100% nativo do WooCommerce (AJAX add-to-cart já
 * habilitado em WooCommerce > Ajustes > Produtos, sem redirecionamento
 * — confirmado em wp_options antes de implementar): nenhum endpoint
 * próprio, nenhuma reimplementação de carrinho/estoque/preço. */

/* "Ver carrinho" nativo (link .added_to_cart inserido pelo JS do
 * WooCommerce após sucesso) — escondido só aqui. O link continua
 * existindo no DOM (não desabilita a funcionalidade do WooCommerce),
 * só não aparece visualmente nesta vitrine. */
#shoptop-own-grid .added_to_cart {
	display: none;
}

/* Estado "adicionando" — reaproveita a classe .loading que o próprio
 * JS do WooCommerce já liga/desliga no botão (mesmo mecanismo de
 * .shoptop-btn--loading em buttons.css, adaptado para o botão nativo
 * do loop, que usa outra família de classe). pointer-events:none
 * também é a barreira contra duplo clique durante a mesma requisição
 * — o WooCommerce já reaplica o estado normal ao concluir (sucesso OU
 * erro), então o botão nunca fica travado. */
#shoptop-own-grid li.product .button.loading {
	position: relative;
	color: transparent;
	pointer-events: none;
}

#shoptop-own-grid li.product .button.loading::after {
	content: "";
	position: absolute;
	width: 18px;
	height: 18px;
	border: 2px solid var(--shoptop-btn-primary-text);
	border-top-color: transparent;
	border-radius: 50%;
	animation: shoptop-spin 0.6s linear infinite;
}

/* Feedback discreto de "adicionado" — texto (não só cor), aria-live via
 * atributo no HTML injetado por assets/js/home-own-products.js,
 * desaparece sozinho (JS controla o timeout; aqui só a transição). */
#shoptop-own-grid .shoptop-add-feedback {
	display: block;
	margin-top: var(--shoptop-space-1);
	font-size: var(--shoptop-font-size-xs);
	font-weight: var(--shoptop-font-weight-medium);
	color: var(--shoptop-color-primary-700);
	text-align: center;
	opacity: 0;
	transition: opacity 0.2s ease;
}

#shoptop-own-grid .shoptop-add-feedback.is-visible {
	opacity: 1;
}

/* "Todos" da vitrine "Produtos ShopTop" (Sprint Home G.15) — os filtros
 * por categoria que existiam aqui na Sprint Home G.14 foram removidos
 * por decisão de produto (categoria só navega em "Categorias em
 * destaque", não duas vezes na Home); "Todos" ficou como link único,
 * real (<a>, não JS), que limpa ?produtos_pagina e volta ao topo do
 * lote — ver docs/HOME.md. Estado ativo nunca depende só de cor (fundo
 * preenchido + borda + peso da fonte também mudam), ver
 * aria-current="true" no HTML do pattern. Classes mantidas
 * genéricas (não .shoptop-own-filtro-*) porque a mesma aparência de
 * "pill" pode voltar a ser reaproveitada por outro controle no futuro. */
.shoptop-own-filtros {
	display: flex;
	flex-wrap: wrap;
	gap: var(--shoptop-space-2);
	margin-bottom: var(--shoptop-space-4);
}

.shoptop-own-filtro {
	display: inline-flex;
	align-items: center;
	min-height: 36px;
	padding: var(--shoptop-space-1) var(--shoptop-space-3);
	border: 1px solid var(--shoptop-color-border);
	border-radius: var(--shoptop-radius-full);
	background-color: transparent;
	color: var(--shoptop-color-text);
	font-size: var(--shoptop-font-size-sm);
	font-weight: var(--shoptop-font-weight-medium);
	text-decoration: none;
	white-space: nowrap;
}

.shoptop-own-filtro:hover {
	border-color: var(--shoptop-color-primary-700);
}

.shoptop-own-filtro:focus-visible {
	outline: 2px solid var(--shoptop-input-border-focus);
	outline-offset: 2px;
}

.shoptop-own-filtro.is-ativo {
	background-color: var(--shoptop-color-primary-700);
	border-color: var(--shoptop-color-primary-700);
	color: var(--shoptop-color-text-inverse);
	font-weight: var(--shoptop-font-weight-bold);
}

/* Mobile: rolagem horizontal acessível em vez de quebrar em várias
 * linhas apertadas — mesma faixa de breakpoint usada no resto da Home
 * (ver responsive.css). Com só "Todos" hoje, não tem efeito visível,
 * mas mantém o comportamento correto se outro item voltar a existir. */
@media (max-width: 767px) {
	.shoptop-own-filtros {
		flex-wrap: nowrap;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		padding-bottom: var(--shoptop-space-1);
	}

	.shoptop-own-filtro {
		flex: 0 0 auto;
	}
}

/* "Ver mais produtos" (Sprint Home G.15) — link real (<a>), progressive
 * enhancement: assets/js/home-own-products.js troca para AJAX quando
 * disponível, mas o href ?produtos_pagina=N já funciona sozinho (ver
 * docs/HOME.md). Usa .shoptop-btn/.shoptop-btn--secondary/
 * .shoptop-btn--loading do Design System (buttons.css) — nenhum botão
 * novo criado. */
.shoptop-own-carregar {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--shoptop-space-2);
	margin-top: var(--shoptop-space-5);
}

/* .shoptop-btn--loading::after (buttons.css) fixa a cor do spinner em
 * --shoptop-btn-primary-text (branco) — correto num botão --primary de
 * fundo escuro, mas invisível num --secondary de fundo claro/transparente
 * como este. Sobrescrita local e genérica (não específica deste botão),
 * reaproveitável por qualquer --secondary que ligar --loading no futuro. */
.shoptop-btn--secondary.shoptop-btn--loading::after {
	color: var(--shoptop-color-primary-700);
}

/* Categorias (grade própria via .shoptop-grid, ver home-categories.php).
 * Sprint E: entrada escalonada via var(--shoptop-stagger) definida inline
 * no card (índice do item) — funciona com quantidade variável de itens
 * reais + placeholders, ao contrário de :nth-child fixo. Termina sempre
 * em opacity:1 (mesma regra do Hero); prefers-reduced-motion zera a
 * duração globalmente (visual-refinements.css). */
.shoptop-category-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	text-decoration: none;
	color: var(--shoptop-color-text);
	padding: var(--shoptop-space-3);
	overflow: hidden;
	animation: shoptop-fade-in-up 0.4s ease-out both;
	animation-delay: calc(var(--shoptop-stagger, 0) * 0.06s);
}

.shoptop-category-card__image {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: var(--shoptop-radius-md);
	margin-bottom: var(--shoptop-space-2);
	transition: transform 0.2s ease;
}

.shoptop-category-card:hover .shoptop-category-card__image {
	transform: scale(1.04);
}

/* Placeholder de categoria-alvo ainda não cadastrada — nunca é um link
 * (é <div>, não <a>), visual discreto ("em breve"), sem hover de
 * elevação/zoom para não parecer clicável. */
.shoptop-category-card--placeholder {
	border-style: dashed;
	border-color: var(--shoptop-color-border-strong);
	background-color: transparent;
	box-shadow: none;
	cursor: default;
}

/* CORREÇÃO (Sprint de acabamento): fundo era --shoptop-color-bg-alt —
 * exatamente a mesma cor do fundo da própria seção (.shoptop-bg-alt,
 * categories.php), então o círculo ficava praticamente invisível; a cor
 * do ícone (--shoptop-color-text-muted, #9CA3AF sobre #F8F7FC) media
 * ~2.4:1 de contraste, abaixo do mínimo de 3:1 do WCAG AA mesmo para
 * texto grande. Fundo trocado para --shoptop-color-bg (branco, distinto
 * do fundo da seção) e cor do ícone para --shoptop-color-text-secondary
 * (mesma cor já usada no nome/contagem do placeholder logo abaixo) —
 * ~4.8:1, dentro do AA. */
.shoptop-category-card--placeholder .shoptop-category-card__fallback {
	background-color: var(--shoptop-color-bg);
	color: var(--shoptop-color-text-secondary);
}

.shoptop-category-card--placeholder .shoptop-category-card__name {
	color: var(--shoptop-color-text-secondary);
}

.shoptop-category-card__fallback {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 72px;
	height: 72px;
	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);
	margin-bottom: var(--shoptop-space-2);
}

.shoptop-category-card__name {
	font-weight: var(--shoptop-font-weight-medium);
}

.shoptop-category-card__count {
	font-size: var(--shoptop-font-size-xs);
	color: var(--shoptop-color-text-secondary);
}