/*
 * JR My Connections Redesign v1.3.5
 * Confirmed master-template standardisation using Invited Memories v1.0.5.
 * Only the shared shell/container and title/header geometry are standardised here.
 * Connections-specific directory/table/control styling remains unchanged.
 */

body.jr-connections-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: #67615c;
    --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;
    --jr-master-card: #fffdfa;
    --jr-master-heading: #513b2f;
    --jr-master-radius-card: 24px;
}

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

/* Remove the original page title/hero only after our rebuilt shell exists. */
body.jr-connections-redesign.jr-connections-layout-ready .entry-header,
body.jr-connections-redesign.jr-connections-layout-ready .page-header,
body.jr-connections-redesign.jr-connections-layout-ready header.entry-header,
body.jr-connections-redesign.jr-connections-layout-ready .entry-hero,
body.jr-connections-redesign.jr-connections-layout-ready .entry-hero-container-inner,
body.jr-connections-redesign.jr-connections-layout-ready .page-title-wrap {
    display: none !important;
}

/* The legacy plugin wrapper is deliberately removed from layout by JS after
 * its real table has been moved into the new Members-style root. */
body.jr-connections-redesign .jr-connections-legacy-hidden {
    display: none !important;
}

/* ---------- Confirmed Invited Memories v1.0.5 master shell ---------- */
/* Preserve Kadence's native constrained width at #primary/.content-container.
 * These levels deliberately receive box-sizing only; no width:100% override. */
body.jr-connections-redesign #primary.content-area,
body.jr-connections-redesign .content-container.site-container {
    box-sizing: border-box !important;
}

/* 24px horizontal inset on each side of the Kadence-constrained content area. */
body.jr-connections-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-connections-redesign #main.site-main > .content-wrap,
body.jr-connections-redesign #main.site-main .content-wrap > article,
body.jr-connections-redesign article.single-entry,
body.jr-connections-redesign .entry-content-wrap {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
}

/* The Kadence entry wrapper is the single shared outer/background container.
 * Its 32px horizontal padding creates the confirmed inner usable content area. */
body.jr-connections-redesign .entry-content-wrap {
    margin: 76px auto 92px !important;
    padding: 40px 32px 46px !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;
}

/* Clear intermediate theme/Kadence geometry so the redesign root inherits exactly
 * the usable width created by .entry-content-wrap. */
body.jr-connections-redesign .entry-content.single-content,
body.jr-connections-redesign .entry-content.single-content .kt-row-column-wrap,
body.jr-connections-redesign .jr-connections-root {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

body.jr-connections-redesign .entry-content.single-content .kt-row-column-wrap {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* ---------- Title/header card: confirmed Invited Memories v1.0.5 master ---------- */
body.jr-connections-redesign .jr-connections-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-master-card, #fffdfa) !important;
    border: 1px solid rgba(118,90,65,.15) !important;
    border-radius: var(--jr-master-radius-card, 24px) !important;
    box-shadow: 0 9px 24px rgba(58,42,30,.055) !important;
}

body.jr-connections-redesign .jr-connections-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-master-heading, #513b2f) !important;
    text-align: center !important;
}

body.jr-connections-redesign .jr-connections-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-connections-redesign .jr-connections-title-ornament::before,
body.jr-connections-redesign .jr-connections-title-ornament::after {
    content: "" !important;
    display: block !important;
    flex: 1 1 auto !important;
    height: 1px !important;
    background: currentColor !important;
}

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

body.jr-connections-redesign .jr-connections-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: exact Members v1.0.6 geometry ---------- */
body.jr-connections-redesign .jr-connections-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;
    overflow: hidden !important;
}

