/**
 * Estilos de `/conta` — camada visual do protótipo aprovado
 * (`planning/loja-virtual/proto/conta/index.html`, repo `sistema`), épico
 * `04-experiencia-da-conta`. Carregado só em `/conta` (`Conta\Assets`) e na
 * página do link mágico (`Conta\LinkMagico`, wrapper `.ryanne-orcamento`).
 *
 * ⚠️ O tema (`rara-ecommerce`) e o CSS adicional do Customizer estilizam a
 * conta com seletores de especificidade (0,2,1) — `.woocommerce-account
 * .woocommerce-MyAccount-content a` (link verde), `.woocommerce
 * button.button` (botão de 18px×46px), `.entry-content h2` (título de
 * 1.6em), `...MyAccount-navigation ul li` (menu em CAIXA ALTA). Por isso os
 * componentes abaixo usam o escopo `$C` = `.woocommerce-account
 * .woocommerce-MyAccount-content` (0,2,0 + a própria classe): sem ele, o
 * tema vence e a tela diverge do protótipo sem nenhum erro aparente — foi
 * exatamente o que aconteceu até a revisão de fidelidade (28/09/2026), que
 * só apareceu olhando o site de verdade, com o tema carregado.
 *
 * Tokens: os mesmos `--ry-*` do Customizer, com os valores do protótipo
 * como reserva (o ambiente local nem sempre tem o Customizer igual ao de
 * produção). Cinza de texto é sempre `#5d707a` (5,16:1 sobre branco) —
 * o `#9aa7ab` do protótipo reprova no contraste AA (Story 09).
 */

