/**
 * Eletricx — Minha Conta.
 *
 * Depende de shared.css: os tokens (`--elx-green`, `--elx-radius-card`…), o
 * `.elx-shell`, o `.elx-card`, os campos e os botões vêm de lá. Aqui só entra o
 * que é próprio da conta: login/cadastro, menu lateral, painel, pedidos,
 * endereços e o detalhe do pedido.
 *
 * Tudo escopado por `body.elx-account-page`, aplicada apenas nos endpoints de
 * Minha Conta.
 */

/* ---------------------------------------------------------------- shell -- */

.elx-account-page .elx-account {
	--elx-accnav-width: 280px;
}

/* O shortcode sai dentro de `<div class="woocommerce">`; o tema dá margem e
   largura a esse invólucro. */
.elx-account-page .elx-account > .woocommerce,
.elx-account-page .elx-account .woocommerce-notices-wrapper {
	margin: 0;
	padding: 0;
	width: auto;
	max-width: none;
}

/* Os botões do shared.css são de largura cheia (carrinho/checkout). Na conta a
   maioria é um botão de linha; os que ficam cheios pedem isso explicitamente. */
.elx-account-page .elx-account .elx-btn {
	display: inline-flex;
	width: auto;
	min-width: 0;
}

/* ----------------------------------------------------- entrar / cadastrar -- */

.elx-account-page .elx-login {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 24px;
	max-width: 1218px;
	margin: 0 auto;
	align-items: start;
}

.elx-account-page .elx-login--solo {
	grid-template-columns: minmax(0, 1fr);
	max-width: 560px;
}

.elx-account-page .elx-login .elx-fieldgrid {
	grid-template-columns: minmax(0, 1fr);
	row-gap: 18px;
}

/* No checkout, `.woocommerce-form-login` é o bloco "já sou cliente" e o
   shared.css o desenha como uma caixa própria. Aqui o formulário já está dentro
   de um card — as regras daquele bloco são desfeitas. */
.elx-account-page .elx-account .woocommerce-form-login,
.elx-account-page .elx-account form.woocommerce-form-login {
	max-width: none;
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

.elx-account-page .elx-account form.woocommerce-form-login .form-row {
	margin-bottom: 0;
}

.elx-account-page .elx-login__sub {
	margin: 0 0 20px;
	font-size: 15px;
	font-weight: 400;
	line-height: 1.5;
	color: var(--elx-muted);
}

.elx-account-page .elx-login__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px 16px;
	margin: 16px 0 22px;
}

.elx-account-page .elx-check {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	margin: 0;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.2;
	color: var(--elx-muted);
	cursor: pointer;
}

.elx-account-page .elx-check input[type="checkbox"] {
	width: 18px;
	height: 18px;
	min-height: 0;
	margin: 0;
	flex: 0 0 18px;
	accent-color: var(--elx-green);
	cursor: pointer;
}

.elx-account-page .elx-login__lost {
	font-size: 14px;
	font-weight: 600;
	color: var(--elx-green);
	text-decoration: none;
}
.elx-account-page .elx-login__lost:hover {
	text-decoration: underline;
}

.elx-account-page .elx-login__submit {
	margin: 22px 0 0;
}

.elx-account-page .elx-login__actions + .elx-login__submit {
	margin-top: 0;
}

.elx-account-page .elx-login__submit .elx-btn {
	display: flex;
	width: 100%;
}

.elx-account-page .elx-login__note {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 0;
	padding: 14px 16px;
	background: var(--elx-tint-soft);
	border: 1px solid var(--elx-tint);
	border-radius: var(--elx-radius-field);
	font-size: 14px;
	font-weight: 500;
	line-height: 1.45;
	color: var(--elx-muted);
}

.elx-account-page .elx-login__note i {
	color: var(--elx-green);
	font-size: 15px;
	line-height: 1.45;
}

/* Revisão 15/09 (itens 11 e 14): o cadastro pede nome, telefone, CPF/CNPJ e
   endereço. Dois grupos, com a mesma grade de campos do checkout. */
.elx-account-page .elx-reg {
	margin: 22px 0 0;
	padding: 0;
	border: 0;
	min-width: 0;
}

.elx-account-page .elx-reg__legend {
	display: block;
	width: 100%;
	margin: 0 0 14px;
	padding: 0 0 10px;
	border-bottom: 1px solid var(--elx-divider);
	font-family: var(--elx-display);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.2;
	color: var(--elx-ink);
}

.elx-account-page .elx-reg__hint {
	margin: -4px 0 14px;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.45;
	color: var(--elx-muted);
}

/* O script do Brazilian Market esconde CPF ou CNPJ conforme o tipo de pessoa
   com display inline; a grade não pode reservar a linha vazia. */
.elx-account-page .elx-reg .elx-field[style*="display: none"] {
	display: none !important;
}

.elx-account-page .elx-reg .woocommerce-form-register__submit {
	margin-top: 0;
}

.elx-account-page .elx-login__back {
	margin: 18px 0 0;
	font-size: 14px;
	text-align: center;
}

.elx-account-page .elx-login__back a {
	color: var(--elx-green);
	font-weight: 600;
	text-decoration: none;
}
.elx-account-page .elx-login__back a:hover {
	text-decoration: underline;
}

/* confirmação do e-mail de recuperação */

.elx-account-page .elx-login__confirm {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	padding: 44px 26px 40px;
	text-align: center;
}

