/*
 * Cartão de produto — template-parts/card-produto.php.
 *
 * Um cartão só para home, catálogo, busca e relacionados.
 *
 * Os valores desta folha são transplantados de assets/css/referencia.css (as 49
 * folhas da farmaciaindiana concatenadas). A marcação é nossa, no vocabulário
 * cdm-*; o que veio de lá foram os números. Cada bloco abaixo diz de qual
 * seletor da referência saiu, para conferência.
 *
 * Os valores viram custom properties no topo do bloco: assim nenhuma regra
 * carrega número solto e ajustar um tom é mexer em um lugar só. Eles NÃO vão
 * para tokens.css porque são a paleta da referência, não a da Casa do Médico —
 * quem manda no tema continua sendo tokens.css.
 *
 * O CSS da referência não tem uma linha sequer para marcação do WooCommerce:
 * botão AJAX, aviso, chip de variação e estrela são todos daqui.
 */

.cdm-card {
	/* --- cores (referencia.css) --- */
	--card-azul:            #004077;  /* .vtex-product-summary-2-x-brandName / .sellingPriceValue--summary */
	--card-cinza-riscado:   #aaaaaa;  /* .farmaciaindiana-store-theme-3-x-listPrice */
	--card-verde-selo:      #339033;  /* .vtex-product-price-1-x-savings */
	--card-verde-botao:     #37b937;  /* .shelf-quantity-selector-button-add */
	--card-parcela-texto:   #062ac6;  /* .vtex-product-price-1-x-installments--summary */
	--card-parcela-fundo:   #cfe9ff;  /* idem */
	--card-borda:           #e3e4e6;  /* contorno do cartão na home-desktop.png */
	--card-branco:          #ffffff;
	--card-estrela:         #f5a623;  /* estrelas do trustvox na home-desktop.png */
	--card-estrela-vazia:   #d8d8d8;

	/* --- medidas (referencia.css) --- */
	--card-largura-max:     300px;    /* style=max-width:300px no container */
	--card-raio:            .5rem;    /* .br3 */
	--card-pad-topo:        .5rem;    /* .pt3 */
	--card-pad-base:        .75rem;   /* .pb4 */
	--card-nome-espaco:     1.5rem;   /* .pv6 */
	--card-imagem-altura:   135px;    /* style do <img> */
	--card-preco-tamanho:   1.063rem; /* .listPriceValue--summary / .sellingPriceValue--summary */
	--card-nome-tamanho:    .96rem;   /* .brandName */

	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	width: 100%;
	max-width: var(--card-largura-max);
	height: 100%;
	margin-inline: auto;
	padding-block: var(--card-pad-topo) var(--card-pad-base);
	padding-inline: var(--card-pad-base);
	border: 1px solid var(--card-borda);
	border-radius: var(--card-raio);
	background: var(--card-branco);
	text-align: center;
	overflow: hidden;
}

@media (max-width: 1024px) {
	.cdm-card {
		--card-nome-tamanho: .9rem;
		--card-preco-tamanho: 1rem;
	}
}

/* ============================================================== mídia ===== */

.cdm-card__midia {
	position: relative;
}

.cdm-card__link-imagem {
	display: block;
}

/* style=width:100%;height:135px;object-fit:contain;max-width:135px do <img>. */
.cdm-card__imagem {
	display: block;
	width: 100%;
	max-width: var(--card-imagem-altura);
	height: var(--card-imagem-altura);
	margin-inline: auto;
	object-fit: contain;
}

.cdm-card--esgotado .cdm-card__imagem {
	opacity: .55;
	filter: grayscale(1);
}

/* ======================================================== selo de oferta == */

/*
 * .vtex-product-price-1-x-savings: pílula verde no canto superior esquerdo, com
 * a seta depois do texto no HTML e antes dele na tela (flex-direction
 * row-reverse). .savingsPercentage acrescenta o "-" antes e o "OFF" depois, e é
 * por isso que o PHP manda só o número: "22%" vira "↓ -22% OFF".
 *
 * A seta da referência é um SVG hospedado em vtexassets.com. O ambiente não tem
 * saída para a internet, então ela entra aqui como data URI — mesmo desenho,
 * mesmos 9x13.
 */
