/* Yondris Endpoints — My Account builder.
   WooCommerce's [woocommerce_my_account] wraps the navigation + content in a
   <div class="woocommerce">, and THAT div is the parent of
   .woocommerce-MyAccount-navigation and .woocommerce-MyAccount-content. So the
   flex/placement lives on that inner .woocommerce, not on our .yep-ma wrapper.
   Nav placement (left/right/top/bottom) + a style skin; CSS only. */

.yep-ma > .woocommerce { display: flex; gap: 24px; align-items: flex-start; }
.yep-ma .woocommerce-MyAccount-navigation { flex: 0 0 auto; }
.yep-ma .woocommerce-MyAccount-content { flex: 1 1 auto; min-width: 0; }

.yep-ma .woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; }
.yep-ma .woocommerce-MyAccount-navigation li { margin: 0; }
.yep-ma .woocommerce-MyAccount-navigation li a {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 14px; text-decoration: none; color: inherit; border-radius: 8px;
}

/* Avatar header (injected inside the nav, before the menu). */
.yep-ma-userbox { display: flex; align-items: center; gap: 10px; padding: 4px 0 14px; }
.yep-ma-userbox .yep-ma-avatar img { border-radius: 50%; display: block; }
.yep-ma-username { font-weight: 600; }

/* ---- Placement (flex-direction + order on the inner .woocommerce) ---- */
/* Sidebar (left / right): nav beside content, vertical menu. */
.yep-place--left > .woocommerce, .yep-place--right > .woocommerce { flex-direction: row; }
.yep-place--left .woocommerce-MyAccount-navigation,
.yep-place--right .woocommerce-MyAccount-navigation { flex-basis: 230px; }
.yep-place--left .woocommerce-MyAccount-navigation ul,
.yep-place--right .woocommerce-MyAccount-navigation ul { display: flex; flex-direction: column; gap: 4px; }
.yep-place--right .woocommerce-MyAccount-navigation { order: 2; } /* nav on the right */

/* Horizontal (top / bottom): nav as a bar above / below the content. */
.yep-place--top > .woocommerce, .yep-place--bottom > .woocommerce { flex-direction: column; }
.yep-place--top .woocommerce-MyAccount-navigation ul,
.yep-place--bottom .woocommerce-MyAccount-navigation ul { display: flex; flex-direction: row; flex-wrap: wrap; gap: 6px; }
.yep-place--bottom .woocommerce-MyAccount-navigation { order: 2; } /* nav below the content */
.yep-place--top .yep-ma-userbox, .yep-place--bottom .yep-ma-userbox { display: none; }

/* Composition: hide the menu icons when the template asks for it. */
.yep-ma.yep-no-icons .woocommerce-MyAccount-navigation li a::before { display: none !important; }

/* ============================ Styles (skins) ============================ */

/* Modern: soft pills, accent active item. */
.yep-style--modern .woocommerce-MyAccount-navigation li a { transition: background .15s ease, color .15s ease; }
.yep-style--modern .woocommerce-MyAccount-navigation li a:hover { background: #eef2ff; color: #3a4fd6; }
.yep-style--modern .woocommerce-MyAccount-navigation li.is-active a { background: #3a4fd6; color: #fff; }

/* Minimal: flat, underline active, no fills. */
.yep-style--minimal .woocommerce-MyAccount-navigation li a { border-radius: 0; }
.yep-style--minimal .woocommerce-MyAccount-navigation li a:hover { color: #111; }
.yep-style--minimal .woocommerce-MyAccount-navigation li.is-active a { box-shadow: inset 0 -2px 0 currentColor; font-weight: 600; }

/* Retro is a Pro style (falls back to modern without a licence), so no rules here. */

@media (max-width: 600px) {
    .yep-ma > .woocommerce { flex-direction: column !important; }
    .yep-ma .woocommerce-MyAccount-navigation { flex-basis: auto !important; width: 100%; order: 0 !important; }
}

@media (prefers-reduced-motion: reduce) {
    .yep-ma .woocommerce-MyAccount-navigation li a { transition: none !important; }
}