.elx-account-page .elx-login__confirmicon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 84px;
	height: 84px;
	border-radius: 50%;
	background: var(--elx-tint);
	color: var(--elx-green);
	font-size: 34px;
}

.elx-account-page .elx-login__confirm .elx-login__sub {
	margin: 0;
	max-width: 420px;
}

.elx-account-page .elx-login__hint {
	margin: 0;
	font-size: 13px;
	line-height: 1.5;
	color: var(--elx-muted);
	opacity: 0.85;
	max-width: 420px;
}

.elx-account-page .elx-login__confirm .elx-login__submit {
	width: 100%;
	max-width: 300px;
	margin-top: 6px;
}

/* --------------------------------------------------------- benefícios -- */

.elx-account-page .elx-benefits {
	margin: 26px 0 0;
	padding: 20px 22px 22px;
	background: var(--elx-tint-soft);
	border: 1px solid var(--elx-tint);
	border-radius: var(--elx-radius-field);
}

.elx-account-page .elx-benefits__title {
	margin: 0 0 14px;
	font-family: var(--elx-display);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.2;
	color: var(--elx-green-ink);
}

.elx-account-page .elx-benefits__list {
	display: grid;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.elx-account-page .elx-benefits__list li {
	display: flex;
	align-items: center;
	gap: 11px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.35;
	color: var(--elx-muted);
}

.elx-account-page .elx-benefits__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	flex: 0 0 30px;
	border-radius: 50%;
	background: #fff;
	color: var(--elx-green);
	font-size: 13px;
}

.elx-account-page .elx-benefits__icon svg {
	width: 14px;
	height: 14px;
	fill: currentColor;
}

/* ----------------------------------------------------- mostrar a senha -- */
/* O botão é o nativo do WooCommerce (`woocommerce.js` embrulha o campo em
   `.password-input` e acrescenta `.show-password-input`). Nada é duplicado
   aqui — só a aparência muda: o ícone da fonte do WooCommerce dá lugar a um
   olho em máscara SVG, no tom do resto da página. */

.elx-account-page .elx-account .password-input {
	display: block;
	position: relative;
}

.elx-account-page .elx-account .password-input > input {
	padding-right: 52px;
}

/* O shared.css dá aparência de botão verde a qualquer `button` dentro de
   `.woocommerce-form-login`; o olho precisa vencer essa regra. */
.elx-account-page .elx-account .show-password-input {
	position: absolute;
	top: 50%;
	right: 7px;
	transform: translateY(-50%);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 10px;
	background: transparent;
	color: transparent;
	font-size: 0;
	line-height: 0;
	cursor: pointer;
	box-shadow: none;
}

.elx-account-page .elx-account .show-password-input:hover {
	background: var(--elx-tint-soft);
}

.elx-account-page .elx-account .show-password-input::after {
	content: "";
	display: block;
	width: 20px;
	height: 20px;
	background-color: var(--elx-muted);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5c-5 0-9 4.5-10 7 1 2.5 5 7 10 7s9-4.5 10-7c-1-2.5-5-7-10-7Zm0 11a4 4 0 1 1 0-8 4 4 0 0 1 0 8Z' fill='%23000'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5c-5 0-9 4.5-10 7 1 2.5 5 7 10 7s9-4.5 10-7c-1-2.5-5-7-10-7Zm0 11a4 4 0 1 1 0-8 4 4 0 0 1 0 8Z' fill='%23000'/%3E%3C/svg%3E") center / contain no-repeat;
	transition: background-color 0.15s ease;
}

.elx-account-page .elx-account .show-password-input.display-password::after {
	background-color: var(--elx-green);
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5c-5 0-9 4.5-10 7 1 2.5 5 7 10 7s9-4.5 10-7c-1-2.5-5-7-10-7Zm0 11a4 4 0 1 1 0-8 4 4 0 0 1 0 8Z' fill='%23000'/%3E%3Cpath d='M3 3l18 18' stroke='%23000' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5c-5 0-9 4.5-10 7 1 2.5 5 7 10 7s9-4.5 10-7c-1-2.5-5-7-10-7Zm0 11a4 4 0 1 1 0-8 4 4 0 0 1 0 8Z' fill='%23000'/%3E%3Cpath d='M3 3l18 18' stroke='%23000' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E");
}

.elx-account-page .elx-account .show-password-input:focus-visible {
	outline: 2px solid var(--elx-green);
	outline-offset: 1px;
}

/* ------------------------------------------------------- área logada -- */

.elx-account-page .elx-account__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 20px;
	max-width: 1218px;
	margin: 0 auto 28px;
}

.elx-account-page .elx-account__hi {
	margin: 0;
	font-family: var(--elx-display);
	font-size: 32px;
	font-weight: 700;
	line-height: 1.15;
	color: var(--elx-ink);
}

.elx-account-page .elx-account__hisub {
	margin: 9px 0 0;
	max-width: 620px;
	font-size: 15px;
	font-weight: 400;
	line-height: 1.5;
	color: var(--elx-muted);
}

.elx-account-page .elx-account__logout {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	flex: 0 0 auto;
	height: 44px;
	padding: 0 18px;
	border: 1.5px solid var(--elx-line);
	border-radius: var(--elx-radius-field);
	background: #fff;
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	color: var(--elx-muted);
	text-decoration: none;
	transition: border-color 0.15s ease, color 0.15s ease;
}

.elx-account-page .elx-account__logout:hover {
	border-color: var(--elx-green);
	color: var(--elx-green);
}

