/**
 * WooCommerce — card de produto e páginas de loja.
 */

/* ==========================================================================
   Card
   ========================================================================== */

/*
 * `ul.products li.product` inclui dois elementos e vence uma regra só de
 * classe. Medido no CSSOM: o margin-bottom de 4.2358em vinha do woocommerce.css,
 * e na home o body não tem a classe .woocommerce — então o seletor longo com
 * .woocommerce nem chegava a casar. Daí a terceira linha.
 */
.coe-vitrine__trilho .coe-card,
ul.products li.product.coe-card,
.woocommerce ul.products li.product.coe-card {
	flex: 0 0 236px;
	width: 236px;
	margin: 0;
	padding: 0;
	scroll-snap-align: start;
	display: flex;
	flex-direction: column;
	align-self: stretch;
	background: none;
	border: 0;
	text-align: left;
}

.coe-card__capa {
	position: relative;
	width: 236px;
	aspect-ratio: 2 / 3;
	margin-bottom: var(--sp-3);
	border-radius: var(--radius);
	overflow: hidden;
	background-color: #fff;
	border: 1px solid var(--line);
}

.coe-card__capa-link {
	display: block;
	width: 100%;
	height: 100%;
}

.coe-card__img,
.coe-card__capa img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	margin: 0;
}

.coe-card__capa-vazia {
	display: block;
	width: 100%;
	height: 100%;
	background-color: var(--paper-2);
}

/* Tag — uma por card, resolvida em PHP. */

