/* =================================================================== */
/* Correzione Responsività Tabelle per Firefox (e altri browser)     */
/* =================================================================== */
@media (max-width: 768px) {
  
  .woocommerce-MyAccount-content table {
    /* 
     * Questa è la regola chiave: dice al browser di forzare
     * un'interruzione di riga anche per parole lunghe e senza spazi,
     * come i codici sconto o i numeri d'ordine.
    */
    word-break: break-all;
    
    /* 
     * Ottimizza il layout della tabella per la responsività,
     * impedendo a una singola cella di dettare la larghezza totale.
    */
    table-layout: fixed;
    width: 100% !important;
  }
}


/* Layout principale */
.woocommerce-account-layout {
    display: flex;
    gap: 40px;
    align-items: flex-start;
    flex-wrap: nowrap;
}

/* Menu laterale */
.woocommerce-MyAccount-navigation {
    flex: 0 0 250px;
    background-color: #f9f9f9;
    padding: 20px;
    border-radius: 6px;
    box-shadow: 0 0 5px rgba(0,0,0,0.05);
}

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

.woocommerce-MyAccount-navigation li {
    margin-bottom: 12px;
}

.woocommerce-MyAccount-navigation a {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: #333;
    font-weight: 500;
    padding: 8px 12px;
    border-radius: 4px;
    transition: background-color 0.2s ease;
}

.woocommerce-MyAccount-navigation a:hover {
    background-color: #13aff0;
}

/* Icone Font Awesome */
.woocommerce-MyAccount-navigation i.fa {
    margin-right: 10px;
    font-size: 16px;
    color: #666;
}

/* Contenuto principale */
.woocommerce-MyAccount-content {
    flex: 1;
    padding: 20px;
    background-color: #fff;
    border-radius: 6px;
    box-shadow: 0 0 5px rgba(0,0,0,0.05);
}

/* =================================================================== */
/* Mobile Responsive: Soluzione Definitiva basata sulla struttura reale */
/* =================================================================== */
@media (max-width: 768px) {
    
  /* 
   * 1. Selezioniamo il wrapper personalizzato del tuo tema 
   *    e gli diciamo di impilare gli elementi verticalmente.
  */
  .xw-account-wrapper {
    flex-direction: column !important; /* La regola più importante! */
    gap: 20px !important; /* Riduciamo lo spazio per il mobile */
  }

  /* 
   * 2. Ci assicuriamo che sia il menu che il contenuto,
   *    all'interno del wrapper, occupino tutta la larghezza.
  */
  .xw-account-wrapper .woocommerce-MyAccount-navigation,
  .xw-account-wrapper .woocommerce-MyAccount-content {
    width: 100% !important;
    max-width: 100% !important; /* Sicurezza extra */
    flex: none !important; /* Annulla le regole di flessibilità del desktop */
  }
}