/**
 * Estilos dos componentes de produto (Product Card, Price Block, etc).
 * Usa exclusivamente as variáveis nativas geradas pelo theme.json
 * (--wp--preset--*), sem framework CSS externo.
 */

/* Reset básico: garante que padding/borda nunca estourem a largura
   declarada (box-sizing: content-box é o padrão do navegador e causa
   elementos com width:100% + padding vazando do container pai). */
.afiliado-product-card,
.afiliado-product-card *,
.afiliado-offers-grid,
.afiliado-product-page,
.afiliado-product-page * {
	box-sizing: border-box;
}

/* Grade de ofertas — breakpoints definidos e testados junto com o
 * usuário. A primeira versão usava só largura (min-width), o que
 * causava um bug real: celulares grandes em pé (alguns Android
 * passam de 480px de largura mesmo em retrato) caíam por engano na
 * regra "celular deitado". Corrigido usando "orientation" de forma
 * explícita — cada faixa só se aplica na orientação real do
 * dispositivo, não só pela largura em pixels.
 *
 * O limite de "computador/notebook" foi ajustado de 1280px para
 * 1200px depois de um teste ao vivo: um notebook real relatou
 * 1279px de largura (1px abaixo do limite antigo), caindo por
 * engano na faixa de tablet. 1200px também bate com a largura
 * máxima do conteúdo do site (global_content_width), então nenhuma
 * tela consegue exibir mais que 1200px de conteúdo mesmo assim —
 * não há motivo para o limite ser maior que isso.
 *
 *   Retrato (em pé),  até 599px      → celular em pé  (configurável)
 *   Paisagem (deitado), até 991px    → celular deitado (configurável)
 *   Retrato (em pé),  600px a 1199px → tablet em pé    (configurável)
 *   Paisagem (deitado), 992 a 1199px → tablet deitado  (configurável)
 *   1200px em diante (qualquer orientação) → computador/notebook
 */
.afiliado-offers-grid {
	display: grid;
	grid-template-columns: repeat(var(--afiliado-grid-columns-mobile-portrait, 2), 1fr);
	gap: var(--wp--preset--spacing--3);
}

@media (orientation: landscape) and (max-width: 991px) {
	.afiliado-offers-grid {
		grid-template-columns: repeat(var(--afiliado-grid-columns-mobile-landscape, 3), 1fr);
		gap: var(--wp--preset--spacing--4);
	}
}

@media (min-width: 600px) and (orientation: portrait) {
	.afiliado-offers-grid {
		grid-template-columns: repeat(var(--afiliado-grid-columns-tablet-portrait, 3), 1fr);
		gap: var(--wp--preset--spacing--4);
	}
}

@media (min-width: 992px) and (orientation: landscape) and (max-width: 1199px) {
	.afiliado-offers-grid {
		grid-template-columns: repeat(var(--afiliado-grid-columns-tablet-landscape, 4), 1fr);
	}
}

@media (min-width: 1200px) {
	.afiliado-offers-grid {
		grid-template-columns: repeat(var(--afiliado-grid-columns, 4), 1fr);
	}
}

/* Cada item direto do grid (incluindo o wrapper usado pelo recurso
   "Ver mais") precisa ser display:flex para propagar o "stretch"
   automático do CSS Grid até o card real dentro dele — sem isso, os
   cards da mesma linha ficavam com alturas diferentes (bug real
   corrigido: um wrapper <div> sem estilo, adicionado para poder
   esconder/mostrar cards extras, quebrava o alinhamento). */
.afiliado-offers-grid > div {
	display: flex;
}

.afiliado-offers-grid > div > .afiliado-product-card {
	width: 100%;
}

/* NOTA: as regras de "Mobile" e "Tablet" (2 colunas) foram removidas
   daqui e movidas para header-footer.css, controladas por
   JavaScript — mesmo motivo já documentado para o "celular/tablet
   deitado": usar só LARGURA da janela também capturava, por engano,
   uma janela do Chrome no DESKTOP redimensionada manualmente (ex:
   ao testar responsividade arrastando a borda da janela), tratando
   o notebook do usuário como se fosse um tablet. Agora só
   dispositivos com toque de verdade (navigator.maxTouchPoints > 0)
   ativam esse comportamento — uma janela de desktop estreita
   continua usando a configuração normal do Painel. */

