/* Sub-menu active state: keep text gray, use lighter bg */
.buddypanel-menu .sub-menu .current-menu-item > a {
    background-color: rgba(0, 0, 0, 0.04) !important;
    color: inherit !important;
}


/* Notifications is OFF the top strip (keep-list, Tuan 7/13: Profile /
   Courses / Orders / Credit Bundles / Settings). This replaces the old
   unhide override that lived here — explicit hide, since BB's own
   .main-navs hide rule isn't reliable across screens on this build.
   Notifications stays reachable via the left BuddyPanel + header
   dropdown. */
body .main-navs #notifications-personal-li,
body.bp-user .main-navs #notifications-personal-li,
#buddypress .main-navs #notifications-personal-li,
/* 3-id variant: at narrow widths BB's overflow JS re-parents the li into
   its More dropdown, where the flatten rule
   `#buddypress nav#object-nav .bb_more_dropdown li {display:block !important}`
   out-specifies the selectors above — this one out-ids it back. */
#buddypress nav#object-nav ul li#notifications-personal-li {
    display: none !important;
}

/* BP horizontal tab strip: natural-width tabs (no truncation), wrap to
   a second row when they overflow. Icon and label sit on the same
   baseline via inline-flex on the anchor. BB defaults float: left on
   each li, which is what was preventing the wrap — override that. */
#buddypress nav#object-nav > ul {
    display: flex !important;
    flex-wrap: wrap !important;
}
#buddypress nav#object-nav > ul > li:not(.hideshow) {
    float: none !important;
}
/* BB nav More-dropdown items use absolute-positioned icons by default
   (position: absolute; left: 14px) plus padding-left: 40px on the link.
   Switch to flex (block-level, full width) so the entire row is one
   click target — Info and Log Out have empty li gutters otherwise. */
#buddypress nav#object-nav .bb_more_dropdown li > a {
    display: flex !important;
    justify-content: flex-start !important;
    align-items: center !important;
    gap: 6px !important;
    padding-left: 14px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}
#buddypress nav#object-nav .bb_more_dropdown li {
    display: block !important;
    width: 100% !important;
}
#buddypress nav#object-nav .bb_more_dropdown li > a > i.bb-icon-l,
#buddypress nav#object-nav .bb_more_dropdown li > a > svg.cfe-ic {
    position: static !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    margin: 0 !important;
    font-size: 14px !important;
    line-height: 1 !important;
}
#buddypress nav#object-nav > ul > li > a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    overflow: visible;
    text-overflow: clip;
}
#buddypress nav#object-nav li > a > i.bb-icon-l,
#buddypress nav#object-nav li > a > svg.cfe-ic {
    margin: 0;
    font-size: 14px;
    line-height: 1;
    vertical-align: baseline;
}
/* Render the cfe-icon SVG inline with the label.
   width/height: 1em pegs the SVG to the parent a font-size (14px above)
   so the icon scales with the inline iconfont rules. */
#buddypress nav#object-nav li > a > svg.cfe-ic,
#buddypress nav#object-nav .bb_more_dropdown li > a > svg.cfe-ic {
    width: 1em;
    height: 1em;
    vertical-align: middle;
    flex: 0 0 auto;
}

#buddypress nav#object-nav li > a > .bb-single-nav-item-point {
    display: inline;
    overflow: visible;
    text-overflow: clip;
}


/* ----------------------------------------------------------------------
 * Header avatar dropdown — single-column layout (≥768px).
 * Was a two-column grid with hand-tuned nth-child placement; adding the
 * Info entry shifted Log Out off the end of those rules, leaving empty
 * space in col 2. Single column flows top-to-bottom without gaps and
 * mirrors the left BuddyPanel ordering. !important wins over BB theme.css.
 * -------------------------------------------------------------------- */
@media (min-width: 768px) {
    .user-wrap.menu-item-has-children .sub-menu,
    .user-wrap.menu-item-has-children .sub-menu .wrapper,
    .user-wrap.menu-item-has-children .sub-menu-inner,
    .user-wrap.menu-item-has-children #header-my-account-menu {
        min-width: 280px !important;
        width: 280px !important;
    }
    .user-wrap.menu-item-has-children #header-my-account-menu {
        display: block !important;
        box-sizing: border-box;
    }
    .user-wrap.menu-item-has-children #header-my-account-menu > li {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box;
    }
    /* Sit the count badge inline next to the label text.
       Markup-wrap in JS moves .count inside the label span so this rule
       applies whether .count is a direct child of <a> or nested in <span>. */
    .user-wrap.menu-item-has-children #header-my-account-menu a .count {
        margin-left: 8px !important;
    }
    /* Sub-menu (Unread/Read) count: kill BB's default float so it follows
       inline order under the new wrap. */
    .user-wrap.menu-item-has-children .sub-menu-inner .count {
        float: none !important;
    }
    /* Allow labels their natural width (defeat any inherited ellipsis). */
    .user-wrap.menu-item-has-children #header-my-account-menu > li > a,
    .user-wrap.menu-item-has-children #header-my-account-menu > li > a > span {
        white-space: nowrap;
        overflow: visible;
        text-overflow: clip;
    }
    /* Tighten vertical rhythm so the dropdown is more compact. */
    .user-wrap.menu-item-has-children #header-my-account-menu a {
        padding-top: 7px !important;
        padding-bottom: 7px !important;
    }
    /* Render sub-menus inline (not as a hover popup) so they appear
       indented under their parent — matches the left BuddyPanel pattern. */
    .user-wrap.menu-item-has-children #header-my-account-menu .wrapper.ab-submenu,
    .user-wrap.menu-item-has-children #header-my-account-menu .ab-sub-wrapper {
        display: block !important;
        position: static !important;
        background: transparent !important;
        box-shadow: none !important;
        border-radius: 0 !important;
        padding: 0 !important;
        left: auto !important;
        right: auto !important;
        top: auto !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
    .user-wrap.menu-item-has-children #header-my-account-menu .bb-sub-menu,
    .user-wrap.menu-item-has-children #header-my-account-menu li > ul {
        display: block !important;
        position: static !important;
        background: transparent !important;
        box-shadow: none !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    /* Indent sub-menu items so they read as nested under the parent. */
    .user-wrap.menu-item-has-children #header-my-account-menu .bb-sub-menu > li > a,
    .user-wrap.menu-item-has-children #header-my-account-menu .ab-submenu li > a {
        padding-left: 56px !important;
    }
    /* Top-level item alignment (Tuan 7/14): theme items use a BB icon-font
       <i.bb-icon-l> that the theme positions ABSOLUTELY in the left gutter, so
       their label sits at the padding edge and reads flush. CFE-injected items
       (Addresses / Credit Bundles / Payment Methods / Info) render an in-flow
       <svg.cfe-ic> instead, so BOTH icon and label get pushed past the gutter
       and read as wrongly indented. Normalize every DIRECT child link to one
       in-flow flex layout so both icon types share a single gutter — mirrors
       the object-nav more-dropdown normalization higher up. Genuine children
       (.bb-sub-menu > li > a) keep their +56px indent below, untouched. */
    .user-wrap.menu-item-has-children #header-my-account-menu > li > a {
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
        padding-left: 16px !important;
    }
    .user-wrap.menu-item-has-children #header-my-account-menu > li > a > i.bb-icon-l,
    .user-wrap.menu-item-has-children #header-my-account-menu > li > a > svg.cfe-ic {
        position: static !important;
        left: auto !important;
        top: auto !important;
        transform: none !important;
        margin: 0 !important;
        width: 20px !important;
        height: 20px !important;
        font-size: 20px !important;
        line-height: 1 !important;
        flex: 0 0 auto !important;
    }

    /* Hide the speech-bubble tail on inline sub-menus (was for popup mode). */
    .user-wrap.menu-item-has-children #header-my-account-menu .ab-sub-wrapper:before,
    .user-wrap.menu-item-has-children #header-my-account-menu .wrapper.ab-submenu:before,
    .user-wrap.menu-item-has-children #header-my-account-menu .bb-sub-menu:before {
        display: none !important;
    }
}

/* BuddyPress sets `div#cover-image-container { margin-top: -31px }` to
 * overlap an item-header element above it. With our customized profile
 * layout (no #item-header sitting above the cover), that negative margin
 * just pulls the cover image up under the masthead, defeating BB's
 * .site-content padding-top. Reset it on BP user sub-screens (Profile,
 * Courses, Orders, Notifications, etc.) so the cover image starts where
 * .site-content's padding ends. */
body.bp-user div#cover-image-container {
    margin-top: 0;
}

/* BB's buddypress.min.css explicitly hides #item-header on the
 * Notifications sub-screen:
 *   .bp-user.notifications #buddypress #item-header { display: none }
 * It assumes no member-header content gets rendered there. Since we
 * inject our cover/avatar/name block into that exact element via
 * bp_before_member_header, the BB hide rule swallows our injection.
 * Override with one extra element selector so specificity wins. */
body.bp-user.notifications #buddypress #item-header {
    display: block;
    /* BB's buddypress.min.css adds `margin-bottom: 20px` on this same
     * selector. With our injected tab strip directly below #item-header,
     * that 20px reads as a gap. Zero it. */
    margin-bottom: 0;
}

