.elementor-2560 .elementor-element.elementor-element-5f075058{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;}.elementor-2560 .elementor-element.elementor-element-762f459{width:var( --container-widget-width, 101.398% );max-width:101.398%;--container-widget-width:101.398%;--container-widget-flex-grow:0;}.elementor-2560 .elementor-element.elementor-element-762f459.elementor-element{--flex-grow:0;--flex-shrink:0;}:root{--page-title-display:none;}/* Start custom CSS for woocommerce-my-account, class: .elementor-element-762f459 *//* === MI CUENTA: Panel gris adaptable === */
.woocommerce-account .woocommerce {
  background: #2C2C2C;
  padding: 28px;
  border-radius: 12px;            /* quítalo si lo quieres 100% rectangular */
  max-width: 1200px;              /* ancho máximo del panel */
  margin: 40px auto;              /* margen arriba/abajo y centrado */
}

/* Asegura que el menú y el contenido no “hereden” el gris si ya los tienes en blanco */
.woocommerce-account .woocommerce-MyAccount-navigation,
.woocommerce-account .woocommerce-MyAccount-content {
  background: #fff;
  border-radius: 0px;
}
/* === MI CUENTA: que el blanco llegue hasta abajo (misma altura menú + contenido) === */
.woocommerce-account .woocommerce{
  display: flex;
  gap: 24px;
  align-items: stretch;                 /* clave: estira ambos */
  min-height: calc(75vh - 220px);      /* ajusta el 220 si hace falta */
}

/* Quitamos floats/anchos antiguos de Woo */
.woocommerce-account .woocommerce-MyAccount-navigation,
.woocommerce-account .woocommerce-MyAccount-content{
  float: none !important;
  width: auto !important;
  min-height: 100%;
}

/* Ancho del menú y rellenos */
.woocommerce-account .woocommerce-MyAccount-navigation{
  flex: 0 0 320px;   /* ajusta ancho si quieres */
  padding: 14px;
}

.woocommerce-account .woocommerce-MyAccount-content{
  flex: 1;
  padding: 20px;
}

/* Responsive */
@media (max-width: 880px){
  .woocommerce-account .woocommerce{
    flex-direction: column;
    min-height: auto; /* en móvil no forzamos altura */
  }
  .woocommerce-account .woocommerce-MyAccount-navigation{
    flex: 1;
  }
}
/* ===== 1) Panel derecho: margen arriba (respira) ===== */
.woocommerce-account .woocommerce-MyAccount-content{
  padding-top: 24px; /* sube/baja a tu gusto */
}

/* Si tienes un aviso arriba (mensaje/info) que empuja raro, ajusta su margen */
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-message,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-info,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-error{
  margin-top: 0;
}


/* ===== 2) DIRECCIONES: alinear tarjetas y que queden más limpias ===== */
.woocommerce-account .woocommerce-Addresses{
  display: flex;
  gap: 24px;
  align-items: stretch;      /* misma altura */
  margin-top: 18px;
}

.woocommerce-account .woocommerce-Address{
  flex: 1;
}

/* En móvil, una debajo de otra */
@media (max-width: 900px){
  .woocommerce-account .woocommerce-Addresses{
    flex-direction: column;
  }
}


/* ===== 3) Dorado en vez de azul (menú activo + links editar) ===== */

/* Menú izquierdo: item activo en dorado */
.woocommerce-account .woocommerce-MyAccount-navigation .is-active a{
  color: #DFA023 !important;
}

/* Hover del menú: dorado también (opcional pero recomendado) */
.woocommerce-account .woocommerce-MyAccount-navigation a:hover{
  color: #DFA023 !important;
}

/* Links en la zona derecha (por ejemplo "Editar Dirección...") */
.woocommerce-account .woocommerce-MyAccount-content a{
  color: #DFA023 !important;
}
.woocommerce-account .elementor-widget-woocommerce-my-account .woocommerce-MyAccount-content{
  padding-top: 60px !important;
}

/* =========================================
   DIRECCIONES: colocar título y "Editar" en orden fijo
   aunque el HTML venga al revés
   ========================================= */

/* 2 columnas reales */
.woocommerce-account .woocommerce-Addresses{
  display: flex !important;
  gap: 32px;
  margin-top: 32px;
}
.woocommerce-account .woocommerce-Addresses .u-column1,
.woocommerce-account .woocommerce-Addresses .u-column2{
  float: none !important;
  width: 50% !important;
}

