/* ─────────────────────────────────────────────────────────────────────────
   Painel da conta (cos-account*)
   Linguagem editorial — hairlines, type-led, sem caixas pesadas.
   ───────────────────────────────────────────────────────────────────────── */

/* Scope: anula o padding do wrapper `.woocommerce` apenas quando o painel
   da conta (logged-in) está montado dentro. Sem `:has()`, o login (logged-out)
   também perderia o padding e ficaria encostado ao header. */
.cos-woo.woocommerce-account .woocommerce:has(> .cos-account) { padding: 0; }

/* ── Anular floats default do WC (woocommerce-layout.css) ──
   O WC injecta `.woocommerce-MyAccount-navigation { float:left; width:30% }`
   e `.woocommerce-MyAccount-content { float:right; width:68% }`, bem como
   floats em `.col-1/.col-2/.form-row-*`. Forçamos block + 100% para o
   nosso grid mandar. */
.cos-account .woocommerce-MyAccount-navigation,
.cos-account .woocommerce-MyAccount-content {
	float: none !important;
	width: 100% !important;
}
.cos-account .col2-set,
.cos-account .woocommerce-Addresses { width: 100% !important; }
.cos-account .col2-set::before,
.cos-account .col2-set::after,
.cos-account .woocommerce-Addresses::before,
.cos-account .woocommerce-Addresses::after,
.cos-account form .form-row::before,
.cos-account form .form-row::after { content: none !important; }
.cos-account .col-1,
.cos-account .col-2,
.cos-account .u-column1,
.cos-account .u-column2,
.cos-account form .form-row-first,
.cos-account form .form-row-last,
.cos-account form .form-row-wide,
.cos-account form .form-row {
	float: none !important;
	width: auto !important;
}

/* ── Container ────────────────────────────────────────────── */
.cos-account {
	max-width: 1240px;
	margin: 0 auto;
	padding: 64px var(--gutter) 112px;
}

/* ── Cabeçalho ────────────────────────────────────────────── */
.cos-account__head {
	margin-bottom: 64px;
}
.cos-account__head-inner { max-width: 780px; }
.cos-account__eyebrow {
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--stone);
	margin: 0 0 18px;
}
.cos-account__title {
	/* Igual ao título do checkout (.cos-shop__title / .cos-checkout__title) */
	font-family: var(--sans);
	font-weight: 400;
	font-size: clamp(20px, 2vw, 28px);
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--ink);
	margin: 0;
}
.cos-account__title span { font-weight: 500; }

/* ── Layout — empilhado: menu (cards) no topo, conteúdo em baixo ── */
.cos-account__nav-wrap {
	margin-bottom: 56px;
}
.cos-account__main { min-width: 0; }

/* ── Menu em cards — hairline partilhado (mesma linguagem do painel) ── */
.cos-account-nav__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	border-top: 1px solid var(--line);
	border-left: 1px solid var(--line);
}
.cos-account-nav__item {
	margin: 0;
	border-right: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
	min-width: 0;
}
.cos-account-nav__link {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 18px;
	height: 100%;
	min-height: 124px;
	padding: 22px 20px;
	font-family: var(--sans);
	color: var(--stone);
	transition: background .25s ease, color .2s ease;
}
.cos-account-nav__link:hover { background: var(--paper-soft); color: var(--ink); }
.cos-account-nav__icon {
	font-size: 22px;
	color: var(--ink);
	line-height: 1;
	flex-shrink: 0;
	transition: color .2s ease;
}
.cos-account-nav__label {
	margin-top: auto;
	min-width: 0;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--ink);
	line-height: 1.3;
	white-space: normal;
	overflow-wrap: anywhere; /* quebra palavras longas (ex.: DESCARREGAMENTOS) em vez de transbordar */
	hyphens: auto;
}
.cos-account-nav__arrow {
	position: absolute;
	top: 22px;
	right: 20px;
	font-size: 16px;
	color: var(--stone);
	transition: transform .25s ease, color .2s ease;
}
.cos-account-nav__link:hover .cos-account-nav__arrow {
	color: var(--ink);
	transform: translate(4px, -4px);
}
/* Página atual — card destacado (cores invertidas) */
.cos-account-nav__item.is-active .cos-account-nav__link {
	background: var(--ink);
}
.cos-account-nav__item.is-active .cos-account-nav__link,
.cos-account-nav__item.is-active .cos-account-nav__icon,
.cos-account-nav__item.is-active .cos-account-nav__label,
.cos-account-nav__item.is-active .cos-account-nav__arrow {
	color: var(--paper);
}