/* On the Dashboard and WC My-Account pages, the_content filter
 * prepends an injected #buddypress wrap (cover + avatar + tabs)
 * followed by a manually-rendered <header class="entry-header
 * cfe-account-page-header"> with the page <h1> title. Hide the
 * original article-level <header class="entry-header"> WP renders
 * above .entry-content so the title only appears once — below the
 * tabs, matching BP's native sub-screen layout. */
body.page-id-622 article.page > header.entry-header,
body.woocommerce-account article.page > header.entry-header {
    /* !important: the WC account screens now carry body.buddypress.bp-user
       (chrome-skin classes) and a theme member-page rule re-flexes
       entry-headers under that combo — this hide must beat it. Our own
       injected title header is unaffected (it sits inside .entry-content,
       not as a direct child of article.page). */
    display: none !important;
}

/* BB theme's woocommerce.min.css contains
 *   body.woocommerce-account:not(.llms-pointer) header.entry-header { display: none }
 * which (because of the descendant combinator) hides EVERY .entry-header
 * on WC My-Account screens — including the one we inject inside #item-body
 * to render the page title. Re-enable our injected header explicitly. */
body.woocommerce-account header.entry-header.cfe-account-page-header {
    display: flex !important;
}

/* Page-title header that sits between the tab strip and the section
 * cards (Profile / Orders / Addresses / Credit Bundles / etc.).
 * Pure-typography treatment — no border or background; the cards
 * below already give the visual break. Slightly bolder + tighter
 * letter-spacing for an editorial feel, with breathing room before
 * the first card. Class+type specificity overrides BB theme's
 * default .entry-header margins (no !important needed). */
header.entry-header.cfe-account-page-header {
    margin: 4px 0 24px;
    padding: 0;
    border: none;
}
header.entry-header.cfe-account-page-header .entry-title {
    font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 28px;
    font-weight: 500;
    letter-spacing: -0.005em;
    color: var(--cfe-ds-color-ink, #1B2A3B);
    line-height: 1.15;
    margin: 0;
}

/* Hide the redundant page sub-heading on /profile/addresses/. BB
 * parent theme's woocommerce/myaccount/my-address.php template
 * renders <div class="wc-MyAccount-sub-heading"><h2>Addresses</h2></div>
 * which duplicates the cfe-account-page-header h1 above. We can't
 * edit the parent theme template so hide via CSS. The sibling
 * <p> description below the h2 stays — it's informative ("The
 * following addresses will be used on the checkout page by default."). */
.MyAccount-content--address .wc-MyAccount-sub-heading h2 {
    display: none;
}

/* /profile/courses/ — h1 is lifted by class-buddyboss-courses.php
 * into .bb-courses-header so the page title and the grid/list view
 * toggle share one row. Match the cfe-account-page-header typography
 * and let the title flex-grow to push the toggles to the right. */
.bb-courses-header .bb-member-courses-title {
    flex: 1 1 auto;
    min-width: 0;
}
.bb-courses-header .bb-member-courses-title h1 {
    font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 28px;
    font-weight: 500;
    letter-spacing: -0.005em;
    color: var(--cfe-ds-color-ink, #1B2A3B);
    line-height: 1.15;
    margin: 0;
}



/* Hide the Complete-Your-Profile sidebar widget on the BP Courses
 * sub-screen — redundant with the course list and adds noise on a
 * page that's all about progress through enrolled courses. */
body.bp-user.my-courses #secondary.widget-area.profile-widget-area {
    display: none !important;
}

/* ---------------------------------------------------------------
 * Active Credit Bundle summary card on the BP profile header
 * (rendered into .member-header-actions-wrap by
 * render_profile_bundle_summary). Condensed version of the
 * /profile/credit-bundles/ hero modeled after the Claude Design
 * "Account Header Redesign" mock — vertical stack of: name + status
 * pill, big remaining number + label, progress bar, 3-up stats grid,
 * price + expiry foot. Whole card is a link to the full bundles page.
 * --------------------------------------------------------------- */
/* Design tokens lifted from the Claude Design "Account Header
 * Redesign" mock so the card matches the rest of the planned
 * account-area refresh (fog/mist neutrals, ink text, graphite
 * captions, mint accent for positive states). Kept scoped under
 * .cfe-profile-bundle-summary so they don't leak into other CFE
 * styles that already have their own palette. */
/* 2-column grid on the BB member-header content. Left column
 * sizes to the user identity content (auto); right column gets
 * everything else (1fr). The bundle card stretches to fill its
 * column with a sensible 540px max so it doesn't get absurdly
 * wide on huge screens. */
#item-header-content > .flex {
    display: grid !important;
    grid-template-columns: auto minmax(360px, 1fr) !important;
    gap: 32px !important;
    padding-right: 32px !important;
    padding-bottom: 24px !important;
    align-items: start !important;
}
#item-header-content .bb-user-content-wrap {
    min-width: 0 !important;
}

/* Long display names: wrap at the space between first and last; if a
   single token still overflows (e.g. Claudieronitonasterito), allow
   character-break so the H2 cannot slide behind the credit widget on
   the right.

   BB's theme applies word-break:break-all to .user-nicename inside
   #item-header-cover-image which character-breaks every name. Reset
   to word-break:normal + overflow-wrap:anywhere - the "anywhere"
   variant contributes to min-content, letting the grid/flex column
   shrink so the H2 wraps inside its column. */
#item-header-content .user-nicename {
    word-break: normal !important;
    overflow-wrap: anywhere !important;
}
.member-header-actions-wrap,
.member-header-actions-wrap .member-header-actions {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}
.cfe-profile-bundle-summary {
    width: 100%;
    max-width: 360px;
    margin-left: auto;
    margin-top: 20px;
}
@media (max-width: 960px) {
    #item-header-content > .flex {
        grid-template-columns: 1fr !important;
    }
    .cfe-profile-bundle-summary {
        max-width: 100%;
        margin-left: 0;
    }
}

.cfe-profile-bundle-summary {
    --fog:         #F4F5F7;
    --mist:        #E8EAED;
    --ink:         #1B2A3B;
    --graphite:    #5B6573;
    --white:       #FFFFFF;
    --mint-bg:     #ECFDF5;
    --mint-border: #6EE7B7;
    --mint-text:   #0F7A2A;
    --ember-bg:    #FFF7ED;
    --ember-text:  #B45309;
    /* Exhausted state rides the DS alert ramp (Design improvement
     * guide 2026-07-12) — the old Tailwind-ish rose constants were
     * off-system. Same ramp as .cfe-badge--alert. */
    --rose-bg:     #FBEDEA;
    --rose-border: #E8CFC8;
    --rose-text:   #C4553D;
    --font-display: 'Outfit', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;

    display: block;
    width: 100%;
    /* Card internals are reskinned chrome = Outfit (fonts resolution
     * 2026-07-12); Plus Jakarta Sans dropped. */
    font-family: var(--font-display);
}
.cfe-profile-bundle-summary__link {
    display: block;
    padding: 20px;
    border-radius: 12px;
    background: var(--fog);
    border: 1px solid var(--mist);
    text-decoration: none !important;
    color: var(--ink);
    transition: border-color 0.15s ease;
}
.cfe-profile-bundle-summary__link:hover {
    border-color: #CBD0D8;
    color: var(--ink);
}

/* Header row: bundle name + status pill */
.cfe-profile-bundle-summary__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}
.cfe-profile-bundle-summary__title {
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 500;
    color: var(--ink);
    letter-spacing: -0.005em;
    line-height: 1.2;
}
.cfe-profile-bundle-summary__status {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    line-height: 1.4;
    border: 1px solid transparent;
}
.cfe-profile-bundle-summary__status--active {
    background: var(--mint-bg);
    border-color: var(--mint-border);
    color: var(--mint-text);
}
.cfe-profile-bundle-summary__status--expiring {
    background: var(--ember-bg);
    color: var(--ember-text);
}
.cfe-profile-bundle-summary__status--exhausted {
    background: var(--rose-bg);
    border-color: var(--rose-border);
    color: var(--rose-text);
}

/* Progress row: SVG ring (2.1) + small inline label */
.cfe-profile-bundle-summary__progress {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 4px;
}
.cfe-profile-bundle-summary__remaining-label {
    font-size: 13px;
    font-weight: 400;
    color: var(--graphite);
}

/* 3-column stats grid: uppercase label above value */
.cfe-profile-bundle-summary__stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
    border-top: 1px solid var(--mist);
    padding-top: 12px;
}
.cfe-profile-bundle-summary__stat {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.cfe-profile-bundle-summary__stat-k {
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--graphite);
}
.cfe-profile-bundle-summary__stat-v {
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 500;
    color: var(--ink);
    letter-spacing: -0.005em;
    font-variant-numeric: tabular-nums;
}

