/*
 * JR Members Page Redesign v1.0.18
 * Presentation-only styling for the BuddyPress Members directory.
 * Design language aligned to the newer JR Membership and Contact pages.
 */

body.jr-members-redesign {
    --jr-paper: rgba(248, 245, 236, 0.975);
    --jr-card: rgba(255, 251, 246, 0.975);
    --jr-card-soft: rgba(255, 253, 249, 0.86);
    --jr-ink: #352a24;
    --jr-heading: #5b4337;
    --jr-muted: #716c67;
    --jr-line: rgba(118, 91, 68, 0.17);
    --jr-accent: #c97d53;
    --jr-deep: #4a3428;
    --jr-gold: #b99a5e;
    --jr-radius-outer: 19px;
    --jr-radius-card: 22px;
}

body.jr-members-redesign *,
body.jr-members-redesign *::before,
body.jr-members-redesign *::after {
    box-sizing: border-box;
}

/* Hide the original theme title area only after JS has moved the real H1
 * into the redesigned hero. This avoids a no-JS accessibility regression. */
body.jr-members-redesign.jr-members-layout-ready .entry-header,
body.jr-members-redesign.jr-members-layout-ready .page-header,
body.jr-members-redesign.jr-members-layout-ready header.entry-header {
    display: none !important;
}