.cdm-card__selo {
	position: absolute;
	inset-block-start: 0;
	inset-inline-start: 0;
	z-index: 2;
	display: flex;
	flex-direction: row-reverse;
	align-items: center;
	gap: 4px;
	box-sizing: border-box;
	padding: 4px 5px;
	border-radius: 10px;
	font-size: 12px;
	font-weight: 700;
	line-height: 12px;
	white-space: nowrap;
}

.cdm-card__selo--desconto {
	background-color: var(--card-verde-selo);
	color: var(--card-branco);
}

.cdm-card__selo--desconto::after {
	content: "";
	display: inline-block;
	width: 9px;
	height: 13px;
	margin-left: .3em;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 13'%3E%3Cpath d='M4.5 0v10.2M1 7.1l3.5 3.6L8 7.1' fill='none' stroke='%23ffffff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-size: contain;
}

.cdm-card__selo-percentual {
	display: flex;
	gap: 2px;
}

.cdm-card__selo-percentual::before {
	content: "-";
	display: inline-block;
}

.cdm-card__selo-percentual::after {
	content: "OFF";
	display: block;
}

/* Esgotado reaproveita a forma do selo, na cor de indisponível. */
.cdm-card__selo--esgotado {
	background-color: var(--card-cinza-riscado);
	color: var(--card-branco);
}

/* ============================================================ favorito ==== */

/* .vtex-product-summary-2-x-container .vtex-wish-list-1-x-wishlistIconContainer
   .vtex-button { position:absolute; top:-9px; right:0; background:none }
   e .vtex-wish-list-1-x-iconSize { width:24px; height:24px }. */
.cdm-card__favorito {
	position: absolute;
	inset-block-start: 0;
	inset-inline-end: 0;
	z-index: 4;
	display: grid;
	place-items: center;
	padding: 0;
	border: 0;
	background: none;
	color: var(--card-cinza-riscado);
	cursor: pointer;
}

.cdm-card__favorito-icone {
	display: inline-block;
	width: 24px;
	height: 24px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.6;
	stroke-linejoin: round;
}

.cdm-card__favorito:hover,
.cdm-card__favorito[aria-pressed="true"] {
	color: #e00d0d; /* o coração da referência é vermelho (fill="red" no ícone) */
}

.cdm-card__favorito[aria-pressed="true"] .cdm-card__favorito-icone {
	fill: currentColor;
}

/* =============================================================== corpo ==== */

.cdm-card__corpo {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
}

/* ============================================================== título ==== */

/* Container: .pv6 (padding vertical 1.5rem), items-start, justify-center.
   Texto: .brandName — .96rem, #004077, duas linhas com reticências. */
.cdm-card__titulo {
	display: flex;
	align-items: flex-start;
	justify-content: center;
	margin: 0;
	padding-block: var(--card-nome-espaco);
	font-size: var(--card-nome-tamanho);
	font-weight: 400;
	line-height: 1.3;
}

.cdm-card__link {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	overflow: hidden;
	color: var(--card-azul);
	text-decoration: none;
	/* Duas linhas cheias sempre: é o que mantém a fileira alinhada. */
	min-height: calc(var(--card-nome-tamanho) * 1.3 * 2);
}

.cdm-card__link:hover,
.cdm-card__link:focus-visible {
	text-decoration: underline;
}

/* O cartão inteiro é clicável; o link do título é quem recebe o foco. */
.cdm-card__link::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
}

.cdm-card__acao,
.cdm-card__variacoes {
	position: relative;
	z-index: 2;
}

/*
 * O favorito NÃO entra na regra acima: ele já é `position: absolute` e um
 * `position: relative` depois o tirava do canto — era o que jogava o coração
 * para o lado esquerdo da imagem.
 */

/* =========================================================== avaliação ==== */