/* Foot row: price (now + was strike) on the left, expiry on right */
.cfe-profile-bundle-summary__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--mist);
    font-size: 12px;
    color: var(--graphite);
}
.cfe-profile-bundle-summary__price {
    display: flex;
    align-items: baseline;
    gap: 6px;
}
.cfe-profile-bundle-summary__price-now {
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 500;
    color: var(--ink);
}
.cfe-profile-bundle-summary__price-was {
    font-size: 12px;
    color: var(--graphite);
    text-decoration: line-through;
}
.cfe-profile-bundle-summary__price-unit {
    font-size: 12px;
    color: var(--graphite);
}
.cfe-profile-bundle-summary__expiry strong {
    color: var(--ink);
    font-weight: 500;
}

/* WC's wc_price() output wraps the amount in a span chain — make
 * sure it inherits the price-now sizing/weight cleanly. */
.cfe-profile-bundle-summary__price-now .woocommerce-Price-amount {
    font-size: inherit;
    font-weight: inherit;
    color: inherit;
}

@media (max-width: 720px) {
    .cfe-profile-bundle-summary {
        width: 100%;
        margin-top: 12px;
    }
}

/* ---------------------------------------------------------------
 * BB Platform override — bp-templates/bp-nouveau/css/buddypress.min.css
 * contains:
 *     .member-header-actions *>*{display:block}
 * which forces every descendant of our card to display:block,
 * collapsing all the flex/grid layouts above. We win specificity
 * by qualifying with .member-header-actions and using !important
 * on every layout rule that needs to stay flex or grid.
 * --------------------------------------------------------------- */
.member-header-actions .cfe-profile-bundle-summary__link {
    display: block !important;
    padding: 20px !important;
}
.member-header-actions .cfe-profile-bundle-summary__head {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
}
.member-header-actions .cfe-profile-bundle-summary__status {
    display: inline-flex !important;
    align-items: center;
}
.member-header-actions .cfe-profile-bundle-summary__progress {
    display: flex !important;
    align-items: baseline;
}
.member-header-actions .cfe-profile-bundle-summary__stats {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr);
}
.member-header-actions .cfe-profile-bundle-summary__stat {
    display: flex !important;
    flex-direction: column;
}
.member-header-actions .cfe-profile-bundle-summary__foot {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
}
.member-header-actions .cfe-profile-bundle-summary__price {
    display: flex !important;
    align-items: baseline;
}

/* Drop the redundant "/ credit" unit text — the strike-through
 * "$30 ~~$99~~" already reveals price + savings, and "credits
 * remaining" elsewhere in the card carries the unit. */
.cfe-profile-bundle-summary__price-unit {
    display: none !important;
}

/* WC's wc_price() output is a chain of inline spans:
 *   .woocommerce-Price-amount > .woocommerce-Price-currencySymbol
 * BB Platform's .member-header-actions *>* { display: block } forces
 * each one to a new line — breaking "$30.00" into "$" on one line and
 * "30.00" on the next. Force them back to inline. */
.member-header-actions .cfe-profile-bundle-summary .woocommerce-Price-amount,
.member-header-actions .cfe-profile-bundle-summary .woocommerce-Price-currencySymbol {
    display: inline !important;
}

/* Append "/credit" after each price (now + was) so the unit
 * reads with both values: "$30.00/credit  ~~$99.00/credit~~".
 * The original __price-unit DOM node stays hidden. */
.cfe-profile-bundle-summary__price-now::after,
.cfe-profile-bundle-summary__price-was::after {
    content: "/credit";
    font-size: 12px;
    color: var(--graphite);
    margin-left: 1px;
}
.cfe-profile-bundle-summary__price-now::after {
    color: var(--ink);
    font-size: inherit;
}

/* BB's .member-header-actions *>* { display: block } turns the
 * <strong> inside "Expires <strong>Apr 21, 2027</strong>" into a
 * block element, wrapping the date onto its own line. Keep it
 * inline so the expiry stays on one row. */
.member-header-actions .cfe-profile-bundle-summary__expiry,
.member-header-actions .cfe-profile-bundle-summary__expiry strong {
    display: inline !important;
}
.member-header-actions .cfe-profile-bundle-summary__expiry {
    white-space: nowrap;
}

/* BB Platform paints a white background on .member-header-actions a:hover.
 * Override so our card stays in the fog/mist palette on hover. */
.member-header-actions .cfe-profile-bundle-summary__link,
.member-header-actions .cfe-profile-bundle-summary__link:hover,
.member-header-actions .cfe-profile-bundle-summary__link:focus {
    background: var(--fog) !important;
    color: var(--ink) !important;
}
.member-header-actions .cfe-profile-bundle-summary__link:hover {
    background: var(--mist) !important;
    border-color: #BFC5CE !important;
}

/* Pull the card DOWN so it straddles the cover-banner / white-content
 * boundary by ~half its height. Cover containers normally clip
 * overflow — open them up so the card isn't cut off. */
#cover-image-container,
#item-header-cover-image,
#item-header-content {
    overflow: visible !important;
}
.cfe-profile-bundle-summary {
    position: relative;
    transform: translateY(50%);
    z-index: 2;
}

/* === Final positioning override ===
 * Take the widget OUT of the grid flow and absolutely-position
 * it against the cover banner's bottom edge so its vertical
 * center sits on the gray/white boundary (half above, half
 * below). z-index: 2 keeps it above the BB tabs nav. */
#item-header-cover-image {
    position: relative;
}
.member-header-actions-wrap {
    position: absolute !important;
    right: 32px !important;
    bottom: 0 !important;
    width: 360px !important;
    max-width: calc(100% - 64px) !important;
    z-index: 2 !important;
    margin: 0 !important;
    padding: 0 !important;
}
.cfe-profile-bundle-summary {
    transform: none !important;
    margin: 0 !important;
    width: 100% !important;
}

/* === Hook moved to bp_after_member_header (fires on every member
 * screen). Widget now renders as a sibling of #item-header-cover-image
 * inside #item-header instead of inside .member-header-actions-wrap.
 * Anchor against #item-header so absolute positioning lands flush
 * with the cover banner's right/bottom edge on every screen. === */
#item-header {
    position: relative;
}
#item-header .cfe-profile-bundle-summary {
    position: absolute !important;
    right: 32px !important;
    bottom: 0 !important;
    width: 360px !important;
    max-width: calc(100% - 64px) !important;
    z-index: 2 !important;
    margin: 0 !important;
    /* Lift the card up into the gray cover banner area so it
     * sits well above the white content boundary. */
    transform: translateY(-25%) !important;
}
@media (max-width: 720px) {
    #item-header .cfe-profile-bundle-summary {
        position: static !important;
        width: 100% !important;
        max-width: none !important;
        margin: 12px 16px 0 !important;
    }
}

/* =========================================================
   BuddyPanel sidebar count badge — pull closer to label
   ---------------------------------------------------------
   BB defaults push the count badge to the far-right edge of
   the row (label spans to flex-1, count sits at the end).
   Tighten the gap so the number reads as part of the label.
   ========================================================= */
body.buddypanel-open .buddypanel ul.buddypanel-menu > li > a > span:not(.count),
body.buddypanel-open .buddypanel ul.buddypanel-menu .sub-menu li > a > span:not(.count) {
  flex: 0 1 auto;
}
body.buddypanel-open .buddypanel ul.buddypanel-menu > li > a > span.count,
body.buddypanel-open .buddypanel ul.buddypanel-menu .sub-menu li > a > span.count {
  margin-left: 8px !important;
}

/* =========================================================
   Avatar dropdown: click-to-open only (kill hover-open).
   ---------------------------------------------------------
   BB theme opens the user-wrap submenu on :hover, which lets
   it linger over the content area and intercept clicks on
   underlying buttons (e.g. "View order" → drops onto the
   menu's Orders link → navigates to /profile/orders/).
   BB already adds .selected on click; just suppress the
   :hover-open path and keep click-toggle.
   ========================================================= */
.site-header .header-aside .user-wrap.menu-item-has-children:hover > .sub-menu,
.site-header .main-navigation .user-wrap.menu-item-has-children:hover > .sub-menu {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}
.site-header .header-aside .user-wrap.menu-item-has-children.selected > .sub-menu,
.site-header .main-navigation .user-wrap.menu-item-has-children.selected > .sub-menu {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

/* Notifications sub-menu rows already imply their count via the parent
   "Notifications NN" badge in the dropdown — hide the per-row count to
   avoid showing the same "77" twice. */
#header-my-account-menu .bp-unread-sub-nav .count,
#header-my-account-menu .bp-read-sub-nav .count {
    display: none !important;
}

/* =========================================================
   Account chrome skin — Design handoff 2026-07-10 (CU 86bavyzdb)
   Phase 1, steps 1.1 + 1.2. Append-only block.
   ---------------------------------------------------------
   1.1 — Cover banner REMOVED (product call, Tuan 7/10: user
   cover/avatar uploads are being retired). Hide the banner
   element only — #cover-image-container also wraps the
   avatar + name content, so we must not hide the container.
   ========================================================= */
body.bp-user #header-cover-image,
body.bp-user .link-change-cover-image {
    display: none !important;
}
/* Avatar was pulled up -40px to straddle the banner's bottom
   edge; with no banner it must sit in normal flow. */
body.bp-user #item-header-avatar {
    margin-top: 0 !important;
}
/* Banner used to provide the hero's top mass — give the row
   breathing room against the masthead instead. */
