/**
 * Páginas de loja e categoria do WooCommerce.
 *
 * O card de produto reaproveita as classes .oju-product-card da home
 * (ver components/product-card.css e woocommerce/content-product.php).
 * Aqui ficam: o cabeçalho editorial da categoria, a barra de ordenação,
 * a grade e os toques mais vibrantes — blocos de cor atrás das fotos,
 * alternando tons quentes da paleta — que dão destaque à compra sem
 * fugir da identidade da marca. Tudo escopado em .oju-main--shop para
 * não afetar a vitrine da home.
 */

/* ===== Trilha de navegação (Início / Categoria) ===== */
.oju-main--shop .oju-breadcrumb,
.oju-main--shop .woocommerce-breadcrumb {
	font-family: var(--oju-font-sans);
	font-size: 11px;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: var(--oju-text-soft2);
	margin-bottom: var(--oju-space-md);
}

.oju-main--shop .woocommerce-breadcrumb a {
	color: var(--oju-text-soft2);
	transition: color 0.15s ease;
}

.oju-main--shop .woocommerce-breadcrumb a:hover {
	color: var(--oju-gold);
}

.oju-main--shop .oju-breadcrumb__sep {
	margin: 0 6px;
	color: var(--oju-border);
}

/* ===== Páginas de blocos: carrinho, checkout e minha conta =====
 *
 * Essas páginas são páginas comuns e passam pelo page.php, cujo
 * conteúdo é limitado a 700px (base/content.css). O checkout em
 * blocos é um layout de duas colunas e não cabe nessa largura: a
 * coluna do "Resumo do pedido" colapsava e o texto do produto
 * quebrava letra por letra. Aqui liberamos a largura do container.
 */
.woocommerce-checkout .oju-post__content,
.woocommerce-cart .oju-post__content,
.woocommerce-account .oju-post__content {
	max-width: none;
}

/* ===== Cabeçalho editorial (eyebrow + título + descrição) ===== */
.oju-shop-eyebrow {
	font-family: var(--oju-font-sans);
	font-size: 11px;
	letter-spacing: 2.5px;
	text-transform: uppercase;
	color: var(--oju-text-soft);
	margin-bottom: var(--oju-space-xs);
}

.oju-main--shop .woocommerce-products-header__title,
.oju-main--shop .page-title {
	font-family: var(--oju-font-serif);
	font-size: 44px;
	font-weight: 400;
	color: var(--oju-text);
	margin: 0 0 var(--oju-space-sm);
}

.oju-main--shop .term-description {
	max-width: 600px;
	color: var(--oju-text-muted);
	font-size: 16px;
	line-height: 1.7;
	margin-bottom: var(--oju-space-lg);
}

/* ===== Barra de contagem / ordenação ===== */
.oju-main--shop .woocommerce-result-count {
	font-size: 11px;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: var(--oju-text-soft2);
}

.oju-main--shop .woocommerce-ordering select {
	font-family: var(--oju-font-sans);
	font-size: 12px;
	color: var(--oju-text);
	border: 1px solid var(--oju-border);
	background: transparent;
	padding: 8px 12px;
	border-radius: 0;
}

/* ===== Grade de produtos ===== */
.oju-main--shop ul.products {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--oju-space-lg) var(--oju-space-md);
	list-style: none;
	padding: 0;
	margin: 0;
}

/* O WooCommerce coloca pseudo-elementos de clearfix (::before/::after)
   no ul.products. Em um grid eles viram CÉLULAS vazias e desalinham
   tudo (a 1ª coluna fica vazia). Removê-los recoloca os produtos no
   lugar certo. */
.oju-main--shop ul.products::before,
.oju-main--shop ul.products::after {
	display: none;
}

/* Cada card preenche a célula do grid: anula a largura/float que o
   WooCommerce aplica por padrão (senão os cards encolhem para ~30% e
   ficam espalhados). A classe .oju-product-card eleva a especificidade
   acima da regra do plugin, sem precisar de !important. */
.oju-main--shop ul.products li.product.oju-product-card {
	width: auto;
	margin: 0;
	float: none;
	text-align: left;
}

/* ===== Card de produto (forma de cor + foto) ===== */
.oju-main--shop .oju-product-card__link {
	display: block;
	color: inherit;
}

