/* =========================================================================
   XTRALIFE — Mi cuenta (acceso, registro, panel, pedidos, direcciones…)

   WooCommerce sirve estas pantallas con sus propias plantillas, así que aquí
   no hay marcado del tema: esta hoja viste el HTML del plugin con la paleta de
   marca. Los tokens --xl-* los define assets/css/pz-header.css.

   Los selectores llevan `body.woocommerce-account` delante para ganarle a
   woocommerce.css, que apunta a `.woocommerce form .form-row input.input-text`
   y a `.woocommerce button.button` (mismo truco que pz-single-product.css).
   ========================================================================= */

/*
 * El tema no trae un reset global de box-sizing (ver shop-archive.css), así que
 * los rellenos de las tarjetas se sumaban al ancho de la rejilla y las
 * direcciones se salían de su columna. Se acota al subárbol de la cuenta.
 */
body.woocommerce-account .woocommerce,
body.woocommerce-account .woocommerce *,
body.woocommerce-account .woocommerce *::before,
body.woocommerce-account .woocommerce *::after {
	box-sizing: border-box;
}

body.woocommerce-account {
	--xl-a-radius: 18px;
	--xl-a-radius-sm: 10px;
	--xl-a-field-h: 48px;
	--xl-a-shadow: 0 18px 44px rgba(14, 77, 44, .07);
	--xl-a-ring: 0 0 0 3px rgba(14, 77, 44, .14);
	--xl-a-max: 1180px;
}

/* -------------------------------------------------------------------------
   1. Lienzo

   style.css pinta las páginas de WooCommerce en gris #eef1f3 y le quita el
   ancho máximo a .site; para la cuenta interesa un fondo claro de marca y un
   contenedor centrado con el mismo gutter que el resto del sitio.
   ---------------------------------------------------------------------- */
