/*
 * Life Spotlight — WooCommerce My Account layout override.
 * Intentionally isolated from chart/card layout: this file only turns the
 * outer My Account sidebar/content structure into top tabs + one content row.
 */
body.woocommerce-account.ls-hd-account-layout .woocommerce,
body.woocommerce-account.ls-hd-account-layout main .woocommerce,
body.woocommerce-account.ls-hd-account-layout .entry-content > .woocommerce {
  display: flex !important;
  flex-direction: column !important;
  grid-template-columns: none !important;
  grid-template-rows: auto auto !important;
  align-items: stretch !important;
  gap: 0 !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
}

body.woocommerce-account.ls-hd-account-layout .woocommerce::before,
body.woocommerce-account.ls-hd-account-layout .woocommerce::after {
  display: none !important;
  content: none !important;
}

/* The four account items are the first row. */
body.woocommerce-account.ls-hd-account-layout nav.woocommerce-MyAccount-navigation,
body.woocommerce-account.ls-hd-account-layout .woocommerce-MyAccount-navigation {
  position: static !important;
  inset: auto !important;
  order: 1 !important;
  float: none !important;
  clear: both !important;
  display: block !important;
  flex: 0 0 auto !important;
  align-self: stretch !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  height: auto !important;
  margin: 0 0 36px !important;
  padding: 0 !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(151,112,48,.23) !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
}

body.woocommerce-account.ls-hd-account-layout .woocommerce-MyAccount-navigation ul {
  display: flex !important;
  flex-flow: row nowrap !important;
  justify-content: stretch !important;
  align-items: stretch !important;
  gap: 0 !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  list-style: none !important;
}

body.woocommerce-account.ls-hd-account-layout .woocommerce-MyAccount-navigation ul > li {
  float: none !important;
  display: flex !important;
  flex: 1 1 0 !important;
  width: 25% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

body.woocommerce-account.ls-hd-account-layout .woocommerce-MyAccount-navigation ul > li > a {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  min-height: 56px !important;
  padding: 0 12px !important;
  border: 0 !important;
  background: transparent !important;
  color: #7d705f !important;
  font-size: .94rem !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  text-align: center !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  box-sizing: border-box !important;
  box-shadow: none !important;
}

body.woocommerce-account.ls-hd-account-layout .woocommerce-MyAccount-navigation ul > li > a::before {
  display: none !important;
  content: none !important;
}

body.woocommerce-account.ls-hd-account-layout .woocommerce-MyAccount-navigation ul > li > a::after {
  content: "" !important;
  position: absolute !important;
  right: 50% !important;
  bottom: -1px !important;
  left: 50% !important;
  display: block !important;
  width: auto !important;
  height: 2px !important;
  margin: 0 !important;
  background: #b78a3d !important;
  transition: left .2s ease,right .2s ease !important;
}

body.woocommerce-account.ls-hd-account-layout .woocommerce-MyAccount-navigation ul > li.is-active > a,
body.woocommerce-account.ls-hd-account-layout .woocommerce-MyAccount-navigation ul > li:hover > a {
  color: #443729 !important;
}

body.woocommerce-account.ls-hd-account-layout .woocommerce-MyAccount-navigation ul > li.is-active > a::after,
body.woocommerce-account.ls-hd-account-layout .woocommerce-MyAccount-navigation ul > li:hover > a::after {
  right: 0 !important;
  left: 0 !important;
}

/* The selected account screen is always the second row and fills the row. */
body.woocommerce-account.ls-hd-account-layout .woocommerce-MyAccount-content {
  position: static !important;
  inset: auto !important;
  order: 2 !important;
  float: none !important;
  clear: both !important;
  display: block !important;
  flex: 0 0 auto !important;
  align-self: stretch !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: none !important;
}

/* Prevent common theme clearfix/column helpers from reintroducing side-by-side widths. */
body.woocommerce-account.ls-hd-account-layout .woocommerce-MyAccount-navigation + .woocommerce-MyAccount-content {
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Keep account buttons vertically centered regardless of theme line-height/padding rules. */
body.woocommerce-account.ls-hd-account-layout .woocommerce-MyAccount-content .button,
body.woocommerce-account.ls-hd-account-layout .woocommerce-MyAccount-content button.button,
body.woocommerce-account.ls-hd-account-layout .woocommerce-MyAccount-content input[type="submit"],
body.woocommerce-account.ls-hd-account-layout .ls-hd-account .button,
body.woocommerce-account.ls-hd-account-layout .ls-hd__field button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1.2 !important;
  box-sizing: border-box !important;
  text-align: center !important;
}

@media (max-width: 760px) {
  body.woocommerce-account.ls-hd-account-layout .woocommerce-MyAccount-navigation {
    margin-bottom: 26px !important;
  }
  body.woocommerce-account.ls-hd-account-layout .woocommerce-MyAccount-navigation ul > li > a {
    min-height: 52px !important;
    padding: 0 6px !important;
    font-size: .86rem !important;
  }
}

/* beta5: release theme-level My Account sidebar wrappers so the tabs can
 * actually span the same full width as the account content. */
body.woocommerce-account.ls-hd-account-layout .ls-hd-account-root,
body.woocommerce-account.ls-hd-account-layout .ls-hd-account-flow-root {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

body.woocommerce-account.ls-hd-account-layout .ls-hd-account-nav-parent {
  float: none !important;
  clear: both !important;
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  flex: 0 0 100% !important;
  flex-basis: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Common theme wrappers: make the account sidebar itself full width even
 * before JS runs. This covers WoodMart and several WooCommerce theme layouts. */
body.woocommerce-account.ls-hd-account-layout .woocommerce-my-account-wrapper,
body.woocommerce-account.ls-hd-account-layout .wd-my-account-sidebar,
body.woocommerce-account.ls-hd-account-layout .my-account-sidebar,
body.woocommerce-account.ls-hd-account-layout .account-sidebar,
body.woocommerce-account.ls-hd-account-layout .woocommerce-account-sidebar {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  flex: 0 0 100% !important;
}

/* Four tabs occupy the entire row: 25% + 25% + 25% + 25%. */
body.woocommerce-account.ls-hd-account-layout .woocommerce-MyAccount-navigation ul {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  width: 100% !important;
  max-width: none !important;
  gap: 0 !important;
  overflow: visible !important;
}

body.woocommerce-account.ls-hd-account-layout .woocommerce-MyAccount-navigation ul > li {
  display: block !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  flex: none !important;
}

body.woocommerce-account.ls-hd-account-layout .woocommerce-MyAccount-navigation ul > li > a {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 58px !important;
  min-height: 58px !important;
  padding: 0 10px !important;
  line-height: 1.2 !important;
  text-align: center !important;
}

@media (max-width: 640px) {
  body.woocommerce-account.ls-hd-account-layout .woocommerce-MyAccount-navigation ul {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}