.oju-main--shop .oju-product-card__media {
	position: relative;
	margin-bottom: var(--oju-space-sm);
}

/* Bloco de cor espiando atrás da foto; a cor alterna por posição. */
.oju-main--shop .oju-product-card__shape {
	position: absolute;
	right: -12px;
	bottom: -12px;
	width: 72%;
	height: 72%;
	z-index: 0;
	transition: transform 0.35s ease;
}

.oju-main--shop ul.products li.product:nth-child(4n+1) .oju-product-card__shape { background-color: var(--oju-gold); }
.oju-main--shop ul.products li.product:nth-child(4n+2) .oju-product-card__shape { background-color: var(--oju-terracota); }
.oju-main--shop ul.products li.product:nth-child(4n+3) .oju-product-card__shape { background-color: var(--oju-sand); }
.oju-main--shop ul.products li.product:nth-child(4n+4) .oju-product-card__shape { background-color: var(--oju-brown-deep); }

/* A foto fica acima da forma, em proporção retrato. */
.oju-main--shop .oju-product-card__image {
	position: relative;
	z-index: 1;
	height: auto;
	aspect-ratio: 4 / 5;
	margin-bottom: 0;
}

.oju-main--shop .oju-product-card__image img {
	transition: transform 0.5s ease;
}

/* Hover: foto dá zoom e a forma desliza — convite ao clique. */
.oju-main--shop .oju-product-card__link:hover .oju-product-card__image img {
	transform: scale(1.04);
}

.oju-main--shop .oju-product-card__link:hover .oju-product-card__shape {
	transform: translate(5px, 5px);
}

.oju-main--shop .oju-product-card__link:hover .oju-product-card__name {
	color: var(--oju-gold);
}

.oju-main--shop .oju-product-card__name {
	transition: color 0.2s ease;
}

/* Preço em dourado: destaque que chama para a compra. */
.oju-main--shop .oju-product-card__price {
	color: var(--oju-gold);
	font-size: 14px;
	letter-spacing: 0.5px;
}

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

@media (max-width: 480px) {
	.oju-main--shop ul.products {
		grid-template-columns: 1fr;
	}
}

/* ===== Calculadora de frete do Melhor Envio (página de produto) =====
 *
 * Dá à caixa "Simulação de frete" o formato editorial e limpo do tema
 * (referência visual: Basiquinha): rótulo discreto em cima, campo de
 * CEP largo, e o resultado da cotação organizado logo abaixo.
 */
#woocommerce-correios-calculo-de-frete-na-pagina-do-produto {
	margin: var(--oju-space-md) 0;
	padding: var(--oju-space-md);
	border: 1px solid var(--oju-border);
	background: #FCFAF6;
}

#woocommerce-correios-calculo-de-frete-na-pagina-do-produto .col-75 > p {
	font-family: var(--oju-font-sans);
	font-size: 11px;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: var(--oju-text-soft);
	margin: 0 0 var(--oju-space-xs);
}

#woocommerce-correios-calculo-de-frete-na-pagina-do-produto .iptCep {
	width: 100%;
	box-sizing: border-box;
	font-family: var(--oju-font-sans);
	font-size: 14px;
	color: var(--oju-text);
	padding: 12px 14px;
	border: 1px solid var(--oju-border);
	background: #FFFFFF;
	border-radius: 0;
	transition: border-color 0.2s ease;
}

#woocommerce-correios-calculo-de-frete-na-pagina-do-produto .iptCep:focus {
	outline: none;
	border-color: #A0623C;
}

/* Resultado da cotação (tabela com serviços e preços). */
#woocommerce-correios-calculo-de-frete-na-pagina-do-produto .resultado-frete {
	margin-top: var(--oju-space-sm);
}

#woocommerce-correios-calculo-de-frete-na-pagina-do-produto .resultado-frete table {
	width: 100%;
	border-collapse: collapse;
	font-size: 13px;
}

#woocommerce-correios-calculo-de-frete-na-pagina-do-produto .resultado-frete td {
	padding: 8px 0;
	border-bottom: 1px solid var(--oju-border);
	color: var(--oju-text-muted);
}