/*
 * A referência usa o widget do Trustvox (.ts-shelf-rate), que serve as estrelas
 * por sprite de um domínio externo — nada disso existe aqui. Reproduzimos o
 * mesmo desenho com máscara: cinco estrelas cinzas e uma faixa amarela por cima
 * recortada na porcentagem da nota, que é como o sprite deles funciona.
 *
 * A linha sai em todo cartão, inclusive sem review (a loja migrou sem nenhum):
 * se sumisse nos zerados, cada cartão teria uma altura.
 */
.cdm-card__avaliacao {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	margin: 0;
	font-size: 12px;
	line-height: 1;
	color: var(--card-cinza-riscado);
}

.cdm-card__estrelas {
	position: relative;
	display: block;
	width: 70px;   /* 5 x 14px, a medida do sprite do Trustvox */
	height: 14px;
	background: var(--card-estrela-vazia);
	-webkit-mask: var(--card-mask-estrelas);
	mask: var(--card-mask-estrelas);
}

.cdm-card__estrelas-nota {
	display: block;
	height: 100%;
	background: var(--card-estrela);
}

.cdm-card {
	--card-mask-estrelas: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='70' height='14' viewBox='0 0 70 14'%3E%3Cg fill='%23000'%3E%3Cpath d='M7 .8l1.9 3.9 4.3.6-3.1 3 .7 4.2L7 10.6l-3.8 2 .7-4.3L.8 5.3l4.3-.6z'/%3E%3Cpath d='M21 .8l1.9 3.9 4.3.6-3.1 3 .7 4.2-3.8-2-3.8 2 .7-4.3-3.1-2.9 4.3-.6z'/%3E%3Cpath d='M35 .8l1.9 3.9 4.3.6-3.1 3 .7 4.2-3.8-2-3.8 2 .7-4.3-3.1-2.9 4.3-.6z'/%3E%3Cpath d='M49 .8l1.9 3.9 4.3.6-3.1 3 .7 4.2-3.8-2-3.8 2 .7-4.3-3.1-2.9 4.3-.6z'/%3E%3Cpath d='M63 .8l1.9 3.9 4.3.6-3.1 3 .7 4.2-3.8-2-3.8 2 .7-4.3-3.1-2.9 4.3-.6z'/%3E%3C/g%3E%3C/svg%3E");
}

/* ======================================================= chips de grade === */

/*
 * .farmaciaindiana-store-theme-3-x-sizeVariation não tem regra em
 * referencia.css (o CSS do carrossel de variação ficou fora das 49 folhas).
 * Copiamos a forma da home-desktop.png: caixinhas de contorno, texto miúdo,
 * rolagem horizontal quando não cabem.
 */
.cdm-card__variacoes {
	display: flex;
	/* 'safe' evita o corte nas duas pontas quando os chips passam da largura
	   do cartão: aí o navegador alinha ao início em vez de centralizar. */
	justify-content: safe center;
	gap: 4px;
	margin: 0 0 8px;
	padding: 0;
	list-style: none;
	overflow-x: auto;
	scrollbar-width: none;
}

.cdm-card__variacoes::-webkit-scrollbar {
	display: none;
}

.cdm-card__variacao {
	flex: 0 0 auto;
	padding: 2px 6px;
	border: 1px solid var(--card-borda);
	border-radius: 4px;
	font-size: 12px;
	line-height: 18px;
	color: var(--card-azul);
	white-space: nowrap;
}

/* =============================================================== preços === */

.cdm-card__precos {
	margin-top: auto;
}

/* .vtex-product-price-1-x-listPriceValue--summary — 1.063rem, .313rem à direita,
   riscado (.strike). Sempre no fluxo, mesmo sem promoção: é o que impede o
   preço de subir uma linha e desalinhar da fileira. */
.cdm-card__preco-antigo {
	display: block;
	min-height: calc(var(--card-preco-tamanho) * 1.2);
	margin-right: .313rem;
	font-size: var(--card-preco-tamanho);
	line-height: 1.2;
	color: var(--card-cinza-riscado);
}

del.cdm-card__preco-antigo {
	text-decoration: line-through;
}

/* .vtex-product-price-1-x-sellingPriceValue--summary — 1.063rem, 700, #004077.
   .mb2 (margin-bottom .25rem) vem do flexRowContent que embrulha os dois. */