.woocommerce-account,
.ryanne-orcamento {
	--ryanne-azul: var(--ry-color-2, #0A232B);
	--ryanne-verde: var(--ry-color-1, #a0c916);
	--ryanne-verde-escuro: var(--ry-color-1-dark, #87af00);
	--ryanne-cinza: #5d707a;
	--ryanne-texto: var(--ry-color-dark-gray, #334449);
	--ryanne-fundo: var(--ry-color-bg, #F5F5F5);
	--ryanne-borda: #e5e5e5;
	--ryanne-titulo: var(--ry-font-1, "Muli", "Segoe UI", sans-serif);
}

/* ═══════════════════════════════════════════════════════════════════════
 * Base do conteúdo
 * ═══════════════════════════════════════════════════════════════════════ */

.woocommerce-account .woocommerce-MyAccount-content,
.ryanne-orcamento {
	color: var(--ryanne-texto);
	font-size: 14px;
	line-height: 1.5;
}

.woocommerce-account .woocommerce-MyAccount-content,
.woocommerce-account .woocommerce-MyAccount-content *,
.ryanne-orcamento,
.ryanne-orcamento * {
	box-sizing: border-box;
}

/* Sem rolagem horizontal a 375px — nenhum filho passa da largura da coluna. */
.woocommerce-account .woocommerce-MyAccount-content > * {
	max-width: 100%;
}

/* Link do conteúdo: azul da marca, como no protótipo — o tema pinta de
 * verde (`--primary-color`), a mesma cor dos botões de compra da loja. */
.woocommerce-account .woocommerce-MyAccount-content a:not(.ryanne-btn):not(.button),
.ryanne-orcamento a:not(.ryanne-btn):not(.button) {
	color: var(--ryanne-azul);
}

.woocommerce-account .woocommerce-MyAccount-content h2,
.woocommerce-account .woocommerce-MyAccount-content h3,
.woocommerce-account .woocommerce-MyAccount-content h4 {
	font-family: var(--ryanne-titulo);
	letter-spacing: -0.02em;
	color: var(--ryanne-texto);
	font-weight: 700;
	margin: 0;
}

.woocommerce-account .woocommerce-MyAccount-content h2 {
	font-size: 18px;
	margin: 24px 0 12px;
}

.woocommerce-account .woocommerce-MyAccount-content h3 {
	font-size: 16px;
}

/* Subtítulo de tela (`.page-subtitle` do protótipo) — `Componentes::subtitulo()`. */
.woocommerce-account .woocommerce-MyAccount-content .ryanne-subtitulo {
	font-size: 13.5px;
	color: var(--ryanne-cinza);
	margin: 0 0 22px;
}

/* ═══════════════════════════════════════════════════════════════════════
 * Botões — `.btn` / `.btn-primary` / `.btn-secondary` / `.btn-ghost`
 * ═══════════════════════════════════════════════════════════════════════ */

/* `.button` nativo do WooCommerce dentro da conta (ações de pedido,
 * métodos de pagamento, "Tentar de novo" antigo) ganha o mesmo desenho do
 * primário — o do tema tem 18px×46px de padding e canto reto. */
.woocommerce-account .woocommerce-MyAccount-content .ryanne-btn,
.woocommerce-account .woocommerce-MyAccount-content .button,
.ryanne-orcamento .ryanne-btn,
.ryanne-orcamento .button {
	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(--ryanne-azul);
	background: var(--ryanne-azul);
	color: #fff;
	font-family: inherit;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0;
	text-transform: none;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
}

.woocommerce-account .woocommerce-MyAccount-content .ryanne-btn:hover,
.woocommerce-account .woocommerce-MyAccount-content .button:hover,
.ryanne-orcamento .ryanne-btn:hover,
.ryanne-orcamento .button:hover {
	background: #13384a;
	border-color: #13384a;
	color: #fff;
	text-decoration: none;
}

.woocommerce-account .woocommerce-MyAccount-content .ryanne-btn--secundario {
	background: #fff;
	color: var(--ryanne-azul);
}

.woocommerce-account .woocommerce-MyAccount-content .ryanne-btn--secundario:hover {
	background: #f2f4f5;
	color: var(--ryanne-azul);
	border-color: var(--ryanne-azul);
}

.woocommerce-account .woocommerce-MyAccount-content .ryanne-btn--fantasma {
	background: transparent;
	color: var(--ryanne-cinza);
	border: 1px solid var(--ryanne-borda);
}

.woocommerce-account .woocommerce-MyAccount-content .ryanne-btn--fantasma:hover,
.woocommerce-account .woocommerce-MyAccount-content .ryanne-btn--fantasma[aria-expanded="true"] {
	background: #f2f4f5;
	color: var(--ryanne-azul);
	border-color: #cfd6d8;
}

.woocommerce-account .woocommerce-MyAccount-content .ryanne-btn:disabled {
	opacity: 0.6;
	cursor: default;
}

/* Alvo de toque ≥44px no celular (Story 09); no desktop, o tamanho do
 * protótipo (os 44px deixavam todo botão 30% maior que o aprovado). */
@media (max-width: 767px) {
	.woocommerce-account .woocommerce-MyAccount-content .ryanne-btn,
	.woocommerce-account .woocommerce-MyAccount-content .button,
	.ryanne-orcamento .ryanne-btn,
	.ryanne-orcamento .button {
		min-height: 44px;
	}
}

/* ═══════════════════════════════════════════════════════════════════════
 * Selo de situação — `.badge` (`Componentes::selo()`)
 * ═══════════════════════════════════════════════════════════════════════ */

.woocommerce-account .ryanne-selo {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 11.5px;
	font-weight: 700;
	line-height: 1.4;
	padding: 3px 9px;
	border-radius: 50px;
	white-space: nowrap;
}

.woocommerce-account .ryanne-selo::before {
	content: '';
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: currentColor;
	flex-shrink: 0;
}

.woocommerce-account .ryanne-selo--info { background: #eef6fb; color: #2b6ea3; }
.woocommerce-account .ryanne-selo--aviso { background: #fff6e0; color: #7a5d08; }
.woocommerce-account .ryanne-selo--ok { background: #eef7e0; color: #4a7010; }
.woocommerce-account .ryanne-selo--concluido { background: #eee; color: #5f5f5f; }
.woocommerce-account .ryanne-selo--perigo { background: #fbebea; color: #a63b34; }

/* Cor da etapa vinda do sistema — texto escurecido pra manter AA mesmo
 * com cores claras (amarelo, âmbar). */
.woocommerce-account .ryanne-selo--cor {
	color: color-mix(in srgb, var(--ryanne-selo-cor) 60%, #000);
	background: color-mix(in srgb, var(--ryanne-selo-cor) 13%, #fff);
}

/* ═══════════════════════════════════════════════════════════════════════
 * Cartão de compra — `.card` / `.card-row` (Pedidos e Encomendas)
 * ═══════════════════════════════════════════════════════════════════════ */

.woocommerce-account .ryanne-cartao {
	border: 1px solid var(--ryanne-borda);
	border-radius: 10px;
	padding: 16px;
	margin-bottom: 12px;
	background: #fff;
}

.woocommerce-account .ryanne-cartao:hover {
	border-color: #cfd6d8;
}

.woocommerce-account .ryanne-cartao-linha {
	display: flex;
	gap: 14px;
	align-items: center;
}

.woocommerce-account .ryanne-cartao-miniatura {
	width: 52px;
	height: 52px;
	border-radius: 8px;
	background: var(--ryanne-fundo);
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #b7c1c4;
	overflow: hidden;
}

.woocommerce-account .ryanne-cartao-miniatura img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	margin: 0;
}

.woocommerce-account .ryanne-cartao-miniatura svg {
	width: 22px;
	height: 22px;
}

.woocommerce-account .ryanne-cartao-info {
	flex: 1;
	min-width: 0;
}

.woocommerce-account .woocommerce-MyAccount-content .ryanne-cartao-nome {
	display: block;
	font-weight: 700;
	font-size: 14px;
	color: var(--ryanne-azul);
	text-decoration: none;
}

.woocommerce-account .ryanne-cartao-desc {
	font-size: 12.5px;
	color: var(--ryanne-cinza);
	margin: 2px 0 6px;
}

.woocommerce-account .ryanne-cartao-acoes {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 8px;
	flex-shrink: 0;
}

/* Área abaixo da linha principal — parcelas, progresso, "pedir de novo". */
.woocommerce-account .ryanne-cartao-extra {
	margin-top: 14px;
	padding-top: 12px;
	border-top: 1px solid var(--ryanne-borda);
	font-size: 13px;
}

.woocommerce-account .ryanne-cartao-extra[hidden] {
	display: none;
}

@media (max-width: 767px) {
	.woocommerce-account .ryanne-cartao-linha {
		flex-wrap: wrap;
	}
	.woocommerce-account .ryanne-cartao-acoes {
		width: 100%;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}
}

/* "Mais opções ▾" — menu suspenso (`.menu-pop` do protótipo). O JS
 * (`minhas-encomendas.js`) alterna `hidden` no painel logo depois do botão. */
.woocommerce-account .ryanne-mais-opcoes-wrap {
	position: relative;
}

.woocommerce-account .ryanne-mais-opcoes {
	position: absolute;
	right: 0;
	top: calc(100% + 4px);
	z-index: 20;
	min-width: 220px;
	max-width: calc(100vw - 48px);
	background: #fff;
	border: 1px solid var(--ryanne-borda);
	border-radius: 8px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
	overflow: hidden;
	padding: 4px 0;
}

.woocommerce-account .woocommerce-MyAccount-content .ryanne-mais-opcoes-item {
	display: block;
	width: 100%;
	text-align: left;
	padding: 10px 14px;
	font-family: inherit;
	font-size: 13px;
	font-weight: 400;
	line-height: 1.4;
	color: var(--ryanne-azul);
	background: transparent;
	border: 0;
	border-radius: 0;
	text-decoration: none;
	white-space: normal;
	cursor: pointer;
}

.woocommerce-account .woocommerce-MyAccount-content .ryanne-mais-opcoes-item:hover {
	background: #f5f5f5;
	text-decoration: none;
}

.woocommerce-account .ryanne-mais-opcoes-nota {
	display: block;
	padding: 6px 14px 10px;
	font-size: 12px;
	color: var(--ryanne-cinza);
}

/* No celular o menu abre pra esquerda a partir do botão — que ali fica
 * à direita da linha de ações. */
@media (max-width: 767px) {
	.woocommerce-account .ryanne-mais-opcoes {
		min-width: 240px;
	}
}

/* ═══════════════════════════════════════════════════════════════════════
 * Tabela — `table.acc-table` (Notificações, Atendimentos)
 * ═══════════════════════════════════════════════════════════════════════ */

.woocommerce-account .woocommerce-MyAccount-content table.ryanne-tabela {
	width: 100%;
	border-collapse: collapse;
	border: 0;
	font-size: 13px;
	margin: 0;
}

.woocommerce-account .woocommerce-MyAccount-content table.ryanne-tabela th {
	text-align: left;
	font-size: 11.5px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	color: var(--ryanne-cinza);
	padding: 8px 10px;
	border: 0;
	border-bottom: 1px solid var(--ryanne-borda);
	background: none;
}

.woocommerce-account .woocommerce-MyAccount-content table.ryanne-tabela td {
	padding: 12px 10px;
	border: 0;
	border-bottom: 1px solid var(--ryanne-borda);
	background: none;
	vertical-align: middle;
}

/* 375px: cada linha vira um bloco rotulado (`data-label`), sem rolagem. */
@media (max-width: 600px) {
	.woocommerce-account .woocommerce-MyAccount-content table.ryanne-tabela thead {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
	}
	.woocommerce-account .woocommerce-MyAccount-content table.ryanne-tabela tr {
		display: block;
		border: 1px solid var(--ryanne-borda);
		border-radius: 10px;
		padding: 6px 12px;
		margin-bottom: 10px;
	}
	.woocommerce-account .woocommerce-MyAccount-content table.ryanne-tabela td {
		display: flex;
		justify-content: space-between;
		align-items: center;
		gap: 12px;
		padding: 8px 0;
		text-align: right;
	}
	.woocommerce-account .woocommerce-MyAccount-content table.ryanne-tabela tr td:last-child {
		border-bottom: 0;
	}
	.woocommerce-account .woocommerce-MyAccount-content table.ryanne-tabela td[data-label]::before {
		content: attr(data-label);
		font-weight: 700;
		font-size: 12px;
		color: var(--ryanne-cinza);
		text-align: left;
	}
	.woocommerce-account .woocommerce-MyAccount-content table.ryanne-tabela td:not([data-label]):empty {
		display: none;
	}
}

/* ═══════════════════════════════════════════════════════════════════════
 * Tabela nativa responsiva — detalhe do pedido (WooCommerce) e página do
 * link mágico. Mobile-first: no estreito cada linha vira cartão rotulado.
 * ═══════════════════════════════════════════════════════════════════════ */

.woocommerce-account table.shop_table_responsive,
.ryanne-orcamento table.shop_table_responsive {
	border: 0;
}

@media (max-width: 767px) {
	.woocommerce-account table.shop_table_responsive thead,
	.ryanne-orcamento table.shop_table_responsive thead {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
	}
	.woocommerce-account table.shop_table_responsive tr,
	.ryanne-orcamento table.shop_table_responsive tr {
		display: block;
		margin-bottom: 12px;
		border: 1px solid var(--ryanne-borda);
		border-radius: 10px;
		overflow: hidden;
	}
	.woocommerce-account table.shop_table_responsive td,
	.ryanne-orcamento table.shop_table_responsive td {
		display: flex;
		justify-content: space-between;
		align-items: center;
		gap: 12px;
		padding: 10px 14px;
		text-align: right;
		border-top: 1px solid #eee;
	}
	.woocommerce-account table.shop_table_responsive td[data-label]::before,
	.ryanne-orcamento table.shop_table_responsive td[data-label]::before {
		content: attr(data-label);
		font-weight: 600;
		color: var(--ryanne-cinza);
		text-align: left;
		flex-shrink: 0;
	}
	.woocommerce-account table.shop_table_responsive tr td:first-child,
	.ryanne-orcamento table.shop_table_responsive tr td:first-child {
		border-top: 0;
	}
	/* Célula sem `data-label` (linha de ações) — largura inteira, sem o
	 * padrão rótulo-à-esquerda/valor-à-direita. */
	.woocommerce-account table.shop_table_responsive td:not([data-label]),
	.ryanne-orcamento table.shop_table_responsive td:not([data-label]) {
		justify-content: flex-start;
		flex-wrap: wrap;
		text-align: left;
	}
}

/* Link solto em célula — alvo de toque ≥44px (Story 09), sem virar bloco. */
.ryanne-orcamento table.shop_table_responsive td a:not(.button) {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
}

/* ═══════════════════════════════════════════════════════════════════════
 * Cartão de seção e campos — `.form-card` / `.field`
 * ═══════════════════════════════════════════════════════════════════════ */

.woocommerce-account .ryanne-md-cartao {
	border: 1px solid var(--ryanne-borda);
	border-radius: 12px;
	padding: 20px;
	margin-bottom: 16px;
	background: #fff;
}

.woocommerce-account .woocommerce-MyAccount-content .ryanne-md-cartao h3 {
	font-size: 14px;
	margin: 0 0 14px;
}

.woocommerce-account .ryanne-md-cartao > p:last-child {
	margin-bottom: 0;
}

.woocommerce-account .ryanne-md-texto {
	font-size: 13px;
	color: var(--ryanne-cinza);
	margin: 0 0 14px;
}

.woocommerce-account .woocommerce-MyAccount-content form .form-row {
	margin-bottom: 16px;
}

.woocommerce-account .woocommerce-MyAccount-content form .form-row label,
.woocommerce-account .woocommerce-MyAccount-content .ryanne-rotulo {
	display: block;
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: 0;
	color: var(--ryanne-cinza);
	margin-bottom: 5px;
}

/* `body.` — o tema repete este mesmo seletor mais abaixo no arquivo dele,
 * dentro de uma media query, com `font-size: 1em` (e vence por ordem). */
body.woocommerce-account .woocommerce-MyAccount-content form .form-row input.input-text,
body.woocommerce-account .woocommerce-MyAccount-content form .form-row textarea,
body.woocommerce-account .woocommerce-MyAccount-content form .form-row select {
	width: 100%;
	padding: 10px 12px;
	border: 2px solid #ddd;
	border-radius: 10px;
	font-family: inherit;
	font-size: 13.5px;
	background: #fff;
}

.woocommerce-account .woocommerce-MyAccount-content form .form-row input.input-text:focus,
.woocommerce-account .woocommerce-MyAccount-content form .form-row textarea:focus,
.woocommerce-account .woocommerce-MyAccount-content form .form-row select:focus {
	border-color: var(--ryanne-verde);
	outline: none;
}

/* Documento — campo travado, não editável (`.locked-field`). */
.woocommerce-account .ryanne-md-campo-travado {
	display: block;
	background: #f5f5f5;
	color: var(--ryanne-cinza);
	padding: 10px 12px;
	border-radius: 10px;
	font-size: 13.5px;
	border: 2px solid #eee;
}

.woocommerce-account .ryanne-md-dica {
	display: block;
	font-size: 12px;
	color: var(--ryanne-cinza);
	margin-top: 4px;
}

/* ═══════════════════════════════════════════════════════════════════════
 * Navegação — `.nav-item` (`templates/myaccount/navigation.php`)
 * ═══════════════════════════════════════════════════════════════════════ */

/* O tema põe borda na lista e em cada item, CAIXA ALTA, e fundo dourado
 * no hover — nada disso existe no protótipo. */
.woocommerce-account .woocommerce-MyAccount-navigation ul.ryanne-nav-grupo {
	list-style: none;
	margin: 0 0 18px;
	padding: 0;
	border: 0;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul.ryanne-nav-grupo--sair {
	margin: 22px 0 0;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul.ryanne-nav-grupo li {
	margin: 0 0 2px;
	font-size: 14px;
	font-weight: 500;
	text-transform: none;
	letter-spacing: 0;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul.ryanne-nav-grupo li a {
	display: flex;
	align-items: center;
	gap: 10px;
	/* 12px (não os 9px do protótipo): alvo de toque ≥44px (Story 09). */
	padding: 12px 10px;
	margin: 0;
	border: 0;
	border-radius: 8px;
	color: var(--ryanne-azul);
	text-decoration: none;
	background: transparent;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul.ryanne-nav-grupo li a:hover {
	background: #f2f4f5;
	color: var(--ryanne-azul);
}

.woocommerce-account .woocommerce-MyAccount-navigation ul.ryanne-nav-grupo li.is-active a {
	background: var(--ryanne-azul);
	color: #fff;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul.ryanne-nav-grupo--sair li a {
	color: #b23b3b;
}

/* Nenhum ícone por POSIÇÃO: o ícone é o `<svg>` que o template imprime por
 * endpoint. Defensivo — produção não tem mais regra `::before` com a fonte
 * do WooCommerce (removida do Customizer), mas qualquer uma que volte
 * duplicaria o ícone de cada item. */
.woocommerce-account .woocommerce-MyAccount-navigation ul.ryanne-nav-grupo li a::before {
	content: none;
	display: none;
}

.ryanne-nav-icone {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
}

/* Larguras do desktop: o WooCommerce dá 30% ao menu e 68% ao conteúdo
 * (`woocommerce-layout.css`), largo demais. Menu fixo em 240px; o conteúdo
 * fica com o resto. Abaixo de 769px o WooCommerce empilha os dois. Esse CSS
 * do WooCommerce carrega DEPOIS deste e tem a mesma especificidade, então
 * aqui a regra é mais específica (`.ryanne-nav`, e o conteúdo como irmão
 * dele) em vez de depender da ordem. */
@media (min-width: 769px) {
	.woocommerce-account .woocommerce-MyAccount-navigation.ryanne-nav {
		width: 240px;
	}
	.woocommerce-account .woocommerce-MyAccount-navigation.ryanne-nav ~ .woocommerce-MyAccount-content {
		width: calc(100% - 240px - 32px);
	}
}

/* "‹ Minha conta" — só existe fora da raiz (o template só imprime o link
 * nesse caso); escondido no desktop, onde a navegação lateral já resolve. */
.woocommerce-account .ryanne-nav-voltar {
	display: none;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	font-weight: 700;
	color: var(--ryanne-azul);
	text-decoration: none;
	margin-bottom: 14px;
	min-height: 44px;
}

.ryanne-nav-voltar svg {
	width: 16px;
	height: 16px;
}

/* Celular, como no protótipo: a lista lateral NUNCA aparece — na raiz, os
 * atalhos do Início ("Acessar") são o menu; nas telas internas, o
 * "‹ Minha conta" volta pra eles. Antes, a raiz mostrava a lista inteira
 * E os atalhos, empurrando o conteúdo pra baixo da dobra. */
@media (max-width: 767px) {
	.woocommerce-account .woocommerce-MyAccount-navigation.ryanne-nav {
		display: none;
	}
	.woocommerce-account .ryanne-nav-voltar {
		display: inline-flex;
	}
}

/* ═══════════════════════════════════════════════════════════════════════
 * Estado vazio / erro — `.state-block` (`Componentes`)
 * ═══════════════════════════════════════════════════════════════════════ */

.woocommerce-account .ryanne-estado,
.ryanne-orcamento .ryanne-estado {
	text-align: center;
	padding: 48px 20px;
	border: 1.5px dashed var(--ryanne-borda);
	border-radius: 14px;
	background: #fff;
}

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

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

.woocommerce-account .woocommerce-MyAccount-content .ryanne-estado h3 {
	font-size: 16px;
	margin: 0 0 6px;
}

.woocommerce-account .ryanne-estado p {
	font-size: 13.5px;
	color: var(--ryanne-cinza);
	margin: 0 auto 16px;
	max-width: 340px;
}

/* ═══════════════════════════════════════════════════════════════════════
 * Início — `.hello`, `.section-label`, `.now-card`, `.shortcut` (`Conta\Inicio`)
 * ═══════════════════════════════════════════════════════════════════════ */

.woocommerce-account .ryanne-inicio-saudacao {
	margin-bottom: 20px;
}

.woocommerce-account .woocommerce-MyAccount-content .ryanne-inicio-saudacao h2 {
	font-size: 22px;
	font-weight: 700;
	margin: 0;
}

.woocommerce-account .ryanne-inicio-saudacao p {
	font-size: 13px;
	color: var(--ryanne-cinza);
	margin: 2px 0 0;
}

/* `<h2>` pro leitor de tela, mas com o desenho de rótulo do protótipo — o
 * tema (`.entry-content h2`) aumentava pra 1.6em. */
.woocommerce-account .woocommerce-MyAccount-content h2.ryanne-secao-label {
	font-family: inherit;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--ryanne-cinza);
	margin: 22px 0 10px;
}

.woocommerce-account .ryanne-agora-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: 10px;
}

.woocommerce-account .ryanne-agora-card {
	border: 1px solid var(--ryanne-borda);
	border-radius: 12px;
	padding: 14px;
	display: flex;
	gap: 12px;
	align-items: flex-start;
	background: #fff;
}

.woocommerce-account .ryanne-agora-card--urgente {
	border-color: rgba(160, 201, 22, 0.45);
	background: rgba(160, 201, 22, 0.08);
}

.woocommerce-account .ryanne-agora-card-icone {
	width: 36px;
	height: 36px;
	border-radius: 9px;
	background: var(--ryanne-fundo);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	color: var(--ryanne-azul);
}

.woocommerce-account .ryanne-agora-card--urgente .ryanne-agora-card-icone {
	background: rgba(160, 201, 22, 0.18);
	color: var(--ryanne-verde-escuro);
}

.woocommerce-account .ryanne-agora-card-icone svg {
	width: 18px;
	height: 18px;
}

.woocommerce-account .ryanne-agora-card-titulo {
	font-size: 13.5px;
	font-weight: 700;
	color: var(--ryanne-azul);
	margin-bottom: 2px;
}

.woocommerce-account .ryanne-agora-card-texto {
	font-size: 12.5px;
	color: var(--ryanne-cinza);
	margin-bottom: 8px;
}

/* Link de ação do cartão: sublinhado e em negrito, azul (protótipo).
 * `padding`/`margin` negativos: alvo de toque ≥44px sem mudar o layout
 * (Story 09). */
.woocommerce-account .woocommerce-MyAccount-content .ryanne-agora-card a {
	display: inline-block;
	padding: 13px 0;
	margin: -13px 0;
	font-size: 12.5px;
	font-weight: 700;
	color: var(--ryanne-azul);
	text-decoration: underline;
}

.woocommerce-account .ryanne-inicio-saldo {
	font-size: 13.5px;
	margin: 14px 0 0;
}

.woocommerce-account .ryanne-atalhos-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
	gap: 8px;
}

@media (max-width: 767px) {
	.woocommerce-account .ryanne-atalhos-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

.woocommerce-account .woocommerce-MyAccount-content a.ryanne-atalho:not(.ryanne-btn):not(.button) {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	border: 1px solid var(--ryanne-borda);
	border-radius: 12px;
	padding: 14px 6px;
	text-align: center;
	font-size: 14px;
	font-weight: 700;
	color: var(--ryanne-cinza);
	text-decoration: none;
	background: #fff;
}

/* Cor e fundo do hover iguais aos das abas de Meus dados (`.ryanne-aba-btn`).
 * O `:not(...)` iguala a especificidade da regra de link do conteúdo, que pintava o card de azul. */
.woocommerce-account .woocommerce-MyAccount-content a.ryanne-atalho:not(.ryanne-btn):not(.button):hover {
	border-color: #cfd6d8;
	background: #f2f4f5;
	color: var(--ryanne-azul);
	text-decoration: none;
}

.woocommerce-account .ryanne-atalho svg {
	width: 24px;
	height: 24px;
	display: block;
	flex-shrink: 0;
}

/* Convite (sem e-mail confirmado) — `.invite` do protótipo. */
.woocommerce-account .ryanne-convite {
	border: 1px solid var(--ryanne-borda);
	border-radius: 14px;
	padding: 20px;
	margin-bottom: 20px;
	background: linear-gradient(180deg, #fff, #fafcf2);
}

.woocommerce-account .woocommerce-MyAccount-content .ryanne-convite h3 {
	font-size: 16px;
	margin: 0 0 6px;
}

.woocommerce-account .ryanne-convite p {
	font-size: 13px;
	color: var(--ryanne-cinza);
	margin: 0 0 14px;
}

.woocommerce-account .ryanne-convite form {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	align-items: flex-end;
}

.woocommerce-account .woocommerce-MyAccount-content .ryanne-convite form .form-row {
	flex: 1 1 220px;
	margin: 0;
}

.woocommerce-account .woocommerce-MyAccount-content .ryanne-convite form .form-row.ryanne-convite-enviar {
	flex: 0 0 auto;
}

/* ═══════════════════════════════════════════════════════════════════════
 * Encomendas — parcelas e progresso dentro do cartão
 * ═══════════════════════════════════════════════════════════════════════ */

.woocommerce-account .ryanne-parcelas-lista {
	list-style: none;
	margin: 0;
	padding: 0;
}

.woocommerce-account .ryanne-parcela {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 12px;
	padding: 8px 0;
	border-bottom: 1px solid #f0f0f0;
}

.woocommerce-account .ryanne-parcela:last-child {
	border-bottom: 0;
}

.woocommerce-account .ryanne-parcela-info {
	flex: 1 1 200px;
	font-size: 13px;
}

.woocommerce-account .ryanne-parcela-info small {
	display: block;
	color: var(--ryanne-cinza);
	font-size: 12px;
}

.woocommerce-account .ryanne-parcela-acoes {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}

.woocommerce-account .ryanne-parcelas-outras summary {
	cursor: pointer;
	font-size: 12.5px;
	font-weight: 700;
	color: var(--ryanne-azul);
	padding: 6px 0;
}

.woocommerce-account .ryanne-progresso-linha h4 {
	font-size: 13.5px;
	margin: 10px 0 6px;
}

.woocommerce-account .ryanne-timeline {
	margin: 6px 0 0;
	padding-left: 18px;
	font-size: 13px;
}

/* ═══════════════════════════════════════════════════════════════════════
 * Atendimentos — seletor "Sobre qual compra?" (`.radio-card`)
 * ═══════════════════════════════════════════════════════════════════════ */

.woocommerce-account .ryanne-seletor-compra {
	display: flex;
	flex-direction: column;
	gap: 8px;
	max-height: 300px;
	overflow-y: auto;
}

.woocommerce-account .woocommerce-MyAccount-content form .form-row label.ryanne-compra-opcao {
	display: flex;
	gap: 10px;
	align-items: center;
	border: 1.5px solid var(--ryanne-borda);
	border-radius: 10px;
	padding: 12px 14px;
	margin: 0;
	cursor: pointer;
	font-weight: 400;
	color: var(--ryanne-texto);
	background: #fff;
}

.woocommerce-account .woocommerce-MyAccount-content form .form-row label.ryanne-compra-opcao:has(input:checked) {
	border-color: var(--ryanne-verde-escuro);
	background: #fafcf0;
}

.woocommerce-account .ryanne-compra-opcao input {
	margin: 0;
	flex-shrink: 0;
	accent-color: var(--ryanne-verde-escuro);
}

.woocommerce-account .ryanne-compra-opcao-texto {
	display: flex;
	flex-direction: column;
	font-size: 13px;
	line-height: 1.35;
}

.woocommerce-account .ryanne-compra-opcao-texto strong {
	font-size: 13px;
	color: var(--ryanne-azul);
}

.woocommerce-account .ryanne-compra-opcao-texto small {
	color: var(--ryanne-cinza);
	font-size: 12px;
}

.woocommerce-account .ryanne-atendimentos-topo {
	margin-bottom: 18px;
}

/* ═══════════════════════════════════════════════════════════════════════
 * Meus dados — abas (`.tabbar`, pílula preenchida)
 * ═══════════════════════════════════════════════════════════════════════ */

.woocommerce-account .ryanne-abas {
	display: flex;
	gap: 4px;
	border: 1px solid var(--ryanne-borda);
	border-radius: 10px;
	padding: 4px;
	background: #fff;
	width: fit-content;
	margin-bottom: 18px;
	flex-wrap: wrap;
}

.woocommerce-account .woocommerce-MyAccount-content .ryanne-aba-btn {
	font-family: inherit;
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: 0;
	text-transform: none;
	color: var(--ryanne-cinza);
	background: transparent;
	border: 0;
	padding: 7px 14px;
	border-radius: 7px;
	min-height: 0;
	cursor: pointer;
	line-height: 1.4;
}

.woocommerce-account .woocommerce-MyAccount-content .ryanne-aba-btn:hover {
	background: #f2f4f5;
	color: var(--ryanne-azul);
}

.woocommerce-account .woocommerce-MyAccount-content .ryanne-aba-btn.active {
	background: var(--ryanne-azul);
	color: #fff;
}

@media (max-width: 767px) {
	.woocommerce-account .ryanne-abas {
		width: 100%;
	}
	.woocommerce-account .woocommerce-MyAccount-content .ryanne-aba-btn {
		flex: 1;
		min-height: 40px;
		padding: 7px 6px;
	}
}

.woocommerce-account .ryanne-aba-painel[hidden] {
	display: none;
}

/* Pagamento — a lista nativa do WooCommerce dentro do cartão da aba. */
.woocommerce-account .ryanne-md-cartao .woocommerce-PaymentMethods {
	margin: 0;
}

/* ═══════════════════════════════════════════════════════════════════════
 * Detalhe do pedido (WooCommerce nativo + `Conta\MeusPedidos`)
 * ═══════════════════════════════════════════════════════════════════════ */

.woocommerce-account .woocommerce-MyAccount-content .woocommerce-order-details,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-customer-details {
	border: 1px solid var(--ryanne-borda);
	border-radius: 12px;
	padding: 20px;
	margin-bottom: 16px;
}

.woocommerce-account .woocommerce-MyAccount-content .woocommerce-order-details__title,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-column__title {
	font-size: 14px;
	margin: 0 0 14px;
}

.woocommerce-account .woocommerce-MyAccount-content .woocommerce-customer-details address {
	border: 0;
	padding: 0;
	font-style: normal;
	font-size: 13px;
}

/* ═══════════════════════════════════════════════════════════════════════
 * Entrar / cadastrar-se (deslogado) — Story 10 (`Conta\LoginCadastro`)
 *
 * Valores medidos no protótipo (tela `login-cadastro`). Achado ao vivo em
 * produção (29/09/2026): o tema, o CSS do WooCommerce de produção (11.x,
 * servido por c0.wp.com) e o CSS adicional do Customizer venciam quase
 * tudo aqui — texto a 18px, rótulo fino, `<form>` com borda própria
 * dentro do cartão (caixa dentro de caixa), coluna de 625px. Por isso
 * `body.woocommerce-account` em todo seletor deste bloco.
 * ═══════════════════════════════════════════════════════════════════════ */

/* Conteúdo da tela de entrar centralizado numa coluna só (420px): frase,
 * seletor Entrar/Cadastrar, cartão do formulário e "Já comprou com a
 * gente?" — todos com a mesma largura e `margin: auto`. */
body.woocommerce-account .ryanne-login-aviso,
body.woocommerce-account .ryanne-login-intro,
body.woocommerce-account .ryanne-login-toggle,
body.woocommerce-account #customer_login,
body.woocommerce-account .ryanne-magic-link-cta {
	width: 100%;
	max-width: 420px;
	margin-left: auto;
	margin-right: auto;
}

body.woocommerce-account .ryanne-login-intro {
	color: var(--ryanne-cinza);
	font-size: 13.5px;
	line-height: 1.4;
	text-align: center;
	margin-top: 0;
	margin-bottom: 20px;
}

/* Link vencido/já usado (`?link=invalido`, de `LinkMagico::consumirToken()`). */
body.woocommerce-account .ryanne-login-aviso {
	background: #fbebea;
	border: 1px solid #f0c9c5;
	border-radius: 10px;
	color: #8a2f29;
	font-size: 13px;
	line-height: 1.4;
	padding: 12px 14px;
	margin-top: 0;
	margin-bottom: 16px;
	text-align: center;
}

/* Seletor segmentado Entrar | Cadastrar (`login-cadastro.js`): trilho
 * cinza com a aba ativa como pílula branca. */
body.woocommerce-account .ryanne-login-toggle {
	display: flex;
	gap: 4px;
	padding: 4px;
	background: #ecedef;
	border-radius: 14px;
	margin-bottom: 16px;
}

body.woocommerce-account .ryanne-login-toggle .ryanne-login-aba {
	flex: 1 1 0;
	min-height: 44px;
	padding: 10px 16px;
	border: 0;
	border-radius: 11px;
	background: transparent;
	box-shadow: none;
	color: var(--ryanne-cinza);
	font-family: inherit;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0;
	text-transform: none;
	cursor: pointer;
	transition: background-color 0.15s, color 0.15s, box-shadow 0.15s;
}

body.woocommerce-account .ryanne-login-toggle .ryanne-login-aba:hover {
	color: var(--ryanne-azul);
}

body.woocommerce-account .ryanne-login-toggle .ryanne-login-aba[aria-selected="true"] {
	background: #fff;
	color: var(--ryanne-azul);
	box-shadow: 0 1px 3px rgba(10, 35, 43, 0.16);
}

body.woocommerce-account .ryanne-login-toggle .ryanne-login-aba:focus-visible {
	outline: 2px solid var(--ryanne-azul);
	outline-offset: 2px;
}

/* As duas colunas nativas viram UM cartão por vez: coluna, não float. Sem
 * JS (sem seletor) ficam empilhadas, uma abaixo da outra. */
body.woocommerce-account #customer_login {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

body.woocommerce-account #customer_login::before,
body.woocommerce-account #customer_login::after {
	content: none;
}

body.woocommerce-account #customer_login .u-column1,
body.woocommerce-account #customer_login .u-column2 {
	float: none;
	width: 100%;
	flex: none;
	max-width: none;
	margin: 0;
	border: 1px solid var(--ryanne-borda);
	border-radius: 12px;
	padding: 32px;
	background: #fff;
}

body.woocommerce-account #customer_login .u-column1[hidden],
body.woocommerce-account #customer_login .u-column2[hidden] {
	display: none;
}

/* Com o seletor, o título da coluna é redundante — sai da tela mas fica
 * pro leitor de tela (a aba já o nomeia, `aria-labelledby`). */
body.woocommerce-account #customer_login.ryanne-tem-toggle h2 {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

body.woocommerce-account #customer_login h2 {
	font-family: var(--ryanne-titulo);
	font-size: 16px;
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.15;
	color: var(--ryanne-texto);
	margin: 0 0 16px;
	padding: 0;
}

/* O WooCommerce desenha uma borda própria em volta de cada `<form>` — com
 * o cartão da coluna, ficavam duas caixas uma dentro da outra. */
body.woocommerce-account #customer_login form.login,
body.woocommerce-account #customer_login form.register {
	border: 0;
	padding: 0;
	margin: 0;
	border-radius: 0;
}

body.woocommerce-account #customer_login .form-row {
	margin: 0 0 16px;
	padding: 0;
}

body.woocommerce-account #customer_login .form-row label {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: 0;
	text-transform: none;
	color: var(--ryanne-cinza);
	margin: 0 0 5px;
}

body.woocommerce-account #customer_login .form-row label .required {
	color: #a63b34;
}

body.woocommerce-account #customer_login .form-row input.input-text {
	width: 100%;
	height: auto;
	padding: 10px 12px;
	border: 2px solid #ddd;
	border-radius: 10px;
	font-size: 14px;
	line-height: 1.2;
	background: #fff;
}

body.woocommerce-account #customer_login .form-row input.input-text:focus {
	border-color: var(--ryanne-verde);
	outline: none;
}

/* Olho de mostrar senha do WooCommerce — alinhado ao campo mais baixo. */
body.woocommerce-account #customer_login .password-input {
	display: block;
	position: relative;
}

/* "Lembrar-me" — linha própria (movida por `login-cadastro.js`). */
body.woocommerce-account #customer_login .form-row.ryanne-lembrar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 6px 16px;
	margin: 0 0 14px;
}

/* Clearfix nativo (`.form-row::before/::after`) viraria dois itens flex
 * e o `space-between` espalharia o espaço entre quatro itens. */
body.woocommerce-account #customer_login .form-row.ryanne-lembrar::before,
body.woocommerce-account #customer_login .form-row.ryanne-lembrar::after {
	content: none;
	display: none;
}

/* "Esqueceu sua senha?" (movida por `login-cadastro.js`) no fim da linha. */
body.woocommerce-account #customer_login .form-row.ryanne-lembrar .woocommerce-LostPassword {
	margin: 0;
	padding: 0;
}

