/* Casa Metro · Rediseño de Mi cuenta
   Tokens tomados del diseño original del sitio:
   fondo #211915 · títulos Archivo Black · cuerpo Archivo Narrow · acento #e4bcd6 */

body.woocommerce-account,
body.woocommerce-checkout {
	--cm-bg: #211915;
	--cm-surface: #2a201b;
	--cm-surface-2: #332822;
	--cm-line: rgba(255, 255, 255, .14);
	--cm-line-strong: rgba(255, 255, 255, .28);
	--cm-text: rgba(255, 255, 255, .78);
	--cm-muted: rgba(255, 255, 255, .5);
	--cm-title: #fff;
	--cm-accent: #e4bcd6;
	--cm-ink: #211915;
	--cm-danger: #e58b8b;
	--cm-radius: 2px;

}

/* controles nativos (checkbox, scroll, desplegable del select) en oscuro */
body.woocommerce-account { color-scheme: dark; }

/* ---------- Encabezado de página ---------- */

.woocommerce-account .entry-header {
	margin-bottom: 2.25rem;
	padding-bottom: 1.5rem;
	border-bottom: 1px solid var(--cm-line);
}

.woocommerce-account .entry-header .entry-title {
	font-family: "Archivo Black", sans-serif;
	font-size: clamp(30px, 4vw, 46px);
	line-height: 1.05;
	color: var(--cm-title);
	margin: 0;
}

/* "Iniciar sesión" / "Restablecer contraseña": volanta sobre la tarjeta */
.woocommerce-account .woocommerce > h2,
.woocommerce-account .woocommerce > form > h2 {
	font-family: "Archivo Narrow", sans-serif;
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .2em;
	color: var(--cm-accent);
	margin: 0 0 1rem;
}

/* ---------- Grilla navegación + contenido ---------- */

.woocommerce-account .woocommerce:has(.woocommerce-MyAccount-navigation) {
	display: grid;
	grid-template-columns: 262px minmax(0, 1fr);
	gap: 40px;
	align-items: start;
}

/* el clearfix de WooCommerce cuenta como ítem de grilla y corre las columnas */
.woocommerce-account .woocommerce:has(.woocommerce-MyAccount-navigation)::before,
.woocommerce-account .woocommerce:has(.woocommerce-MyAccount-navigation)::after,
.woocommerce-account .woocommerce .woocommerce-MyAccount-content .woocommerce-Addresses::before,
.woocommerce-account .woocommerce .woocommerce-MyAccount-content .woocommerce-Addresses::after {
	display: none;
}

.woocommerce-account .woocommerce-MyAccount-navigation,
.woocommerce-account .woocommerce-MyAccount-content {
	width: auto;
	float: none;
	margin: 0;
}

/* ---------- Navegación lateral ---------- */

.woocommerce-account .woocommerce-MyAccount-navigation ul {
	list-style: none;
	margin: 0;
	padding: 0;
	background: var(--cm-surface);
	border: 1px solid var(--cm-line);
	border-radius: var(--cm-radius);
	overflow: hidden;
}

.woocommerce-account .woocommerce-MyAccount-navigation li {
	margin: 0;
	border-bottom: 1px solid var(--cm-line);
}

.woocommerce-account .woocommerce-MyAccount-navigation li:last-child {
	border-bottom: 0;
}

.woocommerce-account .woocommerce-MyAccount-navigation li a {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 15px 18px;
	border-left: 3px solid transparent;
	font-family: "Archivo Narrow", sans-serif;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--cm-text);
	transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}

.woocommerce-account .woocommerce-MyAccount-navigation li a::before {
	content: "";
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	background-color: currentColor;
	-webkit-mask: var(--cm-icon) center / contain no-repeat;
	mask: var(--cm-icon) center / contain no-repeat;
	opacity: .75;
}

.woocommerce-account .woocommerce-MyAccount-navigation li a:hover,
.woocommerce-account .woocommerce-MyAccount-navigation li a:focus-visible {
	background: var(--cm-surface-2);
	color: #fff;
	outline: none;
}

.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a {
	background: var(--cm-surface-2);
	border-left-color: var(--cm-accent);
	color: #fff;
}

.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a::before {
	background-color: var(--cm-accent);
	opacity: 1;
}

.woocommerce-account .woocommerce-MyAccount-navigation-link--customer-logout a {
	color: var(--cm-muted);
}

.woocommerce-MyAccount-navigation-link--dashboard {
	--cm-icon: 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'><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>");
}

.woocommerce-MyAccount-navigation-link--orders {
	--cm-icon: 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-linejoin='round'><path d='M3 8a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v1a2 2 0 0 0 0 4v2a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-2a2 2 0 0 0 0-4z'/><path d='M10 6v12'/></svg>");
}

