/* ============================================================
   My Account — myaccount/dashboard.php override + skin nativo Woo.
   Pestañas B2B (Cuenta Empresa, Mis Cotizaciones, Wishlist, etc.)
   se mantienen vía navigation.php default.

   El wrapper .mk-account viene del filter the_content en functions.php
   que envuelve el output de [woocommerce_my_account] en
   <section class="mk-account"><div class="mk-container">…</div></section>.
   Sin ese wrap, el shortcode emite full-bleed y no se alinea con el
   resto del sitio.
   ============================================================ */

.mk-account {
  padding: var(--mk-sp-6) 0 var(--mk-sp-8);
  background: var(--mk-bg-alt);
  min-height: 60vh;
}

.mk-account .woocommerce {
  display: grid;
  gap: var(--mk-sp-5);
  grid-template-columns: 1fr;
}

/* Desktop: sidebar (240px) | content (resto). Solo cuando hay sesión —
   sin login el único hijo del .woocommerce es #customer_login y caería
   comprimido a la columna izquierda de 240px. body.logged-in lo evita.
   Usamos grid-column explícito en cada item porque Woo en algunas
   versiones emite la navigation DESPUÉS del content. */
@media (min-width: 1024px) {
  body.logged-in .mk-account .woocommerce {
    grid-template-columns: 240px minmax(0, 1fr);
    gap: var(--mk-sp-6);
    align-items: start;
  }
  body.logged-in .mk-account .woocommerce-MyAccount-navigation { grid-column: 1; grid-row: 1; }
  body.logged-in .mk-account .woocommerce-MyAccount-content    { grid-column: 2; grid-row: 1; }
}

/* ---------- Sidebar de navegación (snippets registran ítems) ----------
   Sticky con max-height + scroll interno: cuando el menú es más alto que
   el viewport (caso B2B con todas las pestañas extra), no se pega "raro"
   ni tapa el footer — scrollea dentro de su propia caja. */

.mk-account .woocommerce-MyAccount-navigation {
  background: #fff;
  border: 1px solid var(--mk-bg-soft);
  border-radius: var(--mk-radius);
  padding: var(--mk-sp-3);
}

@media (min-width: 1024px) {
  .mk-account .woocommerce-MyAccount-navigation {
    position: sticky;
    top: var(--mk-sp-4);
    max-height: calc(100vh - var(--mk-sp-7));
    overflow-y: auto;
  }
}

.woocommerce-MyAccount-navigation ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.woocommerce-MyAccount-navigation ul li {
  margin: 2px 0;
}

.woocommerce-MyAccount-navigation ul li a {
  display: block;
  padding: var(--mk-sp-2) var(--mk-sp-3);
  font-size: var(--mk-text-sm);
  color: var(--mk-ink-700);
  text-decoration: none;
  border-radius: var(--mk-radius);
  border-left: 3px solid transparent;
  transition: all var(--mk-trans);
  font-family: var(--mk-font-display);
  font-weight: 500;
}

.woocommerce-MyAccount-navigation ul li a:hover {
  background: var(--mk-bg-alt);
  color: var(--mk-green-700);
}

.woocommerce-MyAccount-navigation ul li.is-active a,
.woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--is-active a,
.woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link.is-active a {
  background: var(--mk-green-100);
  color: var(--mk-green-800);
  border-left-color: var(--mk-gold-500);
  font-weight: 700;
}

/* Logout siempre al fondo, separado */
.woocommerce-MyAccount-navigation ul li:last-child {
  margin-top: var(--mk-sp-3);
  padding-top: var(--mk-sp-3);
  border-top: 1px solid var(--mk-bg-soft);
}

/* ---------- Content area ---------- */

.woocommerce-MyAccount-content {
  min-width: 0;
}

.woocommerce-MyAccount-content > h2:first-of-type,
.woocommerce-MyAccount-content > h3:first-of-type {
  font-size: var(--mk-text-xl);
  margin-top: 0;
  margin-bottom: var(--mk-sp-4);
  position: relative;
  padding-bottom: var(--mk-sp-2);
}

.woocommerce-MyAccount-content > h2:first-of-type::after,
.woocommerce-MyAccount-content > h3:first-of-type::after {
  content: "";
  display: block;
  width: 40px;
  height: 2px;
  background: var(--mk-gold-500);
  margin-top: var(--mk-sp-2);
}

/* ---------- Dashboard custom ---------- */

.mk-account-dashboard {
  display: flex;
  flex-direction: column;
  gap: var(--mk-sp-5);
}

.mk-account-greeting h2 {
  font-size: var(--mk-text-2xl);
  margin: 0 0 var(--mk-sp-2);
  position: relative;
  padding-bottom: var(--mk-sp-2);
}

