/**
 * Favoritos — Story 22 do épico `03-conta-do-cliente`; revisão de UI/UX em
 * 29/09/2026, alinhando ao protótipo aprovado do épico
 * `04-experiencia-da-conta` (`planning/loja-virtual/proto/conta/index.html`,
 * repo `sistema`) e aos componentes que ele já criou (`Conta\Componentes`,
 * `.ryanne-subtitulo`/`.ryanne-estado`/`.ryanne-btn`).
 *
 * ⚠️ Este arquivo carrega em TRÊS contextos bem diferentes — loop da loja,
 * página do produto, e a lista de Favoritos (pública `/favoritos` OU aba
 * `/conta/favoritos`) — nenhum deles garante que `conta.css` também esteja
 * carregado (`conta.css` só entra dentro de `/conta`, ver seu próprio
 * cabeçalho). Por isso as classes de componente abaixo (`.ryanne-subtitulo`,
 * `.ryanne-estado`, `.ryanne-btn`) têm aqui uma versão SEM o escopo
 * `.woocommerce-account` — mesmo visual, mas autônoma. Dentro de `/conta`,
 * a regra mais específica de `conta.css` (que carrega primeiro, mas vence
 * por especificidade, não por ordem) continua no comando — uma única fonte
 * de verdade pro desenho, duas folhas por causa de onde cada uma pode
 * carregar.
 */

/* ═══════════════════════════════════════════════════════════════════════
 * Botão "Adicionar aos Favoritos" — loop da loja e página do produto
 * ═══════════════════════════════════════════════════════════════════════ */