body.bp-user #item-header-cover-image {
    padding-top: 28px !important;
}

/* ---------------------------------------------------------
   1.2 — Bundle card inline in the hero grid. The card is a
   direct child of #item-header (bp_after_member_header hook),
   previously absolute + translateY(-25%) so it straddled the
   banner boundary. With the banner gone it becomes a real
   grid column: identity left, card right, vertically centered.
   --------------------------------------------------------- */
body.bp-user #item-header {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 380px);
    gap: 0 32px;
    align-items: center;
    padding-right: 32px;
}
body.bp-user #item-header > #cover-image-container {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
}
body.bp-user #item-header > .cfe-profile-bundle-summary {
    position: static !important;
    transform: none !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: none !important;
    grid-column: 2;
    grid-row: 1;
    align-self: center;
}
/* The inner identity grid reserved a minmax(360px,1fr) right
   column for the card's old wrapper — card lives outside it
   now, so collapse to a single column. */
body.bp-user #item-header-content > .flex {
    grid-template-columns: 1fr !important;
    padding-right: 0 !important;
    padding-bottom: 0 !important;
}
/* ≤900px: stack — identity row, then card full-width below.
   20px/16px block padding + 16px identity↔card gap per the
   improvement guide (matches course-page mobile rhythm); the
   desktop 28px cover-wrap top pad collapses into the block pad. */
@media (max-width: 900px) {
    body.bp-user #item-header {
        grid-template-columns: 1fr;
        padding: 20px 16px;
    }
    body.bp-user #item-header-cover-image {
        padding-top: 0 !important;
    }
    body.bp-user #item-header > .cfe-profile-bundle-summary {
        grid-column: 1;
        grid-row: 2;
        margin: 16px 0 0 !important;
        width: auto !important;
    }
}

/* ---------------------------------------------------------
   1.3 — Compact bundle card (hero placement). Real modifier
   class .cfe-profile-bundle-summary--compact for when Phase 2
   PHP adds it; the hero instance (#item-header scope) gets the
   same treatment now since the hero card IS the compact one
   per Tuan's 7/10 decision. Full card on /profile/credit-bundles/
   is untouched.
   --------------------------------------------------------- */
#item-header .cfe-profile-bundle-summary__stats,
.cfe-profile-bundle-summary--compact .cfe-profile-bundle-summary__stats {
    display: none !important;
}
#item-header .cfe-profile-bundle-summary__link,
.cfe-profile-bundle-summary--compact .cfe-profile-bundle-summary__link {
    padding: 14px 16px;
}
#item-header .cfe-profile-bundle-summary__head,
.cfe-profile-bundle-summary--compact .cfe-profile-bundle-summary__head {
    margin-bottom: 8px;
}
#item-header .cfe-profile-bundle-summary__title,
.cfe-profile-bundle-summary--compact .cfe-profile-bundle-summary__title {
    font-size: 15px;
}
/* One-line foot: price cluster left, expiry right, no wrap. */
#item-header .cfe-profile-bundle-summary__foot,
.cfe-profile-bundle-summary--compact .cfe-profile-bundle-summary__foot {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: nowrap;
    white-space: nowrap;
    font-size: 12.5px;
}

/* ---------------------------------------------------------
   1.4 — BuddyPanel skin: ink active pill, fog hover, badge
   flip. SKIN ONLY — no toggle / collapsed-rail / focus-mode
   behavior changes; the panel renders on every logged-in page
   so these selectors stay strictly visual.
   --------------------------------------------------------- */
.buddypanel ul.buddypanel-menu > li > a {
    margin: 2px 12px !important;
    border-radius: 10px !important;
    transition: background-color 0.12s ease;
}
/* Fog hover on non-active rows. */
.buddypanel ul.buddypanel-menu > li:not(.current-menu-item):not(.current_page_item) > a:hover {
    background: #F4F5F7 !important;
    color: #1B2A3B !important;
}
/* Ink pill on the active row (BB paints its blue via li.current*). */
.buddypanel ul.buddypanel-menu > li.current-menu-item > a,
.buddypanel ul.buddypanel-menu > li.current_page_item > a,
.buddypanel ul.buddypanel-menu > li.active > a {
    background: #1B2A3B !important;
    color: #FFFFFF !important;
    border-radius: 10px !important;
}
.buddypanel ul.buddypanel-menu > li.current-menu-item > a i,
.buddypanel ul.buddypanel-menu > li.current_page_item > a i,
.buddypanel ul.buddypanel-menu > li.active > a i {
    color: #FFFFFF !important;
}
/* Row metrics (open panel only — collapsed 72px rail keeps BB's
   centered icon layout untouched). */
body.buddypanel-open .buddypanel ul.buddypanel-menu > li > a {
    /* 7px block (guide said 10) — annotated screenshot 2026-07-13:
       rows read as wasted space; with the li min-height unpinned below
       the row pitch drops 52 -> 42px */
    padding: 7px 12px !important;
    font-size: 14.5px;
    font-weight: 500;
    /* BB theme ships -0.24px here; Outfit at 14.5 wants none. */
    letter-spacing: 0 !important;
    color: #1B2A3B;
}
/* BB pins every panel li to min-height:52px — that floor, not the
   pill, was most of the row air. Unpin in the open state only; the
   collapsed 72px rail keeps BB's icon geometry. */
body.buddypanel-open .buddypanel ul.buddypanel-menu > li {
    min-height: 0 !important;
}
/* Panel starts 58px below its own top edge — BB ships 15px padding on
   .side-panel-inner + 28px margin on .side-panel-menu-container
   (annotated screenshot 2026-07-13 round 4: "move left-nav up").
   Open state only; the collapsed rail keeps stock geometry. */
body.buddypanel-open .buddypanel .side-panel-inner {
    /* 4 -> 0 (round 12): sticky group headers pin BELOW scrollport
       padding, so scrolled rows bled into this strip and painted
       above the pinned LEARN header (annotated screenshot 1:04 PM). */
    padding-top: 0 !important;
}
body.buddypanel-open .buddypanel .side-panel-menu-container {
    margin-top: 0 !important;
}
/* Two icon species share this menu: rows we re-iconed carry inline
   SVGs (24px box, 0 12px margins), rows still on BB's icon font get
   i.bb-icon-* pinned to min-width:68px with a centered glyph — so
   glyphs and labels sit on different left edges (round 4: "what makes
   some icons indent?"). Normalize the font box to the SVG geometry. */
body.buddypanel-open .buddypanel ul.buddypanel-menu > li > a > i._mi {
    width: 24px !important;
    min-width: 24px !important;
    margin: 0 12px !important;
}
body.buddypanel-open .buddypanel ul.buddypanel-menu > li > a > i._mi::before {
    margin: 0 !important;
}
/* Count badges: sky pill at rest (sky text per the improvement
   guide — ink read as too heavy), white-on-ink on the active row. */
.buddypanel ul.buddypanel-menu li > a > span.count {
    background: #EFF6FF !important;
    color: #3E8AB8 !important;
    border-radius: 999px !important;
    font-size: 11.5px !important;
    font-weight: 500 !important; /* 400/500/700 only — 600 synthesizes (Design 7/12) */
    padding: 2px 8px !important;
    line-height: 1.5 !important;
}
.buddypanel ul.buddypanel-menu > li.current-menu-item > a > span.count,
.buddypanel ul.buddypanel-menu > li.current_page_item > a > span.count,
.buddypanel ul.buddypanel-menu > li.active > a > span.count {
    background: rgba(255, 255, 255, 0.16) !important;
    color: #FFFFFF !important;
}

/* ---------------------------------------------------------
   1.5 — Profile tab strip: contained pill bar, left-packed.
   Design Loom 7/13 (86bavyzdb) + Tuan revision: keep the white
   card (paper bg, mist border, radius 13, padding 6) but pack
   the pills LEFT — centering was what created the empty-slack
   read. Active pill = full sky trio (bg/border/text) since the
   tab doubles as the section title. Kills BB's underline
   treatment. (Scroll-all / More-JS neutralization is step 1.6.)
   --------------------------------------------------------- */
body.bp-user #object-nav.bb-single-main-nav--horizontal {
    --cfe-ao-guard: 1; /* sacrificial — AO minifier eats the first declaration */
    background: #FFFFFF;
    /* border: 1px solid var(--cfe-ds-color-sky-border, #93c5fd) !important; */
    border-radius: 13px;
    padding: 6px !important;
    /* 16px top: the hero card and the strip were touching (annotated
       screenshot 2026-07-13) */
    margin: 16px 0 16px;
}
body.bp-user #object-nav.bb-single-main-nav--horizontal ul {
    display: flex !important;
    align-items: center !important;
    /* left-packed (Design Loom 7/13) — centering the pills is what
       created the empty-slack read once the card bg was dropped */
    justify-content: flex-start;
    gap: 4px;
    border: 0 !important;
}
body.bp-user #object-nav.bb-single-main-nav--horizontal ul li {
    margin: 0 !important;
    /* BB ships padding-right:30px per li — stacked on the ul 4px gap
       the pills sat ~34px apart (annotated screenshot 2026-07-13) */
    padding: 0 !important;
    float: none !important;
    display: block !important;
    flex: 0 0 auto;
}
/* the overflow li must stay display:contents — re-assert after the
   generic li rule above (source order wins at equal specificity) */