/* Sair pede dois toques: o primeiro troca o rótulo, o segundo segue o link. */
.elx-account-page .elx-account__logout.is-confirming,
.elx-account-page .elx-accnav__link.is-confirming {
	border-color: var(--elx-danger);
	background: rgba(192, 57, 43, 0.08);
	color: var(--elx-danger);
}

.elx-account-page .elx-accnav__link.is-confirming .elx-accnav__icon {
	background: var(--elx-danger);
	color: #fff;
}

.elx-account-page .elx-account__grid {
	display: grid;
	grid-template-columns: var(--elx-accnav-width) minmax(0, 1fr);
	gap: 24px;
	max-width: 1218px;
	margin: 0 auto;
	align-items: start;
}

/* O WooCommerce flutua o menu em 30% e o conteúdo em 68%; aqui é grade. */
.elx-account-page .elx-account .woocommerce-MyAccount-navigation,
.elx-account-page .elx-account .woocommerce-MyAccount-content {
	float: none;
	width: auto;
	max-width: none;
	margin: 0;
}

/* O OceanWP embrulha o menu num `.woocommerce-MyAccount-tabs` flutuante e
   acrescenta o cartão do perfil (avatar, nome e sair). O recurso do tema é
   mantido: ele só deixa de flutuar e passa a abrir a coluna lateral. */
.elx-account-page .elx-account .woocommerce-MyAccount-tabs {
	display: flex;
	flex-direction: column;
	gap: 14px;
	float: none;
	width: auto;
	max-width: none;
	min-width: 0;
	margin: 0;
	padding: 0;
	position: sticky;
	top: 24px;
}

.elx-account-page .elx-account .woocommerce-MyAccount-tabs .elx-accnav {
	position: static;
	top: auto;
}

.elx-account-page .elx-account .oceanwp-user-profile {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0;
	padding: 14px;
	background: #fff;
	border: 1px solid var(--elx-card-line);
	border-radius: var(--elx-radius-card);
	box-shadow: var(--elx-shadow);
	text-align: left;
}

.elx-account-page .elx-account .oceanwp-user-profile .image {
	width: 52px;
	flex: 0 0 52px;
	margin: 0;
	padding: 0;
}

.elx-account-page .elx-account .oceanwp-user-profile img {
	display: block;
	width: 52px;
	height: 52px;
	margin: 0;
	border: 0;
	border-radius: 50%;
	box-shadow: none;
}

.elx-account-page .elx-account .oceanwp-user-profile .user-info {
	min-width: 0;
}

.elx-account-page .elx-account .oceanwp-user-profile .name {
	margin: 0;
	font-family: var(--elx-display);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.25;
	color: var(--elx-ink);
	word-break: break-word;
}

.elx-account-page .elx-account .oceanwp-user-profile .logout {
	display: inline-block;
	margin-top: 3px;
	font-size: 13px;
	font-weight: 600;
	color: var(--elx-muted);
	text-decoration: none;
}

.elx-account-page .elx-account .oceanwp-user-profile .logout:hover {
	color: var(--elx-green);
}

.elx-account-page .elx-account__content {
	display: flex;
	flex-direction: column;
	gap: 20px;
	min-width: 0;
}

/* ------------------------------------------------------------- menu -- */

.elx-account-page .elx-accnav {
	position: sticky;
	top: 24px;
	padding: 12px;
	background: #fff;
	border: 1px solid var(--elx-card-line);
	border-radius: var(--elx-radius-card);
	box-shadow: var(--elx-shadow);
}

.elx-account-page .elx-accnav__toggle {
	display: none;
}

.elx-account-page .elx-accnav__list {
	display: flex;
	flex-direction: column;
	gap: 3px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.elx-account-page .elx-accnav__item {
	margin: 0;
	padding: 0;
	list-style: none;
	border: 0;
}

/* O tema desenha um ícone próprio antes de cada item; o menu já tem o seu. */
.elx-account-page .elx-account .elx-accnav__item::before,
.elx-account-page .elx-account .elx-accnav__link::before,
.elx-account-page .elx-account .elx-accnav__link::after {
	content: none;
	display: none;
}

.elx-account-page .elx-accnav__link {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 12px;
	border-radius: var(--elx-radius-field);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	color: var(--elx-ink);
	text-decoration: none;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.elx-account-page .elx-accnav__link:hover {
	background: var(--elx-tint-soft);
	color: var(--elx-green-deep);
}

.elx-account-page .elx-accnav__link.is-active {
	background: var(--elx-tint);
	color: var(--elx-green-ink);
}

.elx-account-page .elx-accnav__link:focus-visible {
	outline: 2px solid var(--elx-green);
	outline-offset: 1px;
}

.elx-account-page .elx-accnav__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	flex: 0 0 34px;
	border-radius: 50%;
	background: var(--elx-tint);
	color: var(--elx-green);
	font-size: 14px;
}

.elx-account-page .elx-accnav__link.is-active .elx-accnav__icon {
	background: var(--elx-green);
	color: #fff;
}

.elx-account-page .elx-accnav__text {
	flex: 1 1 auto;
	min-width: 0;
}

.elx-account-page .elx-accnav__arrow {
	width: 6px;
	height: 6px;
	flex: 0 0 6px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(-45deg);
	opacity: 0.3;
}

.elx-account-page .elx-accnav__item--logout {
	margin-top: 7px;
	padding-top: 10px;
	border-top: 1px solid var(--elx-card-line);
}

.elx-account-page .elx-accnav__item--logout .elx-accnav__icon {
	background: rgba(192, 57, 43, 0.1);
	color: var(--elx-danger);
}

.elx-account-page .elx-accnav__item--logout .elx-accnav__link:hover {
	background: rgba(192, 57, 43, 0.06);
	color: var(--elx-danger);
}

/* ----------------------------------------------------------- painel -- */

.elx-account-page .elx-dash {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px;
	align-items: start;
}

.elx-account-page .elx-dash > .elx-card,
.elx-account-page .elx-dash__order,
.elx-account-page .elx-dash__address {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.elx-account-page .elx-dash .elx-card__body,
.elx-account-page .elx-view__head .elx-card__body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	justify-content: space-between;
}

.elx-account-page .elx-dash__order .elx-card__head,
.elx-account-page .elx-view__head .elx-card__head {
	justify-content: space-between;
	flex-wrap: wrap;
}

.elx-account-page .elx-dash__facts {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px 18px;
	margin: 0 0 22px;
}

.elx-account-page .elx-dash__facts > div {
	min-width: 0;
}

.elx-account-page .elx-dash__facts dt {
	margin: 0 0 4px;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--elx-muted);
	opacity: 0.75;
}