/* Never apply the old panel treatment to nested BuddyPress wrappers. */
body.jr-members-redesign #buddypress:not(.jr-members-root),
body.jr-members-redesign .buddypress-wrap:not(.jr-members-root),
body.jr-members-redesign .bp-wrap:not(.jr-members-root) {
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* ---------- Confirmed master page/container hierarchy ---------- */
/* Invited Memories Redesign v1.0.5 is the dimensional master. Kadence keeps
 * control of #primary / .content-container at its native constrained width;
 * the shared 24px-per-side desktop inset is created at #main, and the 32px
 * paper-shell padding creates the shared inner usable content area. */
body.jr-members-redesign #primary.content-area,
body.jr-members-redesign .content-container.site-container {
    box-sizing: border-box !important;
}

body.jr-members-redesign #main.site-main {
    box-sizing: border-box !important;
    width: calc(100% - 48px) !important;
    max-width: none !important;
    height: auto !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

body.jr-members-redesign #main.site-main > .content-wrap,
body.jr-members-redesign #main.site-main .content-wrap > article,
body.jr-members-redesign article.single-entry,
body.jr-members-redesign .entry-content-wrap {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
}

body.jr-members-redesign .entry-content-wrap {
    margin: 76px auto 92px !important;
    padding: 40px 32px 46px !important;
    overflow: visible !important;
    background:
        linear-gradient(rgba(255,253,249,.968), rgba(255,253,249,.968)),
        repeating-linear-gradient(
            0deg,
            rgba(112,83,56,.018) 0,
            rgba(112,83,56,.018) 1px,
            transparent 1px,
            transparent 4px
        ) !important;
    border: 1px solid rgba(221,208,190,.76) !important;
    border-radius: 22px !important;
    box-shadow: 0 18px 48px rgba(55,39,24,.10) !important;
}

body.jr-members-redesign .entry-content.single-content,
body.jr-members-redesign .jr-members-root {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* Kadence inner rows must remain fluid inside the same shared usable area;
 * they are not allowed to introduce a second independent max-width/padding. */
body.jr-members-redesign .entry-content.single-content > .kt-row-column-wrap,
body.jr-members-redesign .entry-content.single-content .wp-block-kadence-rowlayout > .kt-row-column-wrap {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    margin: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* ---------- Shared title/header master: Invited Memories v1.0.5 ---------- */
body.jr-members-redesign .jr-members-hero {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 0 22px !important;
    padding: 46px 28px 34px !important;
    text-align: center !important;
    background: var(--jr-card, #fffdfa) !important;
    border: 1px solid rgba(118,90,65,.15) !important;
    border-radius: var(--jr-radius-card, 24px) !important;
    box-shadow: 0 9px 24px rgba(58,42,30,.055) !important;
}

body.jr-members-redesign .jr-members-title {
    margin: 0 !important;
    padding: 0 !important;
    font-family: Georgia, "Times New Roman", serif !important;
    font-size: clamp(42px, 4.4vw, 58px) !important;
    font-weight: 700 !important;
    line-height: 1.04 !important;
    letter-spacing: -0.025em !important;
    text-transform: none !important;
    color: var(--jr-heading, #513b2f) !important;
    text-align: center !important;
}

body.jr-members-redesign .jr-members-title-ornament {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 13px !important;
    width: min(250px, 56%) !important;
    margin: 22px auto 18px !important;
    color: rgba(201,125,83,.68) !important;
}

body.jr-members-redesign .jr-members-title-ornament::before,
body.jr-members-redesign .jr-members-title-ornament::after {
    content: "" !important;
    display: block !important;
    flex: 1 1 auto !important;
    height: 1px !important;
    background: currentColor !important;
}

body.jr-members-redesign .jr-members-title-ornament span {
    display: inline-block !important;
    color: #bc9654 !important;
    font-family: Georgia, "Times New Roman", serif !important;
    font-size: 15px !important;
    line-height: 1 !important;
}

body.jr-members-redesign .jr-members-subtitle {
    width: min(720px, 100%) !important;
    max-width: none !important;
    margin: 0 auto !important;
    color: #67615c !important;
    font-family: inherit !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 1.55 !important;
    text-align: center !important;
}

/* ---------- Directory card ---------- */
body.jr-members-redesign .jr-members-directory-card {
    min-height: 0 !important;
    margin: 0 !important;
    padding: 30px 34px 28px !important;
    background: var(--jr-card) !important;
    border: 1px solid rgba(118, 90, 65, 0.15) !important;
    border-radius: var(--jr-radius-card) !important;
    box-shadow: 0 9px 24px rgba(58, 42, 30, 0.05) !important;
}

body.jr-members-redesign .jr-members-ghost-plus,
body.jr-members-redesign .jr-members-duplicate-count {
    display: none !important;
}

/* Neutralise stray BuddyPress nav chrome that can render as an empty bar. */
body.jr-members-redesign .jr-members-directory-card .bp-navs:empty,
body.jr-members-redesign .jr-members-directory-card .item-list-tabs:empty,
body.jr-members-redesign .jr-members-directory-card nav:empty {
    display: none !important;
}

/* ---------- Toolbar ---------- */
/* JS consolidates the BuddyPress type nav, search and sort controls into one
 * presentation-only toolbar. The underlying forms/links remain BuddyPress's. */
body.jr-members-redesign .jr-members-toolbar {
    display: grid !important;
    grid-template-columns: max-content minmax(300px, 560px) max-content !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 24px !important;
    width: 100% !important;
    margin: 0 0 24px !important;
    padding: 0 !important;
}

body.jr-members-redesign .jr-members-toolbar > * {
    float: none !important;
    margin: 0 !important;
}

body.jr-members-redesign .jr-toolbar-type {
    width: auto !important;
    min-width: max-content !important;
}

body.jr-members-redesign .jr-toolbar-search {
    width: 100% !important;
    max-width: 560px !important;
    min-width: 0 !important;
    justify-self: center !important;
}

body.jr-members-redesign .jr-toolbar-sort {
    width: auto !important;
    min-width: 0 !important;
    justify-self: end !important;
    align-self: center !important;
}

/* Once its children have been promoted into the aligned toolbar, BuddyPress's
 * legacy filter wrapper must not reserve blank space. */
body.jr-members-redesign .subnav-filters.jr-toolbar-emptied,
body.jr-members-redesign .subnav-filters:empty,
body.jr-members-redesign .jr-members-directory-card .pagination:empty,
body.jr-members-redesign .jr-members-directory-card .bp-pagination:empty {
    display: none !important;
}

body.jr-members-redesign .members-type-navs,
body.jr-members-redesign .item-list-tabs:not(#subnav) {
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
}

body.jr-members-redesign .members-type-navs ul,
body.jr-members-redesign .item-list-tabs:not(#subnav) ul {
    display: flex !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
}

body.jr-members-redesign .members-type-navs li,
body.jr-members-redesign .item-list-tabs:not(#subnav) li {
    margin: 0 8px 0 0 !important;
}

body.jr-members-redesign .members-type-navs li a,
body.jr-members-redesign .item-list-tabs:not(#subnav) li a {
    display: inline-flex !important;
    align-items: center !important;
    gap: 9px !important;
    min-height: 46px !important;
    padding: 9px 16px !important;
    border: 1px solid rgba(89, 65, 49, 0.16) !important;
    border-radius: 11px !important;
    background: rgba(255,255,255,.55) !important;
    color: #544b45 !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    text-decoration: none !important;
    box-shadow: none !important;
    white-space: nowrap !important;
}

body.jr-members-redesign .members-type-navs li.selected a,
body.jr-members-redesign .members-type-navs li.current a,
body.jr-members-redesign .item-list-tabs:not(#subnav) li.selected a,
body.jr-members-redesign .item-list-tabs:not(#subnav) li.current a {
    color: #fffaf4 !important;
    background: var(--jr-deep) !important;
    border-color: var(--jr-deep) !important;
}

body.jr-members-redesign .members-type-navs .count,
body.jr-members-redesign .item-list-tabs .count {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 24px !important;
    height: 24px !important;
    margin: 0 !important;
    padding: 0 6px !important;
    border: 0 !important;
    border-radius: 999px !important;
    color: #3f3026 !important;
    background: #f1d6a0 !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
}

/* Search */
body.jr-members-redesign .dir-search,
body.jr-members-redesign .members-search,
body.jr-members-redesign .bp-search,
body.jr-members-redesign .subnav-search {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
}

body.jr-members-redesign .bp-dir-search-form,
body.jr-members-redesign .dir-search form,
body.jr-members-redesign .members-search form {
    display: flex !important;
    width: 100% !important;
    min-height: 46px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: 1px solid rgba(113, 88, 67, 0.22) !important;
    border-radius: 11px !important;
    background: #fff !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.82) !important;
}

body.jr-members-redesign .bp-dir-search-form input[type='search'],
body.jr-members-redesign .bp-dir-search-form input[type='text'],
body.jr-members-redesign .dir-search input[type='search'],
body.jr-members-redesign .dir-search input[type='text'],
body.jr-members-redesign .members-search input[type='search'],
body.jr-members-redesign .members-search input[type='text'] {
    flex: 1 1 auto !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 46px !important;
    margin: 0 !important;
    padding: 0 15px !important;
    border: 0 !important;
    border-radius: 0 !important;
    outline: 0 !important;
    background: transparent !important;
    color: var(--jr-ink) !important;
    font-size: 14px !important;
    box-shadow: none !important;
}

body.jr-members-redesign .bp-dir-search-form input::placeholder,
body.jr-members-redesign .dir-search input::placeholder,
body.jr-members-redesign .members-search input::placeholder {
    color: #99918a !important;
    opacity: 1 !important;
}

body.jr-members-redesign .bp-dir-search-form button,
body.jr-members-redesign .dir-search button,
body.jr-members-redesign .members-search button,
body.jr-members-redesign .bp-dir-search-form input[type='submit'] {
    flex: 0 0 48px !important;
    width: 48px !important;
    min-width: 48px !important;
    height: 46px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    color: #fff !important;
    background: var(--jr-deep) !important;
    box-shadow: none !important;
}

/* Sort */
body.jr-members-redesign #members-order-select,
body.jr-members-redesign .component-filters {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 10px !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
}

body.jr-members-redesign .jr-sort-label {
    flex: 0 0 auto !important;
    color: #5f5751 !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
}

/* Hide BuddyPress's visually duplicated Order By label; the JR label above is
 * the visible label while the select keeps its original accessible association. */
body.jr-members-redesign .jr-toolbar-sort > label,
body.jr-members-redesign .jr-toolbar-sort .select-wrap > label {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

body.jr-members-redesign .select-wrap {
    position: relative !important;
    width: 180px !important;
    min-width: 180px !important;
    max-width: 180px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
}

/* Some BuddyPress/theme combinations draw a second decorative chevron below
 * the select. Use the native select arrow instead so the control stays centred. */
body.jr-members-redesign .jr-toolbar-sort .select-wrap::before,
body.jr-members-redesign .jr-toolbar-sort .select-wrap::after,
body.jr-members-redesign .jr-toolbar-sort .select-arrow,
body.jr-members-redesign .jr-toolbar-sort .select-wrap > span:not(.jr-sort-label) {
    display: none !important;
    content: none !important;
}

body.jr-members-redesign .component-filters select,
body.jr-members-redesign #members-order-select select,
body.jr-members-redesign .select-wrap select {
    width: 180px !important;
    min-width: 180px !important;
    max-width: 180px !important;
    min-height: 46px !important;
    height: 46px !important;
    margin: 0 !important;
    padding: 0 34px 0 14px !important;
    border: 1px solid rgba(113, 88, 67, 0.22) !important;
    border-radius: 11px !important;
    color: var(--jr-ink) !important;
    background-color: #fff !important;
    background-image: none !important;
    font-size: 14px !important;
    box-shadow: none !important;
    appearance: auto !important;
    -webkit-appearance: menulist !important;
}

/* ---------- Directory counts ---------- */
body.jr-members-redesign .pag-count,
body.jr-members-redesign .pagination .pag-count,
body.jr-members-redesign .bp-pagination .pag-count {
    position: static !important;
    float: none !important;
    clear: both !important;
    margin: 0 !important;
    padding: 0 !important;
    color: var(--jr-muted) !important;
    font-size: 13px !important;
    line-height: 1.45 !important;
}

body.jr-members-redesign .jr-members-bottom-count {
    display: block !important;
    width: 100% !important;
    margin: 16px 0 0 !important;
    padding: 0 4px !important;
    text-align: center !important;
}

/* ---------- Member list ---------- */
body.jr-members-redesign #members-list,
body.jr-members-redesign .members-list,
body.jr-members-redesign ul.item-list {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    list-style: none !important;
}

body.jr-members-redesign #members-list > li,
body.jr-members-redesign .members-list > li,
body.jr-members-redesign ul.item-list > li {
    position: relative !important;
    display: grid !important;
    grid-template-columns: 58px minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 14px !important;
    width: 100% !important;
    min-height: 70px !important;
    margin: 0 0 8px !important;
    padding: 8px 14px !important;
    overflow: visible !important;
    border: 1px solid rgba(118, 91, 68, 0.15) !important;
    border-radius: 12px !important;
    background: rgba(255,255,255,.56) !important;
    box-shadow: 0 2px 7px rgba(60, 43, 31, 0.018) !important;
    transition: border-color .16s ease, background-color .16s ease, transform .16s ease !important;
}

body.jr-members-redesign #members-list > li:hover,
body.jr-members-redesign .members-list > li:hover,
body.jr-members-redesign ul.item-list > li:hover {
    border-color: rgba(201, 125, 83, 0.30) !important;
    background: rgba(255,255,255,.82) !important;
    transform: translateY(-1px);
}

body.jr-members-redesign #members-list .item-avatar,
body.jr-members-redesign .members-list .item-avatar,
body.jr-members-redesign ul.item-list .item-avatar {
    float: none !important;
    width: 50px !important;
    height: 50px !important;
    margin: 0 !important;
}

body.jr-members-redesign #members-list .item-avatar img,
body.jr-members-redesign .members-list .item-avatar img,
body.jr-members-redesign ul.item-list .item-avatar img,
body.jr-members-redesign #members-list img.avatar {
    display: block !important;
    width: 50px !important;
    height: 50px !important;
    margin: 0 !important;
    border-radius: 11px !important;
    object-fit: cover !important;
    box-shadow: 0 3px 9px rgba(54, 38, 27, 0.10) !important;
}

body.jr-members-redesign #members-list .item,
body.jr-members-redesign .members-list .item,
body.jr-members-redesign ul.item-list .item {
    float: none !important;
    width: auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

body.jr-members-redesign #members-list .item-title,
body.jr-members-redesign .members-list .item-title,
body.jr-members-redesign ul.item-list .item-title {
    margin: 0 !important;
    color: var(--jr-ink) !important;
    font-family: Georgia, 'Times New Roman', serif !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
}

body.jr-members-redesign #members-list .item-title a,
body.jr-members-redesign .members-list .item-title a,
body.jr-members-redesign ul.item-list .item-title a {
    color: var(--jr-ink) !important;
    font-family: inherit !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    text-decoration: none !important;
}

body.jr-members-redesign #members-list .item-meta,
body.jr-members-redesign .members-list .item-meta,
body.jr-members-redesign ul.item-list .item-meta,
body.jr-members-redesign #members-list .activity,
body.jr-members-redesign .members-list .activity {
    margin: 4px 0 0 !important;
    color: #847b74 !important;
    font-size: 12px !important;
    line-height: 1.4 !important;
}

body.jr-members-redesign .jr-generated-profile-action {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 34px !important;
    margin: 0 !important;
    padding: 5px 8px !important;
    color: #6b5141 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    border-radius: 8px !important;
}

body.jr-members-redesign .jr-generated-profile-action:hover {
    color: #3c2d24 !important;
    background: rgba(201, 125, 83, 0.09) !important;
}

/* Keep BuddyPress's own action buttons if present, but do not let their
 * legacy absolute positioning break the redesigned list. */
body.jr-members-redesign #members-list .action,
body.jr-members-redesign .members-list .action,
body.jr-members-redesign ul.item-list .action {
    position: static !important;
    float: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 7px !important;
    margin: 0 !important;
    padding: 0 !important;
}

body.jr-members-redesign #members-list .action:empty,
body.jr-members-redesign .members-list .action:empty {
    display: none !important;
}

body.jr-members-redesign #members-list .action .generic-button a,
body.jr-members-redesign .members-list .action .generic-button a {
    min-height: 32px !important;
    padding: 6px 9px !important;
    border-radius: 8px !important;
    font-size: 12px !important;
}

/* ---------- Pagination ---------- */
body.jr-members-redesign .bp-pagination.bottom,
body.jr-members-redesign .pagination.bottom {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
    margin: 16px 0 0 !important;
    text-align: center !important;
}

/* ---------- Tablet ---------- */
@media (max-width: 900px) {
    body.jr-members-redesign #main.site-main {
        width: calc(100% - 34px) !important;
    }

    body.jr-members-redesign .entry-content-wrap {
        margin-top: 20px !important;
        margin-bottom: 44px !important;
        padding: 22px !important;
    }

    body.jr-members-redesign .jr-members-hero {
        padding: 38px 22px 30px !important;
    }

    body.jr-members-redesign .jr-members-directory-card {
        padding: 24px !important;
    }

    body.jr-members-redesign .jr-members-toolbar {
        grid-template-columns: auto minmax(220px, 1fr) !important;
        gap: 12px 14px !important;
    }

    body.jr-members-redesign .jr-toolbar-sort {
        grid-column: 1 / -1 !important;
        justify-self: stretch !important;
        width: 100% !important;
        min-width: 0 !important;
        justify-content: flex-start !important;
    }

    body.jr-members-redesign .select-wrap,
    body.jr-members-redesign .component-filters select,
    body.jr-members-redesign #members-order-select select {
        flex: 1 1 auto !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
    }
}

/* ---------- Mobile ---------- */
@media (max-width: 640px) {
    body.jr-members-redesign #main.site-main {
        width: calc(100% - 18px) !important;
    }

    body.jr-members-redesign .entry-content-wrap {
        margin-top: 12px !important;
        margin-bottom: 30px !important;
        padding: 12px !important;
        border-radius: 15px !important;
    }

    body.jr-members-redesign .jr-members-hero {
        margin-bottom: 12px !important;
        padding: 30px 16px 24px !important;
        border-radius: 16px !important;
    }

    body.jr-members-redesign .jr-members-title {
        font-size: clamp(36px, 11vw, 46px) !important;
    }

    body.jr-members-redesign .jr-members-title-ornament {
        margin-top: 16px !important;
        margin-bottom: 14px !important;
    }

    body.jr-members-redesign .jr-members-subtitle {
        font-size: 14px !important;
    }

    body.jr-members-redesign .jr-members-directory-card {
        padding: 15px !important;
        border-radius: 16px !important;
    }

    body.jr-members-redesign .members-type-navs li a,
    body.jr-members-redesign .item-list-tabs:not(#subnav) li a {
        min-height: 42px !important;
        padding: 8px 12px !important;
        font-size: 13px !important;
    }

    body.jr-members-redesign .jr-members-toolbar {
        grid-template-columns: 1fr !important;
        gap: 11px !important;
        margin-bottom: 18px !important;
    }

    body.jr-members-redesign .jr-toolbar-type,
    body.jr-members-redesign .jr-toolbar-search,
    body.jr-members-redesign .jr-toolbar-sort {
        grid-column: 1 !important;
        justify-self: stretch !important;
        width: 100% !important;
        min-width: 0 !important;
    }

    body.jr-members-redesign #members-order-select,
    body.jr-members-redesign .component-filters {
        display: grid !important;
        grid-template-columns: auto minmax(0, 1fr) !important;
        gap: 8px !important;
        justify-content: stretch !important;
    }

    body.jr-members-redesign #members-list > li,
    body.jr-members-redesign .members-list > li,
    body.jr-members-redesign ul.item-list > li {
        grid-template-columns: 46px minmax(0, 1fr) !important;
        gap: 10px !important;
        min-height: 64px !important;
        padding: 8px 10px !important;
    }

    body.jr-members-redesign #members-list .item-avatar,
    body.jr-members-redesign .members-list .item-avatar,
    body.jr-members-redesign #members-list .item-avatar img,
    body.jr-members-redesign .members-list .item-avatar img,
    body.jr-members-redesign #members-list img.avatar {
        width: 44px !important;
        height: 44px !important;
    }

    body.jr-members-redesign #members-list .item-title,
    body.jr-members-redesign .members-list .item-title,
    body.jr-members-redesign ul.item-list .item-title {
        font-size: 16px !important;
    }

    body.jr-members-redesign .jr-generated-profile-action {
        grid-column: 2 !important;
        justify-self: start !important;
        min-height: 28px !important;
        padding: 3px 0 !important;
        font-size: 12px !important;
    }

    body.jr-members-redesign #members-list .action,
    body.jr-members-redesign .members-list .action,
    body.jr-members-redesign ul.item-list .action {
        grid-column: 2 !important;
        justify-content: flex-start !important;
    }
}

/* ========================================================================
 * v1.0.4 — remove leftover Kadence hero strip + redesign advanced filters
 * ===================================================================== */

/* Kadence keeps the page-hero container's height/background even when its
 * inner entry-header is hidden. Remove the whole legacy hero on this page so
 * the redesigned paper sheet starts directly below the site header. */
body.jr-members-redesign.jr-members-layout-ready #inner-wrap > .entry-hero,
body.jr-members-redesign.jr-members-layout-ready .entry-hero.page-hero-section,
body.jr-members-redesign.jr-members-layout-ready .entry-hero-container,
body.jr-members-redesign.jr-members-layout-ready .entry-hero-container-inner,
body.jr-members-redesign.jr-members-layout-ready .page-hero-section {
    display: none !important;
    min-height: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
}

/* ---------- BP Profile Search: collapsed advanced-filter control ---------- */
body.jr-members-redesign .jr-member-filter-accordion,
body.jr-members-redesign .jr-member-filter-shell {
    width: 100% !important;
    margin: 0 0 24px !important;
    padding: 0 !important;
    overflow: visible !important;
    border: 0 !important;
    border-radius: 13px !important;
    background: transparent !important;
    box-shadow: none !important;
    font-family: inherit !important;
}

body.jr-members-redesign .jr-member-filter-toggle,
body.jr-members-redesign .jr-member-filter-accordion .ui-accordion-header {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    min-height: 50px !important;
    margin: 0 !important;
    padding: 0 58px 0 18px !important;
    overflow: hidden !important;
    border: 1px solid rgba(113, 88, 67, 0.19) !important;
    border-radius: 12px !important;
    outline: 0 !important;
    color: var(--jr-heading) !important;
    background: rgba(250, 247, 241, 0.94) !important;
    background-image: none !important;
    box-shadow: 0 3px 10px rgba(58, 42, 30, 0.035) !important;
    font-size: 0 !important; /* hides the plugin's raw + / - or empty heading */
    font-weight: 700 !important;
    line-height: 1 !important;
    text-decoration: none !important;
    cursor: pointer !important;
    transition: border-color .16s ease, background-color .16s ease, box-shadow .16s ease !important;
}

body.jr-members-redesign .jr-member-filter-toggle:hover,
body.jr-members-redesign .jr-member-filter-accordion .ui-accordion-header:hover {
    border-color: rgba(201, 125, 83, 0.34) !important;
    background: #fffaf4 !important;
    box-shadow: 0 5px 14px rgba(58, 42, 30, 0.055) !important;
}

body.jr-members-redesign .jr-filter-toggle-label,
body.jr-members-redesign .jr-member-filter-toggle-fallback::before {
    display: inline-flex !important;
    align-items: center !important;
    min-width: 0 !important;
    color: var(--jr-heading) !important;
    font-family: inherit !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}

body.jr-members-redesign .jr-member-filter-toggle-fallback::before {
    content: 'Advanced member filters';
}

body.jr-members-redesign .jr-member-filter-toggle::after,
body.jr-members-redesign .jr-member-filter-accordion .ui-accordion-header::after {
    content: '+' !important;
    position: absolute !important;
    top: 50% !important;
    right: 17px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 28px !important;
    height: 28px !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: translateY(-50%) !important;
    border-radius: 999px !important;
    color: var(--jr-deep) !important;
    background: #f2dfb6 !important;
    font-family: Arial, sans-serif !important;
    font-size: 19px !important;
    font-weight: 500 !important;
    line-height: 1 !important;
    text-align: center !important;
}

body.jr-members-redesign .jr-member-filter-toggle.jr-filter-open::after,
body.jr-members-redesign .jr-member-filter-accordion .ui-accordion-header.ui-state-active::after,
body.jr-members-redesign .jr-member-filter-accordion .ui-accordion-header[aria-expanded='true']::after {
    content: '−' !important;
}

body.jr-members-redesign .jr-member-filter-accordion .ui-accordion-header.ui-state-active,
body.jr-members-redesign .jr-member-filter-accordion .ui-accordion-header[aria-expanded='true'] {
    border-color: rgba(113, 88, 67, 0.20) !important;
    border-bottom-color: rgba(113, 88, 67, 0.11) !important;
    border-radius: 12px 12px 0 0 !important;
    color: var(--jr-heading) !important;
    background: #fbf7f0 !important;
    box-shadow: none !important;
}

/* Remove all jQuery UI theme/sprite icon chrome. The JR +/- badge above is the
 * only visual expansion indicator. */
body.jr-members-redesign .jr-member-filter-accordion .ui-accordion-header-icon,
body.jr-members-redesign .jr-member-filter-accordion .ui-icon,
body.jr-members-redesign .jr-member-filter-accordion .ui-widget-header .ui-icon {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    background: none !important;
}

/* ---------- Expanded advanced-filter panel ---------- */
body.jr-members-redesign .jr-member-filter-panel,
body.jr-members-redesign .jr-member-filter-accordion .ui-accordion-content {
    width: 100% !important;
    margin: 0 !important;
    padding: 22px !important;
    overflow: visible !important;
    border: 1px solid rgba(113, 88, 67, 0.19) !important;
    border-top: 0 !important;
    border-radius: 0 0 12px 12px !important;
    color: var(--jr-ink) !important;
    background: rgba(255, 252, 247, 0.98) !important;
    background-image: none !important;
    box-shadow: 0 8px 22px rgba(58, 42, 30, 0.05) !important;
    font-family: inherit !important;
    font-size: 14px !important;
}

body.jr-members-redesign .jr-member-filter-form {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* Most BP Profile Search versions use .editfield; newer/custom templates may
 * use one of the additional field classes tagged by the JS enhancement. */
body.jr-members-redesign .jr-member-filter-form .editfield,
body.jr-members-redesign .jr-member-filter-form .jr-filter-field,
body.jr-members-redesign .jr-member-filter-form .bps-field {
    float: none !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 0 14px !important;
    padding: 16px !important;
    border: 1px solid rgba(118, 91, 68, 0.14) !important;
    border-radius: 11px !important;
    background: rgba(255,255,255,.62) !important;
    box-shadow: none !important;
}

body.jr-members-redesign .jr-member-filter-form .editfield:last-of-type,
body.jr-members-redesign .jr-member-filter-form .jr-filter-field:last-of-type {
    margin-bottom: 16px !important;
}

body.jr-members-redesign .jr-member-filter-form label,
body.jr-members-redesign .jr-member-filter-form legend,
body.jr-members-redesign .jr-member-filter-form .bps-label,
body.jr-members-redesign .jr-member-filter-form .field-label {
    display: block !important;
    margin: 0 0 8px !important;
    padding: 0 !important;
    color: var(--jr-heading) !important;
    font-family: inherit !important;
    font-size: 14px !important;
    font-style: normal !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
    text-transform: none !important;
}

body.jr-members-redesign .jr-member-filter-form label strong,
body.jr-members-redesign .jr-member-filter-form legend strong {
    color: inherit !important;
    font: inherit !important;
}

body.jr-members-redesign .jr-member-filter-form input[type='text'],
body.jr-members-redesign .jr-member-filter-form input[type='search'],
body.jr-members-redesign .jr-member-filter-form input[type='email'],
body.jr-members-redesign .jr-member-filter-form input[type='number'],
body.jr-members-redesign .jr-member-filter-form select,
body.jr-members-redesign .jr-member-filter-form textarea {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    min-height: 44px !important;
    margin: 0 !important;
    padding: 9px 12px !important;
    border: 1px solid rgba(113, 88, 67, 0.22) !important;
    border-radius: 9px !important;
    outline: 0 !important;
    color: var(--jr-ink) !important;
    background: #fff !important;
    background-image: none !important;
    font-family: inherit !important;
    font-size: 14px !important;
    font-style: normal !important;
    font-weight: 400 !important;
    line-height: 1.35 !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.82) !important;
}

body.jr-members-redesign .jr-member-filter-form input:focus,
body.jr-members-redesign .jr-member-filter-form select:focus,
body.jr-members-redesign .jr-member-filter-form textarea:focus {
    border-color: rgba(201, 125, 83, 0.55) !important;
    box-shadow: 0 0 0 3px rgba(201, 125, 83, 0.10) !important;
}

body.jr-members-redesign .jr-member-filter-form .description,
body.jr-members-redesign .jr-member-filter-form .field-description,
body.jr-members-redesign .jr-member-filter-form .jr-filter-description {
    display: block !important;
    margin: 7px 0 0 !important;
    padding: 0 !important;
    color: #817872 !important;
    font-family: inherit !important;
    font-size: 12px !important;
    font-style: normal !important;
    font-weight: 400 !important;
    line-height: 1.45 !important;
}

body.jr-members-redesign .jr-member-filter-form button[type='submit'],
body.jr-members-redesign .jr-member-filter-form input[type='submit'],
body.jr-members-redesign .jr-member-filter-form .submit input,
body.jr-members-redesign .jr-member-filter-form .submit button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    min-width: 126px !important;
    min-height: 42px !important;
    height: 42px !important;
    margin: 2px 0 0 !important;
    padding: 0 20px !important;
    border: 0 !important;
    border-radius: 999px !important;
    color: #fffaf4 !important;
    background: var(--jr-deep) !important;
    background-image: none !important;
    font-family: inherit !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    text-shadow: none !important;
    box-shadow: 0 5px 12px rgba(74, 52, 40, 0.14) !important;
    cursor: pointer !important;
}

body.jr-members-redesign .jr-member-filter-form button[type='submit']:hover,
body.jr-members-redesign .jr-member-filter-form input[type='submit']:hover {
    background: #5a4031 !important;
    transform: none !important;
}

/* If the form is using the standard .editfield structure, arrange the fields
 * into a compact three-column layout on wider screens. */
@media (min-width: 901px) {
    body.jr-members-redesign .jr-member-filter-form:has(> .editfield) {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 14px !important;
        align-items: end !important;
    }

    body.jr-members-redesign .jr-member-filter-form:has(> .editfield) > .editfield {
        margin: 0 !important;
        height: 100% !important;
    }

    body.jr-members-redesign .jr-member-filter-form:has(> .editfield) > :not(.editfield):not(input[type='hidden']) {
        grid-column: 1 / -1 !important;
    }
}

@media (max-width: 640px) {
    body.jr-members-redesign .jr-member-filter-accordion,
    body.jr-members-redesign .jr-member-filter-shell {
        margin-bottom: 16px !important;
    }

    body.jr-members-redesign .jr-member-filter-toggle,
    body.jr-members-redesign .jr-member-filter-accordion .ui-accordion-header {
        min-height: 46px !important;
        padding-left: 14px !important;
        padding-right: 52px !important;
    }

    body.jr-members-redesign .jr-member-filter-panel,
    body.jr-members-redesign .jr-member-filter-accordion .ui-accordion-content {
        padding: 14px !important;
    }

    body.jr-members-redesign .jr-member-filter-form .editfield,
    body.jr-members-redesign .jr-member-filter-form .jr-filter-field,
    body.jr-members-redesign .jr-member-filter-form .bps-field {
        padding: 13px !important;
    }
}


/* ========================================================================
 * v1.0.5 — allow the expanded advanced-filter panel to size to its content
 * ===================================================================== */
/* jQuery UI writes a pixel height inline on .ui-accordion-content. Once the
 * filter fields are restyled, that old calculated height can be too short,
 * causing the last field/help text to spill through the bottom of the card
 * and overlap the members toolbar. Force the open panel back into normal
 * document flow so the surrounding container grows with every field. */
/* Only the ACTIVE accordion panel should be auto-height. v1.0.5 applied
 * height:auto to every panel, which overrode jQuery UI's collapsed height and
 * made the filter appear permanently open. */
body.jr-members-redesign .jr-member-filter-accordion .ui-accordion-content:not(.ui-accordion-content-active) {
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    margin: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    overflow: hidden !important;
    border-top: 0 !important;
    border-bottom: 0 !important;
    box-shadow: none !important;
}

body.jr-members-redesign .jr-member-filter-accordion .ui-accordion-content-active,
body.jr-members-redesign .jr-member-filter-panel.ui-accordion-content-active {
    display: block !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 22px !important;
    overflow: visible !important;
    border: 1px solid rgba(113, 88, 67, 0.19) !important;
    border-top: 0 !important;
    box-shadow: 0 8px 22px rgba(58, 42, 30, 0.05) !important;
}

@media (max-width: 640px) {
    body.jr-members-redesign .jr-member-filter-accordion .ui-accordion-content-active,
    body.jr-members-redesign .jr-member-filter-panel.ui-accordion-content-active {
        padding: 14px !important;
    }
}

body.jr-members-redesign .jr-member-filter-accordion.ui-accordion,
body.jr-members-redesign .jr-member-filter-shell {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
}

/* Keep the form fully inside the expanded panel and ensure anything following
 * the accordion starts below it rather than alongside/through it. */
body.jr-members-redesign .jr-member-filter-form {
    display: flow-root !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
}

body.jr-members-redesign .jr-member-filter-accordion + .jr-members-toolbar,
body.jr-members-redesign .jr-member-filter-shell + .jr-members-toolbar {
    clear: both !important;
}


/* ========================================================================
 * v1.0.7 — mobile fix for the stray grey wrapper around the Active members
 * nav item. Some BuddyPress/Kadence combinations style the selected <li>
 * itself on small screens, which leaves a grey block behind the custom pill.
 * Neutralise the list item chrome so only the JR pill remains visible.
 * ===================================================================== */
@media (max-width: 640px) {
    body.jr-members-redesign .members-type-navs ul,
    body.jr-members-redesign .item-list-tabs:not(#subnav) ul {
        gap: 0 !important;
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
    }

    body.jr-members-redesign .members-type-navs li,
    body.jr-members-redesign .item-list-tabs:not(#subnav) li,
    body.jr-members-redesign .members-type-navs li.selected,
    body.jr-members-redesign .members-type-navs li.current,
    body.jr-members-redesign .item-list-tabs:not(#subnav) li.selected,
    body.jr-members-redesign .item-list-tabs:not(#subnav) li.current,
    body.jr-members-redesign li#members-all {
        display: inline-flex !important;
        align-items: center !important;
        width: auto !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        list-style: none !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    body.jr-members-redesign .members-type-navs li::before,
    body.jr-members-redesign .members-type-navs li::after,
    body.jr-members-redesign .item-list-tabs:not(#subnav) li::before,
    body.jr-members-redesign .item-list-tabs:not(#subnav) li::after {
        display: none !important;
        content: none !important;
    }
}


/* ========================================================================
 * v1.0.11 — mobile outer-wrapper alignment
 * Apply the same confirmed Kadence shell correction used on the About/legal
 * pages so the Members directory has equal left/right outer edging on phones.
 * Inner Members cards/controls keep their existing dimensions.
 * ===================================================================== */
@media (max-width: 640px) {

    body.jr-members-redesign #primary.content-area,
    body.jr-members-redesign .content-container.site-container {
        box-sizing: border-box !important;
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    body.jr-members-redesign #main.site-main {
        box-sizing: border-box !important;
        display: block !important;
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 18px !important;
    }

    body.jr-members-redesign #main.site-main > .content-wrap {
        box-sizing: border-box !important;
        display: block !important;
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        grid-template-columns: none !important;
        gap: 0 !important;
    }

    body.jr-members-redesign #main.site-main > .content-wrap > article,
    body.jr-members-redesign article.single-entry {
        box-sizing: border-box !important;
        display: block !important;
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    body.jr-members-redesign .entry-content-wrap {
        box-sizing: border-box !important;
        display: block !important;
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        margin: 12px 0 30px !important;
        padding: 12px !important;
        left: auto !important;
        right: auto !important;
        transform: none !important;
    }

    body.jr-members-redesign .entry-content.single-content,
    body.jr-members-redesign .jr-members-root {
        box-sizing: border-box !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}


/* ========================================================================
 * v1.0.12 — mobile member tabs + sort select polish
 * 1) Make Active members / My Friends equal-width, aligned pills.
 * 2) Prevent the sort select's visible text from being clipped on the left.
 * ===================================================================== */
@media (max-width: 640px) {

    /* Two equal member-directory tabs. */
    body.jr-members-redesign .members-type-navs,
    body.jr-members-redesign .item-list-tabs:not(#subnav) {
        width: 100% !important;
        max-width: 100% !important;
        overflow: visible !important;
    }

    body.jr-members-redesign .members-type-navs ul,
    body.jr-members-redesign .item-list-tabs:not(#subnav) ul {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
        width: 100% !important;
        max-width: 100% !important;
        align-items: stretch !important;
    }

    body.jr-members-redesign .members-type-navs li,
    body.jr-members-redesign .item-list-tabs:not(#subnav) li,
    body.jr-members-redesign .members-type-navs li.selected,
    body.jr-members-redesign .members-type-navs li.current,
    body.jr-members-redesign .item-list-tabs:not(#subnav) li.selected,
    body.jr-members-redesign .item-list-tabs:not(#subnav) li.current,
    body.jr-members-redesign li#members-all {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        margin: 0 !important;
    }

    body.jr-members-redesign .members-type-navs li a,
    body.jr-members-redesign .item-list-tabs:not(#subnav) li a {
        box-sizing: border-box !important;
        display: flex !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        min-height: 46px !important;
        height: 46px !important;
        margin: 0 !important;
        padding: 8px 12px !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        gap: 8px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
    }

    /* Sort row: keep the label compact and give the actual select the
       remaining space, with explicit left inset so text never clips. */
    body.jr-members-redesign #members-order-select,
    body.jr-members-redesign .component-filters {
        grid-template-columns: max-content minmax(0, 1fr) !important;
        align-items: center !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow: visible !important;
    }

    body.jr-members-redesign .jr-toolbar-sort .select-wrap,
    body.jr-members-redesign #members-order-select .select-wrap,
    body.jr-members-redesign .component-filters .select-wrap {
        box-sizing: border-box !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        overflow: visible !important;
    }

    body.jr-members-redesign .jr-toolbar-sort .select-wrap select,
    body.jr-members-redesign #members-order-select select,
    body.jr-members-redesign .component-filters select,
    body.jr-members-redesign select#members-order-by {
        box-sizing: border-box !important;
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        height: 46px !important;
        min-height: 46px !important;
        margin: 0 !important;
        padding-left: 16px !important;
        padding-right: 34px !important;
        text-indent: 0 !important;
        text-align: left !important;
        direction: ltr !important;
        line-height: normal !important;
        overflow: visible !important;
    }
}


/* ========================================================================
 * v1.0.13 — remove grey backing behind "My Friends" mobile tab
 * Keep the pill itself, but remove any inherited background/shadow from
 * the surrounding LI/wrapper so it sits cleanly on the page.
 * ===================================================================== */
@media (max-width: 640px) {

    body.jr-members-redesign .members-type-navs li,
    body.jr-members-redesign .item-list-tabs:not(#subnav) li,
    body.jr-members-redesign .members-type-navs li#members-friends,
    body.jr-members-redesign .item-list-tabs:not(#subnav) li#members-friends {
        background: transparent !important;
        background-color: transparent !important;
        box-shadow: none !important;
        border: 0 !important;
        outline: 0 !important;
    }

    body.jr-members-redesign .members-type-navs li::before,
    body.jr-members-redesign .members-type-navs li::after,
    body.jr-members-redesign .item-list-tabs:not(#subnav) li::before,
    body.jr-members-redesign .item-list-tabs:not(#subnav) li::after {
        background: transparent !important;
        box-shadow: none !important;
        border: 0 !important;
    }

    /* Preserve the visible My Friends pill itself. */
    body.jr-members-redesign .members-type-navs li#members-friends > a,
    body.jr-members-redesign .item-list-tabs:not(#subnav) li#members-friends > a {
        background: rgba(255, 253, 249, .96) !important;
        box-shadow: none !important;
    }
}


/* ========================================================================
 * v1.0.14 — real-device "My Friends" inactive backing fix
 * On some mobile browsers/BuddyPress states, the inactive tab receives an
 * extra rectangular backing/focus layer that does not appear in desktop
 * responsive emulation. Neutralise every surrounding state and clip any
 * remaining layer to the intended rounded pill.
 * ===================================================================== */
@media (max-width: 640px) {

    body.jr-members-redesign .jr-members-toolbar .jr-toolbar-type,
    body.jr-members-redesign .jr-members-toolbar .jr-toolbar-type .members-type-navs,
    body.jr-members-redesign .jr-members-toolbar .jr-toolbar-type .members-type-navs > ul {
        background: transparent !important;
        background-color: transparent !important;
        box-shadow: none !important;
        outline: 0 !important;
        border: 0 !important;
    }

    body.jr-members-redesign .jr-members-toolbar .jr-toolbar-type .members-type-navs > ul > li,
    body.jr-members-redesign .jr-members-toolbar .jr-toolbar-type .members-type-navs > ul > li:not(.selected):not(.current) {
        box-sizing: border-box !important;
        background: transparent !important;
        background-color: transparent !important;
        box-shadow: none !important;
        outline: 0 !important;
        border: 0 !important;
        border-radius: 11px !important;
        overflow: hidden !important;
        -webkit-tap-highlight-color: transparent !important;
    }

    body.jr-members-redesign .jr-members-toolbar .jr-toolbar-type .members-type-navs > ul > li::before,
    body.jr-members-redesign .jr-members-toolbar .jr-toolbar-type .members-type-navs > ul > li::after,
    body.jr-members-redesign .jr-members-toolbar .jr-toolbar-type .members-type-navs > ul > li > a::before,
    body.jr-members-redesign .jr-members-toolbar .jr-toolbar-type .members-type-navs > ul > li > a::after {
        content: none !important;
        display: none !important;
        background: transparent !important;
        box-shadow: none !important;
        border: 0 !important;
    }

    body.jr-members-redesign .jr-members-toolbar .jr-toolbar-type .members-type-navs > ul > li:not(.selected):not(.current) > a,
    body.jr-members-redesign .jr-members-toolbar .jr-toolbar-type .members-type-navs > ul > li:not(.selected):not(.current) > a:link,
    body.jr-members-redesign .jr-members-toolbar .jr-toolbar-type .members-type-navs > ul > li:not(.selected):not(.current) > a:visited,
    body.jr-members-redesign .jr-members-toolbar .jr-toolbar-type .members-type-navs > ul > li:not(.selected):not(.current) > a:hover,
    body.jr-members-redesign .jr-members-toolbar .jr-toolbar-type .members-type-navs > ul > li:not(.selected):not(.current) > a:focus,
    body.jr-members-redesign .jr-members-toolbar .jr-toolbar-type .members-type-navs > ul > li:not(.selected):not(.current) > a:active {
        box-sizing: border-box !important;
        background: rgba(255, 253, 249, .96) !important;
        background-color: rgba(255, 253, 249, .96) !important;
        box-shadow: none !important;
        outline: 0 !important;
        filter: none !important;
        border-radius: 11px !important;
        -webkit-appearance: none !important;
        appearance: none !important;
        -webkit-tap-highlight-color: transparent !important;
    }
}


/* ========================================================================
 * v1.0.15 — rebuild the mobile member tabs from the outer LI
 * Instead of trying to suppress the mystery real-device backing layer,
 * make the LI itself the visible pill and force the link/children transparent.
 * This removes any rectangular inactive background while preserving clickability.
 * ===================================================================== */
@media (max-width: 640px) {

    body.jr-members-redesign .members-type-navs ul,
    body.jr-members-redesign .item-list-tabs:not(#subnav) ul {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        border: 0 !important;
    }

    /* The LI is now the actual pill. */
    body.jr-members-redesign .members-type-navs ul > li,
    body.jr-members-redesign .item-list-tabs:not(#subnav) ul > li {
        box-sizing: border-box !important;
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        height: 46px !important;
        min-height: 46px !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 1px solid rgba(89, 65, 49, 0.16) !important;
        border-radius: 12px !important;
        background: rgba(255, 253, 249, .98) !important;
        background-color: rgba(255, 253, 249, .98) !important;
        background-image: none !important;
        box-shadow: none !important;
        outline: 0 !important;
        overflow: hidden !important;
        isolation: isolate !important;
        -webkit-tap-highlight-color: transparent !important;
    }

    /* Active/current pill. */
    body.jr-members-redesign .members-type-navs ul > li.selected,
    body.jr-members-redesign .members-type-navs ul > li.current,
    body.jr-members-redesign .item-list-tabs:not(#subnav) ul > li.selected,
    body.jr-members-redesign .item-list-tabs:not(#subnav) ul > li.current {
        background: var(--jr-deep) !important;
        background-color: var(--jr-deep) !important;
        border-color: var(--jr-deep) !important;
    }

    /* Strip ALL backgrounds from the link and its children. */
    body.jr-members-redesign .members-type-navs ul > li > a,
    body.jr-members-redesign .item-list-tabs:not(#subnav) ul > li > a {
        box-sizing: border-box !important;
        display: flex !important;
        width: 100% !important;
        height: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 8px 12px !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        border: 0 !important;
        border-radius: 0 !important;
        outline: 0 !important;
        background: transparent !important;
        background-color: transparent !important;
        background-image: none !important;
        box-shadow: none !important;
        filter: none !important;
        color: #544b45 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        -webkit-appearance: none !important;
        appearance: none !important;
        -webkit-tap-highlight-color: transparent !important;
    }

    body.jr-members-redesign .members-type-navs ul > li > a *,
    body.jr-members-redesign .item-list-tabs:not(#subnav) ul > li > a * {
        background-image: none !important;
        box-shadow: none !important;
    }

    body.jr-members-redesign .members-type-navs ul > li.selected > a,
    body.jr-members-redesign .members-type-navs ul > li.current > a,
    body.jr-members-redesign .item-list-tabs:not(#subnav) ul > li.selected > a,
    body.jr-members-redesign .item-list-tabs:not(#subnav) ul > li.current > a {
        color: #fffaf4 !important;
    }

    /* Retain the gold count badge only. */
    body.jr-members-redesign .members-type-navs .count,
    body.jr-members-redesign .item-list-tabs:not(#subnav) .count {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-width: 30px !important;
        height: 30px !important;
        margin: 0 !important;
        padding: 0 7px !important;
        border: 0 !important;
        border-radius: 999px !important;
        background: var(--jr-gold) !important;
        background-color: var(--jr-gold) !important;
        color: #3f3027 !important;
        box-shadow: none !important;
    }

    /* Kill any browser/theme-generated decorative layers around either tab. */
    body.jr-members-redesign .members-type-navs ul > li::before,
    body.jr-members-redesign .members-type-navs ul > li::after,
    body.jr-members-redesign .members-type-navs ul > li > a::before,
    body.jr-members-redesign .members-type-navs ul > li > a::after,
    body.jr-members-redesign .item-list-tabs:not(#subnav) ul > li::before,
    body.jr-members-redesign .item-list-tabs:not(#subnav) ul > li::after,
    body.jr-members-redesign .item-list-tabs:not(#subnav) ul > li > a::before,
    body.jr-members-redesign .item-list-tabs:not(#subnav) ul > li > a::after {
        content: none !important;
        display: none !important;
    }
}


/* ========================================================================
 * v1.0.16 — desktop Sort by dropdown text inset
 * Desktop only: add a little more internal left space and neutralise any
 * inherited text offset so "Last Active" is fully visible.
 * ===================================================================== */
@media (min-width: 783px) {

    body.jr-members-redesign .jr-toolbar-sort .select-wrap,
    body.jr-members-redesign #members-order-select .select-wrap,
    body.jr-members-redesign .component-filters .select-wrap {
        overflow: visible !important;
    }

    body.jr-members-redesign .jr-toolbar-sort .select-wrap select,
    body.jr-members-redesign #members-order-select select,
    body.jr-members-redesign .component-filters select,
    body.jr-members-redesign select#members-order-by {
        box-sizing: border-box !important;
        padding-left: 20px !important;
        padding-right: 34px !important;
        text-indent: 2px !important;
        text-align: left !important;
        direction: ltr !important;
        line-height: normal !important;
        overflow: visible !important;
    }
}


/* ========================================================================
 * v1.0.17 — mobile member tabs: fully rounded pills
 * Round Active members / My Friends into softer pill shapes on phones.
 * ===================================================================== */
@media (max-width: 640px) {

    body.jr-members-redesign .members-type-navs ul > li,
    body.jr-members-redesign .item-list-tabs:not(#subnav) ul > li {
        border-radius: 999px !important;
    }

    body.jr-members-redesign .members-type-navs ul > li > a,
    body.jr-members-redesign .item-list-tabs:not(#subnav) ul > li > a {
        border-radius: 999px !important;
    }
}


/* ========================================================================
 * v1.0.18 — force rounded active state on "My Friends"
 * The active My Friends state inherits a more specific rectangular rule.
 * Override both the LI and its active/current anchor with maximum specificity.
 * ===================================================================== */
@media (max-width: 640px) {

    body.jr-members-redesign .jr-members-toolbar .jr-toolbar-type .members-type-navs > ul > li#members-friends,
    body.jr-members-redesign .jr-members-toolbar .jr-toolbar-type .members-type-navs > ul > li#members-friends.selected,
    body.jr-members-redesign .jr-members-toolbar .jr-toolbar-type .members-type-navs > ul > li#members-friends.current,
    body.jr-members-redesign .members-type-navs ul > li#members-friends,
    body.jr-members-redesign .members-type-navs ul > li#members-friends.selected,
    body.jr-members-redesign .members-type-navs ul > li#members-friends.current {
        border-radius: 999px !important;
        overflow: hidden !important;
    }

    body.jr-members-redesign .jr-members-toolbar .jr-toolbar-type .members-type-navs > ul > li#members-friends > a,
    body.jr-members-redesign .jr-members-toolbar .jr-toolbar-type .members-type-navs > ul > li#members-friends.selected > a,
    body.jr-members-redesign .jr-members-toolbar .jr-toolbar-type .members-type-navs > ul > li#members-friends.current > a,
    body.jr-members-redesign .members-type-navs ul > li#members-friends > a,
    body.jr-members-redesign .members-type-navs ul > li#members-friends.selected > a,
    body.jr-members-redesign .members-type-navs ul > li#members-friends.current > a,
    body.jr-members-redesign .members-type-navs ul > li#members-friends > a:active,
    body.jr-members-redesign .members-type-navs ul > li#members-friends > a:focus {
        border-radius: 999px !important;
        overflow: hidden !important;
        background-clip: padding-box !important;
    }

    /* Some BuddyPress/theme builds mark the link itself instead of the LI. */
    body.jr-members-redesign .members-type-navs a.selected,
    body.jr-members-redesign .members-type-navs a.current,
    body.jr-members-redesign .members-type-navs a[aria-current="page"] {
        border-radius: 999px !important;
        overflow: hidden !important;
        background-clip: padding-box !important;
    }
}


/* ========================================================================
 * v1.0.19 — desktop-only: remove the duplicate Kadence rounded backing layer.
 * Keep .entry-content-wrap as the sole visible outer paper container.
 * These are non-layout changes: no widths, margins, padding, heights, border
 * or shadow of .entry-content-wrap are altered. Other pages and small-screen
 * layouts are unaffected.
 * ===================================================================== */
@media (min-width: 1025px) {
    html body.jr-members-redesign #main.site-main > .content-wrap,
    html body.jr-members-redesign #main.site-main > .content-wrap > article,
    html body.jr-members-redesign #main.site-main .content-wrap > article,
    html body.jr-members-redesign #main.site-main article.single-entry,
    html body.jr-members-redesign #main.site-main article.entry {
        background: transparent !important;
        background-image: none !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        outline: 0 !important;
    }

    html body.jr-members-redesign #main.site-main > .content-wrap::before,
    html body.jr-members-redesign #main.site-main > .content-wrap::after,
    html body.jr-members-redesign #main.site-main article.single-entry::before,
    html body.jr-members-redesign #main.site-main article.single-entry::after,
    html body.jr-members-redesign #main.site-main article.entry::before,
    html body.jr-members-redesign #main.site-main article.entry::after {
        content: none !important;
        display: none !important;
    }
}