.woocommerce-MyAccount-navigation-link--edit-address {
	--cm-icon: 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-linejoin='round'><path d='M12 21s7-5.7 7-11a7 7 0 1 0-14 0c0 5.3 7 11 7 11z'/><circle cx='12' cy='10' r='2.5'/></svg>");
}

.woocommerce-MyAccount-navigation-link--edit-account {
	--cm-icon: 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'><circle cx='12' cy='8' r='4'/><path d='M4 21c0-4.4 3.6-7 8-7s8 2.6 8 7'/></svg>");
}

.woocommerce-MyAccount-navigation-link--customer-logout {
	--cm-icon: 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'/><path d='M16 17l5-5-5-5'/><path d='M21 12H9'/></svg>");
}

/* ---------- Panel de contenido ---------- */

.woocommerce-account .woocommerce-MyAccount-content {
	background: var(--cm-surface);
	border: 1px solid var(--cm-line);
	border-radius: var(--cm-radius);
	padding: 32px;
	color: var(--cm-text);
}

.woocommerce-account .woocommerce-MyAccount-content > :first-child { margin-top: 0; }
.woocommerce-account .woocommerce-MyAccount-content > :last-child { margin-bottom: 0; }

.woocommerce-account .woocommerce-MyAccount-content p { line-height: 1.65; }

