/**
 * Card/Produto — Figma 217:2222.
 *
 * Desktop (270×443): foto 1:1, raio radius-card · gap 16 foto→conteúdo · conteúdo gap 8
 *   nome Body 16 · avaliação estrela 12 + Caption 14 · preço Heading Small 20/1.3 (600)
 *   preço antigo, parcelas e Pix em Caption 14 ink-muted.
 *   hover: 2ª foto + botão "Comprar" (44 px, brand) sobre a base da foto, a 4 px das bordas.
 * Mobile (204×361): gap 8 · nome 14 · preço Label 16 (500) · o botão vira ícone (toque 44 px).
 *
 * Proporção da foto: escolhida no painel (--cdw-produto-proporcao: 1/1 · 4/5 · 3/4 · 2/3), definida no :root.
 */

.cdw-produto {
	/* Âncora dos textos só para leitor de tela: sem isto eles "vazam" de listas com rolagem lateral. */
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--space-16);
	min-width: 0;
}

/* ---------- Foto ---------- */

.cdw-produto__midia {
	position: relative;
	overflow: hidden;
	/* Vem de Sua Loja › Produtos › Fotos (inc/sua-loja/fotos.php). Sem escolha: quadrada. */
	aspect-ratio: var(--cdw-produto-proporcao, 1 / 1);
	border-radius: var(--wp--custom--radius--card);
	background: var(--wp--preset--color--surface-alt);
	box-shadow: var(--wp--preset--shadow--card);
}

.cdw-produto__foto {
	position: absolute;
	inset: 0;
	display: block;
}

.cdw-produto__img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	aspect-ratio: unset;
	object-fit: cover;
}

/* WooCommerce força height:auto em .woocommerce-page img; sem isto a foto fica quadrada dentro de proporções 4/5, 2/3 etc. */
.woocommerce .cdw-produto__img,
.woocommerce-page .cdw-produto__img {
	width: 100%;
	height: 100%;
	max-width: none;
	aspect-ratio: unset;
}

.cdw-produto__img--hover {
	opacity: 0;
	transition: opacity var(--wp--custom--motion--duracao-padrao) var(--wp--custom--motion--ease-padrao);
}

/* ---------- Selos (Produto/Tag) ---------- */

.cdw-produto__selos {
	position: absolute;
	top: var(--wp--preset--spacing--space-8);
	left: var(--wp--preset--spacing--space-8);
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--space-4);
	pointer-events: none;
}

.cdw-selo {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: var(--wp--preset--spacing--space-4) 12px;
	border-radius: var(--wp--custom--radius--control);
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--overline);
	font-weight: var(--wp--custom--weight--regular);
	line-height: 1.5;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	white-space: nowrap;
}

.cdw-selo--accent {
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--accent-contrast);
}

/* ---------- Ação ---------- */

/* Base (celular e telas de toque): ícone de carrinho, área de toque 44 px. */
.cdw-produto__acao {
	position: absolute;
	right: var(--wp--preset--spacing--space-4);
	bottom: var(--wp--preset--spacing--space-4);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	color: var(--wp--preset--color--brand-contrast);
	font-size: 16px;
	text-decoration: none;
	transition:
		opacity var(--wp--custom--motion--duracao-rapida) var(--wp--custom--motion--ease-padrao),
		transform var(--wp--custom--motion--duracao-rapida) var(--wp--custom--motion--ease-padrao);
}

.cdw-produto__acao::before {
	content: "";
	position: absolute;
	inset: 4px;
	border-radius: var(--wp--custom--radius--full);
	background: var(--wp--preset--color--brand);
	transition: background-color var(--wp--custom--motion--duracao-rapida) var(--wp--custom--motion--ease-padrao);
}

.cdw-produto__acao > * {
	position: relative;
}

.cdw-produto__acao-texto {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
}

.cdw-produto__acao.loading {
	opacity: 0.6;
	pointer-events: none;
}

/* O WooCommerce acrescenta um link "Ver carrinho" depois do botão: o carrinho do cabeçalho já avisa. */
.cdw-produto .added_to_cart {
	display: none;
}

/* ---------- WhatsApp ---------- */
/* Botão extra (Produtos › Card de produto): canto inferior esquerdo, sempre um círculo fixo
   com a cor oficial do WhatsApp, para não se confundir com a ação principal (que é da marca). */
.cdw-produto__whatsapp {
	position: absolute;
	left: var(--wp--preset--spacing--space-4);
	bottom: var(--wp--preset--spacing--space-4);
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: var(--wp--custom--radius--full);
	background: #25d366;
	color: #fff;
	font-size: 18px;
	text-decoration: none;
	box-shadow: var(--wp--preset--shadow--float);
	transition: background-color var(--wp--custom--motion--duracao-rapida) var(--wp--custom--motion--ease-padrao);
}

.cdw-produto__whatsapp:hover,
.cdw-produto__whatsapp:focus {
	background: #1fae54;
}