body.bp-user #object-nav.bb-single-main-nav--horizontal ul li.hideshow {
    display: contents !important;
}
body.bp-user #object-nav.bb-single-main-nav--horizontal ul li a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    /* compact per Design Loom 7/13 item 5: primary tab row shrinks
       toward the Courses sub-tab scale — sub-tabs must never read
       bigger than this row */
    padding: 6px 12px !important;
    border-radius: 9px;
    /* transparent border on every pill so the active pill's sky
       border doesn't change the pill geometry; the shorthand also
       replaces the old border-bottom:0 underline kill */
    border: 1px solid transparent !important;
    box-shadow: none !important;
    font-size: 13px;
    font-weight: 500;
    color: #5B6573;
    line-height: 1.2;
    transition: background-color 0.12s ease, color 0.12s ease;
}
body.bp-user #object-nav.bb-single-main-nav--horizontal ul li a:hover {
    background: var(--cfe-ds-color-fog, #F4F5F7);
    color: #1B2A3B;
}
body.bp-user #object-nav.bb-single-main-nav--horizontal ul li.current a,
body.bp-user #object-nav.bb-single-main-nav--horizontal ul li.selected a {
    /* full sky trio (CFE-Design.md §tokens) — the active tab IS the
       section title (Tuan 7/13), so it carries the interactive-accent
       treatment, not just the soft tint */
    background: var(--cfe-ds-color-sky-bg, #EFF6FF);
    border-color: var(--cfe-ds-color-sky-border, #93C5FD) !important;
    color: var(--cfe-ds-color-sky-text, #3E8AB8);
    /* 700, not 600 — Outfit loads 400/500/700 only; 600 was
       browser-synthesized (never enqueue 600). */
    font-weight: 700;
}

/* ---------------------------------------------------------
   1.6 (CSS half) — scroll-all tabs, More dropdown flattened.
   Our inline More-overflow JS (li.cfe-overflow-li) was deleted
   at Phase 2; these rules now target the theme's own .hideshow
   (which our li also carried) so any dropdown BB nouveau builds
   is flattened back into the strip — display:contents promotes
   its items to top-level flex items, so no tab is ever lost.
   visibility forced because it inherits through
   display:contents even though the boxes are gone. The
   dropdown's title li would render as a fake tab once
   flattened — hidden. */
body.bp-user #object-nav ul li.hideshow,
body.bp-user #object-nav ul li.hideshow > .sub-menu {
    display: contents !important;
    visibility: visible !important;
}
body.bp-user #object-nav ul li.hideshow > a {
    display: none !important;
}
/* Log Out is always the last tab (Tuan 7/13). PHP injects it last,
   but BB nouveau's overflow JS re-parents tabs into/out of its More
   dropdown at runtime, so DOM order can't be trusted once flattened —
   pin it with flex order instead (every other li rides at order:0;
   the hideshow chain is display:contents so nested lis are flex items
   of the same ul). Engines without :has() keep DOM order — no harm. */
body.bp-user #object-nav ul li:has(> a[href*="action=logout"]) {
    order: 1;
}
body.bp-user #object-nav ul li.hideshow .sub-menu li,
body.bp-user #object-nav ul li.hideshow .sub-menu li a {
    visibility: visible !important;
    opacity: 1 !important;
}
body.bp-user #object-nav ul li.hideshow .bb_more_dropdown__title,
/* 2-id variant: the flatten rule `#buddypress nav#object-nav
   .bb_more_dropdown li {display:block !important}` out-specifies the
   1-id selector above at narrow widths, leaking a visible "Menu Items"
   pill into the strip. */
#buddypress nav#object-nav ul li.bb_more_dropdown__title,
#buddypress nav#object-nav .bb_more_dropdown li.bb_more_dropdown__title {
    display: none !important;
}
/* Scroll-all: never wrap, never drop — swipe at narrow widths,
   scrollbar hidden. scroll-snap-type (Design 2026-07-22 mobile handoff)
   settles each pill into place after a swipe/flick. */
body.bp-user #object-nav.bb-single-main-nav--horizontal ul {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    scrollbar-width: none;
    -ms-overflow-style: none;
    scroll-snap-type: x proximity;
}
body.bp-user #object-nav.bb-single-main-nav--horizontal ul::-webkit-scrollbar {
    display: none;
}
body.bp-user #object-nav.bb-single-main-nav--horizontal ul li a {
    white-space: nowrap;
}
body.bp-user #object-nav.bb-single-main-nav--horizontal ul li {
    scroll-snap-align: start;
}

/* AO-minifier guard: the staging Autoptimize build can eat the FIRST
   declaration of a block (known gotcha). flex-wrap sat first in the
   1.6 scroll-all rule and got stripped from the bundle while its
   siblings survived. Re-stated here in its own block behind a
   sacrificial first declaration. Do not "clean this up". */
body.bp-user #object-nav.bb-single-main-nav--horizontal ul {
    min-height: 1px;
    flex-wrap: nowrap !important;
}

/* ---------------------------------------------------------
   1.6e — specificity fixes for the two weekend breaks
   (2026-07-10).
   (1) Tab wrap: BB core `#buddypress nav#object-nav > ul`
       sets flex-wrap: wrap !important — TWO ids, so it beats
       every body.bp-user selector above regardless of source
       order. Restate scroll-all on the same anchors.
   (2) "3 rows": the flattened More sub-menu lis pick up BB's
       full-width dropdown-item treatment, so each renders as
       a 100%-wide row. Force natural width so they join the
       strip as normal pills.
   (3) Ghost "Account" (#settings-personal-li): hash-link
       duplicate the old More-JS used to swallow; renders as
       a 30px li with a 100px anchor overflowing onto Orders.
       Hidden until Phase 2 builds the ACCOUNT group.
   --------------------------------------------------------- */
body.bp-user #buddypress nav#object-nav > ul {
    min-height: 1px; /* sacrificial — AO minifier eats the first declaration */
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
}
body.bp-user #buddypress nav#object-nav ul li.hideshow .sub-menu li,
body.bp-user #buddypress nav#object-nav ul li.hideshow .sub-menu li a {
    width: auto !important;
    min-width: 0 !important;
}
body.bp-user #buddypress nav#object-nav ul li#settings-personal-li {
    display: none !important;
}

/* ---------------------------------------------------------
   1.8 — Outfit chrome. Design call (Tuan 7/10): site chrome
   (top bar, BuddyPanel, profile tab strip) moves to Outfit;
   body copy stays Plus Jakarta Sans. Fonts already load
   site-wide via the cfe-design-fonts dependency (400/500/700
   + italics; NO 600 — 1.7's 14.5/600 top-bar spec needs the
   weight added to the Google Fonts URL or a Design substitute).
   Probe 2026-07-11: no theme rule sets an explicit
   font-family on these surfaces (all inherit the system
   stack from body), so container-level inheritance is enough;
   BB icon glyphs keep their own explicit `bb-icons` family,
   which inheritance cannot override. Sizes/weights untouched.
   Sacrificial first declaration is an inert custom property
   here — min-height on #masthead/.buddypanel could clobber
   real theme values.
   --------------------------------------------------------- */
/* #masthead removed 2026-07-13 (fonts resolution, Design 7/12):
   "Option A system chrome" was always scoped to the masthead only —
   the top bar stays on the theme's system stack. Reskinned chrome
   (panel, hero, card, tabs, chip) keeps Outfit as built. */
.buddypanel,
#object-nav {
    --cfe-ao-guard: 1; /* sacrificial — AO minifier eats the first declaration */
    font-family: 'Outfit', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
}

/* ---------------------------------------------------------
   2.1 — SVG progress ring (46px, mint on mist, centered
   count) replaces the horizontal __bar; the big __remaining
   number moves inside the ring (their old rules swept at 2.5).
   Fill starts at 12 o'clock via the -90deg rotate; dash
   geometry is server-side (r=20, C=2*pi*r). Exhausted /
   expiring state colors land with 2.2.
   --------------------------------------------------------- */
.cfe-profile-bundle-summary__progress {
    --cfe-ao-guard: 1; /* sacrificial — AO minifier eats the first declaration */
    align-items: center; /* was baseline for number+label; ring wants true center */
    gap: 10px;
}
.cfe-profile-bundle-summary__ring {
    position: relative;
    display: inline-flex;
    width: 46px;
    height: 46px;
    flex: 0 0 auto;
}
.cfe-profile-bundle-summary__ring-svg {
    display: block;
    width: 46px;
    height: 46px;
    transform: rotate(-90deg);
}
.cfe-profile-bundle-summary__ring-track,
.cfe-profile-bundle-summary__ring-fill {
    fill: none;
    stroke-width: 5;
}
.cfe-profile-bundle-summary__ring-track {
    stroke: var(--mist);
}
.cfe-profile-bundle-summary__ring-fill {
    stroke: var(--mint-text);
    stroke-linecap: round;
}
.cfe-profile-bundle-summary__ring-count {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 500;
    line-height: 1;
    color: var(--ink);
}
/* BB's .member-header-actions *>* {display:block} flattens the
   ring wrapper + count centering — same fight as the card rules
   above, same fix. */
