/**
 * MindElements — Minha Conta (WooCommerce).
 *
 * Escrita inteiramente sobre as vars --mac-*, para o mesmo arquivo servir aos
 * dois escopos: `.mind-account` (loja toda) e `{{WRAPPER}}` (widget do Elementor).
 * Os padrões abaixo são os mesmos declarados em Account_Tokens::all().
 */

.mind-account {
	--mac-accent: #8b3dff;
	--mac-ink: #1a1a22;
	--mac-muted: #6b6b78;
	--mac-surface: #ffffff;
	--mac-bg: #f6f5fb;
	--mac-border: #e6e6ee;
	--mac-radius: 14px;
	--mac-nav-width: 260px;
	--mac-max-width: 1120px;

	/* Densidade: multiplicador do espaçamento, trocado pela classe de densidade. */
	--mac-space: 1;
	--mac-gap: calc(22px * var(--mac-space));
}

.mind-account.is-compacto {
	--mac-space: 0.72;
}

.mind-account.is-confortavel {
	--mac-space: 1.3;
}

/* --------------------------------------------------------------------------
 * Reset do layout nativo do WooCommerce
 *
 * O woocommerce-layout.css põe `float: left; width: 30%` na navegação e
 * `float: right; width: 68%` no conteúdo. Dentro do nosso grid isso vira 30% da
 * COLUNA (260px → 78px), espremendo o menu. Os seletores abaixo carregam uma
 * classe a mais que os do Woo de propósito: precisam ganhar por especificidade,
 * não por ordem de carregamento — que depende de quem enfileirou primeiro.
 * ----------------------------------------------------------------------- */
.mind-account .mind-account__nav.woocommerce-MyAccount-navigation,
.mind-account .mind-account__content.woocommerce-MyAccount-content {
	float: none;
	width: auto;
	margin: 0;
}

/* Links do menu: o tema costuma sublinhar e colorir todo <a> do conteúdo. */
.mind-account .mind-account__nav a,
.mind-account .mind-account__nav a:hover,
.mind-account .mind-account__nav a:focus {
	text-decoration: none;
}

/* --------------------------------------------------------------------------
 * Layout
 * ----------------------------------------------------------------------- */
.mind-account {
	display: grid;
	gap: var(--mac-gap);
	max-width: var(--mac-max-width);
	margin: 0 auto;
	color: var(--mac-ink);
}

.mind-account.nav-lateral {
	grid-template-columns: var(--mac-nav-width) minmax(0, 1fr);
	align-items: start;
}

.mind-account.nav-topo {
	grid-template-columns: minmax(0, 1fr);
}

/* --------------------------------------------------------------------------
 * Navegação
 * ----------------------------------------------------------------------- */
.mind-account__nav {
	padding: calc(20px * var(--mac-space));
	background: var(--mac-surface);
	border: 1px solid var(--mac-border);
	border-radius: var(--mac-radius);
}

.mind-account__id {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	padding-bottom: calc(18px * var(--mac-space));
	margin-bottom: calc(14px * var(--mac-space));
	border-bottom: 1px solid var(--mac-border);
	text-align: center;
}

.mind-account__foto {
	position: relative;
	width: 96px;
	height: 96px;
}

.mind-account__avatar {
	width: 96px;
	height: 96px;
	border-radius: 50%;
	object-fit: cover;
	background: var(--mac-bg);
}

/* Ações da foto: dois botões redondos apoiados na borda do círculo. */
.mind-account__foto-acoes {
	position: absolute;
	inset: auto 0 -6px 0;
	display: flex;
	justify-content: center;
	gap: 6px;
	margin: 0;
}

.mind-account__foto-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	padding: 0;
	border: 1px solid var(--mac-border);
	border-radius: 50%;
	background: var(--mac-surface);
	color: var(--mac-accent);
	cursor: pointer;
	transition: border-color 0.15s ease, color 0.15s ease;
}

.mind-account__foto-btn:hover,
.mind-account__foto-btn:focus-within {
	border-color: var(--mac-accent);
}

.mind-account__foto-btn--remover {
	color: #d9455f;
}

.mind-account__foto-btn--remover:hover,
.mind-account__foto-btn--remover:focus {
	border-color: #d9455f;
}

.mind-account__foto-btn .dashicons {
	width: 16px;
	height: 16px;
	font-size: 16px;
}

/* O input some: quem recebe o clique é o rótulo redondo. */
.mind-account__foto-btn input[type="file"] {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}

.mind-account__id-text {
	min-width: 0;
}