.woocommerce-account .woocommerce-MyAccount-content strong { color: #fff; }

.woocommerce-account .woocommerce-MyAccount-content h2,
.woocommerce-account .woocommerce-MyAccount-content h3 {
	margin: 2rem 0 1.1rem;
	font-family: "Archivo Black", sans-serif;
	font-size: 20px;
	line-height: 1.25;
	color: #fff;
}

.woocommerce-account .woocommerce-MyAccount-content a:not(.button) {
	color: var(--cm-accent);
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
}

.woocommerce-account .woocommerce-MyAccount-content a:not(.button):hover { color: #fff; }

/* ---------- Formularios ---------- */

.woocommerce-account .woocommerce form .form-row,
.woocommerce-account .woocommerce-EditAccountForm .form-row {
	margin: 0 0 1.35rem;
	padding: 0;
}

.woocommerce-account .woocommerce label,
.woocommerce-account .woocommerce-EditAccountForm label {
	display: block;
	margin-bottom: .55rem;
	font-family: "Archivo Narrow", sans-serif;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--cm-muted);
}

.woocommerce-account .woocommerce .required { color: var(--cm-accent); border: 0; }

.woocommerce-account .woocommerce input[type="text"],
.woocommerce-account .woocommerce input[type="email"],
.woocommerce-account .woocommerce input[type="tel"],
.woocommerce-account .woocommerce input[type="number"],
.woocommerce-account .woocommerce input[type="password"],
.woocommerce-account .woocommerce select,
.woocommerce-account .woocommerce textarea,
.woocommerce-account .select2-container .select2-selection--single {
	width: 100%;
	height: auto;
	box-sizing: border-box;
	padding: 13px 16px;
	background: transparent;
	border: 1px solid var(--cm-line-strong);
	border-radius: var(--cm-radius);
	color: #fff;
	font-family: "Archivo Narrow", sans-serif;
	font-size: 17px;
	line-height: 1.4;
	transition: border-color .18s ease, background-color .18s ease, box-shadow .18s ease;
}

.woocommerce-account .woocommerce input::placeholder,
.woocommerce-account .woocommerce textarea::placeholder {
	color: rgba(255, 255, 255, .35);
}

.woocommerce-account .woocommerce input:focus,
.woocommerce-account .woocommerce select:focus,
.woocommerce-account .woocommerce textarea:focus {
	outline: none;
	border-color: var(--cm-accent);
	background: rgba(255, 255, 255, .04);
	box-shadow: 0 0 0 3px rgba(228, 188, 214, .18);
}

/* autocompletado de Chrome: evita el bloque blanco */
.woocommerce-account .woocommerce input:-webkit-autofill,
.woocommerce-account .woocommerce input:-webkit-autofill:focus {
	-webkit-text-fill-color: #fff;
	-webkit-box-shadow: 0 0 0 1000px var(--cm-surface-2) inset;
	caret-color: #fff;
}

.woocommerce-account .woocommerce select option { background: var(--cm-surface-2); color: #fff; }

/* select2 (país / provincia) */
.woocommerce-account .select2-container .select2-selection--single {
	display: flex;
	align-items: center;
}
.woocommerce-account .select2-container .select2-selection__rendered {
	padding: 0;
	color: #fff;
	line-height: inherit;
}
.woocommerce-account .select2-container .select2-selection__arrow { top: 50%; transform: translateY(-50%); right: 12px; }
.woocommerce-account .select2-container .select2-selection__arrow b { border-top-color: var(--cm-accent); }
body.woocommerce-account .select2-dropdown {
	background: var(--cm-surface-2);
	border-color: var(--cm-line-strong);
	color: #fff;
}
body.woocommerce-account .select2-search__field {
	background: transparent;
	border: 1px solid var(--cm-line-strong);
	color: #fff;
}
body.woocommerce-account .select2-results__option--highlighted[aria-selected] {
	background: var(--cm-accent);
	color: var(--cm-ink);
}

/* checkbox "Recordarme" */
.woocommerce-account .woocommerce form .woocommerce-form__label-for-checkbox {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 1.5rem;
	font-size: 15px;
	font-weight: 400;
	letter-spacing: normal;
	text-transform: none;
	color: var(--cm-text);
	cursor: pointer;
}

.woocommerce-account .woocommerce form .woocommerce-form__input-checkbox {
	width: 17px;
	height: 17px;
	margin: 0;
	accent-color: var(--cm-accent);
	cursor: pointer;
}

/* ojo de "mostrar contraseña" */
.woocommerce-account .woocommerce .password-input { display: block; position: relative; }
.woocommerce-account .woocommerce .password-input .show-password-input {
	position: absolute;
	top: 50%;
	right: 14px;
	transform: translateY(-50%);
	color: var(--cm-muted);
	background: none;
	border: 0;
	padding: 0;
}
.woocommerce-account .woocommerce .password-input .show-password-input:hover { color: var(--cm-accent); }

.woocommerce-account .woocommerce form .form-row .description,
.woocommerce-account .woocommerce span.description,
.woocommerce-account .woocommerce em {
	display: block;
	margin-top: .5rem;
	font-size: 14px;
	font-style: normal;
	color: var(--cm-muted);
}

.woocommerce-account .woocommerce fieldset {
	margin: 2rem 0 1.5rem;
	padding: 1.75rem 0 0;
	border: 0;
	border-top: 1px solid var(--cm-line);
}

.woocommerce-account .woocommerce fieldset legend {
	padding: 0;
	font-family: "Archivo Narrow", sans-serif;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--cm-accent);
}

/* dos columnas en "Detalles de la cuenta" */
@media (min-width: 720px) {
	.woocommerce-account .woocommerce-EditAccountForm .form-row-first,
	.woocommerce-account .woocommerce-EditAccountForm .form-row-last {
		width: calc(50% - 10px);
		float: none;
		display: inline-block;
		vertical-align: top;
	}
	.woocommerce-account .woocommerce-EditAccountForm .form-row-first { margin-right: 16px; }
}

/* ---------- Botones ---------- */

/* el customizer del tema pinta .button con `background-color: ... !important`,
   así que acá hace falta !important para poder invertirlo en hover */
.woocommerce-account .woocommerce .button,
.woocommerce-account .woocommerce button.button,
.woocommerce-account .woocommerce input.button,
.woocommerce-account .woocommerce a.button,
.woocommerce-account .woocommerce .woocommerce-Button {
	display: inline-block;
	padding: 14px 30px !important;
	background: var(--cm-accent) !important;
	border: 1px solid var(--cm-accent) !important;
	border-radius: var(--cm-radius);
	color: var(--cm-ink) !important;
	font-family: "Archivo Narrow", sans-serif;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 2px;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}

.woocommerce-account .woocommerce .button:hover,
.woocommerce-account .woocommerce button.button:hover,
.woocommerce-account .woocommerce input.button:hover,
.woocommerce-account .woocommerce a.button:hover {
	background: transparent !important;
	color: var(--cm-accent) !important;
	border-color: var(--cm-accent) !important;
}

/* botones secundarios: tabla de pedidos, editar dirección */
.woocommerce-account .woocommerce .woocommerce-orders-table .button,
.woocommerce-account .woocommerce .woocommerce-Address-title .edit {
	padding: 9px 20px !important;
	font-size: 13px;
	background: transparent !important;
	border-color: var(--cm-line-strong) !important;
	color: var(--cm-accent) !important;
}

.woocommerce-account .woocommerce .woocommerce-Address-title .edit {
	border-radius: var(--cm-radius);
	border-width: 1px;
	border-style: solid;
	text-decoration: none;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	font-weight: 700;
	font-size: 12px;
	white-space: nowrap;
}

.woocommerce-account .woocommerce .woocommerce-orders-table .button:hover,
.woocommerce-account .woocommerce .woocommerce-Address-title .edit:hover {
	background: var(--cm-accent) !important;
	border-color: var(--cm-accent) !important;
	color: var(--cm-ink) !important;
}

/* ---------- Tabla de pedidos ---------- */

.woocommerce-account .woocommerce table.woocommerce-orders-table {
	width: 100%;
	margin: 0;
	border: 1px solid var(--cm-line);
	border-radius: var(--cm-radius);
	border-collapse: collapse;
	background: transparent;
}

.woocommerce-account .woocommerce table.woocommerce-orders-table thead th {
	padding: 15px 16px;
	background: var(--cm-surface-2);
	border: 0;
	border-bottom: 1px solid var(--cm-line);
	font-family: "Archivo Narrow", sans-serif;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	text-align: left;
	color: var(--cm-accent);
}

/* la celda del nº de pedido es un <th> dentro del tbody: se comporta como td */
.woocommerce-account .woocommerce table.woocommerce-orders-table td,
.woocommerce-account .woocommerce table.woocommerce-orders-table tbody th {
	padding: 16px;
	border: 0;
	border-bottom: 1px solid var(--cm-line);
	font-size: 16px;
	font-weight: 400;
	background: transparent;
	color: var(--cm-text);
	text-align: left;
	vertical-align: middle;
}

.woocommerce-account .woocommerce table.woocommerce-orders-table tbody tr:last-child td,
.woocommerce-account .woocommerce table.woocommerce-orders-table tbody tr:last-child th { border-bottom: 0; }
.woocommerce-account .woocommerce table.woocommerce-orders-table tbody tr:hover td,
.woocommerce-account .woocommerce table.woocommerce-orders-table tbody tr:hover th { background: rgba(255, 255, 255, .03); }

.woocommerce-account .woocommerce .woocommerce-MyAccount-content .woocommerce-orders-table__cell-order-number a {
	color: #fff;
	font-weight: 700;
	text-decoration: none;
}
.woocommerce-account .woocommerce .woocommerce-MyAccount-content .woocommerce-orders-table__cell-order-number a:hover { color: var(--cm-accent); }

.woocommerce-account .woocommerce table.woocommerce-orders-table .woocommerce-orders-table__cell-order-status { color: #fff; }
.woocommerce-account .woocommerce table.woocommerce-orders-table .woocommerce-orders-table__cell-order-total { white-space: nowrap; }
.woocommerce-account .woocommerce table.woocommerce-orders-table .woocommerce-orders-table__cell-order-actions { text-align: right; }

.woocommerce-account .woocommerce-pagination { margin-top: 1.75rem; }

/* ---------- Direcciones ---------- */

.woocommerce-account .woocommerce .woocommerce-MyAccount-content .woocommerce-Addresses {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 20px;
	margin-top: 1.75rem;
}

.woocommerce-account .woocommerce .woocommerce-MyAccount-content .woocommerce-Addresses .woocommerce-Address,
.woocommerce-account .woocommerce .woocommerce-MyAccount-content .woocommerce-Addresses .col-1,
.woocommerce-account .woocommerce .woocommerce-MyAccount-content .woocommerce-Addresses .col-2 {
	width: auto;
	max-width: none;
	float: none;
	margin: 0;
	padding: 24px;
	background: var(--cm-surface-2);
	border: 1px solid var(--cm-line);
	border-radius: var(--cm-radius);
}

.woocommerce-account .woocommerce .woocommerce-MyAccount-content .woocommerce-Address-title {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 14px;
	margin-bottom: 1.1rem;
	padding: 0 0 1.1rem;
	border: 0;
	border-bottom: 1px solid var(--cm-line);
	background: transparent;
}

.woocommerce-account .woocommerce .woocommerce-MyAccount-content .woocommerce-Address-title h2,
.woocommerce-account .woocommerce .woocommerce-MyAccount-content .woocommerce-Address-title h3 {
	margin: 0;
	font-family: "Archivo Black", sans-serif;
	font-size: 17px;
	line-height: 1.25;
	color: #fff;
	text-transform: none;
	letter-spacing: 0;
}

.woocommerce-account .woocommerce .woocommerce-MyAccount-content .woocommerce-Address address,
.woocommerce-account .woocommerce .woocommerce-MyAccount-content .woocommerce-Address > p {
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	font-style: normal;
	line-height: 1.75;
	color: var(--cm-text);
}

/* ---------- Detalle del pedido (ver pedido) ---------- */

/* el customizer del sitio pinta estos titulos con un bloque rosa */
.woocommerce-account .woocommerce .woocommerce-order-details__title,
.woocommerce-account .woocommerce .woocommerce-customer-details .woocommerce-column__title {
	margin: 0 0 1.2rem;
	padding: 0;
	background: transparent !important;
	border: 0;
	font-family: "Archivo Black", sans-serif;
	font-size: 20px;
	line-height: 1.25;
	color: #fff;
}

/* <mark> de WooCommerce: por defecto es texto negro, invisible en oscuro */
.woocommerce-account .woocommerce .woocommerce-MyAccount-content mark {
	background: transparent;
	color: var(--cm-accent);
	font-weight: 700;
}

.woocommerce-account .woocommerce .woocommerce-order-details,
.woocommerce-account .woocommerce .woocommerce-customer-details {
	margin-bottom: 2.25rem;
}

.woocommerce-account .woocommerce .woocommerce-MyAccount-content .woocommerce-OrderUpdates {
	margin: 0 0 2.25rem;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--cm-line);
}

.woocommerce-account .woocommerce .woocommerce-MyAccount-content .woocommerce-OrderUpdates li {
	margin: 0;
	padding: 14px 0;
	border-bottom: 1px solid var(--cm-line);
}

.woocommerce-account .woocommerce .woocommerce-MyAccount-content .woocommerce-OrderUpdate-meta {
	display: block;
	margin-bottom: .35rem;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--cm-muted);
}