body.woocommerce-account,
body.woocommerce-account .site,
body.woocommerce-account .site-main {
	background:
		radial-gradient(120% 60% at 50% 0%, #ffffff 0%, rgba(255, 255, 255, 0) 58%),
		#f4f6ee;
}

body.woocommerce-account .site-main > article > .entry-content {
	width: 100%;
	max-width: var(--xl-a-max);
	margin-inline: auto;
	padding: clamp(22px, 3vw, 44px) var(--pz-gutter, 24px) clamp(40px, 6vw, 80px);
}

/* -------------------------------------------------------------------------
   2. Panel: navegación lateral + contenido
   ---------------------------------------------------------------------- */
body.woocommerce-account .woocommerce:has(> .woocommerce-MyAccount-navigation) {
	display: grid;
	grid-template-columns: 264px minmax(0, 1fr);
	gap: clamp(18px, 2.4vw, 32px);
	align-items: start;
}

/* El clearfix de woocommerce.css (::before/::after) contaría como dos celdas
   más de la rejilla y descolocaría menú y contenido. */
body.woocommerce-account .woocommerce:has(> .woocommerce-MyAccount-navigation)::before,
body.woocommerce-account .woocommerce:has(> .woocommerce-MyAccount-navigation)::after {
	content: none;
	display: none;
}

/*
 * woocommerce-layout.css maqueta el panel con flotantes:
 *   .woocommerce-account .woocommerce-MyAccount-navigation { float:left;width:30% }
 *   .woocommerce-account .woocommerce-MyAccount-content    { float:right;width:68% }
 * En la rejilla el float se ignora, pero el porcentaje NO: dejaba el menú en
 * el 30 % de su columna (una tarjeta de ~80 px con el texto desbordado). Hay
 * que anular ancho y flotante de forma explícita.
 */
body.woocommerce-account .woocommerce-MyAccount-navigation,
body.woocommerce-account .woocommerce-MyAccount-content {
	float: none;
	width: auto;
}

body.woocommerce-account .woocommerce-MyAccount-navigation {
	position: sticky;
	top: calc(var(--pz-header-h, 118px) + 16px);
}

body.woocommerce-account .woocommerce-MyAccount-navigation ul {
	margin: 0;
	padding: 8px;
	list-style: none;
	background: var(--pz-white, #fff);
	border: 1px solid var(--xl-line, #e2e6df);
	border-radius: var(--xl-a-radius);
	box-shadow: var(--xl-a-shadow);
}

body.woocommerce-account .woocommerce-MyAccount-navigation li {
	margin: 0;
}

body.woocommerce-account .woocommerce-MyAccount-navigation li a {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 14px;
	border-radius: var(--xl-a-radius-sm);
	color: var(--xl-ink, #1e2a22);
	font-size: .9rem;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	transition: background-color .2s var(--pz-ease, ease), color .2s var(--pz-ease, ease);
}

/* Iconos: SVG en máscara para que hereden el color del enlace. */
body.woocommerce-account .woocommerce-MyAccount-navigation li a::before {
	content: "";
	flex: 0 0 auto;
	width: 19px;
	height: 19px;
	background-color: currentColor;
	opacity: .85;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
}

body.woocommerce-account .woocommerce-MyAccount-navigation-link--dashboard a::before {
	-webkit-mask-image: var(--xl-a-ico-dashboard);
	mask-image: var(--xl-a-ico-dashboard);
}

body.woocommerce-account .woocommerce-MyAccount-navigation-link--orders a::before {
	-webkit-mask-image: var(--xl-a-ico-orders);
	mask-image: var(--xl-a-ico-orders);
}

body.woocommerce-account .woocommerce-MyAccount-navigation-link--downloads a::before {
	-webkit-mask-image: var(--xl-a-ico-downloads);
	mask-image: var(--xl-a-ico-downloads);
}

body.woocommerce-account .woocommerce-MyAccount-navigation-link--edit-address a::before {
	-webkit-mask-image: var(--xl-a-ico-address);
	mask-image: var(--xl-a-ico-address);
}

body.woocommerce-account .woocommerce-MyAccount-navigation-link--edit-account a::before,
body.woocommerce-account .woocommerce-MyAccount-navigation-link--payment-methods a::before {
	-webkit-mask-image: var(--xl-a-ico-user);
	mask-image: var(--xl-a-ico-user);
}

body.woocommerce-account .woocommerce-MyAccount-navigation-link--customer-logout a::before {
	-webkit-mask-image: var(--xl-a-ico-logout);
	mask-image: var(--xl-a-ico-logout);
}

body.woocommerce-account {
	--xl-a-ico-dashboard: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='9' rx='1.5'/%3E%3Crect x='14' y='3' width='7' height='5' rx='1.5'/%3E%3Crect x='14' y='12' width='7' height='9' rx='1.5'/%3E%3Crect x='3' y='16' width='7' height='5' rx='1.5'/%3E%3C/svg%3E");
	--xl-a-ico-orders: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z'/%3E%3Cpath d='M3 6h18'/%3E%3Cpath d='M16 10a4 4 0 0 1-8 0'/%3E%3C/svg%3E");
	--xl-a-ico-downloads: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpath d='M7 10l5 5 5-5'/%3E%3Cpath d='M12 15V3'/%3E%3C/svg%3E");
	--xl-a-ico-address: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");
	--xl-a-ico-user: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E");
	--xl-a-ico-logout: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4'/%3E%3Cpath d='M16 17l5-5-5-5'/%3E%3Cpath d='M21 12H9'/%3E%3C/svg%3E");
}

body.woocommerce-account .woocommerce-MyAccount-navigation li a:hover,
body.woocommerce-account .woocommerce-MyAccount-navigation li a:focus-visible {
	background: rgba(14, 77, 44, .07);
	color: var(--xl-green, #0e4d2c);
	text-decoration: none;
	outline: none;
}

body.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a {
	background: var(--xl-green, #0e4d2c);
	color: #fff;
	box-shadow: 0 6px 16px rgba(14, 77, 44, .22);
}

/* «Cerrar sesión» va aparte: separador y tono apagado. */
body.woocommerce-account .woocommerce-MyAccount-navigation-link--customer-logout {
	margin-top: 8px;
	padding-top: 8px;
	border-top: 1px solid var(--xl-line, #e2e6df);
}

body.woocommerce-account .woocommerce-MyAccount-navigation-link--customer-logout a {
	color: var(--xl-muted, #5d6b62);
	font-weight: 500;
}

/* Contenido */
body.woocommerce-account .woocommerce-MyAccount-content {
	min-width: 0;
	padding: clamp(22px, 2.8vw, 36px);
	background: var(--pz-white, #fff);
	border: 1px solid var(--xl-line, #e2e6df);
	border-radius: var(--xl-a-radius);
	box-shadow: var(--xl-a-shadow);
	color: var(--xl-ink, #1e2a22);
}

body.woocommerce-account .woocommerce-MyAccount-content > p {
	margin: 0 0 1rem;
	color: var(--xl-muted, #5d6b62);
	font-size: .95rem;
	line-height: 1.7;
}

body.woocommerce-account .woocommerce-MyAccount-content > p strong {
	color: var(--xl-ink, #1e2a22);
}

body.woocommerce-account .woocommerce-MyAccount-content a {
	color: var(--xl-green, #0e4d2c);
	font-weight: 600;
}

/* -------------------------------------------------------------------------
   3. Acceso y registro (usuario no identificado)
   ---------------------------------------------------------------------- */
body.woocommerce-account #customer_login {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(18px, 2.4vw, 32px);
	max-width: 940px;
	margin-inline: auto;
}

/*
 * woocommerce.css limpia los flotantes de .col2-set con ::before/::after. En
 * un contenedor de rejilla esos pseudoelementos cuentan como celdas y
 * descolocaban las dos columnas, así que se retiran aquí y en direcciones.
 */
body.woocommerce-account #customer_login::before,
body.woocommerce-account #customer_login::after,
body.woocommerce-account .woocommerce-Addresses::before,
body.woocommerce-account .woocommerce-Addresses::after,
body.woocommerce-account .woocommerce-EditAccountForm::before,
body.woocommerce-account .woocommerce-EditAccountForm::after {
	content: none;
	display: none;
}

/* El plugin encierra los formularios en una caja con borde propio: sobra,
   porque la tarjeta ya es el marco. */
body.woocommerce-account .woocommerce form.login,
body.woocommerce-account .woocommerce form.register,
body.woocommerce-account .woocommerce form.checkout_coupon {
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
}

/* Cuando el registro está desactivado solo hay una columna: se centra. */
body.woocommerce-account #customer_login:not(:has(> .u-column2)) {
	grid-template-columns: minmax(0, 520px);
	justify-content: center;
}

body.woocommerce-account #customer_login > .u-column1,
body.woocommerce-account #customer_login > .u-column2 {
	float: none;
	width: auto;
	padding: clamp(24px, 3vw, 38px);
	background: var(--pz-white, #fff);
	border: 1px solid var(--xl-line, #e2e6df);
	border-radius: var(--xl-a-radius);
	box-shadow: var(--xl-a-shadow);
}

/* La columna de registro se distingue con el arena de marca. */
body.woocommerce-account #customer_login > .u-column2 {
	background:
		linear-gradient(180deg, rgba(233, 235, 219, .55) 0%, rgba(233, 235, 219, .18) 100%),
		var(--pz-white, #fff);
}

body.woocommerce-account #customer_login h2,
body.woocommerce-account .woocommerce-MyAccount-content h2 {
	margin: 0 0 1.4rem;
	color: var(--xl-green, #0e4d2c);
	font-family: var(--OZ-Font-Headings, inherit);
	font-size: clamp(1.25rem, 2.4vw, 1.5rem);
	font-weight: 700;
	letter-spacing: -.01em;
}

/* Filete dorado bajo el título, el mismo recurso que en el 404. */
body.woocommerce-account #customer_login h2::after {
	content: "";
	display: block;
	width: 52px;
	height: 3px;
	margin-top: .7rem;
	border-radius: 999px;
	background-image: var(--xl-gold, linear-gradient(90deg, #bd8f32 0%, #d09f3b 100%));
}

/* -------------------------------------------------------------------------
   4. Campos de formulario (comunes a login, registro, cuenta y direcciones)
   ---------------------------------------------------------------------- */
body.woocommerce-account .woocommerce form .form-row,
body.woocommerce-account .woocommerce-page form .form-row {
	margin: 0 0 1.1rem;
	padding: 0;
}

body.woocommerce-account .woocommerce form .form-row label,
body.woocommerce-account .woocommerce form fieldset label {
	display: block;
	margin: 0 0 .45rem;
	color: var(--xl-ink, #1e2a22);
	font-size: .85rem;
	font-weight: 600;
	line-height: 1.4;
}

body.woocommerce-account .woocommerce form .form-row label .required {
	color: var(--xl-orange, #f26522);
	border: 0;
	text-decoration: none;
}

body.woocommerce-account .woocommerce form .form-row input.input-text,
body.woocommerce-account .woocommerce form .form-row textarea,
body.woocommerce-account .woocommerce form .form-row select,
body.woocommerce-account .woocommerce .woocommerce-Input--text,
body.woocommerce-account .woocommerce .select2-container .select2-selection--single {
	box-sizing: border-box;
	width: 100%;
	height: var(--xl-a-field-h);
	padding: 0 16px;
	border: 1.5px solid var(--xl-line, #e2e6df);
	border-radius: 8px;
	background: var(--pz-white, #fff);
	color: var(--xl-ink, #1e2a22);
	font-family: inherit;
	font-size: 15px;
	line-height: calc(var(--xl-a-field-h) - 3px);
	transition: border-color .2s var(--pz-ease, ease), box-shadow .2s var(--pz-ease, ease);
}

body.woocommerce-account .woocommerce form .form-row textarea {
	height: auto;
	min-height: 110px;
	padding: 12px 16px;
	line-height: 1.6;
}

body.woocommerce-account .woocommerce form .form-row input.input-text:focus,
body.woocommerce-account .woocommerce form .form-row textarea:focus,
body.woocommerce-account .woocommerce form .form-row select:focus {
	outline: none;
	border-color: var(--xl-green, #0e4d2c);
	box-shadow: var(--xl-a-ring);
}

body.woocommerce-account .woocommerce form .form-row input.input-text::placeholder {
	color: #9aa79f;
}

/* Campo con error marcado por WooCommerce. */
body.woocommerce-account .woocommerce form .form-row.woocommerce-invalid input.input-text,
body.woocommerce-account .woocommerce form .form-row.woocommerce-invalid select {
	border-color: #c0392b;
	box-shadow: 0 0 0 3px rgba(192, 57, 43, .12);
}

body.woocommerce-account .woocommerce form .form-row.woocommerce-validated input.input-text {
	border-color: rgba(14, 77, 44, .45);
}

/* El ojo de «mostrar contraseña» que inyecta WooCommerce. */
body.woocommerce-account .woocommerce form .password-input,
body.woocommerce-account .woocommerce form .show-password-input {
	display: block;
	width: 100%;
}

body.woocommerce-account .woocommerce form .show-password-input {
	position: absolute;
	right: 14px;
	top: 50%;
	width: 20px;
	transform: translateY(-50%);
	color: var(--xl-muted, #5d6b62);
}

body.woocommerce-account .woocommerce form .password-input {
	position: relative;
}

/* Texto de ayuda bajo un campo (p. ej. «Display name»). */
body.woocommerce-account .woocommerce form .form-row span em,
body.woocommerce-account .woocommerce-password-hint {
	display: block;
	margin-top: .45rem;
	color: var(--xl-muted, #5d6b62);
	font-size: .8rem;
	font-style: normal;
	line-height: 1.55;
}

/* Casilla «Recordarme» y similares. */
body.woocommerce-account .woocommerce-form__label-for-checkbox {
	display: inline-flex !important;
	align-items: center;
	gap: 9px;
	margin: 0 !important;
	color: var(--xl-muted, #5d6b62);
	font-size: .875rem;
	font-weight: 500 !important;
	cursor: pointer;
}

body.woocommerce-account .woocommerce-form__input-checkbox {
	width: 17px;
	height: 17px;
	margin: 0;
	accent-color: var(--xl-green, #0e4d2c);
	cursor: pointer;
}

/* -------------------------------------------------------------------------
   5. Botones

   El dorado es el relleno de todos los botones de acción del sitio (ver el
   comentario de la paleta en pz-header.css).
   ---------------------------------------------------------------------- */
body.woocommerce-account .woocommerce button.button,
body.woocommerce-account .woocommerce a.button,
body.woocommerce-account .woocommerce input.button,
body.woocommerce-account .woocommerce .woocommerce-Button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	min-height: var(--xl-a-field-h);
	padding: 0 1.8rem;
	border: 0;
	border-radius: 999px;
	background: none;
	background-image: var(--xl-gold, linear-gradient(90deg, #bd8f32 0%, #d09f3b 100%));
	color: #fff;
	font-family: inherit;
	font-size: .8125rem;
	font-weight: 700;
	letter-spacing: .06em;
	line-height: 1;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition: background-image .2s var(--pz-ease, ease), box-shadow .2s var(--pz-ease, ease), transform .2s var(--pz-ease, ease);
}

body.woocommerce-account .woocommerce button.button:hover,
body.woocommerce-account .woocommerce a.button:hover,
body.woocommerce-account .woocommerce input.button:hover,
body.woocommerce-account .woocommerce .woocommerce-Button:hover {
	background-image: var(--xl-gold-dark, linear-gradient(90deg, #a67a26 0%, #b98a2e 100%));
	color: #fff;
	box-shadow: 0 10px 26px rgba(189, 143, 50, .32);
	transform: translateY(-1px);
}

body.woocommerce-account .woocommerce button.button:focus-visible,
body.woocommerce-account .woocommerce a.button:focus-visible {
	outline: 2px solid var(--xl-green, #0e4d2c);
	outline-offset: 2px;
}

/* Acceder / Registrarse ocupan todo el ancho de su tarjeta. */
body.woocommerce-account .woocommerce-form-login__submit,
body.woocommerce-account .woocommerce-form-register__submit {
	width: 100%;
}

/* La fila del login trae la casilla y el botón juntos: se apilan. */
body.woocommerce-account .woocommerce-form-login .form-row:has(.woocommerce-form-login__rememberme) {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 1.1rem;
	margin-bottom: .9rem;
}

body.woocommerce-account .woocommerce-LostPassword {
	margin: 0;
	text-align: center;
}

body.woocommerce-account .woocommerce-LostPassword a {
	color: var(--xl-muted, #5d6b62);
	font-size: .85rem;
	font-weight: 600;
	text-decoration: none;
}

body.woocommerce-account .woocommerce-LostPassword a:hover {
	color: var(--xl-green, #0e4d2c);
	text-decoration: underline;
}

/* -------------------------------------------------------------------------
   6. Registro: aviso de contraseña y política de privacidad
   ---------------------------------------------------------------------- */
body.woocommerce-account .woocommerce-form-register > p:not([class]) {
	margin: -.3rem 0 1.1rem;
	padding: 12px 14px;
	border-radius: var(--xl-a-radius-sm);
	background: rgba(14, 77, 44, .05);
	color: var(--xl-muted, #5d6b62);
	font-size: .85rem;
	line-height: 1.6;
}

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

body.woocommerce-account .woocommerce-privacy-policy-text p {
	margin: 0;
	color: var(--xl-muted, #5d6b62);
	font-size: .78rem;
	line-height: 1.65;
}

body.woocommerce-account .woocommerce-privacy-policy-link {
	color: var(--xl-green, #0e4d2c);
	font-weight: 600;
	text-decoration: underline;
}

/* Medidor de fuerza de la contraseña. */
body.woocommerce-account .woocommerce-password-strength {
	margin-top: .5rem;
	padding: 9px 12px;
	border: 0;
	border-radius: var(--xl-a-radius-sm);
	font-size: .78rem;
	font-weight: 600;
	text-align: left;
}

body.woocommerce-account .woocommerce-password-strength.short,
body.woocommerce-account .woocommerce-password-strength.bad {
	background: rgba(192, 57, 43, .1);
	color: #a5322a;
}

body.woocommerce-account .woocommerce-password-strength.good {
	background: rgba(242, 101, 34, .12);
	color: var(--xl-orange-dark, #d9551a);
}

body.woocommerce-account .woocommerce-password-strength.strong {
	background: rgba(14, 77, 44, .1);
	color: var(--xl-green, #0e4d2c);
}

/* -------------------------------------------------------------------------
   7. Recuperar contraseña (fuera del panel: va centrado)
   ---------------------------------------------------------------------- */
body.woocommerce-account .woocommerce-ResetPassword {
	max-width: 520px;
	margin-inline: auto;
	padding: clamp(24px, 3vw, 38px);
	background: var(--pz-white, #fff);
	border: 1px solid var(--xl-line, #e2e6df);
	border-radius: var(--xl-a-radius);
	box-shadow: var(--xl-a-shadow);
}

body.woocommerce-account .woocommerce-ResetPassword > p:first-child {
	margin-top: 0;
	color: var(--xl-muted, #5d6b62);
	font-size: .92rem;
	line-height: 1.7;
}

/* El campo viene marcado como .form-row-first (47 % y flotado). */
body.woocommerce-account .woocommerce-ResetPassword .form-row {
	float: none;
	width: auto;
}

body.woocommerce-account .woocommerce-ResetPassword .woocommerce-Button {
	width: 100%;
}

/* -------------------------------------------------------------------------
   8. Datos de la cuenta: dos columnas y bloque de contraseña
   ---------------------------------------------------------------------- */
body.woocommerce-account .woocommerce-EditAccountForm {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: 20px;
}

body.woocommerce-account .woocommerce-EditAccountForm .form-row {
	float: none;
	width: auto;
}

body.woocommerce-account .woocommerce-EditAccountForm .form-row-first {
	grid-column: 1;
}

body.woocommerce-account .woocommerce-EditAccountForm .form-row-last {
	grid-column: 2;
}

body.woocommerce-account .woocommerce-EditAccountForm .form-row-wide,
body.woocommerce-account .woocommerce-EditAccountForm > fieldset,
body.woocommerce-account .woocommerce-EditAccountForm > p {
	grid-column: 1 / -1;
}

body.woocommerce-account .woocommerce-EditAccountForm .clear {
	display: none;
}

body.woocommerce-account .woocommerce-EditAccountForm > fieldset {
	margin: .6rem 0 1.4rem;
	padding: clamp(18px, 2.2vw, 26px) 0 0;
	border: 0;
	border-top: 1px solid var(--xl-line, #e2e6df);
}

/* El flotado saca la leyenda del hueco que abre en el borde del fieldset: así
   el filete cruza entero por encima y el título queda debajo. */
body.woocommerce-account .woocommerce-EditAccountForm > fieldset legend {
	float: left;
	width: 100%;
	padding: 0;
	margin: 0 0 1.2rem;
	color: var(--xl-green, #0e4d2c);
	font-family: var(--OZ-Font-Headings, inherit);
	font-size: 1.05rem;
	font-weight: 700;
}

body.woocommerce-account .woocommerce-EditAccountForm > p:last-of-type {
	margin: .4rem 0 0;
}

/* -------------------------------------------------------------------------
   9. Direcciones
   ---------------------------------------------------------------------- */
body.woocommerce-account .woocommerce-Addresses {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(16px, 2vw, 24px);
	margin: 0;
}

/* El `.woocommerce` extra del selector es para ganarle a
   `.woocommerce .col2-set .col-1 { float:left; width:48% }`. */
body.woocommerce-account .woocommerce .woocommerce-Address {
	float: none;
	width: auto;
	padding: clamp(18px, 2.2vw, 26px);
	background: rgba(233, 235, 219, .32);
	border: 1px solid var(--xl-line, #e2e6df);
	border-radius: var(--xl-a-radius);
}

body.woocommerce-account .woocommerce-Address-title {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin: 0 0 .9rem;
}

/* Si el botón no cabe al lado, baja a su línea en vez de estrujar el título. */
body.woocommerce-account .woocommerce-Address-title h2,
body.woocommerce-account .woocommerce-Address-title h3 {
	flex: 1 1 auto;
	min-width: 50%;
	margin: 0;
	color: var(--xl-green, #0e4d2c);
	font-size: 1rem;
	font-weight: 700;
}

body.woocommerce-account .woocommerce-Address-title a.edit {
	flex: 0 0 auto;
	padding: 7px 14px;
	border: 1px solid var(--xl-green, #0e4d2c);
	border-radius: 999px;
	color: var(--xl-green, #0e4d2c);
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .04em;
	text-decoration: none;
	text-transform: uppercase;
	white-space: nowrap;
	transition: background-color .2s var(--pz-ease, ease), color .2s var(--pz-ease, ease);
}

body.woocommerce-account .woocommerce-Address-title a.edit:hover {
	background: var(--xl-green, #0e4d2c);
	color: #fff;
}

body.woocommerce-account .woocommerce-Address address {
	margin: 0;
	color: var(--xl-muted, #5d6b62);
	font-size: .92rem;
	font-style: normal;
	line-height: 1.75;
}

/* -------------------------------------------------------------------------
   10. Tablas: pedidos, descargas y detalle del pedido
   ---------------------------------------------------------------------- */
body.woocommerce-account .woocommerce-MyAccount-content table.shop_table {
	width: 100%;
	margin: 0 0 1.5rem;
	border: 1px solid var(--xl-line, #e2e6df);
	border-radius: var(--xl-a-radius-sm);
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
	font-size: .9rem;
}

body.woocommerce-account .woocommerce-MyAccount-content table.shop_table thead th {
	padding: 14px 16px;
	background: rgba(233, 235, 219, .5);
	border: 0;
	border-bottom: 1px solid var(--xl-line, #e2e6df);
	color: var(--xl-green, #0e4d2c);
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .07em;
	text-align: left;
	text-transform: uppercase;
}

body.woocommerce-account .woocommerce-MyAccount-content table.shop_table tbody td,
body.woocommerce-account .woocommerce-MyAccount-content table.shop_table tfoot td,
body.woocommerce-account .woocommerce-MyAccount-content table.shop_table tfoot th {
	padding: 14px 16px;
	border: 0;
	border-bottom: 1px solid var(--xl-line, #e2e6df);
	color: var(--xl-ink, #1e2a22);
	vertical-align: middle;
}

body.woocommerce-account .woocommerce-MyAccount-content table.shop_table tbody tr:last-child td {
	border-bottom: 0;
}

body.woocommerce-account .woocommerce-MyAccount-content table.shop_table tbody tr:hover td {
	background: rgba(14, 77, 44, .03);
}

body.woocommerce-account .woocommerce-MyAccount-content table.shop_table .woocommerce-orders-table__cell-order-number a {
	font-weight: 700;
}

body.woocommerce-account .woocommerce-MyAccount-content table.shop_table td.woocommerce-orders-table__cell-order-actions {
	text-align: right;
}

body.woocommerce-account .woocommerce-MyAccount-content table.shop_table .button {
	min-height: 34px;
	padding: 0 1.1rem;
	font-size: .7rem;
}

/* Paginación de pedidos. */
body.woocommerce-account .woocommerce-pagination ul,
body.woocommerce-account .woocommerce-Pagination {
	display: flex;
	gap: 8px;
	justify-content: center;
	margin: 1.4rem 0 0;
	padding: 0;
	list-style: none;
	border: 0;
}

/* -------------------------------------------------------------------------
   11. Avisos (en la cuenta van en línea: el toast está desactivado aquí,
       ver theme-woocommerce.php)
   ---------------------------------------------------------------------- */
body.woocommerce-account .woocommerce-info,
body.woocommerce-account .woocommerce-message,
body.woocommerce-account .woocommerce-error,
body.woocommerce-account .woocommerce-notice {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 16px;
	margin: 0 0 1.2rem;
	padding: 15px 18px;
	border: 1px solid var(--xl-line, #e2e6df);
	border-left: 4px solid var(--xl-green, #0e4d2c);
	border-radius: var(--xl-a-radius-sm);
	background: rgba(233, 235, 219, .42);
	color: var(--xl-ink, #1e2a22);
	font-size: .9rem;
	line-height: 1.6;
	list-style: none;
}

body.woocommerce-account .woocommerce-info::before,
body.woocommerce-account .woocommerce-message::before,
body.woocommerce-account .woocommerce-error::before,
body.woocommerce-account .woocommerce-notice::before {
	content: none;
}

body.woocommerce-account .woocommerce-message {
	border-left-color: var(--xl-leaf, #006837);
	background: rgba(10, 128, 71, .09);
}

body.woocommerce-account .woocommerce-error {
	border-left-color: #c0392b;
	background: rgba(192, 57, 43, .08);
	color: #8f2b21;
}

body.woocommerce-account .woocommerce-error li {
	margin: 0;
}

body.woocommerce-account .woocommerce-info .button,
body.woocommerce-account .woocommerce-message .button,
body.woocommerce-account .woocommerce-error .button {
	order: 2;
	min-height: 38px;
	padding: 0 1.3rem;
	font-size: .72rem;
}

/* -------------------------------------------------------------------------
   12. Franja de título: en la cuenta se centra con el mismo contenedor
   ---------------------------------------------------------------------- */
body.woocommerce-account .pz-page-title__inner {
	max-width: var(--xl-a-max);
	margin-inline: auto;
}

/* -------------------------------------------------------------------------
   13. Adaptación a pantallas pequeñas
   ---------------------------------------------------------------------- */
@media (max-width: 980px) {
	body.woocommerce-account .woocommerce:has(> .woocommerce-MyAccount-navigation) {
		grid-template-columns: minmax(0, 1fr);
	}

	body.woocommerce-account .woocommerce-MyAccount-navigation {
		position: static;
	}

	/* En móvil el menú es una fila de pastillas que se desplaza. */
	body.woocommerce-account .woocommerce-MyAccount-navigation ul {
		display: flex;
		gap: 6px;
		overflow-x: auto;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}

	body.woocommerce-account .woocommerce-MyAccount-navigation ul::-webkit-scrollbar {
		display: none;
	}

	body.woocommerce-account .woocommerce-MyAccount-navigation li {
		flex: 0 0 auto;
	}

	body.woocommerce-account .woocommerce-MyAccount-navigation li a {
		padding: 10px 14px;
		border-radius: 999px;
		white-space: nowrap;
	}

	body.woocommerce-account .woocommerce-MyAccount-navigation-link--customer-logout {
		margin-top: 0;
		padding-top: 0;
		border-top: 0;
		border-left: 1px solid var(--xl-line, #e2e6df);
		margin-left: 4px;
		padding-left: 4px;
	}
}

@media (max-width: 760px) {
	body.woocommerce-account #customer_login,
	body.woocommerce-account .woocommerce-Addresses,
	body.woocommerce-account .woocommerce-EditAccountForm {
		grid-template-columns: minmax(0, 1fr);
	}

	body.woocommerce-account #customer_login {
		gap: 16px;
	}

	body.woocommerce-account .woocommerce-EditAccountForm .form-row-first,
	body.woocommerce-account .woocommerce-EditAccountForm .form-row-last {
		grid-column: 1;
	}

	/* Tablas apiladas: WooCommerce ya expone el encabezado en data-title. */
	body.woocommerce-account .woocommerce-MyAccount-content table.shop_table thead {
		display: none;
	}

	body.woocommerce-account .woocommerce-MyAccount-content table.shop_table tbody tr {
		display: block;
		padding: 6px 0;
		border-bottom: 1px solid var(--xl-line, #e2e6df);
	}

	body.woocommerce-account .woocommerce-MyAccount-content table.shop_table tbody tr:last-child {
		border-bottom: 0;
	}

	body.woocommerce-account .woocommerce-MyAccount-content table.shop_table tbody td {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 14px;
		padding: 9px 16px;
		border-bottom: 0;
		text-align: right;
	}

	body.woocommerce-account .woocommerce-MyAccount-content table.shop_table tbody td::before {
		content: attr(data-title) ":";
		flex: 0 0 auto;
		color: var(--xl-muted, #5d6b62);
		font-size: .74rem;
		font-weight: 700;
		letter-spacing: .05em;
		text-align: left;
		text-transform: uppercase;
	}
}