/* ---------- Toolbar ---------- */
body.jr-connections-redesign .jr-connections-toolbar {
    display: grid !important;
    grid-template-columns: max-content minmax(240px, 1fr) 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-connections-redesign .jr-count-badge,
body.jr-connections-redesign .jr-search-wrap,
body.jr-connections-redesign .jr-sort-group,
body.jr-connections-redesign .jr-sort-wrap {
    margin: 0 !important;
    float: none !important;
}

body.jr-connections-redesign .jr-count-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 9px !important;
    min-width: max-content !important;
    min-height: 46px !important;
    padding: 0 16px !important;
    border: 1px solid #e7d5bd !important;
    border-radius: 12px !important;
    background: #fff5e8 !important;
    color: #9d5420 !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
}

body.jr-connections-redesign .jr-count-badge svg,
body.jr-connections-redesign .jr-search-wrap svg {
    width: 18px !important;
    height: 18px !important;
    flex: 0 0 auto !important;
}

body.jr-connections-redesign .jr-search-wrap {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    width: 100% !important;
    max-width: 560px !important;
    min-width: 0 !important;
    min-height: 46px !important;
    padding: 0 14px !important;
    justify-self: center !important;
    border: 1px solid #e4d9cb !important;
    border-radius: 12px !important;
    background: rgba(255, 253, 249, 0.96) !important;
    color: #7b7168 !important;
}

body.jr-connections-redesign .jr-search {
    width: 100% !important;
    min-width: 0 !important;
    height: 42px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    outline: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--jr-ink) !important;
    font: inherit !important;
}

body.jr-connections-redesign .jr-search::placeholder {
    color: #9d958e !important;
}

/* Sort mirrors the Members page: label + bounded select, so it can never
 * overhang the directory card as the old Connections select did. */
body.jr-connections-redesign .jr-sort-group {
    display: flex !important;
    align-items: center !important;
    justify-self: end !important;
    gap: 12px !important;
    min-width: 0 !important;
    white-space: nowrap !important;
}

body.jr-connections-redesign .jr-sort-label {
    color: #544a43 !important;
    font-size: 14px !important;
    font-weight: 700 !important;
}

body.jr-connections-redesign .jr-sort-wrap {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    width: 180px !important;
    min-width: 180px !important;
    max-width: 180px !important;
    min-height: 46px !important;
    padding: 0 12px !important;
    border: 1px solid #e4d9cb !important;
    border-radius: 12px !important;
    background: rgba(255, 253, 249, 0.96) !important;
}

body.jr-connections-redesign .jr-sort {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 42px !important;
    margin: 0 !important;
    padding: 0 28px 0 0 !important;
    border: 0 !important;
    outline: 0 !important;
    background-color: transparent !important;
    box-shadow: none !important;
    color: var(--jr-ink) !important;
    font: inherit !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    text-overflow: ellipsis !important;
    cursor: pointer !important;
}

body.jr-connections-redesign .jr-search-wrap:focus-within,
body.jr-connections-redesign .jr-sort-wrap:focus-within {
    border-color: rgba(201, 125, 83, 0.7) !important;
    box-shadow: 0 0 0 3px rgba(201, 125, 83, 0.10) !important;
}

/* ---------- Connections table ---------- */
body.jr-connections-redesign table.jr-connections-table {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    table-layout: auto !important;
    border: 1px solid #e3d6c5 !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    background: rgba(255,255,255,.72) !important;
}

body.jr-connections-redesign table.jr-connections-table thead th {
    padding: 15px 18px !important;
    border: 0 !important;
    border-bottom: 1px solid #e3d6c5 !important;
    background: #f2eadf !important;
    color: #2f2722 !important;
    font-size: 14px !important;
    font-weight: 750 !important;
    line-height: 1.2 !important;
    text-align: left !important;
    white-space: nowrap !important;
}

body.jr-connections-redesign table.jr-connections-table tbody td {
    padding: 14px 18px !important;
    border: 0 !important;
    border-bottom: 1px solid #eee6dc !important;
    background: rgba(255,255,255,.52) !important;
    color: #342b25 !important;
    vertical-align: middle !important;
    font-size: 14px !important;
    line-height: 1.35 !important;
}

