/* 1. Turn the entry-content into a side-by-side flex layout */
.woocommerce .entry-content {
  display: flex;
  align-items: flex-start; /* top-align sidebar & main column */
  gap: 2rem;               /* space between sidebar & main */
  padding: 20px;           /* your existing padding */
  box-sizing: border-box;
  margin-top: 80px;        /* keep below your sticky header */
}

/* 2. Constrain the sidebar to a fixed width */
.account-nav {
  flex: 0 0 220px;         /* never grow, never shrink below 220px */
  max-width: 220px;
  padding: 1rem;
  border-radius: 8px;
  box-sizing: border-box;
}

/* 3. Style the nav links for clarity */
.account-nav .woocommerce-MyAccount-navigation-link a {
  display: block;
  color: #fff !important;
  padding: 0.5rem 0.75rem;
  border-radius: 8px!important;
  margin-bottom: 0.5rem;
  transition: background 0.2s;
}
.account-nav .woocommerce-MyAccount-navigation-link.is-active a {
  background: #6C5B7B;
  font-weight: bold;
}
.account-nav .woocommerce-MyAccount-navigation-link a:hover {
  background: #33334d;
}

/* 4. Main content area flexes to fill */
.woocommerce-MyAccount-content {
  flex: 1 1 auto;          /* grow to take remaining space */
}
.account-main {
  background: #fffafaec!important;
  padding: 1.5rem;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}

/* 5. Responsive: stack on mobile */
@media (max-width: 768px) {
  .woocommerce .entry-content {
    flex-direction: column;
    margin-top: 0;         /* header overlap handled elsewhere */
  }
  .account-nav {
    width: 100%;
    max-width: none;
    margin-bottom: 1.5rem;
  }
}

.account-nav .woocommerce-MyAccount-navigation ul {
  list-style: none;       /* kills the bullets */
  margin: 0;              /* reset any default ul margin */
  padding: 0;             /* reset default ul padding */
}

.account-nav .woocommerce-MyAccount-navigation-link a {
  display: block;         /* lets padding cover the full width */
  width: 100%;            /* ensure it spans the sidebar */
}

.account-nav .woocommerce-MyAccount-navigation-link {
  margin-bottom: 0.5rem;  /* adjust as you like */
}


/* 1. Make sure the sidebar wrapper stays 220px wide */
.account-nav {
  flex: 0 0 220px;      /* fixed width */
  max-width: 220px;
  width: 220px;         /* ensure it never shrinks */
}

/* 2. Stretch the nav itself to fill that wrapper */
.account-nav .woocommerce-MyAccount-navigation {
  width: 100%;          /* take the full 220px */
}

/* 3. Stretch the UL to fill nav */
.account-nav .woocommerce-MyAccount-navigation ul {
  width: 100%;          /* remove any auto-sizing */
}

/* 4. Ensure each link fills the full width */
.account-nav .woocommerce-MyAccount-navigation-link a {
  display: block;
  width: 100%;
  text-decoration: none;
  border-radius: 8px!important;
}


/* 1) Make every link in the sidebar visible by default */
.account-nav .woocommerce-MyAccount-navigation-link a {
  color: #fff !important;      /* full white so it stands out on dark bg */
  opacity: 0.8;             /* a little tone-down for non-active */
  background: #C06C84;
}

/* 2) Strengthen the active link */
.account-nav .woocommerce-MyAccount-navigation-link.is-active a {
  color: #fff !important;      /* pure white for active */
  opacity: 1 !important;       /* full opacity on the selected tab */
  background: #C06C84;         /* ensure background stays visible */
}

.account-nav .woocommerce-MyAccount-navigation-link a:hover { 
  background: rgba(196, 112, 145, 0.8); 
}