.mk-account-greeting h2::after {
  content: "";
  display: block;
  width: 40px;
  height: 2px;
  background: var(--mk-gold-500);
  margin-top: var(--mk-sp-2);
}

.mk-account-greeting p { margin: 0; max-width: 720px; }

/* Cards generales */
.mk-account-card {
  background: #fff;
  border: 1px solid var(--mk-bg-soft);
  border-radius: var(--mk-radius);
  padding: var(--mk-sp-5);
}

.mk-account-card__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--mk-sp-2);
  margin-bottom: var(--mk-sp-2);
}

.mk-account-card h3 {
  font-size: var(--mk-text-lg);
  color: var(--mk-green-700);
  margin: 0;
  font-family: var(--mk-font-display);
}

.mk-account-card__link {
  font-size: var(--mk-text-sm);
  font-weight: 600;
  color: var(--mk-gold-700);
  text-decoration: none;
}

.mk-account-card__link:hover { color: var(--mk-green-700); }

/* Último pedido */
.mk-account-last-order__body {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--mk-sp-3);
  align-items: center;
  margin-top: var(--mk-sp-3);
}

.mk-account-last-order__num {
  font-family: var(--mk-font-display);
  font-weight: 700;
  font-size: var(--mk-text-md);
  color: var(--mk-ink-900);
  margin-bottom: 4px;
}

.mk-account-last-order__status { margin-top: var(--mk-sp-2); }

.mk-account-last-order__actions {
  display: flex;
  gap: var(--mk-sp-2);
  flex-wrap: wrap;
}

/* Productos frecuentes */
.mk-account-frequent {
  width: 100%;
  border-collapse: collapse;
  margin-top: var(--mk-sp-3);
  font-size: var(--mk-text-sm);
}

.mk-account-frequent th {
  text-align: left;
  padding: var(--mk-sp-2) var(--mk-sp-3);
  background: var(--mk-bg-alt);
  font-size: var(--mk-text-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--mk-ink-500);
  font-weight: 700;
  font-family: var(--mk-font-display);
}

.mk-account-frequent td {
  padding: var(--mk-sp-3);
  border-bottom: 1px solid var(--mk-bg-soft);
  vertical-align: middle;
}

.mk-account-frequent td:last-child { text-align: right; white-space: nowrap; }

.mk-account-frequent a {
  color: var(--mk-ink-900);
  text-decoration: none;
  font-weight: 600;
  font-family: var(--mk-font-display);
}

.mk-account-frequent a:hover { color: var(--mk-green-700); }

/* Quick links grid */
.mk-account-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--mk-sp-4);
}

@media (min-width: 768px)  { .mk-account-grid { grid-template-columns: repeat(3, 1fr); } }

.mk-account-quick { padding: var(--mk-sp-5); }
.mk-account-quick p { margin: var(--mk-sp-1) 0 var(--mk-sp-3); }

/* ---------- Tablas Woo (orders, downloads, etc.) ---------- */

.woocommerce-orders-table,
.shop_table.account-orders-table,
.woocommerce-table--order-details,
.woocommerce-table--order-downloads {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--mk-text-sm);
  background: #fff;
  border: 1px solid var(--mk-bg-soft);
  border-radius: var(--mk-radius);
  overflow: hidden;
  margin-bottom: var(--mk-sp-4);
}

.woocommerce-orders-table thead th,
.shop_table.account-orders-table thead th {
  text-align: left;
  padding: var(--mk-sp-2) var(--mk-sp-3);
  background: var(--mk-bg-alt);
  font-size: var(--mk-text-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--mk-ink-500);
  font-weight: 700;
  font-family: var(--mk-font-display);
  border-bottom: 1px solid var(--mk-bg-soft);
}

.woocommerce-orders-table tbody td,
.shop_table.account-orders-table tbody td {
  padding: var(--mk-sp-3);
  border-bottom: 1px solid var(--mk-bg-soft);
  vertical-align: middle;
}

.woocommerce-orders-table tbody tr:hover { background: var(--mk-bg-alt); }

.woocommerce-orders-table .button,
.shop_table .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 12px;
  background: #fff;
  border: 1.5px solid var(--mk-green-700);
  color: var(--mk-green-700);
  border-radius: var(--mk-radius);
  font-family: var(--mk-font-display);
  font-size: var(--mk-text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-decoration: none;
  transition: all var(--mk-trans);
}

.woocommerce-orders-table .button:hover,
.shop_table .button:hover {
  background: var(--mk-green-700);
  color: #fff;
}

/* Status pills en órdenes */
.woocommerce-orders-table__cell-order-status {
  text-transform: uppercase;
  font-size: var(--mk-text-xs);
  letter-spacing: 0.04em;
  font-weight: 600;
}