/* ── Dashboard — bloco de boas-vindas ─────────────────────── */
.cos-account-dashboard__welcome {
	margin-bottom: 48px;
}
.cos-account-dashboard__eyebrow {
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--stone);
	margin: 0 0 14px;
}
.cos-account-dashboard__title {
	font-family: var(--sans);
	font-weight: 400;
	font-size: clamp(22px, 2.4vw, 30px);
	letter-spacing: 0;
	color: var(--ink);
	margin: 0 0 16px;
	line-height: 1.15;
}
.cos-account-dashboard__title span { font-weight: 500; }
.cos-account-dashboard__lede {
	font-size: 14px;
	line-height: 1.7;
	color: var(--ink-soft);
	max-width: 58ch;
	margin: 0;
}

/* ── Dashboard — quick-link grid (hairline-shared) ─────────── */
.cos-account-dashboard__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	border-top: 1px solid var(--line);
	border-left: 1px solid var(--line);
}
.cos-account-dashboard__card {
	margin: 0;
	border-right: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
	min-width: 0;
}
.cos-account-dashboard__card-link {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 24px;
	padding: 32px 28px;
	height: 100%;
	min-height: 200px;
	transition: background .25s ease;
}
.cos-account-dashboard__card-link:hover { background: var(--paper-soft); }
.cos-account-dashboard__card-icon {
	font-size: 24px;
	color: var(--ink);
	line-height: 1;
}
.cos-account-dashboard__card-body {
	display: flex;
	flex-direction: column;
	gap: 10px;
	min-width: 0;
	margin-top: auto;
}
.cos-account-dashboard__card-title {
	font-family: var(--sans);
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--ink);
}
.cos-account-dashboard__card-desc {
	font-family: var(--sans);
	font-size: 13px;
	line-height: 1.6;
	color: var(--ink-soft);
}
.cos-account-dashboard__card-arrow {
	position: absolute;
	top: 32px;
	right: 28px;
	font-size: 18px;
	color: var(--stone);
	transition: transform .25s ease, color .2s ease;
}
.cos-account-dashboard__card-link:hover .cos-account-dashboard__card-arrow {
	color: var(--ink);
	transform: translate(4px, -4px);
}

/* ── Conteúdo do main (tabelas, formulários) — afinações ──── */
.cos-account__main > p:first-child {
	font-size: 14px;
	line-height: 1.65;
	color: var(--ink-soft);
	margin-top: 0;
}
.cos-account__main h2,
.cos-account__main h3 {
	font-family: var(--sans);
	font-weight: 500;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--ink);
	font-size: 14px;
	margin: 0 0 14px;
}