.elx-account-page .elx-dash__facts dd {
	margin: 0;
	font-family: var(--elx-display);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.25;
	color: var(--elx-ink);
	word-break: break-word;
}

.elx-account-page .elx-dash__total,
.elx-account-page .elx-dash__total .amount,
.elx-account-page .elx-dash__total bdi {
	font-size: 18px;
	color: var(--elx-green);
}

/* Pedido com reembolso: o WooCommerce imprime o total antigo riscado e o novo. */
.elx-account-page .elx-dash__total del,
.elx-account-page .elx-orders__total del {
	display: inline;
	margin-right: 7px;
	font-size: 0.78em;
	font-weight: 600;
	color: var(--elx-muted);
	opacity: 0.6;
	text-decoration: line-through;
}

.elx-account-page .elx-dash__total ins,
.elx-account-page .elx-orders__total ins {
	background: none;
	text-decoration: none;
	color: inherit;
}

.elx-account-page .elx-dash__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0;
}

.elx-account-page .elx-dash__actions .elx-btn {
	height: 44px;
	padding: 0 18px;
	font-size: 13px;
}

.elx-account-page .elx-dash__addr,
.elx-account-page .elx-address__text {
	display: block;
	margin: 0 0 20px;
	font-style: normal;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.65;
	color: var(--elx-muted);
}

.elx-account-page .elx-dash__empty,
.elx-account-page .elx-address__empty {
	display: block;
	margin: 0 0 20px;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.5;
	color: var(--elx-muted);
	opacity: 0.85;
}

/* estado vazio (nenhum pedido ainda) */

.elx-account-page .elx-dash__blank {
	grid-column: 1 / -1;
}

.elx-account-page .elx-dash__blankbody {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	padding: 48px 26px 52px;
	text-align: center;
}

.elx-account-page .elx-dash__blankicon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 88px;
	height: 88px;
	border-radius: 50%;
	background: var(--elx-tint);
	color: var(--elx-green);
	font-size: 36px;
}

.elx-account-page .elx-dash__blanktext {
	margin: 0;
	max-width: 460px;
	font-size: 15px;
	font-weight: 400;
	line-height: 1.55;
	color: var(--elx-muted);
}

.elx-account-page .elx-dash__blankbody .elx-btn {
	display: flex;
	width: 100%;
	max-width: 280px;
	margin-top: 6px;
}

/* ------------------------------------------------------ selo de status -- */

.elx-account-page .elx-status {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 5px 13px;
	border-radius: 999px;
	background: #efefef;
	font-family: var(--elx-sans);
	font-size: 12px;
	font-weight: 700;
	line-height: 1.5;
	color: #4a4a4a;
	white-space: nowrap;
}

.elx-account-page .elx-status::before {
	content: "";
	width: 7px;
	height: 7px;
	flex: 0 0 7px;
	border-radius: 50%;
	background: currentColor;
}

.elx-account-page .elx-status--completed {
	background: var(--elx-tint);
	color: #2b6b4d;
}

.elx-account-page .elx-status--processing {
	background: rgba(52, 152, 219, 0.14);
	color: #1b5b85;
}

.elx-account-page .elx-status--pending,
.elx-account-page .elx-status--on-hold {
	background: rgba(230, 162, 60, 0.16);
	color: #8a5a12;
}

.elx-account-page .elx-status--cancelled,
.elx-account-page .elx-status--failed {
	background: rgba(192, 57, 43, 0.1);
	color: var(--elx-danger);
}

.elx-account-page .elx-status--refunded {
	background: rgba(123, 104, 198, 0.14);
	color: #574a8c;
}

/* ---------------------------------------------------------- pedidos -- */

.elx-account-page .elx-orders {
	background: #fff;
	border: 1px solid var(--elx-card-line);
	border-radius: var(--elx-radius-card);
	box-shadow: var(--elx-shadow);
	overflow: hidden;
}

.elx-account-page .elx-account table.elx-orders__table {
	display: table;
	width: 100%;
	margin: 0;
	border: 0;
	border-collapse: collapse;
	background: none;
}

.elx-account-page .elx-account table.elx-orders__table thead th {
	padding: 16px 20px;
	border: 0;
	background: var(--elx-tint-soft);
	font-family: var(--elx-sans);
	font-size: 11px;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--elx-green-deep);
	text-align: left;
	white-space: nowrap;
}