/* NOTA: removida a regra fixa de "Wide = 5 colunas" que existia
   aqui antes — ela sobrescrevia a configuração do usuário no Painel
   Tema Afiliado (ex: usuário escolhia 6 colunas, mas em telas grandes
   sempre virava 5). A variável --afiliado-grid-columns já respeita
   a escolha do usuário em qualquer tamanho de tela acima do tablet,
   sem precisar de regra extra aqui. */

/* NOTA: a regra de "celular/tablet deitado" foi movida para
   header-footer.css, usando detecção via JavaScript
   (navigator.maxTouchPoints) em vez de media features CSS
   (hover/pointer), que se mostraram pouco confiáveis em testes
   reais com tablets específicos — ver comentário completo lá. */

/* Product Card */
.afiliado-product-card {
	display: flex;
	flex-direction: column;
	background: var(--afiliado-card-bg-color, var(--wp--preset--color--surface));
	border: var(--afiliado-card-border-width, 1px) solid var(--afiliado-card-border-color, var(--wp--preset--color--border));
	border-radius: var(--afiliado-card-border-radius, 10px);
	overflow: hidden;
	transition: box-shadow 0.15s ease, transform 0.15s ease;
	text-decoration: none;
	color: inherit;
}

.afiliado-product-card:hover {
	box-shadow: var(--afiliado-card-hover-shadow, 0 4px 12px rgba(0, 0, 0, 0.1));
	transform: var(--afiliado-card-hover-translate, translateY(-2px));
}

.afiliado-product-card__media {
	display: block;
	aspect-ratio: var(--afiliado-card-image-ratio, 1 / 1);
	background: var(--wp--preset--color--surface);
	overflow: hidden;
}

.afiliado-product-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.25s ease;
}

.afiliado-product-card__media:hover img {
	transform: scale(var(--afiliado-card-image-zoom-scale, 1));
}

.afiliado-product-card__body {
	display: flex;
	flex-direction: column;
	gap: 0;
	padding: var(--afiliado-card-padding, var(--wp--preset--spacing--3));
	flex: 1;
}

.afiliado-product-card__title {
	font-size: var(--afiliado-card-title-font-size, var(--wp--preset--font-size--small)) !important;
	font-weight: 600 !important;
	color: var(--wp--preset--color--secondary);
	text-decoration: none;
	line-height: 1.4;
	margin: 0 0 6px;
	display: -webkit-box;
	-webkit-line-clamp: var(--afiliado-card-title-lines, 2);
	-webkit-box-orient: vertical;
	overflow: hidden;
	/* Reserva sempre o espaço de 2 linhas, mesmo que o título real
	   caiba em 1 — evita que títulos curtos deixem o card mais baixo
	   que os vizinhos na mesma linha do grid. */
	min-height: calc(1.4em * 2);
}

/* Price Block */
.afiliado-price-block {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--wp--preset--spacing--2);
}

.afiliado-price-block__old {
	font-size: var(--wp--preset--font-size--xs);
	/* "Cor do texto do corpo (parágrafos)", aplicada explicitamente
	   via variável (não por herança implícita) — o container pai
	   (.afiliado-merchant) tem "color" própria, então uma herança
	   simples nunca chegaria na cor do body. Usada tanto no card
	   principal da página de produto quanto nos cards de produto da
	   Home/Grade de Ofertas. */
	color: var(--wp--preset--color--body-text);
	text-decoration: line-through;
}

/* Agrupa preço atual + desconto pra sempre ficarem juntos na
   mesma linha — o preço riscado (fora desse wrapper) pode quebrar
   sozinho quando não houver espaço, sem separar "atual" de
   "desconto" um do outro. */
.afiliado-price-block__current-row {
	display: inline-flex;
	align-items: baseline;
	gap: var(--wp--preset--spacing--2);
}

.afiliado-price-block__current {
	font-size: var(--afiliado-card-price-font-size, var(--wp--preset--font-size--medium));
	font-weight: 700;
	color: var(--afiliado-price-color, var(--wp--preset--color--success));
}