body.woocommerce-account #customer_login label.woocommerce-form-login__rememberme {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 14px;
	font-weight: 400;
	color: var(--ryanne-cinza);
	margin: 0;
	cursor: pointer;
}

/* O tema desenha o checkbox com `appearance: none` e sem tamanho próprio —
 * com `width: auto` ele virava um traço de 4px. Checkbox nativo, na cor
 * da marca. */
body.woocommerce-account #customer_login label.woocommerce-form-login__rememberme input[type="checkbox"] {
	appearance: auto;
	-webkit-appearance: checkbox;
	width: 16px;
	height: 16px;
	min-width: 16px;
	padding: 0;
	margin: 0;
	border: 0;
	accent-color: var(--ryanne-azul);
}

/* Linha [Acessar | Esqueceu sua senha?] — sem margem sobrando embaixo. */
/* A última linha do cartão (botão "Cadastrar"/"Acessar") não leva a
 * margem das linhas de campo — ela se somava ao padding do cartão e
 * deixava um vão sobrando embaixo do botão. */
body.woocommerce-account #customer_login form.login > :last-child,
body.woocommerce-account #customer_login form.register > :last-child {
	margin-bottom: 0;
}

body.woocommerce-account #customer_login .form-row.ryanne-linha-acao {
	margin: 0;
	gap: 8px 16px;
}