.elx-account-page .elx-account table.elx-orders__table tbody th,
.elx-account-page .elx-account table.elx-orders__table tbody td {
	padding: 17px 20px;
	border: 0;
	border-top: 1px solid var(--elx-card-line);
	background: none;
	font-family: var(--elx-sans);
	font-size: 14px;
	font-weight: 500;
	line-height: 1.4;
	color: var(--elx-muted);
	text-align: left;
	vertical-align: middle;
}

.elx-account-page .elx-account table.elx-orders__table tbody tr:first-child th,
.elx-account-page .elx-account table.elx-orders__table tbody tr:first-child td {
	border-top: 0;
}

.elx-account-page .elx-account table.elx-orders__table tbody tr:hover th,
.elx-account-page .elx-account table.elx-orders__table tbody tr:hover td {
	background: rgba(84, 160, 123, 0.04);
}

.elx-account-page .elx-orders__number {
	font-family: var(--elx-display);
	font-size: 16px;
	font-weight: 700;
	color: var(--elx-green);
	text-decoration: none;
	white-space: nowrap;
}
.elx-account-page .elx-orders__number:hover {
	text-decoration: underline;
}

.elx-account-page .elx-orders__total,
.elx-account-page .elx-orders__total .amount,
.elx-account-page .elx-orders__total bdi {
	display: block;
	font-family: var(--elx-display);
	font-size: 15px;
	font-weight: 700;
	color: var(--elx-ink);
	white-space: nowrap;
}

.elx-account-page .elx-orders__items {
	display: block;
	margin-top: 3px;
	font-size: 12px;
	font-weight: 500;
	color: var(--elx-muted);
	opacity: 0.8;
}

.elx-account-page .elx-account table.elx-orders__table .woocommerce-orders-table__cell-order-actions {
	text-align: right;
	white-space: nowrap;
}

.elx-account-page .elx-account table.elx-orders__table .woocommerce-orders-table__cell-order-actions .elx-btn {
	height: 38px;
	padding: 0 15px;
	margin: 2px 0 2px 6px;
	font-size: 12px;
	letter-spacing: 0.01em;
}

/* a coluna de rastreio do Melhor Envio */
.elx-account-page .elx-account table.elx-orders__table .woocommerce-orders-table__cell-tracking a {
	color: var(--elx-green);
	font-weight: 600;
	text-decoration: none;
}
.elx-account-page .elx-account table.elx-orders__table .woocommerce-orders-table__cell-tracking a:hover {
	text-decoration: underline;
}

.elx-account-page .elx-orders__pager {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 20px 0 0;
	border: 0;
	padding: 0;
}

.elx-account-page .elx-orders__pager .elx-btn {
	min-width: 170px;
}

/* ------------------------------------------------------- endereços -- */

.elx-account-page .elx-address__intro {
	margin: 0;
	font-size: 15px;
	font-weight: 400;
	line-height: 1.5;
	color: var(--elx-muted);
}

/* Quando a loja entrega só no endereço de cobrança, existe um card apenas — o
   `auto-fit` deixa ele ocupar a linha inteira em vez de ficar meia coluna. */
.elx-account-page .elx-address__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
	gap: 20px;
	align-items: start;
	margin: 0;
}

.elx-account-page .elx-address__card {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.elx-account-page .elx-address__card .elx-card__body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	justify-content: space-between;
	align-items: flex-start;
}

.elx-account-page .elx-address__card .elx-btn {
	height: 44px;
	padding: 0 18px;
	font-size: 13px;
}

/* Os campos que o plugin de campos brasileiros acrescenta aqui. */
.elx-account-page .elx-address__card .woocommerce-additional-fields,
.elx-account-page .elx-address__card .wc-block-components-address-card {
	margin: 0 0 16px;
	font-size: 14px;
	color: var(--elx-muted);
}

/* -------------------------------------------------- formulários da conta -- */

.elx-account-page .elx-accountform {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.elx-account-page .elx-account__content .elx-fieldgrid {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: 20px;
	row-gap: 18px;
}

/* Os campos vindos de `woocommerce_form_field()` (CEP, número, bairro,
   CPF/CNPJ…) chegam como `.form-row`, não como `.elx-field`: entram na grade
   pela classe de largura que o próprio WooCommerce já define. */
.elx-account-page .elx-account__content .elx-fieldgrid > p,
.elx-account-page .elx-account__content .elx-fieldgrid > .form-row {
	float: none;
	width: auto;
	min-width: 0;
	margin: 0;
	padding: 0;
}

.elx-account-page .elx-account__content .elx-fieldgrid > .form-row-first {
	grid-column: 1 / 2;
}
.elx-account-page .elx-account__content .elx-fieldgrid > .form-row-last {
	grid-column: 2 / 3;
}
.elx-account-page .elx-account__content .elx-fieldgrid > .form-row-wide,
.elx-account-page .elx-account__content .elx-fieldgrid > .elx-field--full {
	grid-column: 1 / -1;
}

/* Meia largura sem fixar a coluna: se a escolha entre pessoa física e jurídica
   esconder um campo, os outros se reacomodam sem deixar buraco. */
.elx-account-page .elx-account__content .elx-fieldgrid > .elx-field--half {
	grid-column: auto;
}

.elx-account-page .elx-field__hint {
	display: block;
	margin: 7px 0 0;
	font-size: 13px;
	font-weight: 400;
	line-height: 1.45;
	color: var(--elx-muted);
	opacity: 0.85;
}

.elx-account-page .elx-accountform__hint {
	margin: 0 0 18px;
}

.elx-account-page .elx-accountform__fieldset {
	margin: 0;
	padding: 0;
	border: 0;
}

.elx-account-page .elx-accountform__actions,
.elx-account-page .elx-addressform__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	margin: 0;
}