.afiliado-price-block__discount {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 700;
	color: var(--wp--preset--color--background, #fff);
	background: var(--afiliado-price-discount-bg-color, var(--wp--preset--color--danger));
	padding: 4px 6px;
	border-radius: var(--afiliado-button-border-radius, 6px);
}

.afiliado-price-block__coupon {
	font-size: var(--wp--preset--font-size--xs);
	color: var(--afiliado-price-coupon-color, var(--wp--preset--color--warning));
	width: 100%;
}

/* Merchant */
.afiliado-merchant {
	font-size: var(--afiliado-merchant-name-font-size, var(--wp--preset--font-size--xs));
	font-weight: 600;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	/* Nome do marketplace (ex.: "Shopee") — mesma cor usada nos
	   títulos H1-H6 do tema, configurável em Aparência > Tema
	   Afiliado > Global > "Cor dos títulos (H1 até H6)". */
	color: var(--wp--preset--color--secondary);
}

/* Quando há vendedor específico identificado (shopName), o
   componente vira 2 linhas empilhadas em vez de 1 linha só —
   vendedor em cima, marketplace embaixo, cada uma com seu próprio
   ícone/logo. */
.afiliado-merchant--com-vendedor {
	flex-direction: column;
	align-items: flex-start;
	gap: 4px;
}

.afiliado-merchant__linha {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

/* Linha do vendedor específico — sem ícone (decidido após comparar
   opções ao vivo: "Loja: Nome" já se explica sozinho, sem precisar
   de símbolo genérico pra dar contexto). "Loja:" usa a "Cor do
   texto do corpo (parágrafos)" explicitamente via variável (não
   por herança implícita — o container pai, .afiliado-merchant, já
   tem "color" própria, então herança simples nunca chegaria na cor
   do body). O nome do vendedor usa a cor dos títulos (mesma do
   "Shopee" logo abaixo) — ambas configuráveis em Aparência > Tema
   Afiliado > Global. */
.afiliado-merchant__vendedor {
	font-weight: 400;
	color: var(--wp--preset--color--body-text);
}

.afiliado-merchant__vendedor strong {
	font-weight: 700;
	color: var(--wp--preset--color--secondary);
}

.afiliado-merchant__icon {
	flex-shrink: 0;
}

.afiliado-merchant__icon--marca {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--afiliado-merchant-icon-size, 32px);
	height: var(--afiliado-merchant-icon-size, 32px);
	border-radius: 50%;
	overflow: hidden; /* corta qualquer logo enviado pelo usuário no formato redondo, mesmo que o arquivo original seja quadrado */
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.afiliado-merchant__icon--marca svg {
	width: 100%;
	height: 100%;
}

.afiliado-merchant__official {
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 700;
	color: var(--wp--preset--color--action);
	background: color-mix(in srgb, var(--wp--preset--color--action) 12%, transparent);
	border-radius: 4px;
	padding: 1px 6px;
}

/* Urgência (validade da oferta) — dado real (periodEndTime da
   Shopee), nunca inventado. Cor de alerta discreta, sem parecer
   banner de propaganda. */
.afiliado-urgency {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: var(--wp--preset--font-size--xs);
	color: var(--afiliado-price-discount-bg-color, var(--wp--preset--color--danger));
}

/* Botão "Ver mais" */
.afiliado-load-more-wrap {
	display: flex;
	justify-content: center;
	/* Mesmo valor usado no espaço entre este botão e o anúncio
	   logo abaixo (quando presente) — mantém o botão visualmente
	   centralizado entre os dois espaços. */
	margin-top: var(--wp--preset--spacing--6);
}

.afiliado-load-more-button {
	background: var(--wp--preset--color--action);
	border: none;
	color: var(--wp--preset--color--background, #fff);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--small);
	padding: var(--wp--preset--spacing--3) var(--wp--preset--spacing--8);
	border-radius: var(--afiliado-button-border-radius, 8px);
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease, opacity 0.15s ease, transform 0.15s ease;
}

.afiliado-load-more-button:hover {
	opacity: 0.92;
	transform: translateY(-1px);
}
.afiliado-buy-button {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 44px;
	max-height: 52px;
	text-align: center;
	padding: var(--wp--preset--spacing--2) var(--wp--preset--spacing--3);
	background: var(--wp--preset--color--action);
	color: var(--wp--preset--color--background, #fff);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.2;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	text-decoration: none;
	border-radius: var(--afiliado-button-border-radius, 8px);
	transition: opacity 0.15s ease, transform 0.15s ease;
}

.afiliado-buy-button:hover {
	opacity: 0.92;
	transform: translateY(-1px);
}

.afiliado-buy-button__external-icon {
	width: calc(1em + 3px);
	height: calc(1em + 3px);
	margin-left: 6px;
	margin-top: 1px;
	flex-shrink: 0;
}

.afiliado-buy-button--disabled {
	background: var(--wp--preset--color--text-muted);
	pointer-events: none;
}

/* ===== Avaliação em estrelas — componente compartilhado entre a
   home (product-card) e a página de produto individual. Fica aqui
   (components.css, carregado em toda página) para funcionar nos
   dois lugares — antes só existia em product-page.css, por isso
   as estrelas apareciam pretas na home (sem essa regra de cor). */
.afiliado-rating {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--1);
	font-size: var(--wp--preset--font-size--small);
}

.afiliado-rating__star {
	color: var(--wp--preset--color--border);
}

.afiliado-rating__star.is-filled {
	color: var(--afiliado-rating-color, var(--wp--preset--color--warning));
}

.afiliado-rating__value {
	font-weight: 600;
	color: var(--wp--preset--color--secondary);
}

.afiliado-rating__count {
	color: var(--wp--preset--color--text-muted);
}

/* Data de validade da oferta, exibida só no card de preço
   principal (ver components/rating.php) — mesmo destaque
   (tamanho/peso) da nota de avaliação ao lado, já que ambos
   competem pela mesma atenção na linha. O container ".afiliado-
   rating" já tem gap:spacing--1 (4px) entre todos os filhos —
   soma-se a essa margem extra pra fechar em 8px totais de
   distância, igual ao padrão já usado no comparador de ofertas
   (afiliado-comparison__urgency), sem alterar o gap padrão entre
   estrelas/nota. */
.afiliado-rating__urgency {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	margin-left: var(--wp--preset--spacing--1);
	font-size: inherit;
	font-weight: 600;
	color: var(--afiliado-price-discount-bg-color, var(--wp--preset--color--danger));
	white-space: nowrap;
}

/* Página "Oferta do Dia" — seções por categoria (título + link
   "Ver mais"), grade geral "Mais Ofertas" e mensagem de estado
   vazio (site sem produtos ainda). */
.afiliado-oferta-dia__secao {
	margin-bottom: var(--wp--preset--spacing--8);
}

.afiliado-oferta-dia__secao-header {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--2);
	margin-bottom: var(--wp--preset--spacing--6);
}

.afiliado-oferta-dia__secao-titulo {
	margin: 0;
}

.afiliado-oferta-dia__ver-mais {
	white-space: nowrap;
	font-weight: 600;
	text-decoration: none;
	color: inherit;
	transition: color 0.15s ease;
}

.afiliado-oferta-dia__ver-mais:hover {
	color: var(--afiliado-action-color, var(--wp--preset--color--action, #000000));
}

.afiliado-oferta-dia__vazio {
	text-align: center;
	padding: var(--wp--preset--spacing--8) var(--wp--preset--spacing--4);
}

/* Padrão oficial do site: espaço entre um título de página (h1) e
 * o texto descritivo logo abaixo dele — 16px, o mesmo valor usado
 * no cabeçalho de categoria (blocks/category-header). Reutilizar
 * essas 2 classes em qualquer página nova que tenha um título
 * seguido de um parágrafo introdutório, para manter esse
 * espaçamento consistente em todo o site.
 */
.afiliado-page-intro__title {
	margin-bottom: 0;
}

.afiliado-page-intro__description {
	color: var(--wp--preset--color--text-muted);
	/* Mesmo padrão de espaçamento (8px) usado em qualquer página do
	   site com título + subtítulo (Home, Categoria, Categorias),
	   para manter consistência visual. */
	margin-top: 8px;
}

/* Barra de rolagem fina e com cantos arredondados — só nos
 * elementos que têm rolagem PRÓPRIA (dropdown de categorias, painel
 * do menu mobile, sugestões da busca). NÃO aplicada na rolagem
 * geral da página — o navegador já tem sua própria barra lateral
 * nativa ali, sem necessidade de estilizar por cima dela.
 * Qualquer novo elemento com scroll no futuro só precisa ser
 * adicionado nesta mesma lista de seletores.
 */
.afiliado-classic-menu__list .sub-menu,
.afiliado-classic-menu-mobile__panel,
.afiliado-live-search-resultados,
.afiliado-footer-pages {
	scrollbar-width: thin;
	scrollbar-color: var(--wp--preset--color--border, #c9c9c9) transparent;
}

.afiliado-classic-menu__list .sub-menu::-webkit-scrollbar,
.afiliado-classic-menu-mobile__panel::-webkit-scrollbar,
.afiliado-live-search-resultados::-webkit-scrollbar,
.afiliado-footer-pages::-webkit-scrollbar {
	width: 8px;
	height: 8px;
}

.afiliado-classic-menu__list .sub-menu::-webkit-scrollbar-track,
.afiliado-classic-menu-mobile__panel::-webkit-scrollbar-track,
.afiliado-live-search-resultados::-webkit-scrollbar-track,
.afiliado-footer-pages::-webkit-scrollbar-track {
	background: transparent;
	border-radius: 8px;
}

.afiliado-classic-menu__list .sub-menu::-webkit-scrollbar-thumb,
.afiliado-classic-menu-mobile__panel::-webkit-scrollbar-thumb,
.afiliado-live-search-resultados::-webkit-scrollbar-thumb,
.afiliado-footer-pages::-webkit-scrollbar-thumb {
	background: var(--wp--preset--color--border, #c9c9c9);
	border-radius: 8px;
}

.afiliado-classic-menu__list .sub-menu::-webkit-scrollbar-thumb:hover,
.afiliado-classic-menu-mobile__panel::-webkit-scrollbar-thumb:hover,
.afiliado-live-search-resultados::-webkit-scrollbar-thumb:hover,
.afiliado-footer-pages::-webkit-scrollbar-thumb:hover {
	background: var(--wp--preset--color--text-muted, #a8a8a8);
}

/* Botão "afiliado-buy-button" reutilizado FORA de um card de
 * produto (ex.: "Voltar para a Início" na página 404) — mantém a
 * mesma cor, fonte e formato do botão "Ver Oferta", mas sem o
 * "width:100%" (que faz sentido dentro de um card, mas esticaria
 * o botão pela largura toda da página nesse outro contexto).
 */
.afiliado-buy-button-generico .afiliado-buy-button {
	width: auto;
	min-width: 200px;
	display: inline-flex;
}

/* ===== Espaço reservado para anúncio — formato único, responsivo.
   Dimensão FIXA reservada mesmo sem conteúdo, para o layout nunca
   "pular" quando o anúncio real for inserido (importante para Core
   Web Vitals). A largura é sempre 100% do container onde for
   colocado (não um valor fixo em pixels) — então acompanha
   automaticamente a mesma largura da grade de produtos, sem sobrar
   espaço vazio nas laterais em nenhum tamanho de tela. ===== */
.afiliado-ad-slot {
	width: 100%;
	background: var(--wp--preset--color--surface);
	border: 1px dashed var(--wp--preset--color--border);
	border-radius: 8px;
	/* Só margin-top (não margin-bottom) — o elemento que vem
	   depois do anúncio (rodapé numa página, "Produtos
	   Relacionados" em outra) já pode ter seu próprio espaçamento
	   superior embutido; se eu também tivesse margin-bottom aqui,
	   os dois se somariam, deixando o espaço de baixo maior que o
	   de cima de forma inconsistente. */
	margin-top: var(--wp--preset--spacing--6);
	/* Altura menor no celular, cresce em telas maiores — os
	   mesmos pontos de corte já usados no resto do tema. */
	min-height: 100px;
}

@media (min-width: 500px) {
	.afiliado-ad-slot {
		min-height: 150px;
	}
}

@media (min-width: 960px) {
	.afiliado-ad-slot {
		min-height: 250px;
	}
}

/* Com o código real do anúncio presente, a altura mínima "de
   referência" deixa de existir — o espaço passa a se ajustar
   exatamente ao tamanho real do anúncio carregado pela rede de
   publicidade, seja ele maior ou menor que a referência. Isso
   evita sobrar qualquer vão vazio (branco, cinza ou de outra cor)
   quando o anúncio real vier mais baixo que a referência. */
.afiliado-ad-slot--com-codigo {
	min-height: 0;
	border: none;
	background: transparent;
}

/* Padrão oficial do WordPress core — usado para headings (H2, etc.)
   que precisam existir semanticamente (organizar a hierarquia pra
   SEO/acessibilidade), mas sem alterar o visual da página. Leitores
   de tela e motores de busca leem normalmente. */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}

/* Espaço entre o título e o conteúdo em qualquer Página normal do
   WordPress (Sobre, Contato, Termos de Uso, Política de Privacidade,
   Categorias, e qualquer página nova criada no futuro) — o WordPress
   tem um espaçamento nativo próprio (~24px) entre o título da página
   (wp:post-title) e seu conteúdo (wp:post-content), por serem 2
   blocos irmãos separados no template. Reduzido para 8px aqui, para
   manter o mesmo padrão visual usado no resto do site entre um
   título e o texto logo abaixo dele (bug real visto em uso,
   corrigido de forma global — sem precisar reconfigurar página por
   página, atual ou futura). */
.entry-content {
	margin-top: 8px;
}