/* ── Página "Moradas" (my-address.php) ─────────────────────── */
.cos-account__main .woocommerce-Addresses {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px;
	margin-top: 24px;
}
@media (max-width: 720px) {
	.cos-account__main .woocommerce-Addresses {
		grid-template-columns: 1fr;
	}
}
.cos-account__main .woocommerce-Address {
	float: none !important;
	width: auto !important;
	padding: 24px;
	border: 1px solid var(--line);
	background: var(--paper);
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.cos-account__main .woocommerce-Address-title {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
	border-bottom: 1px solid var(--line);
	padding-bottom: 16px;
	margin: 0;
}
.cos-account__main .woocommerce-Address-title h2,
.cos-account__main .woocommerce-Address-title h3 {
	font-family: var(--sans);
	font-weight: 500;
	font-size: 12px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--ink);
	margin: 0;
	line-height: 1.2;
}
.cos-account__main .woocommerce-Address-title .edit {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ink);
	border-bottom: 1px solid var(--ink);
	padding-bottom: 2px;
	transition: opacity .15s ease;
}
.cos-account__main .woocommerce-Address-title .edit:hover { opacity: .65; }
.cos-account__main .woocommerce-Address address {
	font-family: var(--mono);
	font-size: 12px;
	line-height: 1.7;
	color: var(--ink-soft);
	font-style: normal;
	letter-spacing: 0.02em;
}

/* ── Formulários do painel (edit-account, edit-address) ─────
   NOTA: o styling de inputs / labels / selects / botões / checkboxes /
   select2 / notices vem todo dos selectores `.cos-checkout__form` que já
   existem mais acima neste ficheiro — a classe `cos-checkout__form` está
   também aplicada ao `<section class="cos-account__main ...">` em
   `myaccount/my-account.php`, exactamente para reutilizar 100% desse
   tratamento. Aqui só ficam regras *layout* específicas do painel. */
.cos-account__main form { margin-top: 8px; }

/* Wrappers que viram grid 2-col automaticamente */
.cos-account__main .woocommerce-EditAccountForm,
.cos-account__main .woocommerce-address-fields__field-wrapper {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px 20px;
	margin-bottom: 24px;
}

/* O div .woocommerce-address-fields envolve o field-wrapper + <p>botão.
   Reset para layout normal de bloco (o grid mora no field-wrapper). */
.cos-account__main .woocommerce-address-fields { display: block; }

/* Reset margens das linhas — o grid trata do gap */
.cos-account__main .woocommerce-EditAccountForm > p,
.cos-account__main .woocommerce-address-fields__field-wrapper > .form-row,
.cos-account__main fieldset > p {
	margin: 0 !important;
}

/* Colunas: -first e -last ocupam 1 col, -wide / -full ocupam tudo */
.cos-account__main .form-row-first,
.cos-account__main .form-row-last { grid-column: span 1; }
.cos-account__main .form-row-wide,
.cos-account__main .form-row-full,
.cos-account__main .woocommerce-EditAccountForm > fieldset,
.cos-account__main .woocommerce-EditAccountForm > p:last-of-type {
	grid-column: 1 / -1;
}
.cos-account__main .woocommerce-EditAccountForm > .clear { display: none; }

/* Fieldset "Mudar palavra-passe" — também grid 2-col */
.cos-account__main fieldset {
	margin: 8px 0 0;
	padding: 0;
	border: 0; /* remove a caixa/outline default do browser à volta do fieldset */
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px 20px;
}
/* Legend ("Alterar senha") como rótulo de secção, a ocupar as 2 colunas */
.cos-account__main fieldset > legend {
	grid-column: 1 / -1;
	float: none;
	width: 100%;
	padding: 0;
	margin: 0;
	font-family: var(--mono);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--ink);
}

/* Parágrafo do botão de submit — bloco full-width abaixo do grid */
.cos-account__main form > p:last-of-type:not(.form-row),
.cos-account__main .woocommerce-address-fields > p:last-of-type {
	margin: 24px 0 0;
}

/* Heading interior — ex. "MORADA DE FACTURAÇÃO" no form-edit-address */
.cos-account__main form > h2,
.cos-account__main form > h3 {
	font-family: var(--sans);
	font-weight: 500;
	font-size: 14px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--ink);
	margin: 0 0 24px;
}