/* ---------- Forms (edit-account, edit-address) ---------- */

/* Selectores scoped a .mk-account (no .woocommerce-MyAccount-content) para
   cubrir TANTO el dashboard (logueado, content dentro del nav grid) COMO
   los forms de login/register (sin login, fuera del nav grid). El selector
   anterior se quedaba corto y dejaba los inputs del login sin estilo. */

.mk-account form .form-row {
  margin-bottom: var(--mk-sp-3);
}

.mk-account form label {
  display: block;
  margin-bottom: 4px;
  font-size: var(--mk-text-sm);
  font-weight: 500;
  color: var(--mk-ink-700);
}

.mk-account form .input-text,
.mk-account form .woocommerce-Input,
.mk-account form input[type="text"],
.mk-account form input[type="email"],
.mk-account form input[type="tel"],
.mk-account form input[type="password"],
.mk-account form select,
.mk-account form textarea {
  width: 100%;
  padding: var(--mk-sp-3);
  font-size: var(--mk-text-md);
  border: 1.5px solid var(--mk-bg-soft);
  border-radius: var(--mk-radius);
  background: #fff;
  color: var(--mk-ink-900);
  font-family: inherit;
  min-height: 42px;
  box-sizing: border-box;
}

.mk-account form .input-text:focus,
.mk-account form .woocommerce-Input:focus,
.mk-account form input:focus,
.mk-account form select:focus,
.mk-account form textarea:focus {
  outline: none;
  border-color: var(--mk-green-700);
}

/* Eye toggle del password — WC inyecta vía JS la estructura:
     <span class="password-input">
       <input type="password" .../>
       <button type="button" class="show-password-input"></button>
     </span>
   El button hay que posicionarlo absoluto adentro del input, no como
   bloque debajo (que es lo que pasaba con mi reset general). Sin esto se
   veía una rayita roja bajo el input.

   Reset min-height/padding/border/background del button override porque
   los selectores generales de submit lo afectan. */
.mk-account form .password-input {
  position: relative;
  display: block;
}

.mk-account form .show-password-input {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  min-height: 0;
  padding: 0;
  margin: 0;
  background: transparent;
  background-image: none;
  border: 0;
  border-radius: 0;
  cursor: pointer;
  color: var(--mk-ink-500);
  letter-spacing: 0;
  text-transform: none;
  font-weight: normal;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.mk-account form .show-password-input::after {
  content: "\1F441"; /* ojo unicode — fallback si WC no inyecta su ::before */
  font-size: 16px;
  line-height: 1;
  opacity: 0.7;
}

.mk-account form .show-password-input.display-password::after {
  opacity: 1;
}

.mk-account form .show-password-input:hover {
  background: transparent;
  color: var(--mk-green-700);
}

.mk-account form .show-password-input:focus {
  outline: 2px solid var(--mk-green-700);
  outline-offset: 2px;
}

/* Padding extra al input password para no chocar con el ojo. */
.mk-account form .password-input input[type="password"],
.mk-account form .password-input input[type="text"] {
  padding-right: 44px;
}

.mk-account form .button[type="submit"],
.mk-account form button[type="submit"],
.mk-account form input[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--mk-sp-3) var(--mk-sp-5);
  background: var(--mk-green-700);
  color: #fff;
  border: 2px solid var(--mk-green-700);
  border-radius: var(--mk-radius);
  font-family: var(--mk-font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: var(--mk-text-sm);
  cursor: pointer;
  transition: all var(--mk-trans);
  min-height: 44px;
}

.mk-account form .button[type="submit"]:hover,
.mk-account form button[type="submit"]:hover,
.mk-account form input[type="submit"]:hover {
  background: var(--mk-gold-500);
  border-color: var(--mk-gold-500);
  color: var(--mk-ink-900);
}

/* Required asterisk — color tinta sobria, no rojo grita. */
.mk-account form .required {
  color: var(--mk-gold-700);
  text-decoration: none;
  font-weight: 700;
}

/* ---------- Login form (cuando no está logueado) ----------
   El shortcode emite el template form-login.php default de Woo:

     <div class="u-columns col2-set" id="customer_login">
       <div class="u-column1 col-1">
         <h2>Acceder</h2>
         <form class="woocommerce-form woocommerce-form-login login">…</form>
       </div>
       <div class="u-column2 col-2">
         <h2>Registrarse</h2>
         <form class="woocommerce-form woocommerce-form-register register">…</form>
       </div>
     </div>

   Tratamos a u-column1/2 como cards y a col2-set como grid 2-col en desktop.
   El display:block !important del CSS anterior rompía justamente eso. */

.mk-account #customer_login.col2-set,
.mk-account .u-columns.col2-set {
  display: grid;
  gap: var(--mk-sp-5);
  grid-template-columns: 1fr;
  margin: 0;
  padding: 0;
}

@media (min-width: 768px) {
  .mk-account #customer_login.col2-set,
  .mk-account .u-columns.col2-set {
    grid-template-columns: 1fr 1fr;
    gap: var(--mk-sp-6);
  }
}

.mk-account .u-column1,
.mk-account .u-column2,
.mk-account #customer_login > .col-1,
.mk-account #customer_login > .col-2 {
  background: #fff;
  border: 1px solid var(--mk-bg-soft);
  border-radius: var(--mk-radius);
  padding: var(--mk-sp-6);
  width: auto;
  max-width: none;
  margin: 0;
  float: none;
  box-sizing: border-box;
}