body.woocommerce-account #customer_login form.register > p:not(.form-row) {
	font-size: 14px;
	line-height: 1.4;
	color: var(--ryanne-cinza);
}

/* Aviso de privacidade do cadastro: texto legal, menor que o do cartão. */
body.woocommerce-account #customer_login .woocommerce-privacy-policy-text p {
	font-size: 12.5px;
	line-height: 1.4;
	color: var(--ryanne-cinza);
}

/* "Continuar" e o botão nativo "Acessar"/"Cadastrar" — sempre o mesmo
 * `.btn-primary`. `!important` deliberado: o nativo pega a regra do CSS
 * adicional do Customizer (`.woocommerce button.button`) e o
 * `.ryanne-continuar` (sem ancestral `.woocommerce`) pegava outra. */
body.woocommerce-account .woocommerce-form-login button[type="submit"],
body.woocommerce-account .woocommerce-form-register button[type="submit"],
body.woocommerce-account .ryanne-magic-link-form button[type="submit"],
body.woocommerce-account .ryanne-continuar {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	gap: 6px;
	font-family: inherit;
	font-size: 14px !important;
	font-weight: 500 !important;
	line-height: 1.2 !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	height: 40px !important;
	min-height: 40px !important;
	padding: 0 16px !important;
	margin: 0 !important;
	border-radius: 6px !important;
	border: 1px solid var(--ryanne-azul) !important;
	box-shadow: none !important;
	background: var(--ryanne-azul) !important;
	color: var(--ry-color-white, #fff) !important;
	cursor: pointer;
	white-space: nowrap;
	width: auto !important;
	transition: opacity 0.2s;
}

/* Mesmo botão da tela de login do admin (`wp-login.php`, tema `css/login.css`). */
body.woocommerce-account .woocommerce-form-login button[type="submit"]:hover,
body.woocommerce-account .woocommerce-form-register button[type="submit"]:hover,
body.woocommerce-account .ryanne-magic-link-form button[type="submit"]:hover,
body.woocommerce-account .ryanne-continuar:hover {
	opacity: 0.9;
}

body.woocommerce-account .woocommerce-form-login button[type="submit"]:focus-visible,
body.woocommerce-account .woocommerce-form-register button[type="submit"]:focus-visible,
body.woocommerce-account .ryanne-magic-link-form button[type="submit"]:focus-visible,
body.woocommerce-account .ryanne-continuar:focus-visible {
	outline: 2px solid var(--ryanne-verde);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	body.woocommerce-account .woocommerce-form-login button[type="submit"],
	body.woocommerce-account .woocommerce-form-register button[type="submit"],
	body.woocommerce-account .ryanne-magic-link-form button[type="submit"],
	body.woocommerce-account .ryanne-continuar {
		transition: none;
	}
}

/* "Acessar" e "Cadastrar" ocupam a largura toda da linha. */
body.woocommerce-account #customer_login .woocommerce-form-login button[type="submit"],
body.woocommerce-account #customer_login .woocommerce-form-register button[type="submit"] {
	width: 100% !important;
}