.elx-account-page .elx-addressform__actions {
	margin-top: 22px;
}

.elx-account-page .elx-accountform__actions .elx-btn,
.elx-account-page .elx-addressform__actions .elx-btn {
	min-width: 220px;
}

/* retorno visual do botão enquanto a página é reenviada */
.elx-account-page .elx-btn.is-busy {
	opacity: 0.7;
	pointer-events: none;
}

.elx-account-page .elx-btn.is-busy::after {
	content: "";
	width: 15px;
	height: 15px;
	border: 2px solid rgba(255, 255, 255, 0.45);
	border-top-color: #fff;
	border-radius: 50%;
	animation: elx-spin 0.7s linear infinite;
}

.elx-account-page .elx-btn--ghost.is-busy::after {
	border-color: var(--elx-tint);
	border-top-color: var(--elx-green);
}

@keyframes elx-spin {
	to {
		transform: rotate(360deg);
	}
}

@media (prefers-reduced-motion: reduce) {
	.elx-account-page .elx-btn.is-busy::after {
		animation-duration: 2s;
	}
}

/* As mensagens de erro do WooCommerce ficam junto do campo. */
.elx-account-page .elx-account__content .woocommerce-error,
.elx-account-page .elx-account__content .woocommerce-message,
.elx-account-page .elx-account__content .woocommerce-info {
	margin: 0;
}

.elx-account-page .elx-account .woocommerce-password-strength {
	display: block;
	margin: 8px 0 0;
	padding: 8px 12px;
	border-radius: 10px;
	font-size: 13px;
	font-weight: 600;
	text-align: left;
}
.elx-account-page .elx-account .woocommerce-password-strength.short,
.elx-account-page .elx-account .woocommerce-password-strength.bad {
	background: rgba(192, 57, 43, 0.08);
	color: var(--elx-danger);
}
.elx-account-page .elx-account .woocommerce-password-strength.good,
.elx-account-page .elx-account .woocommerce-password-strength.strong {
	background: var(--elx-tint-soft);
	color: #2b6b4d;
}

.elx-account-page .elx-account .woocommerce-password-hint {
	display: block;
	margin: 6px 0 0;
	font-size: 13px;
	line-height: 1.45;
	color: var(--elx-muted);
}

/* ------------------------------------------------- detalhe do pedido -- */

.elx-account-page .elx-timeline {
	display: flex;
	flex-direction: column;
	gap: 0;
	margin: 0;
	padding: 0 0 0 22px;
	list-style: none;
	border-left: 2px solid var(--elx-tint);
}

.elx-account-page .elx-timeline__item {
	position: relative;
	margin: 0;
	padding: 0 0 20px;
	list-style: none;
	border: 0;
	background: none;
}

.elx-account-page .elx-timeline__item:last-child {
	padding-bottom: 0;
}

.elx-account-page .elx-timeline__item::before {
	content: "";
	position: absolute;
	left: -29px;
	top: 4px;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: var(--elx-green);
	border: 3px solid #fff;
	box-shadow: 0 0 0 2px var(--elx-tint);
}

.elx-account-page .elx-timeline__when {
	margin: 0 0 4px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--elx-muted);
	opacity: 0.75;
}

.elx-account-page .elx-timeline__text,
.elx-account-page .elx-timeline__text p {
	margin: 0;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.55;
	color: var(--elx-ink);
}

/* O `woocommerce_view_order` imprime a tabela de itens, o rastreio dos Correios
   e os blocos das formas de pagamento: cada seção vira um card. */
.elx-account-page .elx-view__details {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.elx-account-page .elx-view__details > section,
.elx-account-page .elx-view__details > .woocommerce-order-details,
.elx-account-page .elx-view__details > .woocommerce-customer-details,
.elx-account-page .elx-view__details > .woocommerce-correios-tracking {
	margin: 0;
	padding: 26px 22px 24px;
	background: #fff;
	border: 1px solid var(--elx-card-line);
	border-radius: var(--elx-radius-card);
	box-shadow: var(--elx-shadow);
}

.elx-account-page .elx-view__details h2,
.elx-account-page .elx-view__details h3 {
	margin: 0 0 18px;
	font-family: var(--elx-display);
	font-size: 18px;
	font-weight: 700;
	line-height: 1.2;
	color: var(--elx-ink);
	text-transform: none;
	letter-spacing: normal;
}

.elx-account-page .elx-account .elx-view__details table.shop_table,
.elx-account-page .elx-account .elx-account__content table.woocommerce-table--order-details {
	width: 100%;
	margin: 0;
	border: 0;
	border-collapse: collapse;
	background: none;
}

.elx-account-page .elx-account .elx-view__details table.shop_table th,
.elx-account-page .elx-account .elx-view__details table.shop_table td {
	padding: 14px 0;
	border: 0;
	border-bottom: 1px solid var(--elx-card-line);
	background: none;
	font-family: var(--elx-sans);
	font-size: 14px;
	font-weight: 500;
	line-height: 1.45;
	color: var(--elx-muted);
	text-align: left;
	vertical-align: top;
	text-transform: none;
}

.elx-account-page .elx-account .elx-view__details table.shop_table thead th {
	padding-top: 0;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--elx-green-deep);
}