.member-header-actions .cfe-profile-bundle-summary__ring {
    display: inline-flex !important;
}
.member-header-actions .cfe-profile-bundle-summary__ring-count {
    display: flex !important;
}

/* ---------------------------------------------------------
   2.2 — ring state colors. The --active/--expiring/--exhausted
   modifier is the same $status_key that drives the status pill.
   Expiring recolors the arc ember to match its pill; exhausted
   hides the fill outright (at offset==C the round linecap can
   still paint a dot at 12 o'clock) and turns the "0" count rose.
   Track stays mist for exhausted — rose-bg on the fog card is
   near-invisible, and an empty gray ring already reads as spent.
   --------------------------------------------------------- */
.cfe-profile-bundle-summary__ring--expiring .cfe-profile-bundle-summary__ring-fill {
    --cfe-ao-guard: 1; /* sacrificial — AO minifier eats the first declaration */
    stroke: var(--ember-text);
}
.cfe-profile-bundle-summary__ring--exhausted .cfe-profile-bundle-summary__ring-fill {
    display: none;
}
.cfe-profile-bundle-summary__ring--exhausted .cfe-profile-bundle-summary__ring-count {
    color: var(--rose-text);
}

/* ---------------------------------------------------------
   2.4 — earned-credits chip under the display name. Comp-measured
   2026-07-12 against the mock's .hero-chip (§1e of the comp-deltas
   doc): bordered neutral chip — mist border, radius 8, 12.5/600
   graphite text with the count in ink, icon graphite-light. (The
   first build was a design-system mint-pill guess; superseded.)
   Renders in BB's member header (via bp_before_member_header_meta)
   and in our account-page header builder — both slots sit between
   .member-title-wrap and .item-meta.
   --------------------------------------------------------- */
.cfe-earned-credits-chip {
    --cfe-ao-guard: 1; /* sacrificial — AO minifier eats the first declaration */
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 6px 0 2px;
    padding: 6px 12px;
    border-radius: 8px;
    background: #FFF;
    border: 1px solid #E8EAED;
    font-family: 'Outfit', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
    font-size: 12.5px;
    /* 500, not 600 — 600 was browser-synthesized (never enqueue 600). */
    font-weight: 500;
    line-height: 1.4;
    color: #5B6573;
}
.cfe-earned-credits-chip .bb-icon-graduation-cap {
    font-size: 15px;
    line-height: 1;
    color: #9199A6;
}
.cfe-earned-credits-chip__count {
    font-weight: 700;
    color: #1B2A3B;
}

/* ---------------------------------------------------------
   2.3 — BuddyPanel group headers (LEARN / BILLING / ACCOUNT /
   SUPPORT). Non-link rows injected server-side
   (li.cfe-menu-group > span) by inject_panel_group_headers().
   Spec = mock .side-group-label: 10.5px/.12em uppercase
   graphite-light. Spec weight is 800 but Outfit loads 400/500/700
   — 700 is the loaded nearest. Hidden in the collapsed 72px rail:
   icon-only rows have no labels for a header to describe.
   --------------------------------------------------------- */
.buddypanel .cfe-menu-group {
    --cfe-ao-guard: 1; /* sacrificial — AO minifier eats the first declaration */
    display: none;
    pointer-events: none;
    list-style: none;
}
/* Sticky: the panel is fixed with an internal scroller, so on
   short windows the menu overflows and headers would ride along
   with the rows. Pin each header to the top of the scrollport on
   a solid panel-bg instead — rows slide underneath, the next
   group's header pushes the previous one out. Spacing lives in
   padding, not margin: margins stay outside the sticky box and
   visibly jump at the pin point. */
body.buddypanel-open .buddypanel .cfe-menu-group {
    display: block;
    position: sticky;
    top: 0;
    z-index: 2;
    margin: 0;
    /* 12/6 (guide said 18/8) — annotated screenshot 2026-07-13:
       group seams read as wasted space at the tighter row pitch */
    padding: 12px 12px 6px;
    background: #FFF;
}
/* The group headers added ~220px of menu height, so on ordinary
   window heights the panel now overflows and must really scroll.
   .side-panel-inner is the scrollport (the aside never scrolls);
   the previous overflow:visible lift made the theme's mousewheel
   handler's scrollTop writes no-op while it still preventDefaults —
   a dead zone where the nav can't scroll and Log Out is
   unreachable. Native scroll in the open state; the collapsed rail
   keeps the theme's clip. Sticky headers pin against this
   scrollport. padding-top moves inside the scroller (onto the ul):
   scrolled rows would otherwise bleed into the scrollport's padding
   strip above the pinned headers. */
body.buddypanel-open .buddypanel .side-panel-inner {
    --cfe-ao-guard: 1; /* sacrificial — AO minifier eats the first declaration */
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    /* Round 13 (Design 03): reserve the gutter so rows never shift
       horizontally when overflow appears/disappears. */
    scrollbar-gutter: stable;
    /* Round 12 ("hard to tell you can scroll"): scrollbar-width/color
       stay UNSET here on purpose — any non-initial value makes
       Chromium ignore ::-webkit-scrollbar styling and fall back to
       macOS overlay bars, which auto-hide at idle. The ::-webkit
       rules further down are what force a persistent thin bar;
       Firefox gets scrollbar-width via the @supports block there. */
    padding-top: 0;
}
body.buddypanel-open .buddypanel ul.buddypanel-menu {
    --cfe-ao-guard: 1; /* sacrificial — AO minifier eats the first declaration */
    padding-top: 15px;
}
/* BB lays the panel anchors out position:absolute against the aside
   (.side-panel-menu a { position:absolute }) and fake-scrolls them
   from JS by writing inline margin-top:-scrollTop on wheel — so the
   lis scroll but the anchors stay glued in place (or double-shift
   once real scrolling works). In-flow anchors scroll natively with
   the lis; the !important margin pins outrank the JS inline writes. */
body.buddypanel-open .buddypanel ul.buddypanel-menu li a {
    position: static !important;
    margin-top: 0 !important;
    /* the theme's width:100% was sized against the abs containing
       block; on in-flow anchors it ignores the 12px side margins and
       bleeds the pill past the panel edge */
    width: auto !important;
}
/* Re-state the 1.4 pill gap for top-level rows at equal specificity,
   later in file — keeps the 2px rhythm while still pinning the JS
   margin write. */
body.buddypanel-open .buddypanel ul.buddypanel-menu > li > a {
    margin-top: 2px !important;
}
body.buddypanel-open .buddypanel .cfe-menu-group > span {
    /* 11/700/.14em per the improvement guide (was 10.5/.12em);
       graphite-light is now a DS token Design is adopting DS-wide. */
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--cfe-ds-color-graphite-light, #9199A6);
}

/* BB sizes the open-state sub-menu for the collapsed rail flyout:
   .sub-menu.bb-open gets padding-top:52px — inline in the open panel
   that reads as one blank row above the first sub-item (annotated
   screenshot 2026-07-13: gaps under Orders and Notifications). Keep
   the 32px indent, drop the dead row. */
body.buddypanel-open .buddypanel .buddypanel-menu .sub-menu.bb-open {
    --cfe-ao-guard: 1; /* sacrificial — AO minifier eats the first declaration */
    padding-top: 0;
}

/* BB offsets the label -10px after its icon-font box
   (.buddypanel ul.buddypanel-menu>li>a>i+span:not(.count)). That shim
   was sized against the stock 68px icon box; our open-panel pass
   shrinks the box to 24px, so rows still on the icon font sit their
   labels 10px left of the SVG rows (annotated screenshot 2026-07-13:
   "make the indent for all items match Profile"). Zero it in the open
   panel only — the collapsed rail keeps stock geometry. */
body.buddypanel-open .buddypanel ul.buddypanel-menu > li > a > i._mi + span:not(.count) {
    --cfe-ao-guard: 1; /* sacrificial — AO minifier eats the first declaration */
    margin-left: 0;
}

/* Round 13 scroll affordance (Design 03 spec — supersedes their 02 B4
   "keep hidden"): persistent pill thumb floating in a 10px gutter,
   inset 3px via the surface-colored border + content-box clip trick.
   Custom ::-webkit-scrollbar is still the only way to get an
   ALWAYS-VISIBLE bar in Chromium/Safari on macOS (overlay bars
   auto-hide; any non-initial scrollbar-width/color disables these
   rules — keep them UNSET outside the @supports Firefox block).
   One deviation from the 03 spec: rest thumb is graphite-light, not
   mist — mist-at-rest disappears into the white panel, which is the
   exact 7/13 "hard to tell you can scroll" complaint (the spec
   predates it); graphite-light is Design's own no-hover fallback.
   Raw hex in the pseudos: Chromium has history of not resolving
   var() inside ::-webkit-scrollbar-*. */