/* `display` acima é regra de AUTOR — sempre vence o `[hidden]` do
 * navegador. Sem isto, "Continuar" e "Acessar" apareciam juntos. */
body.woocommerce-account .ryanne-continuar[hidden] {
	display: none !important;
}

/* "Esqueceu sua senha?" — link discreto, nunca em itálico. */
body.woocommerce-account .woocommerce-LostPassword,
body.woocommerce-account .woocommerce-LostPassword a {
	font-size: 14px !important;
	font-style: normal !important;
	font-weight: 400 !important;
	color: var(--ryanne-cinza) !important;
	margin: 0;
}

body.woocommerce-account .ryanne-linha-acao {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 16px;
}

body.woocommerce-account .ryanne-linha-acao[hidden] {
	display: none !important;
}

/* Clearfix nativo do WooCommerce (`.form-row::before/::after`) vira item
 * flex e empurrava "Acessar"/"Cadastrar" 16px pra dentro. */
body.woocommerce-account #customer_login .ryanne-linha-acao::before,
body.woocommerce-account #customer_login .ryanne-linha-acao::after {
	content: none;
	display: none;
}

/* "Já comprou com a gente?" — `.magic-link-cta` do protótipo. */
body.woocommerce-account .ryanne-magic-link-cta {
	display: flex;
	gap: 14px;
	align-items: flex-start;
	border: 1px solid rgba(160, 201, 22, 0.45);
	background: rgba(160, 201, 22, 0.08);
	border-radius: 12px;
	padding: 32px;
	margin-top: 16px;
	font-size: 12.5px;
	line-height: 1.4;
	flex-wrap: wrap;
}