body.jr-connections-redesign table.jr-connections-table tbody tr:nth-child(even) td {
    background: rgba(250,247,241,.78) !important;
}

body.jr-connections-redesign table.jr-connections-table tbody tr:last-child td {
    border-bottom: 0 !important;
}

body.jr-connections-redesign .jr-person-cell {
    width: 72px !important;
}

body.jr-connections-redesign .jr-avatar {
    width: 38px !important;
    height: 38px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    border: 1px solid #e0cfb7 !important;
    border-radius: 50% !important;
    background: linear-gradient(145deg, #efe3d1, #d8c3a4) !important;
    color: #6f4b2b !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    letter-spacing: .03em !important;
    box-shadow: inset 0 0 0 3px rgba(255,255,255,.48) !important;
}

body.jr-connections-redesign .jr-avatar img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 50% !important;
}

body.jr-connections-redesign .jr-avatar--private {
    background: #f0e6d8 !important;
    color: #756354 !important;
}

body.jr-connections-redesign .jr-avatar--private svg {
    width: 19px !important;
    height: 19px !important;
}

body.jr-connections-redesign .jr-private-label {
    display: block !important;
    color: #4b4038 !important;
    font-weight: 700 !important;
    font-style: italic !important;
}

body.jr-connections-redesign .jr-private-note {
    display: block !important;
    margin-top: 2px !important;
    color: #8b8077 !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    font-style: normal !important;
}

/* =========================================================
   v1.3.6 — Gold profile button styling
   Bring the Connections page profile CTAs in line with the
   current JustReminisce gold pill-button treatment.
   ========================================================= */
