/**
 * CP — Card de produto (padrão do projeto)
 *
 * Geometria do Figma: imagem 300×300, corpo com 16px de padding,
 * ação com botão largo + botão quadrado de 53px.
 *
 * As medidas grandes vêm de variáveis para o widget que hospeda o card
 * poder ajustar sem duplicar CSS.
 */

.rkscp-card {
	--rkscp-card-radius: 2px;
	--rkscp-card-pad: 16px;
	--rkscp-card-acao: 53px;

	display: flex;
	flex-direction: column;
	background: var(--rkscp-white, #fff);
	border: 1px solid var(--rkscp-line, #e2e2e2);
	border-radius: var(--rkscp-card-radius);
	overflow: hidden;
	transition: box-shadow .2s var(--rkscp-ease, ease), transform .2s var(--rkscp-ease, ease);
}

.rkscp-card:hover {
	box-shadow: 0 8px 24px rgba(0, 0, 0, .09);
	transform: translateY(-2px);
}

/* ── Mídia ─────────────────────────────────────────────────── */

.rkscp-card__media {
	position: relative;
	display: block;
	aspect-ratio: 1 / 1;
	background: var(--rkscp-surface, #f2f2f2);
	overflow: hidden;
}

.rkscp-card__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* No Figma este canto é o badge de desconto. Aqui é a certificação —
   é o que dá confiança neste nicho, e desconto exigiria preço. */
.rkscp-card__selo {
	position: absolute;
	top: 0;
	left: 0;
	padding: 7px 14px;
	background: var(--rkscp-accent, #d81022);
	color: var(--rkscp-white, #fff);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	line-height: 1;
}

.rkscp-card__oos {
	position: absolute;
	inset: auto 0 0 0;
	padding: 8px;
	background: rgba(20, 20, 20, .82);
	color: #fff;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .03em;
	text-align: center;
	text-transform: uppercase;
}

.rkscp-card--oos .rkscp-card__image {
	filter: grayscale(1);
	opacity: .75;
}

/* ── Corpo ─────────────────────────────────────────────────── */

.rkscp-card__body {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: var(--rkscp-card-pad) var(--rkscp-card-pad) 0;
}

/* Ocupa a linha que no Figma é a avaliação. */
.rkscp-card__specs {
	margin: 0;
	font-size: 12px;
	line-height: 1.35;
	color: var(--rkscp-ink-500, #6b6b6b);
}

.rkscp-card__name {
	margin: 0;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.3;
	/* Duas linhas, como no Figma: sem isto, um nome longo empurra os
	   botões e desalinha a fileira inteira do carrossel. */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.rkscp-card__name a {
	color: var(--rkscp-ink-900, #161616);
	text-decoration: none;
}

.rkscp-card__name a:hover {
	text-decoration: underline;
}

/* ── Ações ─────────────────────────────────────────────────── */

.rkscp-card__actions {
	display: flex;
	gap: 8px;
	padding: var(--rkscp-card-pad);
}

/* Quadrado com o olho: leva ao produto, mesmo destino da foto e do título. */
.rkscp-card__btn-view {
	flex: 0 0 var(--rkscp-card-acao);
	width: var(--rkscp-card-acao);
	min-height: var(--rkscp-card-acao);
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 1px solid var(--rkscp-line, #e2e2e2);
	border-radius: var(--rkscp-card-radius);
	background: var(--rkscp-white, #fff);
	color: var(--rkscp-ink-900, #161616);
	text-decoration: none;
	transition: border-color .15s ease, background-color .15s ease;
}

.rkscp-card__btn-view:hover {
	border-color: var(--rkscp-ink-900, #161616);
	background: var(--rkscp-surface, #f2f2f2);
	color: var(--rkscp-ink-900, #161616);
}

/* O <span> que embrulha o ícone também precisa ser flex.
   Sem isso ele continua sendo caixa de linha, e o SVG fica apoiado na
   linha de base — sobra uns 3px embaixo e o olho aparece deslocado para
   cima dentro do quadrado, mesmo com o pai centralizando. */
.rkscp-card__btn-view > span {
	display: flex;
	align-items: center;
	justify-content: center;
}

.rkscp-card__btn-view svg {
	display: block;
	width: 20px;
	height: 20px;
}

/* Barra preta: a ação que o catálogo existe para provocar. */
.rkscp-card__btn-add {
	position: relative;
	flex: 1;
	min-width: 0;
	min-height: var(--rkscp-card-acao);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	padding: 8px 12px;
	border: 0;
	border-radius: var(--rkscp-card-radius);
	background: var(--rkscp-ink-900, #161616);
	color: var(--rkscp-white, #fff);
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	cursor: pointer;
	transition: opacity .15s ease;
}

/* Hover inverte: preenchido vira contorno.
   `background: transparent` e não a cor do card, para o botão funcionar
   sobre qualquer fundo que o Elementor pinte atrás dele. */
.rkscp-card__btn-add:hover,
.rkscp-card__btn-add:focus-visible {
	background: transparent;
	color: var(--rkscp-ink-900, #161616);
	box-shadow: inset 0 0 0 1px var(--rkscp-ink-900, #161616);
}

.rkscp-card__btn-add__label {
	/* O rótulo cede antes do ícone quando o card aperta: um "+" sozinho
	   ainda comunica; meia palavra, não. */
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	min-width: 0;
}

.rkscp-card__btn-add__icon {
	display: flex;
	align-items: center;
	justify-content: center;
}

.rkscp-card__btn-add svg {
	width: 17px;
	height: 20px;
}

/* ── Estado de carregando ──────────────────────────────────── */
/*
 * O ícone some e um spinner entra no lugar.
 *
 * Antes daqui só saía opacity .5 no botão inteiro. Com o servidor levando
 * mais de um segundo para responder, um botão apagado e imóvel lê como
 * travamento — o cliente clica de novo achando que não pegou. O spinner
 * diz "estou trabalhando" sem precisar de texto.
 *
 * O botão em si NÃO é esmaecido: dimming o conjunto apagaria o spinner
 * junto e o feedback perderia força justamente onde ele importa.
 */
.rkscp-card__btn-add.is-loading {
	pointer-events: none;
}

/* O rótulo some junto com o ícone: com "Adicionar" no lugar, o spinner
   girava ao lado da palavra e parecia um segundo elemento em vez do estado
   do botão. `opacity` e não `display`, para a largura não pular. */
.rkscp-card__btn-add.is-loading .rkscp-card__btn-add__icon,
.rkscp-card__btn-add.is-loading .rkscp-card__btn-add__label {
	opacity: 0;
}

/**
 * Enquanto carrega, o botão não inverte.
 *
 * O clique acontece com o ponteiro em cima, então o hover estava ativo
 * junto com o carregamento: o botão ficava com fundo transparente e o
 * spinner, que segue `currentColor`, saía preto. Aqui o estado de
 * carregamento vence o hover — fundo cheio, spinner branco, que é o
 * contraste que o momento pede.
 */
.rkscp-card__btn-add.is-loading,
.rkscp-card__btn-add.is-loading:hover,
.rkscp-card__btn-add.is-loading:focus-visible {
	background: var(--rkscp-ink-900, #161616);
	color: var(--rkscp-white, #fff);
	box-shadow: none;
}

.rkscp-card__btn-add.is-loading::after {
	content: "";
	position: absolute;
	width: 16px;
	height: 16px;
	/* Branco explícito, não `currentColor`: se alguém pintar o botão por
	   control do Elementor, o spinner continua legível sobre o fundo cheio. */
	border: 2px solid var(--rkscp-white, #fff);
	border-top-color: transparent;
	border-radius: 50%;
	opacity: .9;
	animation: rkscp-girar .6s linear infinite;
}

@keyframes rkscp-girar {
	to { transform: rotate(360deg); }
}

.rkscp-card__btn-add__check {
	position: absolute;
	inset: 0;
	display: none;
	align-items: center;
	justify-content: center;
	background: var(--rkscp-ink-900, #161616);
	color: var(--rkscp-white, #fff);
	border-radius: var(--rkscp-card-radius);
}

.rkscp-card__btn-add.is-done .rkscp-card__btn-add__icon,
.rkscp-card__btn-add.is-done .rkscp-card__btn-add__label { visibility: hidden; }
.rkscp-card__btn-add.is-done .rkscp-card__btn-add__check { display: flex; }

/* ── Mobile ────────────────────────────────────────────────── */
/*
 * Ação compacta: 32px de altura, e o botão do olho quadrado de 32×32.
 *
 * A altura vem do token --rkscp-card-acao, que o botão largo usa como
 * min-height e o quadrado usa nos dois eixos — por isso o 1:1 sai de um
 * valor só. O padding e a fonte precisam encolher junto: sem zerar o
 * padding vertical, os 8px originais empurrariam a altura real para 48px.
 */
@media (max-width: 767px) {
	.rkscp-card {
		--rkscp-card-acao: 32px;
		--rkscp-card-pad: 12px;
	}

	.rkscp-card__actions {
		gap: 6px;
	}

	.rkscp-card__btn-view {
		/* flex-basis, largura e altura no mesmo valor: quadrado exato, sem
		   depender do conteúdo. */
		flex: 0 0 var(--rkscp-card-acao);
		width: var(--rkscp-card-acao);
		height: var(--rkscp-card-acao);
		min-height: var(--rkscp-card-acao);
	}

	.rkscp-card__btn-view svg {
		width: 16px;
		height: 16px;
	}

	.rkscp-card__btn-add {
		height: var(--rkscp-card-acao);
		min-height: var(--rkscp-card-acao);
		gap: 5px;
		padding: 0 10px;
		font-size: 12px;
		line-height: 1;
	}

	.rkscp-card__btn-add svg {
		width: 15px;
		height: 15px;
	}

	.rkscp-card__name {
		font-size: 14px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.rkscp-card { transition-duration: .01ms; }
	.rkscp-card:hover { transform: none; }

	/* O feedback continua existindo — só troca de rotação para pulso.
	   Remover o indicador aqui deixaria justamente quem já tem
	   sensibilidade a movimento sem saber se o clique funcionou. */
	.rkscp-card__btn-add.is-loading::after {
		animation: rkscp-pulsar 1s ease-in-out infinite;
	}
}

@keyframes rkscp-pulsar {
	50% { opacity: .25; }
}