.cdm-card__preco {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: center;
	gap: 4px;
	margin: 0 0 .25rem;
	font-size: var(--card-preco-tamanho);
	font-weight: 700;
	line-height: 1.2;
	color: var(--card-azul);
}

/* "A partir de" é prefixo miúdo do preço, não uma linha própria — foi assim que
   as três linhas de preço do produto variável viraram duas. */
.cdm-card__preco-prefixo {
	font-size: 12px;
	font-weight: 400;
	color: var(--card-cinza-riscado);
}

/* O price_html do WooCommerce embrulha promoção em <del>/<ins>; o cartão já
   mostra o "de" na linha de cima. */
.cdm-card__preco del {
	display: none;
}

.cdm-card__preco ins {
	text-decoration: none;
}

.cdm-card__sem-preco {
	margin: 0 0 .25rem;
	font-size: var(--card-preco-tamanho);
	font-weight: 700;
	line-height: 1.2;
	color: var(--card-cinza-riscado);
}

/* ========================================================= parcelamento === */

/* .vtex-product-price-1-x-installments--summary — a barra azul-clara de largura
   total logo acima do botão, que é o que dá ritmo ao pé do cartão. */
.cdm-card__parcelamento {
	display: block;
	width: 100%;
	margin: 8px 0 0;
	border-radius: 8px;
	background: var(--card-parcela-fundo);
	color: var(--card-parcela-texto);
	font-size: .9rem;
	text-align: center;
}

/* .installmentsNumber e .installmentValue vêm com font-weight 800. */
.cdm-card__parcelamento b {
	font-weight: 800;
}

/* ================================================================ ação ==== */

/* .shelf-quantity-selector-button-add — pílula verde de 36px, largura total,
   ícone e texto separados por 10px. */
.cdm-card__acao {
	margin-top: 5px;
}

/*
 * O seletor é `.cdm-card a.cdm-card__botao`, e não só `.cdm-card__botao`, por
 * causa do WooCommerce: em página de arquivo o <body> ganha a classe
 * `woocommerce` e o core aplica
 *
 *     .woocommerce a.button { color:#515151; background-color:#e9e6ed;
 *                             border-radius:3px; padding:.618em 1em }
 *
 * que tem especificidade (0,2,1) e pintava o botão de cinza — só no catálogo,
 * porque na home o <body> não tem a classe. Empatar a especificidade basta:
 * card-produto.css é enfileirado depois de woocommerce-general.
 */
.cdm-card a.cdm-card__botao,
.cdm-card .cdm-card__botao {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	height: 36px;
	min-height: 36px;
	padding: 0;
	border: none;
	border-radius: 20px;
	outline: none;
	box-shadow: none;
	background: var(--card-verde-botao);
	color: var(--card-branco);
	font-family: inherit;
	font-size: 14px;
	font-style: normal;
	line-height: 20px;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: all .2s;
}

.cdm-card a.cdm-card__botao:hover,
.cdm-card a.cdm-card__botao:focus-visible {
	opacity: .8;
	background: var(--card-verde-botao);
	color: var(--card-branco);
}

