/**
 * Jane Flores — catálogo e cards de produto.
 *
 * Objetivo do card (§7): permitir comparar rapidamente foto, nome, preço,
 * tamanho e característica principal — sem abrir cada produto.
 */

/* ---------- Cabeçalho do catálogo ---------- */

/* Título do catálogo à esquerda, no tamanho dos títulos de bloco da home —
   centralizado e com o respiro do Storefront, ele abria um vão de ~100px antes
   da primeira coroa.

   O segundo seletor é o do Storefront em página sem sidebar (padding de
   5,99em embaixo, especificidade 0,2,0); sem repeti-lo, o vão voltava. */
.woocommerce-products-header,
.storefront-full-width-content .woocommerce-products-header {
	padding: var(--jf-space-md) 0 var(--jf-space-md);
	margin: 0;
	text-align: left;
}

.woocommerce-products-header__title,
.woocommerce-products-header__title.page-title {
	margin: 0;
	font-size: var(--jf-size-2xl);
	text-align: left;
}

.woocommerce-products-header .term-description p {
	margin: var(--jf-space-3xs) 0 0;
	color: var(--jf-color-text-muted);
	font-size: var(--jf-size-sm);
}

.woocommerce-breadcrumb {
	margin-bottom: var(--jf-space-md);
	color: var(--jf-color-text-muted);
	font-size: var(--jf-size-sm);
}

/* Os links do fio herdavam o cinza #727272 do Storefront, que eu nunca tinha
   sobrescrito. No fundo azulado antigo ele dava 4,55:1 e passava raspando; no
   bege quente caiu para 4,41:1 e reprovou. Vale a lição: trocar a base obriga
   a remedir tudo, inclusive o que vem do tema pai. */
.woocommerce-breadcrumb a {
	color: var(--jf-color-primary);
}

.woocommerce-breadcrumb a:hover {
	color: var(--jf-color-primary-hover);
}

.jf-breadcrumb__sep {
	display: inline-block;
	margin: 0 var(--jf-space-3xs);
	color: var(--jf-color-border-strong);
}

/* ---------- Grade ----------
 * Grid próprio no lugar do float do Storefront: colunas de largura mínima
 * garantida, quebrando sozinhas conforme a tela.
 */

.woocommerce ul.products,
.woocommerce-page ul.products {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--jf-space-md);
	margin: 0 0 var(--jf-space-xl);
	padding: 0;
	list-style: none;
}

/* O Storefront aplica clearfix em `ul.products`. Num container grid, esses
   pseudo-elementos viram itens de grade e ocupam a primeira célula, empurrando
   o primeiro produto para a coluna 2. */
.woocommerce ul.products::before,
.woocommerce ul.products::after,
.woocommerce-page ul.products::before,
.woocommerce-page ul.products::after {
	content: none;
	display: none;
}

/* Colunas explícitas em vez de auto-fill: a contagem passa a ser uma decisão
   de design em cada faixa, não um resultado da largura disponível. */