.woocommerce-account .woocommerce .woocommerce-MyAccount-content .woocommerce-OrderUpdate-description p { margin: 0; }

.woocommerce-account .woocommerce table.woocommerce-table--order-details {
	width: 100%;
	margin: 0 0 1.75rem;
	border: 1px solid var(--cm-line);
	border-radius: var(--cm-radius);
	border-collapse: collapse;
	background: transparent;
}

.woocommerce-account .woocommerce table.woocommerce-table--order-details thead th {
	padding: 15px 16px;
	background: var(--cm-surface-2);
	border: 0;
	border-bottom: 1px solid var(--cm-line);
	font-family: "Archivo Narrow", sans-serif;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	text-align: left;
	color: var(--cm-accent);
}

.woocommerce-account .woocommerce table.woocommerce-table--order-details td,
.woocommerce-account .woocommerce table.woocommerce-table--order-details tfoot th {
	padding: 14px 16px;
	background: transparent;
	border: 0;
	border-bottom: 1px solid var(--cm-line);
	font-size: 16px;
	font-weight: 400;
	text-align: left;
	vertical-align: middle;
	color: var(--cm-text);
}

.woocommerce-account .woocommerce table.woocommerce-table--order-details tfoot th { color: #fff; font-weight: 700; }
.woocommerce-account .woocommerce table.woocommerce-table--order-details tfoot tr:last-child th,
.woocommerce-account .woocommerce table.woocommerce-table--order-details tfoot tr:last-child td { border-bottom: 0; }
.woocommerce-account .woocommerce table.woocommerce-table--order-details .product-total,
.woocommerce-account .woocommerce table.woocommerce-table--order-details tfoot td { text-align: right; white-space: nowrap; }
.woocommerce-account .woocommerce table.woocommerce-table--order-details .product-quantity { color: #fff; }

.woocommerce-account .woocommerce .woocommerce-customer-details address {
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	font-style: normal;
	line-height: 1.75;
	color: var(--cm-text);
}

.woocommerce-account .woocommerce .woocommerce-MyAccount-content p.order-again { margin: 0 0 2rem; }

/* las tablas de entradas de FooEvents ya traen la clase --order-details, solo separan */
.woocommerce-account .woocommerce .woocommerce-MyAccount-content .fooevents-order-table { margin-top: 1.5rem; }

/* ---------- Avisos ---------- */

.woocommerce-account .woocommerce-message,
.woocommerce-account .woocommerce-info,
.woocommerce-account .woocommerce-error {
	margin: 0 0 1.5rem;
	padding: 15px 20px;
	list-style: none;
	background: var(--cm-surface-2);
	border: 1px solid rgba(228, 188, 214, .45);
	border-radius: var(--cm-radius);
	color: var(--cm-text);
	font-size: 16px;
}

.woocommerce-account .woocommerce-error { border-color: var(--cm-danger); color: #fff; }

.woocommerce-account .woocommerce-message::before,
.woocommerce-account .woocommerce-info::before,
.woocommerce-account .woocommerce-error::before { display: none; }

/* ---------- Login / recuperar contraseña ---------- */

/* la pagina deslogueada (sin la clase logged-in del body) va centrada */
body.woocommerce-account:not(.logged-in) .entry-header { text-align: center; }
body.woocommerce-account:not(.logged-in) .woocommerce > h2 { text-align: center; }

/* el tema fija `body .woocommerce form.login { margin: 2em 0 }`: hay que superarlo
   en especificidad o el formulario nunca se centra */
body.woocommerce-account .woocommerce form.woocommerce-form-login,
body.woocommerce-account .woocommerce form.woocommerce-form-register,
body.woocommerce-account .woocommerce form.woocommerce-ResetPassword {
	float: none;
	width: 100%;
	max-width: 500px;
	margin: 0 auto 3rem;
	padding: 40px;
	background: var(--cm-surface);
	border: 1px solid var(--cm-line);
	border-radius: var(--cm-radius);
}

/* etiquetas en blanco dentro de la tarjeta */
.woocommerce-account .woocommerce-form-login label,
.woocommerce-account .woocommerce-form-register label,
.woocommerce-account .woocommerce-ResetPassword label {
	color: #fff;
	font-size: 12px;
	letter-spacing: .07em;
}

.woocommerce-account .woocommerce-form-login .woocommerce-form-login__rememberme { color: var(--cm-text); }

/* WooCommerce marca la fila como `form-row-first` (columna al 47%) aunque sea
   el unico campo del formulario */
body.woocommerce-account .woocommerce form.woocommerce-ResetPassword .form-row,
body.woocommerce-account .woocommerce form.woocommerce-ResetPassword .form-row-first {
	width: 100%;
	float: none;
	margin-right: 0;
}

body.woocommerce-account .woocommerce form.woocommerce-ResetPassword > p:first-of-type {
	margin: 0 0 1.75rem;
	font-size: 16px;
	line-height: 1.6;
	color: var(--cm-muted);
}

.woocommerce-account .woocommerce-form-login__submit,
.woocommerce-account .woocommerce-form-register__submit,
.woocommerce-account .woocommerce-ResetPassword .button { width: 100%; text-align: center; }

/* ---------- Registro (cuando esta habilitado, va en dos columnas) ---------- */

body.woocommerce-account .woocommerce #customer_login {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 40px;
	width: 100%;
	max-width: 1040px;
	margin: 0 auto;
}

/* el clearfix de .col2-set cuenta como item de grilla */
body.woocommerce-account .woocommerce #customer_login::before,
body.woocommerce-account .woocommerce #customer_login::after { display: none; }

body.woocommerce-account .woocommerce #customer_login .col-1,
body.woocommerce-account .woocommerce #customer_login .col-2 {
	display: flex;
	flex-direction: column;
	width: auto;
	max-width: none;
	float: none;
	margin: 0;
	padding: 0;
	background: transparent;
	border: 0;
}

body.woocommerce-account .woocommerce #customer_login h2 {
	margin: 0 0 1rem;
	font-family: "Archivo Narrow", sans-serif;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .2em;
	text-transform: uppercase;
	text-align: center;
	color: var(--cm-accent);
}