/* ── Tabelas — encomendas / downloads ──────────────────────── */
.cos-account__main .woocommerce-orders-table,
.cos-account__main .shop_table:not(.woocommerce-table--order-details) {
	width: 100%;
	border-collapse: collapse;
	margin: 8px 0 0;
	font-family: var(--sans);
	font-size: 13px;
}
/* Sobe a especificidade para vencer `.woocommerce table.shop_table` (0,2,1)
   do WooCommerce default, que impõe border-collapse:separate + border exterior. */
.cos-account__main .woocommerce-orders-table.shop_table,
.cos-account__main .shop_table.shop_table:not(.woocommerce-table--order-details) {
	border: 0;
	border-collapse: collapse;
}
.cos-account__main .woocommerce-orders-table thead th,
.cos-account__main .shop_table:not(.woocommerce-table--order-details) thead th {
	text-align: left;
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--stone);
	font-weight: 400;
	padding: 14px 12px;
	border-bottom: 1px solid var(--line-strong);
	background: transparent;
}
/* Inclui `th` (célula do nº da encomenda é um <th scope="row">), senão o
   border-top default do WooCommerce sobrevive só nessa célula → border duplo
   na metade esquerda. .shop_table duplicado sobe a especificidade p/ vencer WC. */
.cos-account__main .woocommerce-orders-table.shop_table tbody td,
.cos-account__main .woocommerce-orders-table.shop_table tbody th,
.cos-account__main .shop_table.shop_table:not(.woocommerce-table--order-details) tbody td,
.cos-account__main .shop_table.shop_table:not(.woocommerce-table--order-details) tbody th {
	padding: 18px 12px;
	border-top: 0; /* mata o border-top default do WooCommerce — evita separador duplo */
	border-bottom: 1px solid var(--line);
	color: var(--ink-soft);
	vertical-align: middle;
	background: transparent;
}
.cos-account__main .woocommerce-orders-table tbody tr:hover td {
	background: var(--paper-soft);
}
.cos-account__main .woocommerce-orders-table td.woocommerce-orders-table__cell-order-number a,
.cos-account__main .woocommerce-orders-table .woocommerce-orders-table__cell-order-number {
	font-family: var(--mono);
	font-size: 12px;
	letter-spacing: 0.04em;
	color: var(--ink);
}
.cos-account__main .woocommerce-orders-table .woocommerce-orders-table__cell-order-date,
.cos-account__main .woocommerce-orders-table .woocommerce-orders-table__cell-order-total {
	font-variant-numeric: tabular-nums;
}
.cos-account__main .woocommerce-orders-table .woocommerce-orders-table__cell-order-status {
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--stone);
}
.cos-account__main .woocommerce-orders-table .woocommerce-orders-table__cell-order-actions {
	text-align: right;
	white-space: nowrap;
}

/* Botão "Ver" / acções da tabela — link-style editorial, sem hover-fill */
.cos-account__main .woocommerce-orders-table__cell-order-actions :is(a, button).button,
.cos-account__main .woocommerce-orders-table__cell-order-actions :is(a, button).woocommerce-button,
.cos-account__main .woocommerce-orders-table__cell-order-actions a {
	display: inline-flex !important;
	align-items: center;
	gap: 6px;
	background: transparent !important;
	color: var(--ink) !important;
	border: 0 !important;
	border-bottom: 1px solid var(--ink) !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	padding: 0 0 2px !important;
	margin: 0 !important;
	min-height: 0 !important;
	font-family: var(--mono) !important;
	font-weight: 400 !important;
	font-size: 11px !important;
	letter-spacing: 0.16em !important;
	text-transform: uppercase !important;
	text-decoration: none !important;
	transition: color .15s ease, border-color .15s ease;
}
.cos-account__main .woocommerce-orders-table__cell-order-actions :is(a, button).button:hover,
.cos-account__main .woocommerce-orders-table__cell-order-actions :is(a, button).woocommerce-button:hover,
.cos-account__main .woocommerce-orders-table__cell-order-actions a:hover {
	background: transparent !important;
	color: var(--stone) !important;
	border-bottom-color: var(--stone) !important;
	opacity: 1 !important;
}