.cdw-produto__whatsapp-texto {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
}

/* Com o botão de WhatsApp no canto, a ação principal (que cresce no hover do computador) não
   pode avançar até a esquerda: ela para depois do círculo do WhatsApp. */
@media (hover: hover) and (min-width: 782px) {
	.cdw-produto.tem-whatsapp .cdw-produto__acao {
		left: calc(44px + var(--wp--preset--spacing--space-4) + var(--wp--preset--spacing--space-8));
	}
}

/* Computador com mouse: botão "Comprar" inteiro, só no hover/foco. */
@media (hover: hover) and (min-width: 782px) {
	.cdw-produto__acao {
		right: var(--wp--preset--spacing--space-4);
		left: var(--wp--preset--spacing--space-4);
		gap: var(--wp--preset--spacing--space-8);
		width: auto;
		font-size: var(--wp--preset--font-size--label);
		font-weight: var(--wp--custom--weight--bold);
		line-height: 1.5;
		opacity: 0;
		transform: translateY(8px);
	}

	.cdw-produto__acao::before {
		inset: 0;
		border-radius: var(--wp--custom--radius--control);
	}

	.cdw-produto__acao .cdw-icone {
		font-size: 16px;
	}

	.cdw-produto__acao-texto {
		position: relative;
		width: auto;
		height: auto;
		overflow: visible;
		clip: auto;
	}

	.cdw-produto:hover .cdw-produto__acao,
	.cdw-produto:focus-within .cdw-produto__acao {
		opacity: 1;
		transform: none;
	}

	.cdw-produto__acao:hover::before {
		background: var(--wp--preset--color--brand-hover);
	}

	.cdw-produto.tem-segunda-foto:hover .cdw-produto__img--hover {
		opacity: 1;
	}
}

/* ---------- Esgotado ---------- */

.cdw-produto.is-esgotado .cdw-produto__img {
	filter: grayscale(1);
	opacity: 0.6;
}

.cdw-produto__esgotado {
	position: absolute;
	top: 50%;
	left: 50%;
	padding: var(--wp--preset--spacing--space-8) var(--wp--preset--spacing--space-16);
	border-radius: var(--wp--custom--radius--control);
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--label);
	font-weight: var(--wp--custom--weight--bold);
	line-height: 1.5;
	white-space: nowrap;
	transform: translate(-50%, -50%);
	pointer-events: none;
}

/* ---------- Conteúdo ---------- */

.cdw-produto__conteudo {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--space-8);
	min-width: 0;
}

.cdw-produto__info,
.cdw-produto__precos {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--space-4);
	min-width: 0;
}

.cdw-produto__nome {
	margin: 0;
	overflow: hidden;
	color: var(--wp--preset--color--ink);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--body);
	font-weight: var(--wp--custom--weight--regular);
	line-height: 1.5;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.cdw-produto__nome a {
	color: inherit;
	text-decoration: none;
}

.cdw-produto__nome a:hover {
	color: var(--wp--preset--color--brand-text);
}

.cdw-produto__avaliacao,
.cdw-produto__parcelas,
.cdw-produto__pix,
.cdw-produto__linha-preco {
	margin: 0;
}

.cdw-produto__avaliacao,
.cdw-produto__pix {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--space-4);
}

.cdw-produto__avaliacao,
.cdw-produto__parcelas,
.cdw-produto__pix,
.cdw-produto__antigo,
.cdw-produto__a-partir {
	color: var(--wp--preset--color--ink-muted);
	font-size: var(--wp--preset--font-size--caption);
	line-height: 1.5;
}

.cdw-produto__avaliacao .cdw-icone,
.cdw-produto__pix .cdw-icone {
	width: 15px;
	font-size: 12px;
}

.cdw-produto__avaliacao .cdw-icone {
	color: var(--wp--preset--color--accent);
}

.cdw-produto__pix .cdw-icone {
	color: var(--wp--preset--color--success);
}

.cdw-produto__linha-preco {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0 var(--wp--preset--spacing--space-8);
	white-space: nowrap;
}

.cdw-produto__preco {
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--display);
	/* Figma: Heading Small = 20/1.3 neste componente. */
	font-size: 1.25rem;
	font-weight: var(--wp--custom--weight--heavy);
	line-height: 1.3;
}

.cdw-produto__antigo del {
	text-decoration: line-through;
}

@media (max-width: 781px) {
	.cdw-produto {
		gap: var(--wp--preset--spacing--space-8);
	}

	.cdw-produto__nome {
		font-size: var(--wp--preset--font-size--caption);
	}

	.cdw-produto__preco {
		font-family: inherit;
		font-size: var(--wp--preset--font-size--label);
		font-weight: var(--wp--custom--weight--bold);
		line-height: 1.5;
	}
}

@media (prefers-reduced-motion: reduce) {
	.cdw-produto__img--hover,
	.cdw-produto__acao {
		transition: none;
	}
}