@media (min-width: 48em) {
	.woocommerce ul.products,
	.woocommerce-page ul.products {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (min-width: 64em) {
	.woocommerce ul.products,
	.woocommerce-page ul.products {
		grid-template-columns: repeat(4, 1fr);
		gap: var(--jf-space-lg) var(--jf-space-md);
	}
}

/* Neutraliza o sistema de colunas por float do tema pai.
 *
 * `!important` aqui é deliberado e está contido nestas cinco declarações.
 *
 * O Storefront distribui a largura das colunas por uma matriz de seletores —
 * `.site-main ul.products.columns-N li.product`,
 * `.storefront-full-width-content .site-main ul.products.columns-N li.product`
 * e variantes por template — chegando a especificidade (0,5,2), toda dentro de
 * `@media (min-width: 768px)`. Tentar vencer isso enumerando os seletores dele
 * significa manter uma cópia da matriz interna do tema pai e torcer para que
 * ela não mude numa atualização.
 *
 * Como a grade aqui é substituída por completo — CSS Grid no `ul`, largura
 * controlada pela coluna — o que precisamos do `li` é apenas que ele pare de
 * se dimensionar sozinho. Cinco declarações neutralizando o layout antigo são
 * mais estáveis e mais legíveis do que quinze seletores espelhados. */
.woocommerce ul.products li.product,
.site-main ul.products li.product {
	width: 100% !important;
	max-width: none !important;
	margin: 0 !important;
	float: none !important;
	clear: none !important;
}

/* ---------- Card ----------
 * Mesmo desenho do card da vitrine da home (vitrine.css): sem caixa, sem
 * botão, foto com cantos de 8px, nome e preço embaixo. O card inteiro é o
 * link do WooCommerce, que já envolve foto e título.
 */

.woocommerce ul.products li.product {
	position: relative; /* referência da etiqueta de tamanho */
	display: flex;
	flex-direction: column;
	gap: var(--jf-space-3xs);
	background: none;
	border: 0;
	box-shadow: none;
	text-align: left;
}

.woocommerce ul.products li.product .woocommerce-loop-product__link {
	display: flex;
	flex-direction: column;
	color: var(--jf-color-text);
	text-decoration: none;
	border-radius: var(--jf-radius-md);
}

.woocommerce ul.products li.product .woocommerce-loop-product__link:focus-visible {
	outline: var(--jf-focus-width) solid var(--jf-color-focus);
	outline-offset: var(--jf-focus-offset);
}

/* Foto: 4:5, porque a coroa é uma peça vertical, num tripé (§16). O overflow
   fica no link, para o zoom do hover não vazar pelos cantos. */
.woocommerce ul.products li.product img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	margin: 0 0 var(--jf-space-xs);
	background-color: var(--jf-color-surface-alt);
	border-radius: var(--jf-radius-md);
	box-shadow: none;
	transition: transform var(--jf-duration-slow) var(--jf-ease);
}

.woocommerce ul.products li.product .woocommerce-loop-product__link {
	overflow: hidden;
}

@media (hover: hover) {
	.woocommerce ul.products li.product:hover img {
		transform: scale(1.03);
	}
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
	padding: 0;
	margin: 0;
	font-family: var(--jf-font-body);
	font-size: var(--jf-size-sm);
	font-weight: var(--jf-weight-regular);
	line-height: var(--jf-leading-snug);
	color: var(--jf-color-text);
	transition: color var(--jf-transition);
}

.woocommerce ul.products li.product:hover .woocommerce-loop-product__title {
	color: var(--jf-color-primary);
}

/* Etiqueta de tamanho, sobre a foto. Fundo sólido: o contraste sobre véu
   dependeria da foto, e as coroas são quase todas claras. */
.jf-card__tag {
	position: absolute;
	top: var(--jf-space-xs);
	left: var(--jf-space-xs);
	z-index: 2;
	display: inline-flex;
	align-items: center;
	padding: var(--jf-space-3xs) var(--jf-space-2xs);
	background-color: var(--jf-color-surface);
	color: var(--jf-color-text);
	font-size: var(--jf-size-xs);
	font-weight: var(--jf-weight-semibold);
	line-height: 1.4;
	border-radius: var(--jf-radius-sm);
	box-shadow: var(--jf-shadow-sm);
}

.woocommerce ul.products li.product .price {
	display: block;
	padding: 0;
	margin: 0;
	color: var(--jf-color-text);
	font-family: var(--jf-font-body);
	font-size: var(--jf-size-sm);
	font-weight: var(--jf-weight-semibold);
}

.woocommerce ul.products li.product .price del,
.woocommerce ul.products li.product .price ins {
	display: inline;
	text-decoration: none;
	background: none;
}

/* Sem selo de promoção: o catálogo não faz apelo comercial (§2.4). */
.woocommerce ul.products li.product .onsale {
	display: none;
}

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

.woocommerce nav.woocommerce-pagination ul {
	border: 0;
	gap: var(--jf-space-3xs);
	display: flex;
	justify-content: center;
}

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

.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
	min-width: var(--jf-tap-min);
	min-height: var(--jf-tap-min);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--jf-radius-md);
	color: var(--jf-color-primary);
}

.woocommerce nav.woocommerce-pagination ul li span.current {
	background-color: var(--jf-color-primary);
	color: var(--jf-color-text-on-dark);
}

/* O invólucro do fio de navegação do Storefront tem ~72px de margem embaixo;
   era o vão entre o fio e o produto (e entre o fio e a grade do catálogo). */
.storefront-breadcrumb {
	margin: 0;
	padding: var(--jf-space-md) 0 0;
}

/* O respiro abaixo do fio fica por conta do padding do conteúdo; somados, os
   dois abriam quase 60px acima do produto. */
.storefront-breadcrumb .woocommerce-breadcrumb {
	margin-bottom: 0;
}