.coe-badge {
	position: absolute;
	top: var(--sp-2);
	left: var(--sp-2);
	padding: 6px 10px;
	border-radius: var(--radius-sm);
	font-family: var(--font-ui);
	font-size: 13px;
	font-weight: 700;
	line-height: 1;
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

.coe-badge--pre-venda {
	background-color: var(--navy);
	color: var(--paper);
}

.coe-badge--lancamento {
	background-color: var(--amber);
	color: var(--ink);
}

.coe-badge--ultimas {
	background-color: var(--orange);
	color: var(--ink);
}

.coe-badge--desconto {
	background-color: var(--ink);
	color: var(--paper);
}

/* Corpo */

.coe-card__corpo {
	display: flex;
	flex-direction: column;
	gap: var(--sp-1);
	flex: 1 1 auto;
	/* O mockup respira 4px de cada lado no corpo do card (px-1). */
	padding-inline: var(--sp-1);
}

.coe-card .coe-card__titulo {
	font-family: var(--font-ui);
	font-size: 16px;
	font-weight: 600;
	line-height: 1.3;
	margin: 0;
	/*
	 * Corta em duas linhas sem reservar altura fixa. Reservar as duas linhas
	 * deixava todo card 21px mais alto que o mockup, inclusive os de título
	 * curto. O alinhamento dos botões não depende disso: o item estica
	 * (align-self: stretch) e o bloco de ação sobe com margin-top: auto.
	 *
	 * `overflow: hidden` é obrigatório aqui — sem ele a terceira linha vaza
	 * por cima do preço em vez de ser cortada.
	 */
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
}

.coe-card__titulo a {
	color: var(--ink);
}

.coe-card__autor {
	font-family: var(--font-ui);
	font-size: 14px;
	font-weight: 400;
	color: var(--navy);
}

.coe-card__autor:hover {
	text-decoration: underline;
}

.coe-card__precos {
	display: flex;
	flex-direction: column;
	margin-top: var(--sp-2);
}

.coe-card__preco-antigo,
.coe-card__preco-antigo .amount {
	font-size: 14px;
	color: var(--ink-muted);
	text-decoration: line-through;
}

.coe-card .coe-card__preco,
.coe-card .coe-card__preco .amount {
	font-family: var(--font-ui);
	font-size: 20px;
	font-weight: 700;
	color: var(--ink);
}

.coe-card__parcela {
	font-size: 13px;
	color: var(--ink-muted);
}

/*
 * Pix em navy, não no cinza da parcela: é o único gatilho comercial do card e
 * some se receber o mesmo peso da linha de parcelamento.
 */
.coe-card__pix {
	font-size: 13px;
	font-weight: 600;
	color: var(--navy);
}

.coe-card__acao {
	margin-top: auto;
	padding-top: var(--sp-3);
	padding-inline: var(--sp-1);
}

.coe-card .coe-card__comprar,
.woocommerce ul.products li.product .coe-card__comprar {
	display: flex;
	width: 100%;
	height: 44px;
	margin: 0;
	padding: 0;
	background-color: var(--orange);
	color: var(--ink);
	border-radius: var(--radius);
	font-size: 15px;
	font-weight: 600;
	line-height: 44px;
}

.coe-card .coe-card__comprar:hover {
	background-color: var(--orange-hover);
	color: var(--ink);
}

.coe-card .added_to_cart {
	display: none;
}

/* Hover: a borda sobe para navy, nada se move e a capa não dá zoom. */

.coe-card:hover .coe-card__capa {
	box-shadow: 0 0 0 1px var(--navy);
}

/* ==========================================================================
   Grade da loja (arquivo, categoria, busca)
   ========================================================================== */

.woocommerce ul.products {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: var(--sp-8) var(--gutter);
	margin: 0;
	padding: 0;
	list-style: none;
}

/*
 * O Storefront dimensiona o item da vitrine por porcentagem e float:
 * `.page-template-template-fullwidth-php .site-main ul.products.columns-3
 * li.product { width: 30.43%; float: left }` — cinco classes, mais específico
 * que `.woocommerce ul.products li.product.coe-card`.
 *
 * Com o `ul.products` virando grid, essa porcentagem passa a ser calculada
 * sobre a coluna e não sobre a lista: o card de 294px de trilho renderizava
 * com 89px, a capa encolhia e a tag "Lançamento" saía cortada.
 *
 * Por isso a lista de seletores repete os do tema pai. Não é redundância:
 * é o que empata a especificidade para a ordem de carregamento decidir.
 */
.woocommerce ul.products li.product.coe-card,
.site-main ul.products li.product.coe-card,
.site-main ul.products.columns-3 li.product.coe-card,
.page-template-template-fullwidth-php .site-main ul.products li.product.coe-card {
	flex: initial;
	/*
	 * !important aqui não é preguiça. O Storefront gera
	 * `.columns-5 li.product { width: 16.9% }` como CSS inline no head, e
	 * inline vence folha externa independente de especificidade e de ordem
	 * de carregamento. A alternativa seria desligar a classe columns-N via
	 * PHP, o que quebraria outras regras do tema pai.
	 */
	float: none !important;
	clear: none !important;
	width: 100% !important;
	margin: 0 !important;
}

.woocommerce ul.products li.product.coe-card .coe-card__capa {
	width: 100%;
}

.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-ordering {
	font-size: 14px;
	color: var(--ink-muted);
}

.woocommerce .woocommerce-ordering select {
	height: var(--input-h);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background-color: var(--paper-2);
	color: var(--ink);
	font-family: var(--font-ui);
	padding-inline: var(--sp-3);
}

.woocommerce-no-products-found,
.woocommerce-info,
.woocommerce-message {
	background-color: var(--paper-2);
	border-top-color: var(--navy);
	color: var(--ink);
}

/*
 * O Storefront pinta os avisos para fundo verde: link, botão e o ícone do
 * `::before` saem todos em branco (`woocommerce.css`). Trocado o fundo pelo
 * papel do tema, sobrou branco sobre claro — no carrinho o "Continuar
 * comprando" sumia, e o ícone de confirmação virava um vulto.
 *
 * O ícone fica: o `padding-left: 3.5em` do pai reserva o lugar dele, e
 * apagá-lo deixaria o buraco. Só troca de cor.
 *
 * As telas de /minha-conta/ já resolvem isto em `conta.css`, com seletor mais
 * específico; estas regras cobrem carrinho, loja e checkout.
 */
.woocommerce-no-products-found::before,
.woocommerce-info::before,
.woocommerce-message::before {
	color: var(--navy);
}

.woocommerce-no-products-found a,
.woocommerce-info a,
.woocommerce-message a,
.woocommerce-no-products-found a:hover,
.woocommerce-info a:hover,
.woocommerce-message a:hover,
.woocommerce-info .button,
.woocommerce-message .button,
.woocommerce-info .button:hover,
.woocommerce-message .button:hover {
	color: var(--navy);
}

/*
 * A faixa de aviso do carrinho e do checkout: trilho e respiro do conteúdo.
 *
 * O Storefront imprime os avisos num `<div class="woocommerce">` que é IRMÃO
 * do `#primary`, não filho — e o container do tema mira `#primary`, que não
 * alcança irmão. Sem trilho próprio a faixa ia de borda a borda no desktop,
 * enquanto o carrinho embaixo media os 1280px do container: duas larguras
 * diferentes na mesma tela.
 *
 * O vão vertical vem em seguida. Acima, os 32px do `margin-top` daqui; abaixo,
 * o `padding-top` do `.site-main`, que o Storefront deixa em 4.23em (≈68px) e
 * que aqui passa a valer os mesmos 32px. Sem igualar os dois, o espaço de
 * baixo saía com o dobro do de cima.
 *
 * O `padding-top` fica no `.site-main` em vez de virar `margin-bottom` do
 * aviso porque ele também é o respiro do carrinho quando não há aviso nenhum —
 * que é o caso da maioria das visitas.
 */
.woocommerce-cart #content.site-content > .col-full > .woocommerce,
.woocommerce-checkout #content.site-content > .col-full > .woocommerce {
	max-width: var(--container);
	margin-inline: auto;
	padding-inline: var(--sp-4);
}

