/*
 * Account navigation compatibility layer.
 *
 * Skinora AI gives My Beauty Profile a distinct surface. Keep that treatment,
 * but normalize only the row box model so it aligns with the surrounding
 * Account Studio items. No endpoint-content or dashboard-card selectors live
 * in this file.
 */

.woocommerce-account .woocommerce-MyAccount-navigation ul > li {
  box-sizing: border-box;
  min-height: 48px !important;
  height: 48px !important;
  margin: 2px 0 !important;
  padding: 0 !important;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul > li > a,
.woocommerce-account .woocommerce-MyAccount-navigation ul > li.woocommerce-MyAccount-navigation-link--beauty-profile > a {
  box-sizing: border-box;
  min-height: 48px !important;
  height: 48px !important;
}

/* Match the Beauty Profile sparkle to Account Studio's 27px icon tiles while
   preserving its existing glyph, gradient row, and AI badge. */
.woocommerce-account .woocommerce-MyAccount-navigation ul > li.woocommerce-MyAccount-navigation-link--beauty-profile > a {
  display: flex !important;
  align-items: center !important;
  padding-left: 13px !important;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul > li.woocommerce-MyAccount-navigation-link--beauty-profile > a::before {
  display: inline-grid !important;
  flex: 0 0 27px !important;
  width: 27px !important;
  height: 27px !important;
  place-items: center !important;
  margin-right: 10px !important;
  border: 1px solid #e8ddd5 !important;
  border-radius: 9px !important;
  color: #9a762d !important;
  background: #fff !important;
  font-family: Arial, sans-serif !important;
  font-size: 15px !important;
  font-style: normal !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  box-shadow: 0 4px 10px rgba(63, 37, 41, .04) !important;
}

/* Skinora AI's shared account-menu rule creates the extra rule below the
   highlighted Beauty Profile row. Account Studio uses card-like rows instead,
   so remove separators consistently from the whole menu. */
.woocommerce-account .woocommerce-MyAccount-navigation ul > li::after,
.woocommerce-account .woocommerce-MyAccount-navigation ul > li.woocommerce-MyAccount-navigation-link--beauty-profile::after {
  content: none !important;
  display: none !important;
}

@media (max-width: 767px) {
  .woocommerce-account .woocommerce-MyAccount-navigation ul > li {
    min-height: 52px !important;
    height: 52px !important;
  }

  .woocommerce-account .woocommerce-MyAccount-navigation ul > li > a,
  .woocommerce-account .woocommerce-MyAccount-navigation ul > li.woocommerce-MyAccount-navigation-link--beauty-profile > a {
    min-height: 52px !important;
    height: 52px !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
}