body.buddypanel-open .buddypanel .side-panel-inner::-webkit-scrollbar {
    width: 10px;
    background: transparent;
}
body.buddypanel-open .buddypanel .side-panel-inner::-webkit-scrollbar-track {
    background: transparent;
}
body.buddypanel-open .buddypanel .side-panel-inner::-webkit-scrollbar-thumb {
    background: #9199A6; /* graphite-light */
    border-radius: 999px;
    border: 3px solid #FFFFFF; /* = panel surface, reads as empty gutter */
    background-clip: content-box;
}
body.buddypanel-open .buddypanel .side-panel-inner::-webkit-scrollbar-thumb:hover,
body.buddypanel-open .buddypanel .side-panel-inner::-webkit-scrollbar-thumb:active {
    background: #5B6573; /* graphite */
    background-clip: content-box;
}
/* Firefox has no ::-webkit-scrollbar; its thin native bar is
   persistent on overflow. Guarded so Chromium never sees a
   non-initial scrollbar-width (see note above). */
@supports (-moz-appearance: none) {
    body.buddypanel-open .buddypanel .side-panel-inner {
        scrollbar-width: thin;
        scrollbar-color: #9199A6 transparent;
    }
}

/* Round 12: Log Out sits alone below a horizontal rule, out of the
   Support group (annotated screenshot 2026-07-13 1:04 PM). The li is
   emitted by inject_panel_group_headers before the logout bucket.
   Hidden in the collapsed rail, same as the group headers. */
.buddypanel .cfe-menu-divider {
    --cfe-ao-guard: 1; /* sacrificial — AO minifier eats the first declaration */
    display: none;
    list-style: none;
    pointer-events: none;
}
body.buddypanel-open .buddypanel .cfe-menu-divider {
    display: block;
    margin: 10px 12px 8px;
    border-top: 1px solid #E8EAED;
}

/* ---------------------------------------------------------
   1.7 — top bar skin: REVERTED 2026-07-12. The comp's red-border
   scope is everything BELOW the top bar (left nav, hero, tab
   strip) — the top bar itself is out of scope. The link skin
   (14.5/500 + 13px padding) also widened the items enough that
   the theme's data-menu-space overflow JS shunted all but one
   item into the "…" dropdown. Bar stays at its live state:
   14/400 links, plain icon affordances. Do not reskin the
   masthead without an explicit comp that includes it.
   --------------------------------------------------------- */

/* =========================================================
   Tighten sweep — Design improvement guide 2026-07-12
   (account-chrome-improvement-guide-20260712, CU 86bavyzdb).
   All values are Design's, loaded-weights-only. In-place edits
   above (weights, tokens, borders, badge color, masthead
   revert); the genuinely new rules live here.
   ========================================================= */

/* New DS token — Design is adopting it DS-wide; declared here
   (single canonical declaration for this plugin) and consumed
   via var() with a matching fallback. */
:root {
    --cfe-ao-guard: 1; /* sacrificial — AO minifier eats the first declaration */
    --cfe-ds-color-graphite-light: #9199A6;
}

/* Hero display name — explicit metrics (was riding BB's theme
   default: 28.8px/#1E2132). Outfit 700 ink, tight editorial
   tracking. 22px desktop / 20px mobile per the Account Shell v2
   comp (comp-measured 2026-07-13 — the improvement guide's 28px
   was written against the OLD tall hero; the v2 compact hero
   runs smaller. Flagged to Design). size/color carry !important:
   BB's theme rule sits behind ID-heavy selectors we can't out-
   specify cleanly (probe 2026-07-13 — 28.8px/#1E2132 won without). */
#item-header-content .member-title-wrap .user-nicename {
    font-family: 'Outfit', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
    font-size: 22px !important;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.2;
    color: var(--cfe-ds-color-ink, #1B2A3B) !important;
}
@media (max-width: 900px) {
    #item-header-content .member-title-wrap .user-nicename {
        font-size: 20px !important;
    }
}

/* Joined / last-active meta line under the name — Outfit 13/400
   graphite; "Active now" (rendered by the header builder when the
   user is currently online) reads mint/700. */
#item-header-content .item-meta {
    --cfe-ao-guard: 1; /* sacrificial — AO minifier eats the first declaration */
    font-family: 'Outfit', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
    font-size: 13px;
    font-weight: 400;
    color: var(--cfe-ds-color-graphite, #5B6573);
}
#item-header-content .item-meta .cfe-meta-active-now {
    /* !important: BB paints .item-meta spans gray (#9B9C9F) behind
       ID-heavy selectors (probe 2026-07-13). */
    color: #0F7A2A !important;
    font-weight: 700;
}

/* Tab-strip edge fade — the scrollable pill strip fades at the
   edge(s) that still have content off-screen. The inline footer
   JS toggles .cfe-fade-l / .cfe-fade-r on #object-nav from
   scrollLeft; no class = no mask (and no-JS degrades to no fade).
   Mask sits on the UL so the white card + border stay crisp. */
body.bp-user #object-nav.cfe-fade-r ul {
    --cfe-ao-guard: 1; /* sacrificial — AO minifier eats the first declaration */
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent);
}
body.bp-user #object-nav.cfe-fade-l ul {
    --cfe-ao-guard: 1; /* sacrificial — AO minifier eats the first declaration */
    -webkit-mask-image: linear-gradient(to right, transparent, #000 32px);
    mask-image: linear-gradient(to right, transparent, #000 32px);
}
body.bp-user #object-nav.cfe-fade-l.cfe-fade-r ul {
    --cfe-ao-guard: 1; /* sacrificial — AO minifier eats the first declaration */
    -webkit-mask-image: linear-gradient(to right, transparent, #000 32px, #000 calc(100% - 32px), transparent);
    mask-image: linear-gradient(to right, transparent, #000 32px, #000 calc(100% - 32px), transparent);
}

/* =========================================================
   Hero comp parity — Account Shell v2 (2026-07-13, CU 86bavyzdb).
   Tuan call: the hero must read pixel-faithful to the comp, not
   just carry the guide's type values. ONE unified hero card:
   identity (56px avatar · name · role/district/active meta ·
   credits chip) left, compact bundle card (ring | body | chevron)
   inset right. Later-in-file rules intentionally override the
   1.1/1.2/1.3 geometry above at equal specificity.
   ========================================================= */

/* Card shell moves UP to #item-header; strip the old white-box
   chrome from #cover-image-container (BB .bb-cover-image-container). */
body.bp-user #item-header {
    --cfe-ao-guard: 1; /* sacrificial — AO minifier eats the first declaration */
    background: #FFFFFF;
    border: 1px solid #E8EAED;
    border-radius: 14px;
    padding: 20px 24px;
    grid-template-columns: minmax(0, 1fr) minmax(360px, 440px);
    gap: 0 24px;
    align-items: center;
}
body.bp-user #cover-image-container {
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
}
/* Identity row: avatar + text on one line, vertically centered.
   The 28px top-pad from 1.1 is obsolete inside the padded card. */
body.bp-user #item-header-cover-image {
    padding: 0 !important;
    display: flex !important;
    align-items: center;
    gap: 20px;
}
/* 56px avatar (served 170px, scaled down); presence dot rides the
   wrap's corner. BB's 3px white img border is invisible on the
   white card — dropped so the circle measures true 56px. */
body.bp-user #item-header-avatar {
    width: 56px !important;
    height: 56px !important;
    min-width: 56px;
    margin: 0 !important;
    float: none !important;
    flex: 0 0 auto;
}
body.bp-user #item-header-avatar img.avatar {
    width: 56px !important;
    height: 56px !important;
    max-width: 56px !important;
    border-width: 0 !important;
}
/* BB anchors the presence dot for the old 170px avatar (top/left
   inset) — re-anchor bottom-right for the 56px circle. */
body.bp-user #item-header-avatar .member-status {
    top: auto !important;
    left: auto !important;
    bottom: 0 !important;
    right: 0 !important;
    width: 13px !important;
    height: 13px !important;
    border: 2px solid #FFF !important;
    box-sizing: border-box;
}
body.bp-user #item-header-content {
    flex: 1 1 auto;
    min-width: 0;
}
/* Tight identity stack: name / meta / chip (chip renders after the
   meta via hook priorities — no CSS reordering needed). */
body.bp-user #item-header-content .member-title-wrap {
    margin: 0 0 3px !important;
}
#item-header-content .cfe-hero-meta {
    margin: 0;
}
#item-header-content .cfe-hero-meta .separator {
    color: var(--cfe-ds-color-graphite-light, #9199A6);
    margin: 0 2px;
}
body.bp-user #item-header-content .cfe-earned-credits-chip {
    margin: 10px 0 0;
}
/* BB's native joined-date/meta wrap is replaced by .cfe-hero-meta. */
body.bp-user #item-header-content .header-meta-wrap {
    display: none !important;
}

/* Bundle card internals — comp layout: ring | body | chevron. */
body.bp-user #item-header .cfe-profile-bundle-summary__link {
    --cfe-ao-guard: 1; /* sacrificial — AO minifier eats the first declaration */
    display: flex !important;
    align-items: center;
    gap: 14px;
    padding: 16px 18px !important;
    border-radius: 14px;
}
#item-header .cfe-profile-bundle-summary__body {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}
#item-header .cfe-profile-bundle-summary__head {
    justify-content: flex-start;
    gap: 10px;
    margin-bottom: 0;
}
#item-header .cfe-profile-bundle-summary__title {
    font-size: 16px;
    font-weight: 700;
}
#item-header .cfe-profile-bundle-summary__line {
    font-size: 13.5px;
    color: var(--graphite);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