/* dentro de las columnas cada tarjeta ocupa su ancho */
body.woocommerce-account .woocommerce #customer_login form.woocommerce-form-login,
body.woocommerce-account .woocommerce #customer_login form.woocommerce-form-register {
	flex: 1 1 auto;
	max-width: none;
	margin: 0;
}

body.woocommerce-account .woocommerce form.woocommerce-form-register .form-row {
	width: 100%;
	float: none;
	margin: 0 0 1.35rem;
	padding: 0;
}

body.woocommerce-account .woocommerce form.woocommerce-form-register > p:not(.form-row) {
	margin: 0 0 1.5rem;
	font-size: 15px;
	line-height: 1.6;
	color: var(--cm-muted);
}

body.woocommerce-account .woocommerce .woocommerce-privacy-policy-text {
	margin: 0 0 1.5rem;
	font-size: 14px;
	line-height: 1.6;
	color: var(--cm-muted);
}

body.woocommerce-account .woocommerce .woocommerce-privacy-policy-text p { margin: 0; }

body.woocommerce-account .woocommerce .woocommerce-privacy-policy-text a {
	color: var(--cm-accent);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* medidor de fuerza de contrasena */
body.woocommerce-account .woocommerce .woocommerce-password-strength {
	margin-top: .6rem;
	padding: 9px 14px;
	background: var(--cm-surface-2);
	border: 1px solid var(--cm-line-strong);
	border-radius: var(--cm-radius);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	text-align: left;
	color: var(--cm-text);
}

body.woocommerce-account .woocommerce .woocommerce-password-strength.strong { border-color: #7cc48a; color: #cfe9d5; }
body.woocommerce-account .woocommerce .woocommerce-password-strength.good { border-color: var(--cm-accent); color: var(--cm-accent); }
body.woocommerce-account .woocommerce .woocommerce-password-strength.short,
body.woocommerce-account .woocommerce .woocommerce-password-strength.bad { border-color: var(--cm-danger); color: #f0c9c9; }

body.woocommerce-account .woocommerce .woocommerce-password-hint {
	display: block;
	margin-top: .5rem;
	font-size: 14px;
	line-height: 1.5;
	color: var(--cm-muted);
}

@media (max-width: 880px) {
	body.woocommerce-account .woocommerce #customer_login {
		grid-template-columns: minmax(0, 1fr);
		gap: 32px;
		max-width: 500px;
	}
}

.woocommerce-account .woocommerce-LostPassword {
	margin: 1.5rem 0 0;
	padding-top: 1.25rem;
	border-top: 1px solid var(--cm-line);
	text-align: center;
	font-size: 15px;
}

.woocommerce-account .woocommerce-LostPassword a {
	color: var(--cm-muted);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.woocommerce-account .woocommerce-LostPassword a:hover { color: var(--cm-accent); }

/* ---------- Mini formulario de login del checkout ----------
   Mismo markup que el de Mi cuenta, pero el body no lleva .woocommerce-account,
   asi que necesita su propio alcance. Solo toca el bloque de login y los dos
   avisos plegables (login y cupon), que son el mismo componente. */

body.woocommerce-checkout .woocommerce-form-login-toggle,
body.woocommerce-checkout .woocommerce-form-coupon-toggle { margin: 0 0 1.25rem; }

body.woocommerce-checkout .woocommerce-form-login-toggle .woocommerce-info,
body.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info {
	margin: 0;
	padding: 15px 20px;
	list-style: none;
	background: var(--cm-surface-2);
	border: 1px solid rgba(228, 188, 214, .45);
	border-radius: var(--cm-radius);
	color: var(--cm-text);
	font-size: 16px;
}

body.woocommerce-checkout .woocommerce-form-login-toggle .woocommerce-info::before,
body.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info::before { display: none; }

body.woocommerce-checkout .woocommerce-form-login-toggle .woocommerce-info a,
body.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info a {
	color: var(--cm-accent);
	text-decoration: underline;
	text-underline-offset: 3px;
}

body.woocommerce-checkout .woocommerce-form-login-toggle .woocommerce-info a:hover,
body.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info a:hover { color: #fff; }

body.woocommerce-checkout form.woocommerce-form-login {
	color-scheme: dark;
	max-width: 620px;
	margin: 0 auto 2rem;
	padding: 32px;
	background: var(--cm-surface);
	border: 1px solid var(--cm-line);
	border-radius: var(--cm-radius);
}

body.woocommerce-checkout form.woocommerce-form-login > p:first-of-type {
	margin: 0 0 1.75rem;
	font-size: 16px;
	line-height: 1.6;
	color: var(--cm-muted);
}

body.woocommerce-checkout form.woocommerce-form-login .form-row {
	margin: 0 0 1.35rem;
	padding: 0;
}

/* WooCommerce parte estos dos campos en columnas al 47%; a lo ancho del checkout
   quedan inputs gigantes, asi que van apilados dentro de una tarjeta acotada */
body.woocommerce-checkout form.woocommerce-form-login .form-row-first,
body.woocommerce-checkout form.woocommerce-form-login .form-row-last {
	width: 100%;
	float: none;
	margin-right: 0;
}

body.woocommerce-checkout form.woocommerce-form-login label {
	display: block;
	margin-bottom: .55rem;
	font-family: "Archivo Narrow", sans-serif;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: #fff;
}

body.woocommerce-checkout form.woocommerce-form-login .required { color: var(--cm-accent); border: 0; }

body.woocommerce-checkout form.woocommerce-form-login input[type="text"],
body.woocommerce-checkout form.woocommerce-form-login input[type="password"] {
	width: 100%;
	height: auto;
	box-sizing: border-box;
	padding: 13px 16px;
	background: transparent;
	border: 1px solid var(--cm-line-strong);
	border-radius: var(--cm-radius);
	color: #fff;
	font-family: "Archivo Narrow", sans-serif;
	font-size: 17px;
	line-height: 1.4;
	transition: border-color .18s ease, background-color .18s ease, box-shadow .18s ease;
}

body.woocommerce-checkout form.woocommerce-form-login input:focus {
	outline: none;
	border-color: var(--cm-accent);
	background: rgba(255, 255, 255, .04);
	box-shadow: 0 0 0 3px rgba(228, 188, 214, .18);
}

body.woocommerce-checkout form.woocommerce-form-login input:-webkit-autofill,
body.woocommerce-checkout form.woocommerce-form-login input:-webkit-autofill:focus {
	-webkit-text-fill-color: #fff;
	-webkit-box-shadow: 0 0 0 1000px var(--cm-surface-2) inset;
	caret-color: #fff;
}

body.woocommerce-checkout form.woocommerce-form-login .password-input { display: block; position: relative; }

body.woocommerce-checkout form.woocommerce-form-login .password-input .show-password-input {
	position: absolute;
	top: 50%;
	right: 14px;
	transform: translateY(-50%);
	padding: 0;
	background: none;
	border: 0;
	color: var(--cm-muted);
}

body.woocommerce-checkout form.woocommerce-form-login .password-input .show-password-input:hover { color: var(--cm-accent); }

/* fila de "Recordarme" + boton */
body.woocommerce-checkout form.woocommerce-form-login .form-row:has(.woocommerce-form-login__submit) {
	display: flex;
	align-items: center;
	gap: 20px;
	flex-wrap: wrap;
	margin-bottom: 1.25rem;
}

/* el clearfix de .form-row cuenta como item de flex y se come un gap a cada lado */
body.woocommerce-checkout form.woocommerce-form-login .form-row::before,
body.woocommerce-checkout form.woocommerce-form-login .form-row::after { display: none; }

/* el boton al extremo derecho */
body.woocommerce-checkout form.woocommerce-form-login .woocommerce-form-login__submit { margin-left: auto; }

@media (max-width: 600px) {
	body.woocommerce-checkout form.woocommerce-form-login .form-row:has(.woocommerce-form-login__submit) {
		flex-direction: column;
		align-items: stretch;
		gap: 16px;
	}
	body.woocommerce-checkout form.woocommerce-form-login .woocommerce-form-login__submit {
		width: 100%;
		margin-left: 0;
	}
}

body.woocommerce-checkout form.woocommerce-form-login .woocommerce-form__label-for-checkbox {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	gap: 10px;
	margin: 0;
	padding-left: 0;
	text-indent: 0;
	font-size: 15px;
	font-weight: 400;
	letter-spacing: normal;
	text-transform: none;
	color: var(--cm-text);
	cursor: pointer;
}

body.woocommerce-checkout form.woocommerce-form-login .woocommerce-form__input-checkbox {
	width: 17px;
	height: 17px;
	margin: 0;
	accent-color: var(--cm-accent);
	cursor: pointer;
}

body.woocommerce-checkout form.woocommerce-form-login .woocommerce-form-login__submit {
	padding: 14px 30px !important;
	background: var(--cm-accent) !important;
	border: 1px solid var(--cm-accent) !important;
	border-radius: var(--cm-radius);
	color: var(--cm-ink) !important;
	font-family: "Archivo Narrow", sans-serif;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 2px;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color .18s ease, color .18s ease;
}

body.woocommerce-checkout form.woocommerce-form-login .woocommerce-form-login__submit:hover {
	background: transparent !important;
	color: var(--cm-accent) !important;
}

body.woocommerce-checkout form.woocommerce-form-login .lost_password {
	margin: 0;
	padding-top: 1.25rem;
	border-top: 1px solid var(--cm-line);
	font-size: 15px;
}

body.woocommerce-checkout form.woocommerce-form-login .lost_password a {
	color: var(--cm-muted);
	text-decoration: underline;
	text-underline-offset: 3px;
}

body.woocommerce-checkout form.woocommerce-form-login .lost_password a:hover { color: var(--cm-accent); }

/* ---------- Responsive ---------- */

@media (max-width: 921px) {
	.woocommerce-account .woocommerce:has(.woocommerce-MyAccount-navigation) {
		grid-template-columns: minmax(0, 1fr);
		gap: 24px;
	}
	.woocommerce-account .woocommerce-MyAccount-content { padding: 24px; }
}

@media (max-width: 600px) {
	.woocommerce-account .woocommerce table.woocommerce-orders-table,
	.woocommerce-account .woocommerce table.woocommerce-orders-table tbody,
	.woocommerce-account .woocommerce table.woocommerce-orders-table tr,
	.woocommerce-account .woocommerce table.woocommerce-orders-table tbody th,
	.woocommerce-account .woocommerce table.woocommerce-orders-table td { display: block; width: 100%; }

	.woocommerce-account .woocommerce table.woocommerce-orders-table thead { display: none; }

	.woocommerce-account .woocommerce table.woocommerce-orders-table tr {
		padding: 10px 0;
		border-bottom: 1px solid var(--cm-line);
	}
	.woocommerce-account .woocommerce table.woocommerce-orders-table tr:last-child { border-bottom: 0; }

	.woocommerce-account .woocommerce table.woocommerce-orders-table tbody th,
	.woocommerce-account .woocommerce table.woocommerce-orders-table td {
		display: flex;
		align-items: baseline;
		justify-content: flex-end;
		gap: 6px;
		padding: 7px 16px;
		border: 0;
		text-align: right;
	}

	.woocommerce-account .woocommerce table.woocommerce-orders-table tbody th::before,
	.woocommerce-account .woocommerce table.woocommerce-orders-table td::before {
		content: attr(data-title);
		flex: 0 0 auto;
		margin-right: auto;
		padding-right: 12px;
		font-size: 12px;
		font-weight: 700;
		letter-spacing: .14em;
		text-transform: uppercase;
		color: var(--cm-accent);
	}

	.woocommerce-account .woocommerce-MyAccount-content,
	.woocommerce-account .woocommerce-form-login,
	.woocommerce-account .woocommerce-ResetPassword { padding: 20px; }
}