body.jr-connections-redesign table.jr-connections-table a.jr-view-profile,
body.jr-connections-redesign table.jr-connections-table a[href*="profile"] {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 34px !important;
    padding: 6px 12px !important;
    border: 1px solid #aa8248 !important;
    border-radius: 999px !important;
    background: linear-gradient(180deg, #c8aa70 0%, #b58d54 100%) !important;
    background-color: #b58d54 !important;
    background-image: linear-gradient(180deg, #c8aa70 0%, #b58d54 100%) !important;
    color: #ffffff !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 1.1 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    box-shadow: 0 8px 18px rgba(112,79,38,.14) !important;
    text-shadow: none !important;
    transition: background .18s ease, transform .18s ease, box-shadow .18s ease !important;
}

body.jr-connections-redesign table.jr-connections-table a.jr-view-profile:hover,
body.jr-connections-redesign table.jr-connections-table a.jr-view-profile:focus,
body.jr-connections-redesign table.jr-connections-table a.jr-view-profile:focus-visible,
body.jr-connections-redesign table.jr-connections-table a[href*="profile"]:hover,
body.jr-connections-redesign table.jr-connections-table a[href*="profile"]:focus,
body.jr-connections-redesign table.jr-connections-table a[href*="profile"]:focus-visible {
    background: linear-gradient(180deg, #d0b57d 0%, #bd965d 100%) !important;
    background-color: #bd965d !important;
    background-image: linear-gradient(180deg, #d0b57d 0%, #bd965d 100%) !important;
    border-color: #a97f45 !important;
    color: #ffffff !important;
    box-shadow: 0 10px 22px rgba(112,79,38,.18) !important;
    transform: translateY(-1px) !important;
    outline: none !important;
}

body.jr-connections-redesign .jr-empty-state {
    display: none !important;
    margin: 18px 0 0 !important;
    padding: 22px 16px !important;
    border: 1px dashed #ddcdb8 !important;
    border-radius: 12px !important;
    background: #fffaf3 !important;
    color: #74685d !important;
    text-align: center !important;
}

body.jr-connections-redesign .jr-empty-state.is-visible {
    display: block !important;
}

/* ---------- Responsive: exact Members shell breakpoints ---------- */
@media (max-width: 900px) {
    body.jr-connections-redesign #main.site-main {
        width: calc(100% - 34px) !important;
    }

    body.jr-connections-redesign .entry-content-wrap {
        margin: 52px auto 64px !important;
        padding: 32px 22px 38px !important;
    }

    body.jr-connections-redesign .jr-connections-root {
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }

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

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

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

    body.jr-connections-redesign .jr-sort-group {
        grid-column: 1 / -1 !important;
        justify-self: stretch !important;
        width: 100% !important;
    }

    body.jr-connections-redesign .jr-sort-wrap {
        width: 100% !important;
    }
}

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

    body.jr-connections-redesign .entry-content-wrap {
        margin: 32px auto 40px !important;
        padding: 20px 12px 26px !important;
        border-radius: 16px !important;
    }

    body.jr-connections-redesign .jr-connections-root {
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
        border-radius: 0 !important;
    }

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

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

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

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

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

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

    body.jr-connections-redesign .jr-count-badge,
    body.jr-connections-redesign .jr-search-wrap,
    body.jr-connections-redesign .jr-sort-group {
        grid-column: 1 !important;
        justify-self: stretch !important;
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
    }

    body.jr-connections-redesign .jr-count-badge {
        justify-content: center !important;
    }

    body.jr-connections-redesign .jr-sort-group {
        display: grid !important;
        grid-template-columns: max-content minmax(0, 1fr) !important;
    }

    body.jr-connections-redesign table.jr-connections-table,
    body.jr-connections-redesign table.jr-connections-table tbody,
    body.jr-connections-redesign table.jr-connections-table tr,
    body.jr-connections-redesign table.jr-connections-table td {
        display: block !important;
        width: 100% !important;
    }

    body.jr-connections-redesign table.jr-connections-table {
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        overflow: visible !important;
    }

    body.jr-connections-redesign table.jr-connections-table thead {
        position: absolute !important;
        width: 1px !important;
        height: 1px !important;
        overflow: hidden !important;
        clip: rect(0 0 0 0) !important;
        white-space: nowrap !important;
    }

    body.jr-connections-redesign table.jr-connections-table tbody tr {
        position: relative !important;
        margin: 0 0 12px !important;
        padding: 15px 14px 13px 68px !important;
        border: 1px solid var(--jr-line) !important;
        border-radius: 14px !important;
        background: rgba(255,255,255,.77) !important;
        box-shadow: 0 6px 16px rgba(71,49,29,.06) !important;
    }

    body.jr-connections-redesign table.jr-connections-table tbody td,
    body.jr-connections-redesign table.jr-connections-table tbody tr:nth-child(even) td {
        min-height: 0 !important;
        padding: 4px 0 !important;
        border: 0 !important;
        background: transparent !important;
        font-size: 13px !important;
    }

    body.jr-connections-redesign table.jr-connections-table tbody td:not(.jr-person-cell)::before {
        content: attr(data-label) !important;
        display: inline-block !important;
        min-width: 82px !important;
        margin-right: 7px !important;
        color: #867a70 !important;
        font-size: 10px !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
        letter-spacing: .035em !important;
    }

    body.jr-connections-redesign .jr-person-cell {
        position: absolute !important;
        left: 14px !important;
        top: 15px !important;
        width: 40px !important;
        padding: 0 !important;
    }

    body.jr-connections-redesign .jr-avatar {
        width: 40px !important;
        height: 40px !important;
    }

    body.jr-connections-redesign table.jr-connections-table td[data-label="Profile"] {
        margin-top: 7px !important;
    }

    body.jr-connections-redesign table.jr-connections-table td[data-label="Profile"]::before {
        display: none !important;
    }
}


/* =========================================================
   v1.3.2 — MOBILE CONNECTIONS FINALISATION
   1) Match the corrected single-shell mobile edge treatment
      used across the other JustReminisce pages.
   2) Reformat each mobile connection row so the avatar no
      longer overlaps the labels/details.
   ========================================================= */

@media (max-width: 767px) {

    /* ---- Single clean outer paper shell / equal side spacing ---- */
    body.jr-connections-redesign #primary.content-area,
    body.jr-connections-redesign .content-container.site-container {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

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

    /* Remove the redundant Kadence/global paper layers that create the
       extra visible strip/backing container on the right. */
    body.jr-connections-redesign #main.site-main > .content-wrap,
    body.jr-connections-redesign #main.site-main > .content-wrap > article,
    body.jr-connections-redesign #main.site-main .content-wrap > article,
    body.jr-connections-redesign article.single-entry,
    body.jr-connections-redesign article.entry {
        box-sizing: border-box !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        background: transparent !important;
        background-image: none !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        filter: none !important;
    }

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

    body.jr-connections-redesign .entry-content-wrap {
        box-sizing: border-box !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 24px 0 40px !important;
        padding: 20px 12px 26px !important;
        border-radius: 16px !important;
        box-shadow: none !important;
        overflow: hidden !important;
    }

    body.jr-connections-redesign .jr-connections-root,
    body.jr-connections-redesign .jr-connections-hero,
    body.jr-connections-redesign .jr-connections-directory-card {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* ---- Better mobile connection-row format ---- */
    body.jr-connections-redesign table.jr-connections-table tbody tr {
        display: grid !important;
        grid-template-columns: 56px minmax(0, 1fr) !important;
        grid-template-areas:
            "avatar first"
            "avatar surname"
            "avatar nickname"
            "profile profile" !important;
        column-gap: 14px !important;
        row-gap: 8px !important;
        margin: 0 0 14px !important;
        padding: 18px !important;
        border: 1px solid rgba(118,91,68,.17) !important;
        border-radius: 16px !important;
        background: rgba(255,255,255,.80) !important;
        box-shadow: none !important;
        overflow: hidden !important;
    }

    body.jr-connections-redesign table.jr-connections-table tbody td,
    body.jr-connections-redesign table.jr-connections-table tbody tr:nth-child(even) td {
        display: grid !important;
        grid-template-columns: 112px minmax(0, 1fr) !important;
        align-items: center !important;
        width: 100% !important;
        min-width: 0 !important;
        min-height: 28px !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
        font-size: 14px !important;
        line-height: 1.35 !important;
    }

    body.jr-connections-redesign table.jr-connections-table tbody td::before {
        min-width: 0 !important;
        margin-right: 10px !important;
        color: #867a70 !important;
        font-size: 10px !important;
        font-weight: 750 !important;
        line-height: 1.2 !important;
        text-transform: uppercase !important;
        letter-spacing: .035em !important;
    }

    body.jr-connections-redesign table.jr-connections-table tbody td[data-label="First Name"] {
        grid-area: first !important;
    }

    body.jr-connections-redesign table.jr-connections-table tbody td[data-label="Surname"] {
        grid-area: surname !important;
    }

    body.jr-connections-redesign table.jr-connections-table tbody td[data-label="Nickname"] {
        grid-area: nickname !important;
    }

    body.jr-connections-redesign .jr-person-cell {
        position: static !important;
        grid-area: avatar !important;
        display: flex !important;
        align-items: flex-start !important;
        justify-content: center !important;
        width: 56px !important;
        min-width: 56px !important;
        padding: 0 !important;
    }

    body.jr-connections-redesign .jr-person-cell::before {
        display: none !important;
    }

    body.jr-connections-redesign .jr-avatar {
        width: 48px !important;
        height: 48px !important;
        flex: 0 0 48px !important;
        margin-top: 2px !important;
    }

    body.jr-connections-redesign table.jr-connections-table td[data-label="Profile"] {
        grid-area: profile !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 5px 0 0 !important;
        padding-top: 12px !important;
        border-top: 1px solid rgba(118,91,68,.12) !important;
    }

    body.jr-connections-redesign table.jr-connections-table td[data-label="Profile"]::before {
        display: none !important;
    }

    body.jr-connections-redesign table.jr-connections-table a.jr-view-profile,
    body.jr-connections-redesign table.jr-connections-table a[href*="profile"] {
        min-width: 142px !important;
        min-height: 40px !important;
        padding: 8px 16px !important;
        border-radius: 11px !important;
        text-align: center !important;
    }
}


/* =========================================================
   v1.3.3 — MOBILE PRIVATE-CONNECTION CARD
   Private rows use different content from ordinary connection rows,
   so give them their own mobile layout rather than forcing them into
   the generic avatar/details grid.
   ========================================================= */
@media (max-width: 767px) {

    body.jr-connections-redesign table.jr-connections-table tbody tr.jr-private-row {
        display: grid !important;
        grid-template-columns: 1fr !important;
        grid-template-areas:
            "avatar"
            "first"
            "surname"
            "nickname"
            "profile" !important;
        row-gap: 10px !important;
        column-gap: 0 !important;
        padding: 20px 18px 18px !important;
        text-align: center !important;
    }

    /* Lock/avatar becomes a proper centred privacy marker. */
    body.jr-connections-redesign table.jr-connections-table tbody tr.jr-private-row .jr-person-cell {
        grid-area: avatar !important;
        display: flex !important;
        position: static !important;
        width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        justify-content: center !important;
        align-items: center !important;
    }

    body.jr-connections-redesign table.jr-connections-table tbody tr.jr-private-row .jr-avatar {
        width: 52px !important;
        height: 52px !important;
        flex: 0 0 52px !important;
        margin: 0 !important;
    }

    /* "Private connection" reads as the card heading, not as a first-name value. */
    body.jr-connections-redesign table.jr-connections-table tbody tr.jr-private-row td[data-label="First Name"] {
        grid-area: first !important;
        display: block !important;
        width: 100% !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 6px 8px !important;
        text-align: center !important;
    }

    body.jr-connections-redesign table.jr-connections-table tbody tr.jr-private-row td[data-label="First Name"]::before {
        display: none !important;
        content: none !important;
    }

    body.jr-connections-redesign table.jr-connections-table tbody tr.jr-private-row .jr-private-label {
        display: block !important;
        margin: 0 0 5px !important;
        color: #4b4038 !important;
        font-size: 17px !important;
        font-weight: 750 !important;
        font-style: italic !important;
        line-height: 1.2 !important;
        text-align: center !important;
    }

    body.jr-connections-redesign table.jr-connections-table tbody tr.jr-private-row .jr-private-note {
        display: block !important;
        width: min(250px, 100%) !important;
        margin: 0 auto !important;
        color: #8b8077 !important;
        font-size: 13px !important;
        font-weight: 500 !important;
        font-style: normal !important;
        line-height: 1.42 !important;
        text-align: center !important;
    }

    /* Keep the remaining private fields tidy and consistently aligned. */
    body.jr-connections-redesign table.jr-connections-table tbody tr.jr-private-row td[data-label="Surname"],
    body.jr-connections-redesign table.jr-connections-table tbody tr.jr-private-row td[data-label="Nickname"] {
        display: grid !important;
        grid-template-columns: 94px auto !important;
        justify-content: center !important;
        align-items: center !important;
        width: 100% !important;
        min-height: 30px !important;
        margin: 0 !important;
        padding: 0 !important;
        text-align: left !important;
    }

    body.jr-connections-redesign table.jr-connections-table tbody tr.jr-private-row td[data-label="Surname"] {
        grid-area: surname !important;
    }

    body.jr-connections-redesign table.jr-connections-table tbody tr.jr-private-row td[data-label="Nickname"] {
        grid-area: nickname !important;
    }

    body.jr-connections-redesign table.jr-connections-table tbody tr.jr-private-row td[data-label="Surname"]::before,
    body.jr-connections-redesign table.jr-connections-table tbody tr.jr-private-row td[data-label="Nickname"]::before {
        display: block !important;
        min-width: 0 !important;
        margin: 0 12px 0 0 !important;
        text-align: right !important;
    }

    /* Profile action gets its own full-width footer row. */
    body.jr-connections-redesign table.jr-connections-table tbody tr.jr-private-row td[data-label="Profile"] {
        grid-area: profile !important;
        display: flex !important;
        width: 100% !important;
        margin: 4px 0 0 !important;
        padding: 14px 0 0 !important;
        border-top: 1px solid rgba(118,91,68,.12) !important;
        justify-content: center !important;
        align-items: center !important;
    }

    body.jr-connections-redesign table.jr-connections-table tbody tr.jr-private-row td[data-label="Profile"]::before {
        display: none !important;
        content: none !important;
    }

    body.jr-connections-redesign table.jr-connections-table tbody tr.jr-private-row a.jr-view-profile,
    body.jr-connections-redesign table.jr-connections-table tbody tr.jr-private-row a[href*="profile"] {
        width: min(220px, 100%) !important;
        min-width: 0 !important;
        min-height: 42px !important;
        padding: 9px 16px !important;
        justify-content: center !important;
        text-align: center !important;
    }
}


/* =========================================================
   v1.3.4 — REAL-HANDSET BREAKPOINT CONSISTENCY
   Samsung/Android browser viewport can resolve above 640px.
   Apply the corrected mobile card layout through 767px so the
   live handset matches the verified DevTools mobile rendering.
   ========================================================= */
@media (max-width: 767px) {
    body.jr-connections-redesign table.jr-connections-table tbody tr {
        box-sizing: border-box !important;
        max-width: 100% !important;
    }

    body.jr-connections-redesign table.jr-connections-table tbody tr:not(.jr-private-row) .jr-person-cell {
        position: static !important;
        left: auto !important;
        right: auto !important;
        top: auto !important;
        transform: none !important;
        align-self: start !important;
    }

    body.jr-connections-redesign table.jr-connections-table tbody tr:not(.jr-private-row) .jr-avatar {
        position: static !important;
        transform: none !important;
    }

    body.jr-connections-redesign .jr-connections-directory-card {
        overflow: hidden !important;
    }
}


/* =========================================================
   v1.3.5 — REAL PHONE STANDARD CONNECTION CARD
   The handset was already receiving the mobile rules; the
   remaining issue was the two-column card itself, which left
   the avatar pressed against / clipped by the card edge.
   Standard (non-private) rows now use a centred avatar above
   a compact label/value stack, with the profile action in a
   clean footer row.
   ========================================================= */
@media (max-width: 767px) {

    body.jr-connections-redesign table.jr-connections-table tbody tr:not(.jr-private-row) {
        display: grid !important;
        grid-template-columns: 1fr !important;
        grid-template-areas:
            "avatar"
            "first"
            "surname"
            "nickname"
            "profile" !important;
        row-gap: 8px !important;
        column-gap: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 0 14px !important;
        padding: 18px 18px 16px !important;
        overflow: hidden !important;
        text-align: center !important;
    }

    /* Avatar: fully inside the card and centred. */
    body.jr-connections-redesign table.jr-connections-table tbody tr:not(.jr-private-row) .jr-person-cell {
        grid-area: avatar !important;
        position: static !important;
        display: flex !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        height: auto !important;
        margin: 0 0 6px !important;
        padding: 0 !important;
        justify-content: center !important;
        align-items: center !important;
        transform: none !important;
        overflow: visible !important;
    }

    body.jr-connections-redesign table.jr-connections-table tbody tr:not(.jr-private-row) .jr-person-cell::before {
        display: none !important;
        content: none !important;
    }

    body.jr-connections-redesign table.jr-connections-table tbody tr:not(.jr-private-row) .jr-avatar {
        position: static !important;
        width: 52px !important;
        height: 52px !important;
        min-width: 52px !important;
        flex: 0 0 52px !important;
        margin: 0 auto !important;
        transform: none !important;
    }

    /* Detail rows: consistent label/value alignment. */
    body.jr-connections-redesign table.jr-connections-table tbody tr:not(.jr-private-row) td[data-label="First Name"],
    body.jr-connections-redesign table.jr-connections-table tbody tr:not(.jr-private-row) td[data-label="Surname"],
    body.jr-connections-redesign table.jr-connections-table tbody tr:not(.jr-private-row) td[data-label="Nickname"] {
        display: grid !important;
        grid-template-columns: 105px minmax(0, 1fr) !important;
        align-items: center !important;
        justify-content: stretch !important;
        width: 100% !important;
        max-width: 330px !important;
        min-width: 0 !important;
        min-height: 30px !important;
        margin: 0 auto !important;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
        text-align: left !important;
    }

    body.jr-connections-redesign table.jr-connections-table tbody tr:not(.jr-private-row) td[data-label="First Name"] {
        grid-area: first !important;
    }

    body.jr-connections-redesign table.jr-connections-table tbody tr:not(.jr-private-row) td[data-label="Surname"] {
        grid-area: surname !important;
    }

    body.jr-connections-redesign table.jr-connections-table tbody tr:not(.jr-private-row) td[data-label="Nickname"] {
        grid-area: nickname !important;
    }

    body.jr-connections-redesign table.jr-connections-table tbody tr:not(.jr-private-row) td[data-label="First Name"]::before,
    body.jr-connections-redesign table.jr-connections-table tbody tr:not(.jr-private-row) td[data-label="Surname"]::before,
    body.jr-connections-redesign table.jr-connections-table tbody tr:not(.jr-private-row) td[data-label="Nickname"]::before {
        display: block !important;
        width: auto !important;
        min-width: 0 !important;
        margin: 0 12px 0 0 !important;
        text-align: right !important;
        white-space: nowrap !important;
    }

    /* Profile button footer. */
    body.jr-connections-redesign table.jr-connections-table tbody tr:not(.jr-private-row) td[data-label="Profile"] {
        grid-area: profile !important;
        display: flex !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 6px 0 0 !important;
        padding: 14px 0 0 !important;
        border-top: 1px solid rgba(118,91,68,.12) !important;
        justify-content: center !important;
        align-items: center !important;
        background: transparent !important;
    }

    body.jr-connections-redesign table.jr-connections-table tbody tr:not(.jr-private-row) td[data-label="Profile"]::before {
        display: none !important;
        content: none !important;
    }

    body.jr-connections-redesign table.jr-connections-table tbody tr:not(.jr-private-row) a.jr-view-profile,
    body.jr-connections-redesign table.jr-connections-table tbody tr:not(.jr-private-row) a[href*="profile"] {
        width: min(220px, 100%) !important;
        min-width: 0 !important;
        min-height: 42px !important;
        margin: 0 auto !important;
        padding: 9px 16px !important;
        justify-content: center !important;
        text-align: center !important;
        white-space: nowrap !important;
    }
}

/* ========================================================================
 * v1.3.7 — Desktop single-shell rounded-corner cleanup
 * The existing .entry-content-wrap retains its paper background, 22px
 * rounded border, shadow, width and padding. Clear only the outer Kadence
 * surfaces that can reveal a second overlapping curved corner.
 * This does not affect tablet/mobile rendering or Connections controls.
 * ===================================================================== */
@media (min-width: 1025px) {
    html body.jr-connections-redesign #main.site-main > .content-wrap,
    html body.jr-connections-redesign #main.site-main > .content-wrap > article,
    html body.jr-connections-redesign #main.site-main .content-wrap > article,
    html body.jr-connections-redesign #main.site-main article.single-entry,
    html body.jr-connections-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-connections-redesign #main.site-main > .content-wrap::before,
    html body.jr-connections-redesign #main.site-main > .content-wrap::after,
    html body.jr-connections-redesign #main.site-main article.single-entry::before,
    html body.jr-connections-redesign #main.site-main article.single-entry::after,
    html body.jr-connections-redesign #main.site-main article.entry::before,
    html body.jr-connections-redesign #main.site-main article.entry::after {
        content: none !important;
        display: none !important;
    }
}