.woocommerce-cart .woocommerce-message,
.woocommerce-cart .woocommerce-info,
.woocommerce-checkout .woocommerce-message,
.woocommerce-checkout .woocommerce-info {
	margin-block: var(--sp-8) 0;
}

.woocommerce-cart #primary .site-main,
.woocommerce-checkout #primary .site-main {
	padding-top: var(--sp-8);
}

/* Cinco colunas exigem 1248px de trilho para o card ficar em ~230px, que é a
   largura do card do contrato. Abaixo disso a coluna aperta e o degrau cai. */
@media (max-width: 1279px) {
	.woocommerce ul.products {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

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

@media (max-width: 767px) {
	.woocommerce ul.products {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--sp-8) var(--sp-4);
	}

	/*
	 * Carrossel da home: card mais estreito, capa 173x260.
	 *
	 * O seletor repete `li.product` porque a regra base agora tem essa
	 * especificidade — sem repetir, o 236px do desktop vence aqui e o card
	 * mobile sai com a largura errada. E o `.products` vem colado no trilho,
	 * não separado por espaço: o próprio trilho é o `ul.products`, então
	 * `.coe-vitrine__trilho ul.products` pediria um ul dentro do ul e não
	 * casava com nada.
	 */
	.coe-vitrine__trilho.products li.product.coe-card,
	.coe-vitrine__trilho .coe-card {
		flex: 0 0 173px;
		width: 173px;
	}

	.coe-vitrine__trilho .coe-card__capa {
		width: 173px;
	}

	/* O card mobile do mockup não tem respiro lateral no corpo. */
	.coe-card__corpo,
	.coe-card__acao {
		padding-inline: 0;
	}

	.coe-card .coe-card__titulo {
		font-size: 15px;
	}

	.coe-card .coe-card__preco,
	.coe-card .coe-card__preco .amount {
		font-size: 18px;
	}

	.coe-card .coe-card__comprar {
		text-transform: uppercase;
		font-size: 13px;
	}
}

/* ==========================================================================
   Retirada — aviso colado no método de entrega escolhido

   O rótulo do `local_pickup` diz só "Retirada": não diz onde nem o que levar.
   O bloco entra no checkout e o mesmo texto sai no e-mail do pedido, com
   estilo inline lá porque cliente de e-mail não carrega folha externa.
   ========================================================================== */

.coe-retirada {
	margin: var(--sp-2) 0 0;
	padding: var(--sp-3) var(--sp-4);
	border: 1px solid var(--line);
	border-left: 4px solid var(--navy);
	border-radius: var(--radius);
	background-color: var(--paper-2);
}

.coe-retirada p {
	margin: 0;
	font-family: var(--font-ui);
	font-size: 14px;
	line-height: 20px;
	color: var(--ink);
}

/* Os dois carregam o `p` no seletor para passar da regra acima, que também
   define cor e tamanho. Especificidade em vez de `!important`. */
.coe-retirada p.coe-retirada__titulo {
	font-weight: 700;
	color: var(--navy);
}

.coe-retirada p.coe-retirada__aviso {
	margin-top: var(--sp-1);
	font-size: 13px;
	color: var(--ink-muted);
}

/* ==========================================================================
   Barra de filtros da loja

   O elemento é um `<details>` que nasce ABERTO. Acima de 768px o `<summary>`
   some e ele lê como barra; abaixo, o `filtros.js` o fecha e ele vira a gaveta
   "Filtrar e ordenar", com abrir e fechar vindos do navegador.

   Por que aberto e não fechado: `<details>` fechado não reabre por CSS. O
   colapso vem de um slot interno do navegador, e nem `display` nem
   `content-visibility` no formulário o alcançam — `::details-content`, que
   alcançaria, só existe no Chrome. Foi assim que a primeira versão subiu com
   os seletores no DOM e nada na tela.
   ========================================================================== */

.coe-filtros {
	margin: 0 0 var(--sp-6);
	padding: var(--sp-4);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background-color: var(--paper-2);
}

.coe-filtros__abrir {
	display: none;
}


.coe-filtros__forma {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: var(--sp-4);
	margin: 0;
}

.coe-filtros__campo {
	display: flex;
	flex-direction: column;
	gap: var(--sp-1);
	margin: 0;
	/* Cresce até caber o rótulo mais longo, sem espremer o vizinho. */
	flex: 1 1 180px;
	min-width: 0;
}

.coe-filtros__campo label {
	font-family: var(--font-ui);
	font-size: 13px;
	font-weight: 600;
	color: var(--ink-muted);
}

/*
 * A seta do `<select>` é desenhada aqui, e não deixada para o sistema: a nativa
 * muda de forma entre navegadores e destoa da lupa e do resto dos ícones, que
 * são SVG do tema. Mesmo traço, mesma cor.
 */
.coe-filtros__campo select {
	width: 100%;
	height: var(--input-h);
	padding: 0 calc(var(--sp-8) + 4px) 0 var(--sp-4);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background-color: #fff;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23313036' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right var(--sp-3) center;
	background-size: 18px 18px;
	font-family: var(--font-ui);
	font-size: 15px;
	color: var(--ink);
	appearance: none;
	cursor: pointer;
}

.coe-filtros__campo select:focus {
	border-color: var(--navy);
	outline: 2px solid var(--navy);
	outline-offset: -2px;
}

.coe-filtros__acoes {
	display: flex;
	align-items: center;
	gap: var(--sp-4);
	margin: 0;
}

.coe-filtros__limpar {
	font-family: var(--font-ui);
	font-size: 14px;
	color: var(--ink-muted);
	text-decoration: underline;
}

.coe-filtros__limpar:hover,
.coe-filtros__limpar:focus-visible {
	color: var(--navy);
}

@media (max-width: 767px) {
	/*
	 * Celular: a barra vira gaveta. O `<summary>` volta a aparecer e os campos
	 * empilham — quatro seletores lado a lado em 375px dariam 80px cada, largura
	 * em que nenhum nome de gênero cabe.
	 */
	.coe-filtros__abrir {
		display: flex;
		align-items: center;
		gap: var(--sp-2);
		font-family: var(--font-ui);
		font-size: 15px;
		font-weight: 600;
		color: var(--ink);
		cursor: pointer;
		/* O triângulo padrão do <summary> sai; quem anuncia é o ícone. */
		list-style: none;
	}

	.coe-filtros__abrir::-webkit-details-marker {
		display: none;
	}

	/* Bolinha laranja quando há filtro ligado: com a gaveta fechada, é o único
	   sinal de que a vitrine não está mostrando o catálogo inteiro. */
	.coe-filtros__marca {
		width: 8px;
		height: 8px;
		border-radius: 999px;
		background-color: var(--orange);
	}

	.coe-filtros[open] .coe-filtros__abrir {
		margin-bottom: var(--sp-4);
	}

	.coe-filtros__forma {
		flex-direction: column;
		align-items: stretch;
	}

	.coe-filtros__campo {
		flex: 1 1 auto;
	}

	.coe-filtros__acoes .coe-btn {
		flex: 1 1 auto;
		justify-content: center;
	}
}