/* ══ Header account dropdown ══════════════════════════════════════════════════
 *
 * The menu that opens under the user's name once they are signed in: a list of
 * options with the Logout button pinned below, so more options can be added
 * above it over time.
 *
 * Its own file, and linked LAST on every page that carries the site header. It
 * lived in cart-checkout.css, which only three pages load, so the same dropdown
 * rendered two different ways depending which page you happened to be on. These
 * rules have to win over the per-page header stylesheets (style.css,
 * marketplace-number-style.css, non-category-responsive.css), which is why the
 * link goes after them rather than anywhere tidier.
 *
 * Everything here is scoped to .acct-dd / .acct-box, so the logged-out
 * Login/SignUp dropdown sharing the same trigger is untouched.
 */

/* ── Account (logged-in) dropdown menu ────────────────────────────────────────
 * A vertical list of options with the Logout button pinned at the bottom, so
 * more options can be added above it over time. Scoped to the .acct-dd variant
 * so the logged-out Login/Signup dropdown (two side-by-side buttons) is left
 * untouched. Loaded last on index/allnumbers/search-by-state → wins the cascade. */
/* Sized to match the logged-out Login/Signup dropdown exactly. Both panels hang
 * off the same trigger in the same spot, so the only thing that should change
 * when you sign in is what is inside them — not the width of the card or where
 * its arrow points. This variant used to set its own 268px against the other's
 * 482px, and an arrow at right:26px against right:50px, so the card visibly
 * shrank and its pointer slid sideways purely because you had logged in.
 *
 * The three numbers below are all borrowed rather than chosen, which is the
 * point: 482px and the arrow come from `.login-dropdown .resources-dropdown`,
 * and the 30px side inset with 18px below is what `.login-checkout-btns` uses
 * for the Login/SignUp pair. Carried on the box as padding instead of on each
 * child as margin, so `w-100` on the Logout button resolves against the same
 * content width the two buttons opposite it do. */
/* Narrower than the 482px it borrows everything else from. The Login/SignUp panel
   needs that width for two buttons side by side; this one stacks a short menu row
   above a single button, so the same width left it looking stretched. The arrow
   needs no adjustment — the panel is right-aligned to its trigger, so a narrower
   card still puts `right: 50px` under the same spot. */
.login-dropdown .resources-dropdown.acct-dd { min-width: 400px; }
.acct-box { padding: 18px 30px !important; }

.acct-menu {
    display: flex; flex-direction: column; gap: 2px;
    margin-bottom: 18px; padding-bottom: 14px;
    border-bottom: 1px solid #eef0f8;
}
.acct-menu__item {
    display: flex; align-items: center; justify-content: flex-start !important; gap: 12px;
    /* Pulled out by its own padding so the hover band has room to breathe while
       the label still lines up with the Logout button's edge above it. */
    margin: 0 -14px; padding: 12px 14px;
    border-radius: 12px; text-decoration: none; text-align: left;
    font-family: 'Poppins', sans-serif; font-size: 16px; font-weight: 500; color: #222328;
    transition: background .15s, color .15s; white-space: nowrap;
}
.acct-menu__item:hover { background: #f0f4ff; color: #4260CB; }
.acct-menu__item img, .acct-menu__ico { width: 20px; height: 20px; flex-shrink: 0; }

/* On phones the logged-out box drops to a 16px inset (non-category-responsive.css
   puts `margin: 16px` on the button pair and flattens the box padding), and the
   panel width is clamped to the viewport. Follow it down, or the account card
   keeps a 30px inset inside a much narrower panel and the Logout button ends up
   noticeably shorter than the Login/SignUp pair it is supposed to match. */
@media (max-width: 991.98px) {
    .acct-box { padding: 16px !important; }
}