.mind-account__name {
	display: block;
	font-size: 15px;
	line-height: 1.3;
}

.mind-account__email {
	display: block;
	color: var(--mac-muted);
	font-size: 12.5px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.mind-account__nav ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.mind-account__nav li {
	margin: 0;
}

.mind-account__nav a {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: calc(11px * var(--mac-space)) 14px;
	border-radius: calc(var(--mac-radius) - 4px);
	color: var(--mac-ink);
	font-size: 14.5px;
	text-decoration: none;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.mind-account__nav-texto {
	flex: 1 1 auto;
	min-width: 0;
}

/* Contador de pedidos/downloads */
.mind-account__contador {
	flex: 0 0 auto;
	min-width: 22px;
	padding: 1px 7px;
	border-radius: 999px;
	background: color-mix(in srgb, var(--mac-accent) 12%, transparent);
	color: var(--mac-accent);
	font-size: 12px;
	font-weight: 700;
	text-align: center;
}

.mind-account__nav a[aria-current="page"] .mind-account__contador,
.mind-account__nav .is-active > a .mind-account__contador {
	background: rgba(255, 255, 255, 0.24);
	color: #fff;
}

/* --------------------------------------------------------------------------
 * Ícones do menu
 *
 * SVG em mask-image (não background-image) porque assim o ícone herda
 * `currentColor` — muda junto com o item ativo e com o hover, sem um arquivo
 * por cor. Só aparecem quando o token de ícones está ligado (.tem-icones).
 * ----------------------------------------------------------------------- */
.mind-account__nav.tem-icones a::before {
	content: "";
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	background-color: currentColor;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-size: contain;
	opacity: 0.85;
}

.mind-account__nav.tem-icones a[data-icone="grid"]::before {
	-webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/></svg>');
	mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/></svg>');
}

.mind-account__nav.tem-icones a[data-icone="box"]::before {
	-webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/><polyline points="3.27 6.96 12 12.01 20.73 6.96"/><line x1="12" y1="22.08" x2="12" y2="12"/></svg>');
	mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/><polyline points="3.27 6.96 12 12.01 20.73 6.96"/><line x1="12" y1="22.08" x2="12" y2="12"/></svg>');
}

.mind-account__nav.tem-icones a[data-icone="download"]::before {
	-webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>');
	mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>');
}

.mind-account__nav.tem-icones a[data-icone="pin"]::before {
	-webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg>');
	mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg>');
}

.mind-account__nav.tem-icones a[data-icone="user"]::before {
	-webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>');
	mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>');
}

.mind-account__nav.tem-icones a[data-icone="card"]::before {
	-webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="1" y="4" width="22" height="16" rx="2"/><line x1="1" y1="10" x2="23" y2="10"/></svg>');
	mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="1" y="4" width="22" height="16" rx="2"/><line x1="1" y1="10" x2="23" y2="10"/></svg>');
}

.mind-account__nav.tem-icones a[data-icone="exit"]::before {
	-webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/><polyline points="16 17 21 12 16 7"/><line x1="21" y1="12" x2="9" y2="12"/></svg>');
	mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/><polyline points="16 17 21 12 16 7"/><line x1="21" y1="12" x2="9" y2="12"/></svg>');
}

/* Endpoint de plugin que a gente não conhece: um ponto, para não ficar torto. */
.mind-account__nav.tem-icones a[data-icone="dot"]::before {
	-webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="black"><circle cx="12" cy="12" r="4"/></svg>');
	mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="black"><circle cx="12" cy="12" r="4"/></svg>');
}

.mind-account__nav a:hover,
.mind-account__nav a:focus-visible {
	background: color-mix(in srgb, var(--mac-accent) 10%, transparent);
	color: var(--mac-accent);
}

.mind-account__nav .is-active > a,
.mind-account__nav a[aria-current="page"] {
	background: var(--mac-accent);
	color: #fff;
}

/* Sair separado do resto — só no menu vertical. No modo topo (e no mobile) o
   menu vira uma linha, e aí a borda superior jogava o item para outra linha. */
.mind-account.nav-lateral .mind-account__nav .woocommerce-MyAccount-navigation-link--customer-logout {
	margin-top: calc(10px * var(--mac-space));
	padding-top: calc(10px * var(--mac-space));
	border-top: 1px solid var(--mac-border);
}

/* --------------------------------------------------------------------------
 * Conteúdo
 * ----------------------------------------------------------------------- */
.mind-account__content {
	padding: calc(26px * var(--mac-space));
	background: var(--mac-surface);
	border: 1px solid var(--mac-border);
	border-radius: var(--mac-radius);
}

/* --------------------------------------------------------------------------
 * Navegação no topo e mobile
 * ----------------------------------------------------------------------- */
.mind-account.nav-topo .mind-account__nav ul {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

/* Com o menu no topo, a identificação fica em linha e a foto encolhe. */
.mind-account.nav-topo .mind-account__id,
.mind-account:not(.nav-topo) .mind-account__nav.mind-account__nav--linha .mind-account__id {
	flex-direction: row;
	align-items: center;
	text-align: left;
}

.mind-account.nav-topo .mind-account__foto,
.mind-account.nav-topo .mind-account__avatar {
	width: 52px;
	height: 52px;
}

.mind-account.nav-topo .mind-account__foto-acoes {
	display: none; /* sem espaço aqui; a troca de foto fica no modo lateral */
}

@media (max-width: 782px) {
	.mind-account.nav-lateral {
		grid-template-columns: minmax(0, 1fr);
	}
	.mind-account__id {
		flex-direction: row;
		align-items: center;
		padding-bottom: 12px;
		margin-bottom: 10px;
		text-align: left;
	}
	.mind-account__foto,
	.mind-account__avatar {
		width: 52px;
		height: 52px;
	}
	.mind-account__foto-acoes {
		display: none;
	}
	.mind-account__nav ul {
		display: flex;
		gap: 6px;
		overflow-x: auto;
		scrollbar-width: none;
	}
	.mind-account__nav ul::-webkit-scrollbar {
		display: none;
	}
	.mind-account__nav a {
		white-space: nowrap;
	}
	.mind-account__nav .woocommerce-MyAccount-navigation-link--customer-logout {
		margin-top: 0;
		padding-top: 0;
		border-top: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.mind-account__nav a {
		transition: none;
	}
}

/* --------------------------------------------------------------------------
 * Cartões de pedido
 * ----------------------------------------------------------------------- */
.mind-account {
	--mac-ok: #12a15f;
	--mac-warn: #b8710a;
	--mac-bad: #d9455f;
	--mac-neutral: #5b6472;
}

.mind-orders {
	display: grid;
	gap: calc(14px * var(--mac-space));
}

.mind-order {
	padding: calc(16px * var(--mac-space)) calc(18px * var(--mac-space));
	border: 1px solid var(--mac-border);
	border-radius: var(--mac-radius);
	background: var(--mac-surface);
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.mind-order:hover {
	border-color: color-mix(in srgb, var(--mac-accent) 40%, var(--mac-border));
	box-shadow: 0 6px 20px rgba(20, 20, 40, 0.06);
}

.mind-order__topo {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
}

.mind-account a.mind-order__num,
.mind-order__num {
	color: var(--mac-ink);
	text-decoration: none;
	font-size: 15.5px;
	font-weight: 700;
	text-decoration: none;
}

.mind-order__num:hover {
	color: var(--mac-accent);
}

.mind-order__data {
	color: var(--mac-muted);
	font-size: 13.5px;
}

/* --------------------------------------------------------------------------
 * Badge de status — quatro faixas cobrem qualquer status, inclusive os que
 * plugins registram (que caem em neutro).
 * ----------------------------------------------------------------------- */
.mind-badge {
	--badge-cor: var(--mac-neutral);
	padding: 3px 11px;
	border-radius: 999px;
	background: color-mix(in srgb, var(--badge-cor) 12%, transparent);
	color: var(--badge-cor);
	font-size: 12.5px;
	font-weight: 700;
	line-height: 1.6;
	white-space: nowrap;
}

.mind-badge--sucesso {
	--badge-cor: var(--mac-ok);
}
.mind-badge--atencao {
	--badge-cor: var(--mac-warn);
}
.mind-badge--erro {
	--badge-cor: var(--mac-bad);
}
.mind-badge--neutro {
	--badge-cor: var(--mac-neutral);
}

.mind-order__corpo {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-top: calc(14px * var(--mac-space));
	flex-wrap: wrap;
}

.mind-order__fotos {
	display: flex;
	align-items: center;
}

/* Miniaturas levemente sobrepostas, como uma pilha de itens. */
.mind-order__foto {
	width: 42px;
	height: 42px;
	margin-right: -10px;
	border: 2px solid var(--mac-surface);
	border-radius: 10px;
	object-fit: cover;
	background: var(--mac-bg);
}

.mind-order__mais {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	margin-left: 10px;
	border-radius: 10px;
	background: var(--mac-bg);
	color: var(--mac-muted);
	font-size: 12.5px;
	font-weight: 700;
}

.mind-order__resumo {
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin-right: auto;
}

.mind-order__itens {
	color: var(--mac-muted);
	font-size: 13px;
}

.mind-order__total {
	color: var(--mac-ink);
	font-size: 16px;
	font-weight: 700;
}

.mind-order__acoes {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}

.mind-order__extra {
	display: flex;
	gap: 8px;
	margin-top: calc(10px * var(--mac-space));
	padding-top: calc(10px * var(--mac-space));
	border-top: 1px dashed var(--mac-border);
	font-size: 13.5px;
}

.mind-order__extra-rotulo {
	color: var(--mac-muted);
}

/* --------------------------------------------------------------------------
 * Botões
 * ----------------------------------------------------------------------- */
.mind-account a.mind-btn,
.mind-account button.mind-btn,
.mind-account .mind-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 9px 18px;
	border-radius: 999px;
	border: 1px solid transparent;
	font-size: 13.5px;
	font-weight: 600;
	line-height: 1.4;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.mind-account a.mind-btn--principal,
.mind-account button.mind-btn--principal,
.mind-account .mind-btn--principal {
	background: var(--mac-accent);
	border-color: var(--mac-accent);
	color: #fff;
}

.mind-account a.mind-btn--principal:hover,
.mind-account a.mind-btn--principal:focus,
.mind-account .mind-btn--principal:hover,
.mind-account .mind-btn--principal:focus {
	background: color-mix(in srgb, var(--mac-accent) 86%, black);
	color: #fff;
}

.mind-account a.mind-btn--discreto,
.mind-account button.mind-btn--discreto,
.mind-account .mind-btn--discreto {
	background: transparent;
	border-color: var(--mac-border);
	color: var(--mac-ink);
}

.mind-account a.mind-btn--discreto:hover,
.mind-account a.mind-btn--discreto:focus,
.mind-account .mind-btn--discreto:hover,
.mind-account .mind-btn--discreto:focus {
	border-color: var(--mac-accent);
	color: var(--mac-accent);
}

.mind-orders__paginacao {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	margin-top: calc(18px * var(--mac-space));
}

.mind-orders__pagina {
	color: var(--mac-muted);
	font-size: 13.5px;
}

/* --------------------------------------------------------------------------
 * Estado vazio
 * ----------------------------------------------------------------------- */
.mind-vazio {
	padding: calc(40px * var(--mac-space)) 20px;
	text-align: center;
}

.mind-vazio__icone {
	width: 40px;
	height: 40px;
	margin-bottom: 12px;
	color: var(--mac-muted);
	font-size: 40px;
	opacity: 0.5;
}

.mind-vazio__titulo {
	margin: 0 0 6px;
	color: var(--mac-ink);
	font-size: 18px;
	font-weight: 700;
}

.mind-vazio__texto {
	margin: 0 0 18px;
	color: var(--mac-muted);
	font-size: 14px;
}

@media (max-width: 600px) {
	.mind-order__corpo {
		align-items: flex-start;
	}
	.mind-order__resumo {
		margin-right: 0;
		width: 100%;
	}
	.mind-order__acoes .mind-btn {
		flex: 1 1 auto;
	}
}

@media (prefers-reduced-motion: reduce) {
	.mind-order,
	.mind-account a.mind-btn,
.mind-account button.mind-btn,
.mind-account .mind-btn {
		transition: none;
	}
}

/* --------------------------------------------------------------------------
 * Painel
 * ----------------------------------------------------------------------- */
.mind-dash__ola {
	margin-bottom: calc(22px * var(--mac-space));
}

.mind-dash__titulo {
	margin: 0 0 4px;
	color: var(--mac-ink);
	font-size: 22px;
	font-weight: 700;
	letter-spacing: -0.01em;
}

.mind-dash__sub {
	margin: 0;
	color: var(--mac-muted);
	font-size: 14.5px;
}

.mind-dash__bloco + .mind-dash__bloco {
	margin-top: calc(24px * var(--mac-space));
}

.mind-dash__bloco-titulo {
	margin: 0 0 calc(12px * var(--mac-space));
	color: var(--mac-ink);
	font-size: 15px;
	font-weight: 700;
}

.mind-atalhos {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: calc(12px * var(--mac-space));
}

.mind-account a.mind-atalho {
	display: block;
	padding: calc(16px * var(--mac-space));
	border: 1px solid var(--mac-border);
	border-radius: var(--mac-radius);
	background: var(--mac-surface);
	text-decoration: none;
	transition: border-color 0.15s ease, transform 0.15s ease;
}

.mind-account a.mind-atalho:hover {
	border-color: var(--mac-accent);
	transform: translateY(-1px);
}

.mind-atalho__titulo {
	display: block;
	margin-bottom: 2px;
	color: var(--mac-ink);
	font-size: 14.5px;
	font-weight: 700;
}

.mind-atalho__texto {
	display: block;
	color: var(--mac-muted);
	font-size: 13px;
}

/* --------------------------------------------------------------------------
 * Detalhe do pedido
 * ----------------------------------------------------------------------- */
.mind-view__topo {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	padding-bottom: calc(16px * var(--mac-space));
	margin-bottom: calc(18px * var(--mac-space));
	border-bottom: 1px solid var(--mac-border);
}

.mind-view__num {
	margin: 0;
	font-size: 22px;
	font-weight: 700;
	color: var(--mac-ink);
}

.mind-view__data {
	color: var(--mac-muted);
	font-size: 13.5px;
}

.mind-view__topo .mind-btn {
	margin-left: auto;
}

.mind-view__titulo {
	margin: 0 0 calc(12px * var(--mac-space));
	font-size: 15px;
	font-weight: 700;
	color: var(--mac-ink);
}

.mind-view__historico {
	margin-bottom: calc(24px * var(--mac-space));
}

/* Linha do tempo a partir das notas ao cliente — não é uma régua fixa de
   etapas: são os avisos reais que a loja mandou. */
.mind-timeline {
	margin: 0;
	padding: 0 0 0 22px;
	list-style: none;
	border-left: 2px solid var(--mac-border);
}

.mind-timeline__item {
	position: relative;
	padding-bottom: calc(16px * var(--mac-space));
}

.mind-timeline__item:last-child {
	padding-bottom: 0;
}

.mind-timeline__ponto {
	position: absolute;
	top: 4px;
	left: -29px;
	width: 12px;
	height: 12px;
	border: 2px solid var(--mac-surface);
	border-radius: 50%;
	background: var(--mac-accent);
}

.mind-timeline__data {
	display: block;
	margin-bottom: 2px;
	color: var(--mac-muted);
	font-size: 12.5px;
}

.mind-timeline__texto p {
	margin: 0;
	color: var(--mac-ink);
	font-size: 14px;
	line-height: 1.6;
}

/* Tabelas de itens e totais que o Woo imprime dentro do detalhe */
.mind-view__detalhes table {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
}

.mind-view__detalhes table th,
.mind-view__detalhes table td {
	padding: 12px 10px;
	border-bottom: 1px solid var(--mac-border);
	text-align: left;
}

.mind-view__detalhes table tfoot td,
.mind-view__detalhes table tfoot th {
	font-weight: 700;
}

.mind-view__detalhes h2,
.mind-view__detalhes h3 {
	margin: calc(22px * var(--mac-space)) 0 calc(10px * var(--mac-space));
	font-size: 15px;
	font-weight: 700;
	color: var(--mac-ink);
}

.mind-view__detalhes address {
	font-style: normal;
	color: var(--mac-ink);
	font-size: 14px;
	line-height: 1.7;
}

/* --------------------------------------------------------------------------
 * Endereços
 * ----------------------------------------------------------------------- */
.mind-secao__desc {
	margin: 0 0 calc(16px * var(--mac-space));
	color: var(--mac-muted);
	font-size: 14px;
}

.mind-enderecos {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: calc(14px * var(--mac-space));
}

.mind-endereco {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
	padding: calc(18px * var(--mac-space));
	border: 1px solid var(--mac-border);
	border-radius: var(--mac-radius);
	background: var(--mac-surface);
}

.mind-endereco.is-vazio {
	border-style: dashed;
}

.mind-endereco__titulo {
	margin: 0;
	font-size: 15px;
	font-weight: 700;
	color: var(--mac-ink);
}

.mind-endereco__corpo {
	flex: 1 1 auto;
}

.mind-endereco address {
	font-style: normal;
	color: var(--mac-ink);
	font-size: 14px;
	line-height: 1.7;
}

.mind-endereco__vazio {
	margin: 0;
	color: var(--mac-muted);
	font-size: 14px;
}

/* --------------------------------------------------------------------------
 * Formulários
 * ----------------------------------------------------------------------- */
.mind-form__bloco + .mind-form__bloco {
	margin-top: calc(26px * var(--mac-space));
	padding-top: calc(22px * var(--mac-space));
	border-top: 1px solid var(--mac-border);
}

.mind-form__titulo {
	margin: 0 0 4px;
	font-size: 16px;
	font-weight: 700;
	color: var(--mac-ink);
}

.mind-form__desc {
	margin: 0 0 calc(14px * var(--mac-space));
	color: var(--mac-muted);
	font-size: 13.5px;
}

.mind-form__grade {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 16px;
	margin-top: calc(14px * var(--mac-space));
}

.mind-campo--largo,
.mind-form__grade .form-row-wide,
.mind-form__grade .woocommerce-address-fields__field-wrapper {
	grid-column: 1 / -1;
}

.mind-account .mind-form label,
.mind-account .woocommerce-address-fields label {
	display: block;
	margin-bottom: 5px;
	color: var(--mac-ink);
	font-size: 13.5px;
	font-weight: 600;
}

.mind-account .mind-form input[type="text"],
.mind-account .mind-form input[type="email"],
.mind-account .mind-form input[type="tel"],
.mind-account .mind-form input[type="password"],
.mind-account .mind-form select,
.mind-account .woocommerce-address-fields input[type="text"],
.mind-account .woocommerce-address-fields input[type="tel"],
.mind-account .woocommerce-address-fields select,
.mind-account .select2-container .select2-selection {
	box-sizing: border-box;
	width: 100%;
	height: 44px;
	padding: 0 13px;
	border: 1px solid var(--mac-border);
	border-radius: calc(var(--mac-radius) - 6px);
	background: var(--mac-surface);
	color: var(--mac-ink);
	font-size: 14.5px;
	line-height: 44px;
}

.mind-account .mind-form input:focus,
.mind-account .woocommerce-address-fields input:focus,
.mind-account .mind-form select:focus {
	border-color: var(--mac-accent);
	outline: 2px solid color-mix(in srgb, var(--mac-accent) 25%, transparent);
	outline-offset: 0;
}

.mind-account .mind-form .form-row,
.mind-account .woocommerce-address-fields .form-row {
	margin: 0 0 calc(14px * var(--mac-space));
	padding: 0;
}

.mind-campo__dica {
	display: block;
	margin-top: 4px;
	color: var(--mac-muted);
	font-size: 12.5px;
	font-weight: 400;
}

.mind-form__acoes {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: calc(20px * var(--mac-space));
	flex-wrap: wrap;
}

.mind-account .mind-check {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-weight: 500;
	font-size: 13.5px;
	color: var(--mac-muted);
	margin: 0;
}

.mind-account .mind-check input {
	width: auto;
	height: auto;
	margin: 0;
}

/* --------------------------------------------------------------------------
 * Entrar / criar conta
 * ----------------------------------------------------------------------- */
.mind-login {
	display: grid;
	gap: calc(24px * var(--mac-space));
}

.mind-login.tem-cadastro {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.mind-login__col--cadastro {
	padding-left: calc(24px * var(--mac-space));
	border-left: 1px solid var(--mac-border);
}

.mind-login__titulo {
	margin: 0 0 4px;
	font-size: 20px;
	font-weight: 700;
	color: var(--mac-ink);
}

.mind-login__sub {
	margin: 0 0 calc(18px * var(--mac-space));
	color: var(--mac-muted);
	font-size: 14px;
}

.mind-login__linha {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: calc(16px * var(--mac-space));
	flex-wrap: wrap;
}

.mind-account a.mind-login__esqueci {
	color: var(--mac-muted);
	font-size: 13.5px;
	text-decoration: none;
}

.mind-account a.mind-login__esqueci:hover {
	color: var(--mac-accent);
}

.mind-account .mind-btn--bloco {
	width: 100%;
}

@media (max-width: 782px) {
	.mind-login.tem-cadastro {
		grid-template-columns: minmax(0, 1fr);
	}
	.mind-login__col--cadastro {
		padding-left: 0;
		padding-top: calc(20px * var(--mac-space));
		border-left: 0;
		border-top: 1px solid var(--mac-border);
	}
	.mind-form__grade {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* --------------------------------------------------------------------------
 * Downloads e formas de pagamento
 * ----------------------------------------------------------------------- */
.mind-downloads,
.mind-cartoes {
	display: grid;
	gap: calc(12px * var(--mac-space));
}

.mind-download,
.mind-cartao {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: calc(14px * var(--mac-space)) calc(16px * var(--mac-space));
	border: 1px solid var(--mac-border);
	border-radius: var(--mac-radius);
	background: var(--mac-surface);
}

.mind-cartao.is-padrao {
	border-color: color-mix(in srgb, var(--mac-accent) 45%, var(--mac-border));
}

.mind-download__icone,
.mind-cartao__icone {
	flex: 0 0 auto;
	width: 22px;
	height: 22px;
	font-size: 22px;
	color: var(--mac-accent);
}

.mind-download__info,
.mind-cartao__info {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.mind-download__nome,
.mind-cartao__titulo,
.mind-account .mind-download__nome a {
	color: var(--mac-ink);
	font-size: 14.5px;
	font-weight: 600;
	text-decoration: none;
}

.mind-account .mind-download__nome a:hover {
	color: var(--mac-accent);
}

.mind-download__meta,
.mind-cartao__meta {
	color: var(--mac-muted);
	font-size: 12.5px;
}

.mind-cartao__info .mind-badge {
	align-self: flex-start;
	margin-top: 4px;
}

/* --------------------------------------------------------------------------
 * Tela de entrar: sem invólucro (o Woo pula o my-account.php quando o visitante
 * não está logado), então ela mesma vira o cartão.
 * ----------------------------------------------------------------------- */
.mind-account--login {
	display: block;
	max-width: 940px;
	padding: calc(30px * var(--mac-space));
	border: 1px solid var(--mac-border);
	border-radius: var(--mac-radius);
	background: var(--mac-surface);
}

.mind-account--login.mind-account {
	grid-template-columns: none;
}

/* O Woo dá borda, padding e radius próprios a form.login / form.register,
   o que criava um cartão dentro do cartão. */
.mind-account form.login,
.mind-account form.register,
.mind-account form.woocommerce-form-login,
.mind-account form.woocommerce-form-register {
	padding: 0;
	border: 0;
	border-radius: 0;
	margin: 0;
}

/* --------------------------------------------------------------------------
 * Itens e totais do pedido (templates de order/)
 * ----------------------------------------------------------------------- */
.mind-detalhe + .mind-detalhe {
	margin-top: calc(26px * var(--mac-space));
}

.mind-detalhe__titulo {
	margin: 0 0 calc(12px * var(--mac-space));
	color: var(--mac-ink);
	font-size: 15px;
	font-weight: 700;
}

.mind-itens {
	border: 1px solid var(--mac-border);
	border-radius: var(--mac-radius);
	overflow: hidden;
}

.mind-item {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: calc(13px * var(--mac-space)) calc(15px * var(--mac-space));
	border-bottom: 1px solid var(--mac-border);
	background: var(--mac-surface);
}

.mind-item:last-child {
	border-bottom: 0;
}

.mind-item__foto {
	flex: 0 0 auto;
	width: 48px;
	height: 48px;
}

.mind-item__foto img {
	width: 48px;
	height: 48px;
	border-radius: 10px;
	object-fit: cover;
	background: var(--mac-bg);
}

.mind-item__info {
	flex: 1 1 auto;
	min-width: 0;
}

.mind-account .mind-item__nome,
.mind-account .mind-item__nome a {
	color: var(--mac-ink);
	font-size: 14.5px;
	font-weight: 600;
	text-decoration: none;
}

.mind-account .mind-item__nome a:hover {
	color: var(--mac-accent);
}

.mind-item__meta {
	display: block;
	color: var(--mac-muted);
	font-size: 12.5px;
}

.mind-item__meta p {
	margin: 2px 0 0;
}

.mind-item__qtd {
	flex: 0 0 auto;
	color: var(--mac-muted);
	font-size: 13.5px;
}

.mind-item__preco {
	flex: 0 0 auto;
	min-width: 92px;
	color: var(--mac-ink);
	font-size: 14.5px;
	font-weight: 700;
	text-align: right;
}

.mind-item__nota {
	flex: 1 1 100%;
	margin-top: 8px;
	padding: 10px 12px;
	border-radius: 10px;
	background: var(--mac-bg);
	color: var(--mac-muted);
	font-size: 13px;
}

.mind-item__nota p {
	margin: 0;
}

/* Totais */
.mind-totais {
	margin-top: calc(14px * var(--mac-space));
	padding: calc(14px * var(--mac-space)) calc(15px * var(--mac-space));
	border: 1px solid var(--mac-border);
	border-radius: var(--mac-radius);
	background: var(--mac-surface);
}

.mind-total {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	padding: 6px 0;
	font-size: 14px;
}

.mind-total__rotulo {
	color: var(--mac-muted);
}

.mind-total__valor {
	color: var(--mac-ink);
	font-weight: 600;
	text-align: right;
}

.mind-total.is-final {
	margin-top: 6px;
	padding-top: 12px;
	border-top: 1px solid var(--mac-border);
	font-size: 16px;
}

.mind-total.is-final .mind-total__rotulo,
.mind-total.is-final .mind-total__valor {
	color: var(--mac-ink);
	font-weight: 700;
}

.mind-total--nota {
	align-items: flex-start;
	flex-direction: column;
	gap: 2px;
	margin-top: 8px;
	padding-top: 10px;
	border-top: 1px dashed var(--mac-border);
}

.mind-detalhe__acoes {
	display: flex;
	gap: 8px;
	margin-top: calc(14px * var(--mac-space));
	flex-wrap: wrap;
}

.mind-endereco__linha {
	display: block;
	margin-top: 6px;
	color: var(--mac-muted);
	font-size: 13.5px;
}

@media (max-width: 600px) {
	.mind-item {
		flex-wrap: wrap;
	}
	.mind-item__preco {
		min-width: 0;
		margin-left: auto;
	}
}

/* --------------------------------------------------------------------------
 * Avisos do WooCommerce
 *
 * O Woo desenha os próprios (barra colorida em cima, fundo cinza, ícone da
 * fonte WooCommerce). Dentro da conta eles viram cartão na linguagem do resto.
 * Os seletores levam .mind-account junto para não vazar para carrinho/checkout.
 * ----------------------------------------------------------------------- */
.mind-account .woocommerce-message,
.mind-account .woocommerce-info,
.mind-account .woocommerce-error,
.mind-account .woocommerce-notice {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 0 0 calc(18px * var(--mac-space));
	padding: calc(13px * var(--mac-space)) calc(15px * var(--mac-space));
	border: 1px solid var(--mac-border);
	border-left: 3px solid var(--mac-neutral);
	border-radius: calc(var(--mac-radius) - 4px);
	background: var(--mac-surface);
	color: var(--mac-ink);
	font-size: 14px;
	line-height: 1.55;
	list-style: none;
}

/* O ícone do Woo vem por ::before com a fonte dele — trocamos por um ponto
   na cor do aviso, que não depende de fonte externa. */
.mind-account .woocommerce-message::before,
.mind-account .woocommerce-info::before,
.mind-account .woocommerce-error::before,
.mind-account .woocommerce-notice::before {
	content: "";
	flex: 0 0 auto;
	width: 8px;
	height: 8px;
	margin: 7px 0 0;
	border-radius: 50%;
	background: var(--mac-neutral);
	position: static;
	font-family: inherit;
	animation: none;
}

.mind-account .woocommerce-message {
	border-left-color: var(--mac-ok);
}
.mind-account .woocommerce-message::before {
	background: var(--mac-ok);
}

.mind-account .woocommerce-info,
.mind-account .woocommerce-notice {
	border-left-color: var(--mac-accent);
}
.mind-account .woocommerce-info::before,
.mind-account .woocommerce-notice::before {
	background: var(--mac-accent);
}

.mind-account .woocommerce-error {
	border-left-color: var(--mac-bad);
}
.mind-account .woocommerce-error::before {
	background: var(--mac-bad);
}

/* Erro do Woo é <ul>: cada motivo vira um item, sem marcador. */
.mind-account ul.woocommerce-error {
	flex-wrap: wrap;
}
.mind-account .woocommerce-error li {
	margin: 0;
	list-style: none;
}

/* Botão que às vezes vem dentro do aviso (ex.: "ver carrinho") */
.mind-account .woocommerce-message .button,
.mind-account .woocommerce-info .button {
	margin-left: auto;
}

/* --------------------------------------------------------------------------
 * Adicionar forma de pagamento
 * ----------------------------------------------------------------------- */
.mind-gateways {
	margin: 0 0 calc(16px * var(--mac-space));
	padding: 0;
	list-style: none;
	display: grid;
	gap: calc(10px * var(--mac-space));
}

.mind-gateway {
	padding: calc(14px * var(--mac-space)) calc(16px * var(--mac-space));
	border: 1px solid var(--mac-border);
	border-radius: var(--mac-radius);
	background: var(--mac-surface);
}

.mind-gateway:has(input:checked) {
	border-color: var(--mac-accent);
}

.mind-account .mind-gateway label {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	font-size: 14.5px;
	font-weight: 600;
	cursor: pointer;
}

.mind-gateway input[type="radio"] {
	margin-right: 8px;
	accent-color: var(--mac-accent);
}

.mind-gateway__campos {
	margin-top: calc(12px * var(--mac-space));
	padding-top: calc(12px * var(--mac-space));
	border-top: 1px solid var(--mac-border);
	color: var(--mac-muted);
	font-size: 13.5px;
}

.mind-gateway img {
	max-height: 22px;
	width: auto;
}