/* My Account navigation — collapsible on phones. Desktop keeps the existing vertical list untouched; the toggle only exists below the lg breakpoint, where the full menu otherwise pushes the page content off screen. Progressive enhancement is driven by .mlq-nav-ready, which the script adds to once it has wired the toggle. Do NOT key this off the theme's `no-js` class — this theme sets it and never removes it, so anything hidden behind it stays hidden forever. Without JS the menu simply renders as the normal list. Plain mlq-* classes only: Bootstrap utilities carry !important in this theme and would beat these rules. */ .mlq-acct-nav-toggle { display: none; } @media (max-width: 991.98px) { .mlq-nav-ready .mlq-acct-nav-toggle { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; border: 1px solid #e1e5e9; border-radius: 8px; background: #fff; padding: 12px 16px; font-size: 15px; font-weight: 600; color: #414a54; cursor: pointer; } .mlq-nav-ready .mlq-acct-nav-toggle:focus-visible { outline: 2px solid #8cc63f; outline-offset: 2px; } .mlq-nav-ready .mlq-acct-nav-caret { width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 6px solid #6c7680; transition: transform .18s ease; flex-shrink: 0; } .mlq-nav-ready .mlq-acct-nav-toggle[aria-expanded="true"] .mlq-acct-nav-caret { transform: rotate(180deg); } /* Collapsed by default once JS is ready; .is-open reveals it. Height-based so it animates and so no Bootstrap display utility can fight it. */ .mlq-nav-ready .mulchspot-my-account-navigation { overflow: hidden; max-height: 0; transition: max-height .22s ease; } .mlq-nav-ready .mulchspot-my-account-navigation.is-open { max-height: 70vh; overflow-y: auto; } .mlq-nav-ready .mulchspot-my-account-navigation ul { margin-top: 10px; margin-bottom: 0; } /* Bigger tap targets once open. */ .mlq-nav-ready .mulchspot-my-account-navigation li a { display: block; padding: 12px 16px !important; } }