.elx-account-page .elx-account .elx-view__details table.shop_table tfoot th,
.elx-account-page .elx-account .elx-view__details table.shop_table tfoot td {
	font-family: var(--elx-display);
	font-weight: 700;
	color: var(--elx-ink);
}

.elx-account-page .elx-account .elx-view__details table.shop_table tfoot tr:last-child th,
.elx-account-page .elx-account .elx-view__details table.shop_table tfoot tr:last-child td {
	border-bottom: 0;
	font-size: 16px;
}

.elx-account-page .elx-account .elx-view__details table.shop_table td.woocommerce-table__product-total,
.elx-account-page .elx-account .elx-view__details table.shop_table tfoot td {
	text-align: right;
	white-space: nowrap;
}

.elx-account-page .elx-view__details .woocommerce-table__product-name a {
	color: var(--elx-ink);
	font-weight: 600;
	text-decoration: none;
}
.elx-account-page .elx-view__details .woocommerce-table__product-name a:hover {
	color: var(--elx-green);
}

.elx-account-page .elx-view__details address {
	font-style: normal;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.65;
	color: var(--elx-muted);
}

.elx-account-page .elx-view__details .woocommerce-columns {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 24px;
}

.elx-account-page .elx-view__details .woocommerce-column {
	float: none;
	width: auto;
	min-width: 0;
	padding: 0;
}

.elx-account-page .elx-view__details .order-again a,
.elx-account-page .elx-view__details p.order-again a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 44px;
	padding: 0 18px;
	border: 2px solid var(--elx-green);
	border-radius: var(--elx-radius-field);
	background: transparent;
	color: var(--elx-green);
	font-size: 13px;
	font-weight: 800;
	text-transform: uppercase;
	text-decoration: none;
}

/* -------------------------------------------- downloads e demais tabelas -- */

.elx-account-page .elx-account__content > .woocommerce-MyAccount-downloads,
.elx-account-page .elx-account__content > table.shop_table {
	width: 100%;
	margin: 0;
	border: 0;
	border-collapse: collapse;
	background: #fff;
}

.elx-account-page .elx-account .elx-account__content > table.shop_table {
	border: 1px solid var(--elx-card-line);
	border-radius: var(--elx-radius-card);
	box-shadow: var(--elx-shadow);
	overflow: hidden;
}

.elx-account-page .elx-account .elx-account__content > table.shop_table thead th {
	padding: 16px 20px;
	border: 0;
	background: var(--elx-tint-soft);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--elx-green-deep);
	text-align: left;
}

.elx-account-page .elx-account .elx-account__content > table.shop_table tbody th,
.elx-account-page .elx-account .elx-account__content > table.shop_table tbody td {
	padding: 16px 20px;
	border: 0;
	border-top: 1px solid var(--elx-card-line);
	font-size: 14px;
	font-weight: 500;
	color: var(--elx-muted);
	text-align: left;
}

.elx-account-page .elx-account__content .woocommerce-Message,
.elx-account-page .elx-account__content .woocommerce-info {
	border-radius: var(--elx-radius-field);
}

/* O tema caixa-alta os avisos da loja; na conta eles são frases. */
.elx-account-page .elx-account .woocommerce-info,
.elx-account-page .elx-account .woocommerce-message,
.elx-account-page .elx-account .woocommerce-error,
.elx-account-page .elx-account .woocommerce-Message {
	text-transform: none;
	letter-spacing: normal;
	font-size: 14px;
	line-height: 1.5;
}

.elx-account-page .elx-account__content .woocommerce-info a.button,
.elx-account-page .elx-account__content .woocommerce-message a.button {
	height: 40px;
	padding: 0 18px;
	border-radius: var(--elx-radius-field);
	font-size: 12px;
	text-transform: uppercase;
}

/* ------------------------------------------------------------ responsivo -- */

@media (max-width: 1100px) {
	.elx-account-page .elx-account__grid {
		--elx-accnav-width: 240px;
		gap: 18px;
	}
	.elx-account-page .elx-account__hi {
		font-size: 28px;
	}
}

@media (max-width: 1024px) {
	.elx-account-page .elx-account__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 16px;
	}

	.elx-account-page .elx-account .woocommerce-MyAccount-tabs {
		position: static;
		gap: 10px;
	}

	.elx-account-page .elx-accnav {
		position: static;
		padding: 0;
		border: 0;
		background: none;
		box-shadow: none;
	}

	.elx-account-page .elx-accnav__toggle {
		display: flex;
		align-items: center;
		gap: 12px;
		width: 100%;
		padding: 11px 14px;
		background: #fff;
		border: 1px solid var(--elx-card-line);
		border-radius: var(--elx-radius-field);
		box-shadow: var(--elx-shadow);
		font-family: var(--elx-sans);
		font-size: 14px;
		font-weight: 700;
		line-height: 1.2;
		color: var(--elx-ink);
		text-align: left;
		cursor: pointer;
	}

	.elx-account-page .elx-accnav__toggleicon {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 34px;
		height: 34px;
		flex: 0 0 34px;
		border-radius: 50%;
		background: var(--elx-green);
		color: #fff;
		font-size: 14px;
	}

	.elx-account-page .elx-accnav__togglelabel {
		flex: 1 1 auto;
		min-width: 0;
	}

	.elx-account-page .elx-accnav__caret {
		width: 8px;
		height: 8px;
		flex: 0 0 8px;
		margin-right: 4px;
		border-right: 2px solid var(--elx-muted);
		border-bottom: 2px solid var(--elx-muted);
		transform: rotate(45deg) translate(-2px, -2px);
		transition: transform 0.15s ease;
	}

	.elx-account-page .elx-accnav.is-open .elx-accnav__caret {
		transform: rotate(-135deg) translate(-2px, -2px);
	}

	.elx-account-page .elx-accnav__list {
		display: none;
		margin-top: 8px;
		padding: 10px;
		background: #fff;
		border: 1px solid var(--elx-card-line);
		border-radius: var(--elx-radius-card);
		box-shadow: var(--elx-shadow);
	}

	.elx-account-page .elx-accnav.is-open .elx-accnav__list {
		display: flex;
	}

	.elx-account-page .elx-dash,
	.elx-account-page .elx-address__grid,
	.elx-account-page .elx-view__details .woocommerce-columns {
		grid-template-columns: minmax(0, 1fr);
	}

	.elx-account-page .elx-login {
		grid-template-columns: minmax(0, 1fr);
		max-width: 620px;
	}
}