.cdm-card__botao-icone {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* Fora de estoque: mesma pílula, sem o verde de comprar. */
.cdm-card a.cdm-card__botao--indisponivel {
	background: var(--card-branco);
	border: 1px solid var(--card-borda);
	color: var(--card-cinza-riscado);
}

.cdm-card a.cdm-card__botao--indisponivel:hover,
.cdm-card a.cdm-card__botao--indisponivel:focus-visible {
	opacity: 1;
	background: var(--card-borda);
	color: var(--card-azul);
}

/* ------------------------------------------------------------------------- *
 * Marcação que só o WooCommerce produz — a referência não tem nada disso.
 * ------------------------------------------------------------------------- */

/*
 * Estado do AJAX: o wc-add-to-cart.js põe .loading no elemento durante o POST.
 * O core traz `.woocommerce a.button.loading { opacity:.25; padding-right:2.618em }`,
 * que deixava o botão quase invisível e empurrava o texto para o lado.
 */
.cdm-card a.cdm-card__botao.loading {
	opacity: .7;
	padding-right: 0;
	pointer-events: none;
}

/* O "Ver carrinho" que o WooCommerce injeta depois do botão não cabe no cartão:
   o cabeçalho já mostra a contagem. */
.cdm-card__acao .added_to_cart {
	display: block;
	margin-top: 8px;
	color: var(--card-azul);
	font-size: 12px;
	text-align: center;
}

@media (prefers-reduced-motion: reduce) {
	.cdm-card__botao {
		transition: none;
	}
}

/* ------------------------------------------------------------------------- *
 * Variante lista do catálogo (a referência não tem; é nossa).
 * ------------------------------------------------------------------------- */

.cdm-catalogo__grade--lista .cdm-card {
	display: grid;
	grid-template-columns: minmax(0, 30%) minmax(0, 1fr);
	grid-template-areas:
		"midia corpo"
		"midia acao";
	align-items: start;
	column-gap: 1rem;
	max-width: none;
	text-align: left;
}

.cdm-catalogo__grade--lista .cdm-card__midia {
	grid-area: midia;
}

.cdm-catalogo__grade--lista .cdm-card__corpo {
	grid-area: corpo;
}

.cdm-catalogo__grade--lista .cdm-card__acao {
	grid-area: acao;
	max-width: 16rem;
}

.cdm-catalogo__grade--lista .cdm-card__titulo {
	justify-content: flex-start;
	padding-block: 0 8px;
}

.cdm-catalogo__grade--lista .cdm-card__link {
	-webkit-line-clamp: 3;
	line-clamp: 3;
	min-height: 0;
}

.cdm-catalogo__grade--lista .cdm-card__avaliacao,
.cdm-catalogo__grade--lista .cdm-card__variacoes,
.cdm-catalogo__grade--lista .cdm-card__preco {
	justify-content: flex-start;
}

@media (max-width: 639px) {
	.cdm-catalogo__grade--lista .cdm-card {
		grid-template-columns: minmax(0, 34%) minmax(0, 1fr);
	}

	.cdm-catalogo__grade--lista .cdm-card__acao {
		grid-column: 1 / -1;
		max-width: none;
	}
}

/* Vitrine global: mesma moldura, hierarquia e ritmo em qualquer contexto. */
.cdm-card__midia {
	display: flex;
	flex: 0 0 auto;
	flex-direction: column;
	width: 100%;
}

.cdm-card__link-imagem {
	display: grid;
	place-items: center;
	width: 100%;
	aspect-ratio: 1 / 1;
	overflow: hidden;
}

.cdm-card__imagem {
	width: 100%;
	max-width: 100%;
	height: 100%;
	max-height: 100%;
	object-fit: contain;
}

.cdm-card__titulo {
	min-height: 5.8rem;
	padding-block: var(--cdm-e-3);
}

.cdm-card__link {
	display: block;
	min-height: 0;
	overflow: visible;
	-webkit-line-clamp: unset;
	line-clamp: unset;
}

.cdm-card__miniaturas {
	position: relative;
	z-index: 2;
	display: flex;
	justify-content: center;
	gap: 5px;
	width: 100%;
	min-height: 34px;
	margin-top: var(--cdm-e-2);
	padding-inline: 2px;
	overflow: hidden;
	box-sizing: border-box;
}

.cdm-card__miniatura {
	display: grid;
	flex: 1 1 0;
	min-width: 0;
	max-width: 40px;
	aspect-ratio: 1 / 1;
	place-items: center;
	width: auto;
	height: auto;
	padding: 2px;
	overflow: hidden;
	border: 1px solid var(--cdm-cinza-200);
	border-radius: var(--cdm-raio-sm);
	background: var(--cdm-superficie);
	cursor: pointer;
}

.cdm-card__miniatura:hover,
.cdm-card__miniatura:focus-visible {
	border-color: var(--cdm-azul);
	outline: none;
}

.cdm-card__miniatura img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

@media (min-width: 900px) {
	.cdm-card__miniaturas { gap: 7px; min-height: 42px; }
	.cdm-card__miniatura { max-width: 44px; padding: 3px; }
}