.elementor-243 .elementor-element.elementor-element-ab30665{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-243 .elementor-element.elementor-element-6e71903{--display:flex;--padding-top:80px;--padding-bottom:80px;--padding-left:0px;--padding-right:0px;}:root{--page-title-display:none;}@media(max-width:1024px){.elementor-243 .elementor-element.elementor-element-9b54378{padding:20px 20px 20px 20px;}}@media(min-width:768px){.elementor-243 .elementor-element.elementor-element-ab30665{--content-width:100%;}}/* Start custom CSS for woocommerce-my-account, class: .elementor-element-9b54378 */<!-- ============================================================
AMELIA · ESTILOS PARA "MI CUENTA" — WooCommerce nativo (Elementor)
Widget: "My Account" nativo de WooCommerce para Elementor.
Cubre: menú lateral de navegación, tabla de pedidos, tabla de
suscripciones (WooCommerce Subscriptions), formularios de
direcciones y detalles de la cuenta, y mensajes de WooCommerce.

Pensado para pegar en:
  - Widget de WooCommerce ("My Account") → pestaña Avanzado →
    "CSS personalizado" (Custom CSS), si tenés Elementor Pro
  - o en un widget de HTML aparte con <style>, si no tenés Pro.

Estilos consistentes con el resto del sitio: Host Grotesk,
verde de marca (--g), mismo patrón de botón pill con ícono flecha.
============================================================ -->
<style>
@import url('https://fonts.googleapis.com/css2?family=Host+Grotesk:wght@400;500;600;700&display=swap');

/* ── Contenedor general ── */
.woocommerce-account .woocommerce{
  max-width:1360px !important;
  margin:0 auto !important;
  padding:clamp(40px,5vw,64px) clamp(20px,4vw,32px) !important;
  font-family:'Host Grotesk','Montserrat',sans-serif !important;
  color:#0B0B0B !important;
  display:grid !important;
  grid-template-columns:240px 1fr !important;
  gap:clamp(32px,4vw,56px) !important;
  align-items:start !important;
}

/* ── Menú lateral de navegación (Pedidos, Direcciones, etc.) ── */
.woocommerce-account .woocommerce-MyAccount-navigation{
  border:1px solid rgba(11,11,11,.12) !important;
  border-radius:8px !important;
  padding:8px !important;
  background:#fff !important;
}
.woocommerce-account .woocommerce-MyAccount-navigation ul{
  list-style:none !important;
  margin:0 !important;
  padding:0 !important;
  display:flex !important;
  flex-direction:column !important;
  gap:2px !important;
}
.woocommerce-account .woocommerce-MyAccount-navigation li{
  margin:0 !important;
}
.woocommerce-account .woocommerce-MyAccount-navigation li a{
  display:block !important;
  padding:12px 14px !important;
  border-radius:6px !important;
  font-size:13.5px !important;
  font-weight:600 !important;
  letter-spacing:.01em !important;
  color:rgba(11,11,11,.7) !important;
  text-decoration:none !important;
  transition:background .2s ease, color .2s ease !important;
}
.woocommerce-account .woocommerce-MyAccount-navigation li a:hover{
  background:rgba(0,106,78,.06) !important;
  color:#006A4E !important;
}
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a{
  background:#006A4E !important;
  color:#fff !important;
}

/* ── Contenido principal (a la derecha del menú) ── */
.woocommerce-account .woocommerce-MyAccount-content{
  min-width:0 !important;
}
.woocommerce-account .woocommerce-MyAccount-content > p{
  font-size:14.5px !important;
  line-height:1.75 !important;
  color:rgba(11,11,11,.72) !important;
  margin:0 0 16px !important;
}
.woocommerce-account .woocommerce-MyAccount-content a{
  color:#006A4E !important;
  text-decoration:underline !important;
  text-underline-offset:3px !important;
}
.woocommerce-account .woocommerce-MyAccount-content strong{
  color:#0B0B0B !important;
}

/* ── Título de bienvenida (ej. "Hola, Nombre (no eres Nombre? Cerrar sesión)") ── */
.woocommerce-account .woocommerce-MyAccount-content > p:first-child{
  font-size:15px !important;
  padding-bottom:20px !important;
  margin-bottom:24px !important;
  border-bottom:1px solid rgba(11,11,11,.1) !important;
}

/* ── Tablas: pedidos, suscripciones (WooCommerce Subscriptions), descargas ── */
.woocommerce-account table.woocommerce-orders-table,
.woocommerce-account table.woocommerce-MyAccount-orders,
.woocommerce-account table.subscriptions_table,
.woocommerce-account table.my_account_orders{
  width:100% !important;
  border-collapse:collapse !important;
  font-size:13.5px !important;
}
.woocommerce-account table.woocommerce-orders-table thead th,
.woocommerce-account table.subscriptions_table thead th{
  text-align:left !important;
  font-size:11px !important;
  font-weight:700 !important;
  letter-spacing:.08em !important;
  text-transform:uppercase !important;
  color:rgba(11,11,11,.5) !important;
  padding:12px 14px !important;
  border-bottom:2px solid rgba(11,11,11,.1) !important;
}
.woocommerce-account table.woocommerce-orders-table tbody td,
.woocommerce-account table.subscriptions_table tbody td{
  padding:14px !important;
  border-bottom:1px solid rgba(11,11,11,.08) !important;
  color:rgba(11,11,11,.78) !important;
}
.woocommerce-account table.woocommerce-orders-table tbody tr:hover,
.woocommerce-account table.subscriptions_table tbody tr:hover{
  background:rgba(0,106,78,.03) !important;
}

/* Estados de pedido/suscripción (chips de color) */
.woocommerce-account .woocommerce-orders-table__cell-order-status,
.woocommerce-account .subscription-status{
  display:inline-block !important;
  padding:4px 12px !important;
  border-radius:100px !important;
  font-size:11px !important;
  font-weight:700 !important;
  letter-spacing:.04em !important;
  text-transform:uppercase !important;
}
.woocommerce-account .subscription-status.status-active,
.woocommerce-account .order-status.status-completed{
  background:rgba(0,106,78,.1) !important;
  color:#006A4E !important;
}
.woocommerce-account .subscription-status.status-cancelled,
.woocommerce-account .subscription-status.status-expired,
.woocommerce-account .order-status.status-cancelled,
.woocommerce-account .order-status.status-failed{
  background:rgba(220,53,69,.1) !important;
  color:#dc3545 !important;
}
.woocommerce-account .subscription-status.status-on-hold,
.woocommerce-account .order-status.status-pending,
.woocommerce-account .order-status.status-on-hold{
  background:rgba(230,162,60,.12) !important;
  color:#b8860b !important;
}

/* ── Botones de acción dentro de tablas (Ver, Pagar, Cancelar, etc.) ── */
.woocommerce-account .woocommerce-button,
.woocommerce-account a.button,
.woocommerce-account button.button{
  display:inline-flex !important;
  align-items:center !important;
  height:38px !important;
  padding:0 20px !important;
  border-radius:100px !important;
  font-family:'Host Grotesk','Montserrat',sans-serif !important;
  font-size:12.5px !important;
  font-weight:600 !important;
  letter-spacing:.01em !important;
  text-decoration:none !important;
  cursor:pointer !important;
  border:0 !important;
  white-space:nowrap !important;
  background-color:#006A4E !important;
  color:#fff !important;
  transition:background-color .3s ease !important;
}
.woocommerce-account .woocommerce-button:hover,
.woocommerce-account a.button:hover,
.woocommerce-account button.button:hover{
  background-color:#004D39 !important;
  color:#fff !important;
}
/* Botón de cancelar suscripción/pedido: variante outline para diferenciarlo */
.woocommerce-account a.button.cancel,
.woocommerce-account a[href*="cancel"].button{
  background-color:transparent !important;
  color:#dc3545 !important;
  border:1.5px solid rgba(220,53,69,.4) !important;
}
.woocommerce-account a.button.cancel:hover,
.woocommerce-account a[href*="cancel"].button:hover{
  background-color:#dc3545 !important;
  color:#fff !important;
  border-color:#dc3545 !important;
}

/* ── Formularios: Direcciones / Detalles de la cuenta ── */
.woocommerce-account form .form-row{
  margin-bottom:16px !important;
}
.woocommerce-account form label{
  display:block !important;
  font-size:12px !important;
  font-weight:600 !important;
  letter-spacing:.02em !important;
  color:rgba(11,11,11,.6) !important;
  margin-bottom:6px !important;
}
.woocommerce-account form .required{
  color:#006A4E !important;
  text-decoration:none !important;
}
.woocommerce-account form input.input-text,
.woocommerce-account form textarea,
.woocommerce-account form select{
  width:100% !important;
  height:46px !important;
  padding:0 16px !important;
  border:1.5px solid rgba(11,11,11,.14) !important;
  border-radius:8px !important;
  font-family:'Host Grotesk','Montserrat',sans-serif !important;
  font-size:14px !important;
  color:#0B0B0B !important;
  background:#fff !important;
  transition:border-color .2s ease !important;
}
.woocommerce-account form textarea{
  height:auto !important;
  min-height:100px !important;
  padding:12px 16px !important;
}
.woocommerce-account form input.input-text:focus,
.woocommerce-account form textarea:focus,
.woocommerce-account form select:focus{
  outline:none !important;
  border-color:#006A4E !important;
}
.woocommerce-account form button[type="submit"],
.woocommerce-account form .woocommerce-Button{
  display:inline-flex !important;
  align-items:center !important;
  height:48px !important;
  padding:0 26px !important;
  border-radius:100px !important;
  font-family:'Host Grotesk','Montserrat',sans-serif !important;
  font-size:14px !important;
  font-weight:600 !important;
  cursor:pointer !important;
  border:0 !important;
  background-color:#006A4E !important;
  color:#fff !important;
  transition:background-color .3s ease !important;
}
.woocommerce-account form button[type="submit"]:hover,
.woocommerce-account form .woocommerce-Button:hover{
  background-color:#004D39 !important;
}

/* ── Mensajes de WooCommerce (éxito, error, aviso) ── */
.woocommerce-account .woocommerce-message,
.woocommerce-account .woocommerce-error,
.woocommerce-account .woocommerce-info{
  list-style:none !important;
  padding:14px 18px !important;
  border-radius:8px !important;
  font-size:13.5px !important;
  margin-bottom:20px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  flex-wrap:wrap !important;
  gap:10px !important;
}
.woocommerce-account .woocommerce-message{
  background:rgba(0,106,78,.08) !important;
  color:#004D39 !important;
  border:1px solid rgba(0,106,78,.2) !important;
}
.woocommerce-account .woocommerce-error{
  background:rgba(220,53,69,.08) !important;
  color:#a02332 !important;
  border:1px solid rgba(220,53,69,.2) !important;
}
.woocommerce-account .woocommerce-info{
  background:rgba(11,11,11,.04) !important;
  color:rgba(11,11,11,.7) !important;
  border:1px solid rgba(11,11,11,.1) !important;
}

/* ── RESPONSIVE ── */
@media(max-width:900px){
  .woocommerce-account .woocommerce{
    grid-template-columns:1fr !important;
  }
  .woocommerce-account .woocommerce-MyAccount-navigation ul{
    flex-direction:row !important;
    flex-wrap:wrap !important;
  }
  .woocommerce-account .woocommerce-MyAccount-navigation li a{
    padding:10px 12px !important;
  }
  .woocommerce-account table.woocommerce-orders-table,
  .woocommerce-account table.subscriptions_table{
    display:block !important;
    overflow-x:auto !important;
    white-space:nowrap !important;
  }
}

@media(prefers-reduced-motion:reduce){
  .woocommerce-account *{
    transition:none !important;
  }
}
</style>/* End custom CSS */