@media (max-width: 860px) {
	/* A tabela de pedidos vira um card por pedido. */
	.elx-account-page .elx-orders {
		background: none;
		border: 0;
		box-shadow: none;
		overflow: visible;
	}

	.elx-account-page .elx-account table.elx-orders__table,
	.elx-account-page .elx-account table.elx-orders__table tbody {
		display: block;
		width: 100%;
	}

	.elx-account-page .elx-account table.elx-orders__table thead {
		display: none;
	}

	.elx-account-page .elx-account table.elx-orders__table tbody tr.elx-orders__row {
		display: block;
		margin: 0 0 14px;
		padding: 18px 18px 20px;
		background: #fff;
		border: 1px solid var(--elx-card-line);
		border-radius: var(--elx-radius-card);
		box-shadow: var(--elx-shadow);
	}

	.elx-account-page .elx-account table.elx-orders__table tbody tr.elx-orders__row:last-child {
		margin-bottom: 0;
	}

	.elx-account-page .elx-account table.elx-orders__table tbody th,
	.elx-account-page .elx-account table.elx-orders__table tbody td {
		display: block;
		padding: 0 0 12px;
		border: 0;
		text-align: left !important;
	}

	.elx-account-page .elx-account table.elx-orders__table tbody tr:hover th,
	.elx-account-page .elx-account table.elx-orders__table tbody tr:hover td {
		background: none;
	}

	/* O WooCommerce imprime o rótulo da coluna com `float: left`; aqui ele é
	   uma legenda acima do valor. */
	.elx-account-page .elx-account table.elx-orders__table tbody th::before,
	.elx-account-page .elx-account table.elx-orders__table tbody td::before {
		content: attr(data-title);
		display: block;
		float: none;
		margin: 0 0 4px;
		font-size: 11px;
		font-weight: 700;
		letter-spacing: 0.05em;
		text-transform: uppercase;
		color: var(--elx-muted);
		opacity: 0.7;
	}

	.elx-account-page .elx-account table.elx-orders__table tbody .woocommerce-orders-table__cell-order-number::before,
	.elx-account-page .elx-account table.elx-orders__table tbody .woocommerce-orders-table__cell-order-actions::before {
		display: none;
	}

	.elx-account-page .elx-account table.elx-orders__table .woocommerce-orders-table__cell-order-number {
		display: flex !important;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
	}

	.elx-account-page .elx-account table.elx-orders__table .woocommerce-orders-table__cell-order-actions {
		display: flex !important;
		flex-wrap: wrap;
		gap: 8px;
		padding-bottom: 0;
	}

	.elx-account-page .elx-account table.elx-orders__table .woocommerce-orders-table__cell-order-actions .elx-btn {
		margin: 0;
		flex: 1 1 auto;
		min-width: 130px;
	}
}

@media (max-width: 782px) {
	.elx-account-page .elx-account__head {
		flex-direction: column;
		align-items: stretch;
		gap: 16px;
		margin-bottom: 20px;
	}

	.elx-account-page .elx-account__hi {
		font-size: 25px;
	}

	.elx-account-page .elx-account__logout {
		align-self: flex-start;
	}

	.elx-account-page .elx-account__content .elx-fieldgrid {
		grid-template-columns: minmax(0, 1fr);
	}

	.elx-account-page .elx-account__content .elx-fieldgrid > .form-row-first,
	.elx-account-page .elx-account__content .elx-fieldgrid > .form-row-last,
	.elx-account-page .elx-account__content .elx-fieldgrid > .form-row-wide,
	.elx-account-page .elx-account__content .elx-fieldgrid > .elx-field--half {
		grid-column: 1 / -1;
	}

	.elx-account-page .elx-dash__facts {
		gap: 14px;
	}

	.elx-account-page .elx-dash__actions .elx-btn,
	.elx-account-page .elx-accountform__actions .elx-btn,
	.elx-account-page .elx-addressform__actions .elx-btn,
	.elx-account-page .elx-orders__pager .elx-btn {
		display: flex;
		width: 100%;
		min-width: 0;
		height: 48px;
	}

	.elx-account-page .elx-benefits {
		padding: 18px;
	}

	.elx-account-page .elx-view__details > section,
	.elx-account-page .elx-view__details > .woocommerce-order-details,
	.elx-account-page .elx-view__details > .woocommerce-customer-details {
		padding: 20px 16px 22px;
	}

	.elx-account-page .elx-login__confirm {
		padding: 34px 18px 30px;
	}
}