.ryanne-favoritos-botao {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 8px;
	padding: 8px 14px;
	border: 1.5px solid var(--ry-color-2, #0A232B);
	border-radius: 999px;
	background: #fff;
	color: var(--ry-color-2, #0A232B);
	font-family: inherit;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.2;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.ryanne-favoritos-botao:hover {
	background: #f2f4f5;
}

.ryanne-favoritos-botao .ryanne-estado-icone {
	width: 16px;
	height: 16px;
	margin: 0;
	flex-shrink: 0;
}

/* Salvo: coração preenchido (mesma cor do texto, herdada) sobre fundo
 * escuro — o MESMO par de cores do botão primário do resto da conta
 * (`.ryanne-btn--primario`), pra "salvo" ser reconhecível sem depender só
 * da cor (o texto também muda, ver `favoritos.js`). */
.ryanne-favoritos-botao.is-salvo {
	background: var(--ry-color-2, #0A232B);
	color: #fff;
}

.ryanne-favoritos-botao.is-salvo:hover {
	background: #13384a;
}

.ryanne-favoritos-botao.is-salvo .ryanne-estado-icone {
	fill: currentColor;
}

.ryanne-favoritos-botao:disabled {
	opacity: 0.6;
	cursor: default;
}

.ryanne-favoritos-botao:focus-visible {
	outline: 2px solid var(--ry-color-2, #0A232B);
	outline-offset: 2px;
}

@media (max-width: 767px) {
	.ryanne-favoritos-botao {
		min-height: 44px;
	}
}

/* No LOOP da loja o botão fica dentro de `.product-meta` (o mesmo
 * quadrinho que o tema usa para o ícone de carrinho ao lado) — achado da
 * revisão de UI/UX, 29/09/2026: o par ícone+texto era grande demais ali,
 * puxando o overlay inteiro. Só ícone, do mesmo porte do ícone vizinho
 * (`.product-meta svg`, ~21px) — na página do produto o par continua
 * completo, ali há espaço de sobra e o texto ajuda a explicar a ação.
 * O texto (`.ryanne-favoritos-botao-texto`) continua no DOM — some só
 * visualmente (`sr-only`), pra leitor de tela seguir lendo o rótulo certo
 * ("Adicionar aos Favoritos"/"Remover dos Favoritos") sem precisar de um
 * `aria-label` duplicado que teria de ser mantido em sincronia à parte. */
.product-meta .ryanne-favoritos-botao {
	width: 50px;
	height: 50px;
	min-height: 0;
	padding: 0;
	margin: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: var(--ry-color-2, #0A232B);
	justify-content: center;
}

.product-meta .ryanne-favoritos-botao:hover,
.product-meta .ryanne-favoritos-botao.is-salvo,
.product-meta .ryanne-favoritos-botao.is-salvo:hover {
	background: transparent;
	color: var(--ry-color-2, #0A232B);
}

.product-meta .ryanne-favoritos-botao .ryanne-estado-icone {
	width: 23px;
	height: 23px;
}

.product-meta .ryanne-favoritos-botao-texto {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Página do produto: o botão fecha a linha do preço (`Botao::abrirLinhaPreco()`),
 * preço à esquerda, botão à direita; quebra pra baixo se não couber. */
.ryanne-favoritos-linha-preco {
	display: flex;
	width: 100%;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px 16px;
}

.ryanne-favoritos-linha-preco .price {
	margin: 0;
}

.ryanne-favoritos-linha-preco .ryanne-favoritos-botao {
	margin-top: 0;
	flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════════════════
 * Contador do cabeçalho — placeholder enquanto o JS não decidiu o número
 * ═══════════════════════════════════════════════════════════════════════ */

.ryanne-favoritos-contador-numero:empty::after {
	content: '0';
}

/* ═══════════════════════════════════════════════════════════════════════
 * Componentes compartilhados com `/conta` (`Conta\Componentes`), versão
 * autônoma — ver a nota do cabeçalho do arquivo
 * ═══════════════════════════════════════════════════════════════════════ */

.ryanne-subtitulo {
	font-size: 13.5px;
	color: #5d707a;
	margin: 0 0 22px;
}

.ryanne-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-height: 40px;
	padding: 8px 16px;
	border-radius: 8px;
	border: 1.5px solid var(--ry-color-2, #0A232B);
	background: var(--ry-color-2, #0A232B);
	color: #fff;
	font-family: inherit;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.2;
	/* `!important` deliberado (mesmo padrão de `conta.css`): fora de
	 * `/conta` o link nativo do tema (`.woocommerce a`) tem mais
	 * especificidade que uma classe só — achado ao vivo, 29/09/2026,
	 * "Ver opções" sublinhado em `/favoritos`. */
	text-decoration: none !important;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

.ryanne-btn:hover {
	background: #13384a;
	border-color: #13384a;
	color: #fff;
	text-decoration: none !important;
}

.ryanne-btn--secundario {
	background: #fff;
	color: var(--ry-color-2, #0A232B);
}

.ryanne-btn--secundario:hover {
	background: #f2f4f5;
	color: var(--ry-color-2, #0A232B);
}

@media (max-width: 767px) {
	.ryanne-btn {
		min-height: 44px;
	}
}

.ryanne-estado {
	text-align: center;
	padding: 48px 20px;
	border: 1.5px dashed #e5e5e5;
	border-radius: 14px;
	background: #fff;
}

.ryanne-estado-icone {
	width: 40px;
	height: 40px;
	color: #c3cbcd;
	margin: 0 auto 12px;
	display: block;
}

.ryanne-estado--erro .ryanne-estado-icone {
	color: #d98f89;
}

.ryanne-estado h3 {
	font-size: 16px;
	margin: 0 0 6px;
	font-family: var(--ry-font-1, inherit);
}

.ryanne-estado p {
	font-size: 13.5px;
	color: #5d707a;
	margin: 0 auto 16px;
	max-width: 340px;
}

.ryanne-favoritos-carregando {
	font-size: 13.5px;
	color: #5d707a;
	text-align: center;
	padding: 32px 20px;
}

/* ═══════════════════════════════════════════════════════════════════════
 * Vitrine de Favoritos — grade de cartões (`.showcase` do protótipo)
 * ═══════════════════════════════════════════════════════════════════════ */

.ryanne-favoritos-lista {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: 16px;
	margin: 0;
}

.ryanne-favoritos-item {
	display: flex;
	flex-direction: column;
	border: 1px solid #e5e5e5;
	border-radius: 10px;
	overflow: hidden;
	background: #fff;
	transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

.ryanne-favoritos-item:hover {
	border-color: #cfd6d8;
	box-shadow: 0 2px 10px rgba(10, 35, 43, 0.08);
}

.ryanne-favoritos-item-imagem {
	display: block;
	background: #f5f5f5;
}

.ryanne-favoritos-item-imagem img {
	width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
	display: block;
}

.ryanne-favoritos-item-corpo {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 10px;
	gap: 4px;
}

.ryanne-favoritos-item-nome {
	font-size: 12.5px;
	font-weight: 600;
	line-height: 1.35;
	text-decoration: none !important; /* mesmo motivo de `.ryanne-btn` acima */
	/* `!important` deliberado, mesmo motivo do `text-decoration` acima: fora
	 * de `/conta` o link do tema (`.woocommerce a`) fixa a cor de destaque
	 * (`--ry-color-1`, verde) no nome — achado ao vivo, 29/09/2026, nome do
	 * produto saindo verde em `/favoritos` em vez da cor primária que já
	 * aparece certo em `/conta/favoritos`. */
	color: var(--ry-color-2, #0A232B) !important;
	/* Duas linhas no máximo — nome comprido não estica o cartão vizinho. */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.ryanne-favoritos-item-nome:hover {
	text-decoration: none !important;
}

.ryanne-favoritos-item-preco {
	font-weight: 700;
	font-size: 13px;
	color: var(--ry-color-2, #0A232B);
}

.ryanne-favoritos-item-acoes {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-top: auto;
	padding-top: 8px;
}

.ryanne-favoritos-item-comprar {
	width: 100%;
	text-align: center;
	/* "Adicionar ao carrinho" (produto simples) é mais comprido que "Ver
	 * opções" (variável) e cortava em cartões estreitos — `.ryanne-btn`
	 * é `nowrap` por padrão (correto pros outros botões, rótulo curto e
	 * fixo); aqui o texto varia por produto, então quebra em vez de
	 * cortar. `!important` deliberado: dentro de `/conta`, a regra
	 * `.woocommerce-account .woocommerce-MyAccount-content .ryanne-btn`
	 * de `conta.css` (3 classes) fixa `nowrap` e venceria por
	 * especificidade — achado ao vivo, 29/09/2026, texto ainda cortando
	 * em `/conta/favoritos` mesmo depois desta regra. */
	white-space: normal !important;
}

/* Alvo de toque ≥44px no celular continua valendo (`.ryanne-btn`, regra
 * geral da Story 09/épico 04) — só a fonte fica menor, pra marcar que é a
 * ação secundária, sem ficar pequena demais pro dedo. */
.ryanne-favoritos-item-remover {
	width: 100%;
	font-size: 12px;
}

@media (max-width: 480px) {
	.ryanne-favoritos-lista {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}