/* Mobile-stacked (WC injecta data-title em cada <td>) ───────── */
@media (max-width: 720px) {
	.cos-account__title { font-size: 28px; } /* igual ao .cos-shop__title em mobile */
	.cos-account__main .woocommerce-orders-table thead,
	.cos-account__main .shop_table:not(.woocommerce-table--order-details) thead { display: none; }
	.cos-account__main .woocommerce-orders-table tbody tr,
	.cos-account__main .shop_table:not(.woocommerce-table--order-details) tbody tr {
		display: block;
		padding: 20px 0;
		border-bottom: 1px solid var(--line);
	}
	.cos-account__main .woocommerce-orders-table tbody tr:hover td { background: transparent; }
	.cos-account__main .woocommerce-orders-table tbody td,
	.cos-account__main .shop_table:not(.woocommerce-table--order-details) tbody td {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 8px 0;
		border: 0;
		gap: 16px;
	}
	.cos-account__main .woocommerce-orders-table tbody td::before,
	.cos-account__main .shop_table:not(.woocommerce-table--order-details) tbody td::before {
		content: attr(data-title);
		font-family: var(--mono);
		font-size: 11px;
		letter-spacing: 0.16em;
		text-transform: uppercase;
		color: var(--stone);
		font-weight: 400;
	}
	.cos-account__main .woocommerce-orders-table .woocommerce-orders-table__cell-order-actions {
		justify-content: flex-end;
		padding-top: 12px;
	}
}

/* Cabeçalho "Não foram feitas encomendas." — info notice já tratada noutro bloco */

/* Paginação (Anterior / Seguinte) */
.cos-account__main .woocommerce-pagination {
	display: flex;
	justify-content: space-between;
	margin-top: 32px;
	gap: 12px;
}
.cos-account__main .woocommerce-pagination .button {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: transparent !important;
	color: var(--ink) !important;
	border: 0 !important;
	box-shadow: none !important;
	padding: 0 !important;
	min-height: 0 !important;
	font-family: var(--mono) !important;
	font-size: 11px !important;
	letter-spacing: 0.18em !important;
	text-transform: uppercase !important;
	border-bottom: 1px solid var(--ink) !important;
	padding-bottom: 2px !important;
}
.cos-account__main .woocommerce-pagination .button:hover { opacity: .65; }

/* ── Responsivo ────────────────────────────────────────────── */
@media (max-width: 960px) {
	.cos-account {
		padding: 48px var(--gutter) 80px;
	}
	.cos-account__head { margin-bottom: 40px; }
	.cos-account__nav-wrap { margin-bottom: 48px; }
	.cos-account-dashboard__welcome { margin-bottom: 48px; }
}

@media (max-width: 720px) {
	.cos-account {
		padding: 36px 0 72px;
	}
	.cos-account__head,
	.cos-account__nav-wrap,
	.cos-account__main {
		padding-left: var(--gutter);
		padding-right: var(--gutter);
	}
	/* Menu: 2 cards por linha em mobile */
	.cos-account-nav__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.cos-account-nav__link {
		min-height: 104px;
		padding: 18px 16px;
		gap: 14px;
	}
	.cos-account-nav__label {
		font-size: 11px;
		letter-spacing: 0.08em;
	}
	/* deixa espaço à seta para o label não lhe passar por baixo */
	.cos-account-nav__arrow { top: 18px; right: 16px; }
	.cos-account-dashboard__grid {
		grid-template-columns: 1fr;
	}
	.cos-account-dashboard__card-link {
		padding: 28px 24px;
		min-height: 0;
		gap: 32px;
	}
	.cos-account-dashboard__card-arrow {
		top: 28px;
		right: 24px;
	}
}

@media (max-width: 480px) {
	.cos-account { --gutter: 24px; }
	.cos-account__head { margin-bottom: 32px; }
}