/* GRID en el header: forzamos layout independientemente del orden DOM */
.woocommerce-account .woocommerce-Address-title{
  display: grid !important;
  grid-template-areas:
    "title"
    "edit";
  row-gap: 8px;
  margin-bottom: 18px;
}

/* Da igual si es h2/h3/h4: lo tratamos como TITLE */
.woocommerce-account .woocommerce-Address-title h1,
.woocommerce-account .woocommerce-Address-title h2,
.woocommerce-account .woocommerce-Address-title h3,
.woocommerce-account .woocommerce-Address-title h4{
  grid-area: title !important;
  margin: 0 !important;
  line-height: 1.25;
}

/* Edit siempre debajo */
.woocommerce-account .woocommerce-Address-title .edit{
  grid-area: edit !important;
  justify-self: start;
  font-size: 14px;
  color: #DFA023 !important;
  text-decoration: none;
}
.woocommerce-account .woocommerce-Address-title .edit:hover{
  text-decoration: underline;
}

/* Tarjeta */
.woocommerce-account .woocommerce-Address address{
  border: 1px solid #d1d5db;
  padding: 16px;
  border-radius: 4px;
  font-style: normal;
  line-height: 1.6;
}

/* Móvil */
@media (max-width: 900px){
  .woocommerce-account .woocommerce-Addresses{
    flex-direction: column;
  }
  .woocommerce-account .woocommerce-Addresses .u-column1,
  .woocommerce-account .woocommerce-Addresses .u-column2{
    width: 100% !important;
  }
}
/* =========================================
   FIX: el "Editar dirección" está superpuesto.
   Lo devolvemos al flujo normal y lo bajamos.
   ========================================= */

/* El contenedor del título */
.woocommerce-account .woocommerce-Address-title{
  position: relative !important;
  margin-bottom: 40px !important;
}


/* Hover */
.woocommerce-account .woocommerce-Address-title .edit:hover{
  text-decoration: underline !important;
}

/* Título: aseguramos que no lo pisa nada */
.woocommerce-account .woocommerce-Address-title h1,
.woocommerce-account .woocommerce-Address-title h2,
.woocommerce-account .woocommerce-Address-title h3,
.woocommerce-account .woocommerce-Address-title h4{
  position: relative !important;
  z-index: 2 !important;
  margin: 0 !important;
  line-height: 1.2 !important;
}

.woocommerce-account .woocommerce-Addresses{
  display: flex !important;
  gap: 24px !important;
  align-items: flex-start !important;
}
.woocommerce-account .woocommerce-Addresses .u-column1,
.woocommerce-account .woocommerce-Addresses .u-column2{
  float: none !important;
  width: 50% !important;
}
/* ==============================
   DIRECCIONES: títulos en una sola línea
   ============================== */

.woocommerce-account .woocommerce-Address-title h1,
.woocommerce-account .woocommerce-Address-title h2,
.woocommerce-account .woocommerce-Address-title h3,
.woocommerce-account .woocommerce-Address-title h4{
  font-size: 26px !important;     /* tamaño más pequeño */
  line-height: 1.15 !important;
  white-space: nowrap !important; /* fuerza 1 línea */
}

/* Login / Registro: color dorado en títulos accede / regístrate */
.woocommerce-account:not(.logged-in) .woocommerce-form-login h2,
.woocommerce-account:not(.logged-in) .woocommerce-form-register h2 {
  color: #DFA023 !important;
}

/* Si hay sub-textos, enlaces o textos relacionados “Acceder” y “Registrarse” */
.woocommerce-account:not(.logged-in) .woocommerce-form-login a,
.woocommerce-account:not(.logged-in) .woocommerce-form-register a {
  color: #DFA023 !important;
}

/* Si el título está dentro de etiquetas no h2, por ejemplo .woocommerce-account h2 en otra estructura */
.woocommerce-account:not(.logged-in) h2,
.woocommerce-account:not(.logged-in) h1,
.woocommerce-account:not(.logged-in) .login-title,
.woocommerce-account:not(.logged-in) .register-title {
  color: #DFA023 !important;
}
/* Botón "Guardar cambios" – estilo dorado Fhido */
.woocommerce-account button[name="save_account_details"] {
  background: transparent !important;
  color: #D69A23 !important;
  border: 2px solid #D69A23 !important;
  border-radius: 6px; /* ajusta si quieres igualar otros botones */
  font-weight: 600;
  transition: all 0.25s ease;
}

/* Hover */
.woocommerce-account button[name="save_account_details"]:hover {
  background: #D69A23 !important;
  color: #ffffff !important;
}/* End custom CSS */