#item-header .cfe-profile-bundle-summary__line strong {
    color: var(--ink);
    font-weight: 700;
}
#item-header .cfe-profile-bundle-summary__dot {
    color: var(--cfe-ds-color-graphite-light, #9199A6);
}
#item-header .cfe-profile-bundle-summary__expiry {
    font-size: 13px;
    color: var(--graphite);
}
#item-header .cfe-profile-bundle-summary__chev {
    margin-left: auto;
    flex: 0 0 auto;
    display: inline-flex;
    color: var(--cfe-ds-color-graphite-light, #9199A6);
}

/* ≤900px: card stacks under the identity row. !important is
   load-bearing here, not paranoia: Autoptimize merges identical
   @media blocks at the FIRST occurrence, which hoists this block
   above the desktop card-shell rule in the bundle — source order
   cannot be trusted across the aggregate, so the mobile geometry
   must win on weight (probe 2026-07-13: desktop 24px padding and
   the 2-col template leaked into 402 without these). */
@media (max-width: 900px) {
    body.bp-user #item-header {
        grid-template-columns: 1fr !important;
        gap: 0 !important;
        padding: 20px 16px !important;
    }
    /* BB centers the identity text on small screens — stack the
       avatar into the same centered column instead of leaving it
       stuck to the left edge. */
    body.bp-user #item-header-cover-image {
        flex-direction: column !important;
        align-items: center !important;
        gap: 12px !important;
    }
    body.bp-user #item-header .cfe-profile-bundle-summary__line {
        white-space: normal !important;
    }
}

/* ---------------------------------------------------------
   Round 14 (annotated screenshot 2026-07-13 1:40 PM): collapsed-rail
   active pill spilled 12px past the aside. BB sizes rail anchors
   position:absolute at width:72px (= full rail); our pill skin's
   2px/12px margin shifts that box right, and the aside is
   overflow:visible (abs anchors escape the inner clipper), so the
   ink bg painted into the page gutter. Compensate width in the
   collapsed state only — 48px pill inset 12px each side; the open
   panel already runs width:auto via the round-12 in-flow fix.
   --------------------------------------------------------- */
body:not(.buddypanel-open) .buddypanel ul.buddypanel-menu > li > a {
    width: calc(100% - 24px) !important; /* 72px rail − 2×12px pill margin */
}

/* Round 14b: rail icons sat on two centerlines — SVG rows cx=35
   (24px box, 11px margins), font-icon rows cx=46 (stock 68px box
   overflowing the 48px pill). Same two-species mismatch round 4
   fixed for the open panel; mirror it here: 24px box + 12px margins
   = both species dead-center on the 72px rail (cx 36). */
body:not(.buddypanel-open) .buddypanel ul.buddypanel-menu > li > a > i._mi,
body:not(.buddypanel-open) .buddypanel ul.buddypanel-menu > li > a > svg.cfe-ic {
    min-width: 24px !important;
    width: 24px !important;
    margin: 0 12px !important;
}
body:not(.buddypanel-open) .buddypanel ul.buddypanel-menu > li > a > i._mi::before {
    margin: 0 !important;
}

/* Round 14c: rail pills overlapped vertically — li pitch is 52px but
   BB gives rail anchors an explicit height:54px, so with the 2px
   offset every pill's bg painted 2px over the next (visible on
   hover/active). Shrink the pill inside its cell: symmetric padding
   keeps the icon vertically centered, height:auto tracks content
   (24px icon + 2x11 = 46px pill, 6px clear gap per row). */
body:not(.buddypanel-open) .buddypanel ul.buddypanel-menu > li > a {
    height: auto !important;
    padding: 11px 0 !important;
}

/* ── Item 4 (CU 86bavyzdb): retire the legacy theme blues on account chrome ──
   BB theme options still carry the pre-redesign palette (accent #6BB0DB used
   as text, #1E93DB hover) and paint it through the --bb-* custom properties:
   generic a:hover, BB primary/secondary buttons, WC's show-password eye,
   labels, notices, panel count badges. Theme options can't change without
   re-theming the whole site, so re-map the vars to CFE tokens at the chrome
   scope instead. Header/footer link-hover vars are deliberately NOT re-mapped
   — that's site-wide chrome, same on every page. */

/* Profile + WC-alias account pages (alias pages get bp-user via the
   body_class filter in class-buddyboss-user-profile-menu.php). */
body.bp-user {
    /* interactive/info accent: sky-text carries the contrast; the old
       accent #6BB0DB survives only in its decorative role */
    --bb-primary-color: var(--cfe-ds-color-sky-text, #3E8AB8);
    --bb-primary-color-rgb: 62, 138, 184;

    /* primary buttons: ink, hover deepens — mirrors .cfe-btn primary */
    --bb-primary-button-background-regular: var(--cfe-ds-color-ink, #1B2A3B);
    --bb-primary-button-background-hover: var(--cfe-ds-color-ink-deep, #0F1923);
    --bb-primary-button-border-regular: var(--cfe-ds-color-ink, #1B2A3B);
    --bb-primary-button-border-hover: var(--cfe-ds-color-ink-deep, #0F1923);

    /* secondary buttons: hover was #1E93DB fill + white text; stay neutral */
    --bb-secondary-button-background-hover: var(--cfe-ds-color-mist, #E8EAED);
    --bb-secondary-button-border-hover: var(--cfe-ds-color-mist, #E8EAED);
    --bb-secondary-button-text-hover: var(--cfe-ds-color-ink, #1B2A3B);

    /* member-type labels + notices rode the old accent */
    --bb-label-background-color: var(--cfe-ds-color-sky-bg, #EFF6FF);
    --bb-label-text-color: var(--cfe-ds-color-sky-text, #3E8AB8);
    --bb-default-notice-color: var(--cfe-ds-color-sky-text, #3E8AB8);
    --bb-default-notice-color-rgb: 62, 138, 184;
}

/* BuddyPanel count badges are global chrome (panel renders on every
   logged-in page), so their remap can't be bp-user-scoped or the badge
   would change color per page. :root body outranks the theme's :root. */
:root body {
    --bb-sidenav-count-background-color-hover: var(--cfe-ds-color-ink, #1B2A3B);
    --bb-sidenav-count-text-color-active: var(--cfe-ds-color-sky-text, #3E8AB8);
    --bb-sidenav-menu-background-color-active: var(--cfe-ds-color-sky-bg, #EFF6FF);
}

/* WC's show-password eye rendered as a solid primary-button block inside
   the field (was #6BB0DB, would turn ink via the remap above — still a
   heavy block). Match the bbcf mask-toggle utility-icon pattern instead:
   bare glyph, graphite at rest, ink on hover. */
body.bp-user form .show-password-input {
    background: transparent !important;
    border: 0;
    color: var(--cfe-ds-color-graphite, #5B6573);
}
body.bp-user form .show-password-input:hover,
body.bp-user form .show-password-input:focus {
    background: transparent !important;
    color: var(--cfe-ds-color-ink, #1B2A3B);
}

/* =========================================================
   Hero avatar retired — Design/product call (Tuan 2026-07-14,
   CU 86bavyzdb). The cover banner was already retired in block
   1.1 ("user cover/avatar uploads are being retired"); the
   avatar upload is equally unused, so drop it from the hero too.
   #item-header-cover-image is a flex row (gap 20px) — with the
   avatar gone there is no second item for the gap to space, so
   name/meta sit flush left (and stay centered on mobile, where
   the row is a single centered column). Append-only, EOF, wins
   on source order + specificity vs the 56px avatar block above.
   ========================================================= */
body.bp-user #item-header-avatar {
    display: none !important;
}

/* =========================================================
   Hero bundle card — mobile compaction (Tuan 2026-07-14, CU
   86bavyzdb). At <=600px the title "45-Credit Bundle" wrapped
   to two lines, running the card ~4 lines / 132px tall. Keep
   the title (+ ACTIVE pill) on ONE line so the card is shorter
   when the edit form is on screen. Append-only, EOF.
   ========================================================= */
@media (max-width: 600px) {
    body.bp-user #item-header .cfe-profile-bundle-summary__head {
        flex-wrap: nowrap !important;
        gap: 8px !important;
    }
    body.bp-user #item-header .cfe-profile-bundle-summary__title {
        font-size: 15px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        min-width: 0;
    }
}

/* =========================================================
   Normalize menu icon stroke boldness (Tuan 2026-07-16)
   Courses, Notifications, Settings, and other cfe SVG icons
   carried a stroke-width="2" which visually felt thinner than
   the surrounding text. Raise the stroke boldness globally to
   2.4 inside object-nav, buddypanel, and header-my-account menus.
   ========================================================= */
#buddypress nav#object-nav li > a > svg.cfe-ic,
.buddypanel ul.buddypanel-menu li > a > svg.cfe-ic,
#header-my-account-menu li > a > svg.cfe-ic,
.user-wrap.menu-item-has-children #header-my-account-menu > li > a > svg.cfe-ic {
    stroke-width: 2.4 !important;
}