/* Headers de cada card con el underline gold consistente con cart / dashboard. */
.mk-account #customer_login > div > h2,
.mk-account .u-column1 > h2,
.mk-account .u-column2 > h2 {
  font-size: var(--mk-text-xl);
  margin: 0 0 var(--mk-sp-4);
  position: relative;
  padding-bottom: var(--mk-sp-2);
  color: var(--mk-ink-900);
  font-family: var(--mk-font-display);
}

.mk-account #customer_login > div > h2::after,
.mk-account .u-column1 > h2::after,
.mk-account .u-column2 > h2::after {
  content: "";
  display: block;
  width: 40px;
  height: 2px;
  background: var(--mk-gold-500);
  margin-top: var(--mk-sp-2);
}

/* Forms internos: sin padding/border porque ya está en el card wrapper. */
.mk-account form.woocommerce-form-login,
.mk-account form.woocommerce-form-register,
.mk-account form.login,
.mk-account form.register {
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  max-width: none;
}

/* "Recuérdame" + botón en una línea en desktop, stack en mobile. */
.mk-account .woocommerce-form-login__rememberme {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--mk-text-sm);
  color: var(--mk-ink-700);
  margin-right: var(--mk-sp-3);
}

.mk-account .woocommerce-form-login__rememberme input[type="checkbox"] {
  width: auto;
  min-height: 0;
  margin: 0;
  accent-color: var(--mk-green-700);
}

.mk-account .lost_password,
.mk-account .woocommerce-LostPassword {
  margin-top: var(--mk-sp-3);
  font-size: var(--mk-text-sm);
}

.mk-account .lost_password a,
.mk-account .woocommerce-LostPassword a {
  color: var(--mk-green-700);
  text-decoration: none;
  font-weight: 500;
}

.mk-account .lost_password a:hover,
.mk-account .woocommerce-LostPassword a:hover {
  color: var(--mk-gold-700);
  text-decoration: underline;
}

/* ---------- Stock pill (reuso del mismo del listing) ---------- */

.mk-account-dashboard .mk-stock-pill {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: var(--mk-text-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.mk-account-dashboard .mk-stock-pill.is-in {
  background: var(--mk-green-100);
  color: var(--mk-green-800);
}

/* YITH Wishlist — limpieza en /my-account/lista-deseos/ */
.wishlist-title-container,
.woocommerce-MyAccount-content .wishlist_table caption {
  display: none !important;
}

.woocommerce-MyAccount-content .yith-wcwl-form,
.woocommerce-MyAccount-content .wishlist_table {
  width: 100% !important;
  margin: 0 auto !important;
}

.woocommerce-MyAccount-content .yith-wcwl-share {
  text-align: center;
  margin-top: var(--mk-sp-5);
}


/* Pisar el max-width:800px que viene de Hello Elementor o WC en my-account */
body.woocommerce-account main.site-main,
body.woocommerce-account .site-main,
body.woocommerce-account .page-content {
  max-width: none;
  width: 100%;
}

/* Forzar grid 1-col en mobile con misma especificidad que el de desktop */
@media (max-width: 1023px) {
  body.logged-in .mk-account .woocommerce {
    grid-template-columns: 1fr;
  }
}



/* Alinear título de Direcciones (facturación vs envío) */
.woocommerce-Address-title h2,
.woocommerce-Address h3 {
  min-height: 2.4em;
  line-height: 1.2;
}

/* Asegurar que ambas columnas alineen sus elementos desde arriba */
.woocommerce-Addresses,
.u-columns.addresses {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--mk-sp-5);
  align-items: start;
}

.woocommerce-Addresses > *,
.u-columns.addresses > * {
  width: 100%;
  margin: 0;
}

@media (max-width: 767px) {
  .woocommerce-Addresses,
  .u-columns.addresses {
    grid-template-columns: 1fr;
  }
}