body.woocommerce-account .ryanne-magic-link-cta-icone {
	width: 32px;
	height: 32px;
	border-radius: 9px;
	background: rgba(160, 201, 22, 0.18);
	color: var(--ryanne-verde-escuro);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

body.woocommerce-account .ryanne-magic-link-cta-icone svg {
	width: 18px;
	height: 18px;
}

body.woocommerce-account .ryanne-magic-link-cta strong {
	display: block;
	font-size: 16px;
	font-weight: 700;
	color: var(--ryanne-azul);
	margin-bottom: 3px;
}

body.woocommerce-account .ryanne-magic-link-cta p {
	font-size: 12.5px;
	line-height: 1.4;
	color: var(--ryanne-cinza);
	margin: 0 0 8px;
}

body.woocommerce-account .ryanne-magic-link-cta-corpo {
	flex: 1;
	min-width: 0;
}

/* Frase descritiva ("Veja suas encomendas…"): mais espaço depois do título e 14px.
 * Seletor mais específico que o `.ryanne-magic-link-cta p` acima, que também
 * alcança a mensagem de retorno do painel. */
body.woocommerce-account .ryanne-magic-link-cta .ryanne-magic-link-cta-corpo p {
	margin-top: 8px;
	font-size: 14px;
}

/* Botão que abre o campo de e-mail — desenhado como o link do protótipo
 * (o tema pinta todo `button`; `!important` só no que ele sobrescreve). */
body.woocommerce-account .ryanne-magic-link-cta button.ryanne-magic-link-abrir {
	display: inline-block;
	padding: 13px 0 !important;
	margin: -13px 0;
	background: none !important;
	border: 0 !important;
	border-radius: 0;
	box-shadow: none;
	color: var(--ryanne-azul);
	font-family: inherit;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: 0;
	text-transform: none;
	text-decoration: underline;
	text-align: left;
	cursor: pointer;
}

/* Linha própria, na largura toda do cartão (o `gap` do cartão já separa). */
body.woocommerce-account .ryanne-magic-link-painel {
	flex: 0 0 100%;
	margin-top: 0;
}

body.woocommerce-account .ryanne-magic-link-form label {
	display: block;
	font-size: 14px;
	font-weight: 600;
	color: var(--ryanne-cinza);
	margin: 0 0 5px;
}

body.woocommerce-account .ryanne-magic-link-campos {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

/* Em telas estreitas o campo pega a linha inteira e "Enviar link" desce —
 * espremido ao lado do botão o e-mail ficava com ~140px e cortado. */
body.woocommerce-account .ryanne-magic-link-campos input[type="email"] {
	flex: 1 1 180px;
	min-width: 0;
	height: auto;
	padding: 10px 12px;
	border: 2px solid #ddd;
	border-radius: 10px;
	background: #fff;
	font-size: 13.5px;
	line-height: 1.2;
}

body.woocommerce-account .ryanne-magic-link-campos input[type="email"]:focus {
	border-color: var(--ryanne-verde);
	outline: none;
}

body.woocommerce-account .ryanne-magic-link-msg {
	font-size: 12.5px;
	line-height: 1.4;
	color: var(--ryanne-azul);
	margin: 10px 0 0;
}

/* ═══════════════════════════════════════════════════════════════════════
 * `[hidden]` sempre vence — qualquer classe acima que defina `display`
 * (regra de autor) venceria o `[hidden]{display:none}` do navegador; foi
 * o bug de "Mais opções" aberto (Story 07) e de "Continuar" junto com
 * "Acessar" (Story 10). Uma regra só, pra todo elemento alternado por JS
 * dentro da conta, em vez de uma por classe.
 * ═══════════════════════════════════════════════════════════════════════ */

.woocommerce-account .woocommerce-MyAccount-content [hidden],
.woocommerce-account #customer_login [hidden] {
	display: none !important;
}

/* "Pedir de novo" (formulário montado por `minhas-encomendas.js`). */
.woocommerce-account .ryanne-pedir-de-novo-form p {
	margin: 0 0 10px;
	font-size: 13px;
}

.woocommerce-account .ryanne-pedir-de-novo-form input.ryanne-pedir-de-novo-qtd {
	width: 80px;
	margin-left: 6px;
	padding: 6px 10px;
	border: 2px solid #ddd;
	border-radius: 8px;
}

/* ═══════════════════════════════════════════════════════════════════════
 * Pedidos — paginação da listagem e detalhe do pedido (`Conta\MeusPedidos`)
 * ═══════════════════════════════════════════════════════════════════════ */

.woocommerce-account .ryanne-paginacao,
.woocommerce-account .ryanne-linha-botoes {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.woocommerce-account .ryanne-paginacao {
	justify-content: space-between;
	margin-top: 16px;
}

/* "Feito em …" — o `<p>` em volta é do template nativo, sem classe. */
.woocommerce-account .ryanne-subtitulo-texto {
	display: block;
	font-size: 13.5px;
	color: var(--ryanne-cinza);
	margin-bottom: 8px;
}

.woocommerce-account .ryanne-andamento-texto {
	margin: 10px 0 12px;
}

.woocommerce-account .woocommerce-MyAccount-content h4.ryanne-andamento-sub {
	font-size: 13px;
	margin: 16px 0 4px;
}

.woocommerce-account .ryanne-md-cartao .ryanne-md-dica {
	margin: 12px 0 0;
}

.woocommerce-account .ryanne-entregador {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
}

/* Tabela de itens nativa do detalhe, dentro do cartão. */
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-order-details table.shop_table {
	border: 0;
	margin: 0;
	font-size: 13px;
}

.woocommerce-account .woocommerce-MyAccount-content .woocommerce-order-details table.shop_table th,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-order-details table.shop_table td {
	padding: 10px 0;
	border: 0;
	border-bottom: 1px solid var(--ryanne-borda);
	background: none;
}

.woocommerce-account .woocommerce-MyAccount-content .woocommerce-order-details table.shop_table tfoot tr:last-child th,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-order-details table.shop_table tfoot tr:last-child td {
	border-bottom: 0;
	font-weight: 700;
}

/* Atendimentos — miniatura do cartão de compra e rádio escondido (o cartão
 * inteiro é o alvo; o foco do teclado aparece no contorno do cartão). */
.woocommerce-account .ryanne-compra-opcao {
	position: relative;
}

.woocommerce-account .ryanne-compra-opcao input[type="radio"] {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.woocommerce-account .ryanne-compra-opcao:has(input:focus-visible) {
	outline: 2px solid var(--ryanne-azul);
	outline-offset: 2px;
}

.woocommerce-account .ryanne-compra-opcao-th {
	width: 38px;
	height: 38px;
	border-radius: 6px;
	background: var(--ryanne-fundo);
	color: #9aa7ab;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.woocommerce-account .ryanne-compra-opcao-th svg {
	width: 18px;
	height: 18px;
}

.woocommerce-account .ryanne-tabela .ryanne-md-dica {
	margin-top: 2px;
}

/* Favoritos — o visual mora inteiro em `favoritos.css` (carregado aqui
 * também, sempre), autossuficiente o bastante pra não precisar do escopo
 * `.woocommerce-account`. Havia uma cópia scoped aqui (do épico
 * `04-experiencia-da-conta`) escrita para a estrutura ANTIGA do cartão
 * (filhos diretos de `.ryanne-favoritos-item`); a revisão de UI/UX de
 * 29/09/2026 aninhou o corpo do cartão (`.ryanne-favoritos-item-corpo` /
 * `-acoes`), e essa cópia — por vencer especificidade contra
 * `favoritos.css` só aqui dentro de `/conta` — passou a desalinhar o
 * "Comprar"/"Remover" (margem extra num, `align-self: center` encolhendo
 * o outro). Removida — uma fonte de verdade só, sem depender de duas
 * folhas ficarem sincronizadas manualmente.
 */

/* "Cancelar" nativo (linha "Ações" do detalhe) é ação destrutiva
 * secundária — nunca com o peso do botão principal. */
.woocommerce-account .woocommerce-MyAccount-content .button.cancel {
	background: transparent;
	color: #a63b34;
	border: 1px solid var(--ryanne-borda);
}

.woocommerce-account .woocommerce-MyAccount-content .button.cancel:hover {
	background: #fbebea;
	color: #a63b34;
	border-color: #f0c9c5;
}