/* ===== Buyer self-view "← Back to profile" floating chip =====
   Renders top-left of viewport on /friends/, /escrow/, /notifications/,
   /reviews/, /messages/ when the buyer is on their own profile. Sits
   above content with z-index, soft white pill with a 1px purple-tinted
   border. ===== */
.snifffr-mp-back-to-profile {
    position: fixed;
    top: 76px;
    left: 12px;
    z-index: 95;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px 7px 10px;
    border-radius: 999px;
    background: #fff;
    color: var(--snifffr-mp-purple, #423E59) !important;
    border: 1px solid rgba(66, 62, 89, 0.14);
    box-shadow: 0 2px 6px rgba(66, 62, 89, 0.12);
    font-size: 12px;
    font-weight: 600;
    text-decoration: none !important;
    line-height: 1;
}
.snifffr-mp-back-to-profile:hover,
.snifffr-mp-back-to-profile:focus {
    background: var(--snifffr-mp-lavender, #ECEAF2);
    color: var(--snifffr-mp-purple, #423E59) !important;
    text-decoration: none !important;
}
.snifffr-mp-back-to-profile-arrow {
    font-size: 14px;
    font-weight: 700;
    color: var(--snifffr-mp-pink, #E65C95);
    line-height: 1;
}
/* Hide above the mobile breakpoint — desktop has its own nav. */
@media (min-width: 992px) {
    .snifffr-mp-back-to-profile {
        display: none;
    }
}

/* ===== /buyers/ /sellers/ member list — kill grey legacy chrome =====
   custom.css has at least five separate @media-gated rules that paint
   `#buddypress ul.member-main-list li` with width:154px,
   background-color:var(--color-bg), and a 1px var(--color-bg) border
   on .member-item-block. Many of those rules cascade at mobile widths
   even when the redesign is on, leaving grey chips around each card.
   Anchored to body.snifffr-mobile-beta + !important so it beats every
   legacy ID-prefixed rule regardless of @media ordering, viewport, or
   wrapper presence. ===== */
body.snifffr-mobile-beta #buddypress ul.member-main-list li {
    background: transparent !important;
    background-color: transparent !important;
    border: 0 !important;
}
body.snifffr-mobile-beta #buddypress ul.member-main-list li .member-item-block {
    border: 0 !important;
    box-shadow:
        0 1px 2px rgba(66, 62, 89, 0.04),
        0 4px 14px rgba(66, 62, 89, 0.08) !important;
}

/* ===== Escrow confirm dialog — modern mobile restyle =====
   The "Are you sure you want to cancel this order?" prompt is a stock
   jQuery UI dialog; the legacy desktop styles above leave it square,
   bordered, with a stripe of the empty titlebar peeking through. On
   mobile we replace it with a soft card: rounded, drop-shadowed, pink
   Yes / outline No buttons, full-width tap targets. ===== */
@media (max-width: 991.98px) {
    body.snifffr-mobile-beta.escrow .ui-dialog.ui-widget,
    body.snifffr-mobile-beta.escrow .ui-widget.ui-widget-content,
    body.snifffr-mobile-beta .ui-dialog.ui-widget.ui-widget-content {
        border: 0 !important;
        border-radius: 18px !important;
        background: #fff !important;
        box-shadow: 0 24px 48px rgba(20, 18, 35, 0.32) !important;
        overflow: hidden;
        padding: 0 !important;
        max-width: calc(100vw - 32px) !important;
        width: 340px !important;
        left: 50% !important;
        transform: translateX(-50%);
    }
    /* Empty titlebar collapses entirely so the message reads as the lead. */
    body.snifffr-mobile-beta.escrow .ui-dialog .ui-dialog-titlebar,
    body.snifffr-mobile-beta .ui-dialog .ui-dialog-titlebar {
        display: none !important;
        background: transparent !important;
        border: 0 !important;
    }
    body.snifffr-mobile-beta.escrow .ui-dialog .ui-dialog-content,
    body.snifffr-mobile-beta .ui-dialog .ui-dialog-content {
        padding: 22px 20px 18px !important;
        margin: 0 !important;
        font-size: 15px !important;
        line-height: 1.45 !important;
        color: var(--snifffr-mp-purple, #423E59) !important;
        font-weight: 600;
        text-align: center;
        background: #fff !important;
    }
    body.snifffr-mobile-beta.escrow .ui-dialog .ui-dialog-buttonpane,
    body.snifffr-mobile-beta .ui-dialog .ui-dialog-buttonpane {
        margin: 0 !important;
        padding: 0 16px 18px !important;
        border: 0 !important;
        background: #fff !important;
    }
    body.snifffr-mobile-beta.escrow .ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset,
    body.snifffr-mobile-beta .ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset {
        float: none !important;
        display: flex;
        gap: 10px;
        width: 100%;
    }
    body.snifffr-mobile-beta.escrow .ui-dialog .ui-dialog-buttonpane button,
    body.snifffr-mobile-beta .ui-dialog .ui-dialog-buttonpane button {
        flex: 1 1 0;
        margin: 0 !important;
        padding: 13px 16px !important;
        border: 0 !important;
        border-radius: 999px !important;
        font-size: 14px !important;
        font-weight: 700 !important;
        letter-spacing: 0.02em;
        text-transform: none;
        cursor: pointer;
        line-height: 1;
        transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
    }
    /* First button (Yes / confirm) — pink primary. */
    body.snifffr-mobile-beta.escrow .ui-dialog .ui-dialog-buttonpane button:first-child,
    body.snifffr-mobile-beta .ui-dialog .ui-dialog-buttonpane button:first-child {
        background: var(--snifffr-mp-pink, #d63384) !important;
        color: #fff !important;
        box-shadow: 0 6px 16px rgba(214, 51, 132, 0.28) !important;
    }
    body.snifffr-mobile-beta.escrow .ui-dialog .ui-dialog-buttonpane button:first-child:hover,
    body.snifffr-mobile-beta .ui-dialog .ui-dialog-buttonpane button:first-child:hover {
        background: var(--snifffr-mp-pink, #d63384) !important;
        transform: translateY(-1px);
        box-shadow: 0 8px 20px rgba(214, 51, 132, 0.36) !important;
    }
    /* Second button (No / dismiss) — outline secondary. */
    body.snifffr-mobile-beta.escrow .ui-dialog .ui-dialog-buttonpane button:last-child,
    body.snifffr-mobile-beta .ui-dialog .ui-dialog-buttonpane button:last-child {
        background: #fff !important;
        color: var(--snifffr-mp-purple, #423E59) !important;
        border: 1.5px solid rgba(66, 62, 89, 0.16) !important;
    }
    body.snifffr-mobile-beta.escrow .ui-dialog .ui-dialog-buttonpane button:last-child:hover,
    body.snifffr-mobile-beta .ui-dialog .ui-dialog-buttonpane button:last-child:hover {
        background: var(--snifffr-mp-lavender, #ECEAF2) !important;
        color: var(--snifffr-mp-purple, #423E59) !important;
        border-color: rgba(66, 62, 89, 0.28) !important;
    }
    /* Backdrop — darker + slight blur for the modern modal feel. */
    body.snifffr-mobile-beta.escrow .ui-widget-overlay,
    body.snifffr-mobile-beta .ui-widget-overlay {
        background: rgba(20, 18, 35, 0.55) !important;
        opacity: 1 !important;
        backdrop-filter: blur(2px);
        -webkit-backdrop-filter: blur(2px);
    }
}


/* ==========================================================================
   /buyers/ rebuilt sidebar layout (col-lg-3 + col-lg-9) — mirrors the
   /shop/ and /sellers/ sidebars. Buyer template also carries the
   `.seller-filter-sidebar` and `.seller-filter-form` classes so most
   of the shared selectors above already apply here too — these rules
   below cover the buyer-specific wrapper (`.buyer-filter-sidebar`)
   and should be deduped into the shared selector after both ship.
   ========================================================================== */

.buyer-page-row {
    margin-top: 12px;
}

.buyer-filter-sidebar {
    background: #fff;
    border: 1px solid rgba(51, 46, 77, 0.08);
    border-radius: 12px;
    padding: 20px 18px 16px;
    margin-bottom: 25px;
    box-shadow: 0 2px 10px rgba(51, 46, 77, 0.05);
    text-align: left;
}

@media (min-width: 992px) {
    .buyer-filter-sidebar {
        position: sticky;
        top: 90px;
        align-self: flex-start;
    }
}

@media (max-width: 991.98px) {
    .buyer-filter-sidebar.deskfill {
        display: none !important;
    }
}

/* ==========================================================================
   snifffr mobile profile redesign (Apr 2026)
   Shell rendered alongside desktop profile in home.php; gated by viewport.
   Brand vars are scoped here so the site-wide --color-purple etc. are not
   disturbed.
   ========================================================================== */

.snifffr-mp,
.snifffr-profile-mobile-wrap {
    --snifffr-mp-purple:     #423E59;
    --snifffr-mp-purple-60:  rgba(66, 62, 89, 0.6);
    --snifffr-mp-purple-08:  rgba(66, 62, 89, 0.22);
    --snifffr-mp-pink:       #E65C95;
    --snifffr-mp-pink-soft:  #FFC8E6;
    --snifffr-mp-lavender:   #ECEAF2;
    --snifffr-mp-active:     #1d9e75;
}

/* Default (≥992px desktop): hide the mobile shell, keep the original layout. */
.snifffr-profile-mobile-wrap { display: none; }

/* Pages that render content only inside the mobile wrap (e.g. the bupr
   add-review form, which would create duplicate element IDs if rendered in
   both wraps) opt in to --always so the mobile shell shows on desktop too,
   and --hidden silences the empty desktop wrap. */
.snifffr-profile-mobile-wrap.snifffr-profile-mobile-wrap--always { display: block; }
.snifffr-profile-desktop-wrap.snifffr-profile-desktop-wrap--hidden { display: none !important; }

@media (max-width: 991.98px) {
    /* Mobile: show the new shell, hide the original desktop profile DOM.
       Every rule below is gated to body.snifffr-mobile-beta so the
       layout-killing overrides (100vw pin, container/row/col gutter
       removal, body bg flip) only apply to allow-listed users. Without
       this scope these rules were squeezing the legacy desktop wrap
       sideways for everyone on mobile and producing the half-old
       half-new look. */
    body.snifffr-mobile-beta { background-color: #fff; }
    body.snifffr-mobile-beta.bp-user .container { padding-left: 0; padding-right: 0; }
    /* Defensive: prevents any single overflowing child element from
       letting the body horizontally scroll on mobile. Scope to body
       only — applying overflow-x:hidden to BOTH html and body promotes
       overflow-y from visible to auto on both, creating two competing
       scroll containers and stuttery touch scrolling.

       Width is pinned to 100vw so on browsers/emulators that reserve
       space for a vertical scrollbar (Mac DevTools mobile emulator,
       desktop browsers with classic scrollbars) the body extends to
       the full visual viewport — matching the position:fixed bottom
       bar, which is positioned relative to the viewport not the
       document. Real iOS Safari uses overlay scrollbars so this is
       a no-op there. */
    body.snifffr-mobile-beta,
    html:has(body.snifffr-mobile-beta) {
        width: 100vw !important;
        max-width: 100vw !important;
        margin: 0 !important;
        background-color: #fff;
    }
    body.snifffr-mobile-beta {
        overflow-x: hidden;
    }
    /* Kill the bootstrap container/row/col padding+margin chain on
       BuddyPress member pages so the mobile snifffr-mp content fills
       edge-to-edge. */
    body.snifffr-mobile-beta.bp-user .container,
    body.snifffr-mobile-beta.bp-user .row,
    body.snifffr-mobile-beta.bp-user [class*="col-"] {
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        max-width: 100% !important;
    }
    body.snifffr-mobile-beta .snifffr-profile-mobile-wrap {
        display: block;
        margin: 0;
        background: #fff;
        border-radius: 0;
        overflow: hidden;
    }
    body.snifffr-mobile-beta .snifffr-profile-desktop-wrap { display: none !important; }

    /* Manage mode: self-seller tapped "+ Add" on an owned tab. Flip the
       wraps so the existing desktop create form is reachable on mobile. */
    body.snifffr-mp-manage .snifffr-profile-mobile-wrap { display: none !important; }
    body.snifffr-mp-manage .snifffr-profile-desktop-wrap { display: block !important; }
}

/* "+ Add" CTA at the top of an owned tab (Shop/IU/PC/Gallery). */
.snifffr-mp-add-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 5px 0 20px;
    padding: 8px 14px;
    border: 0;
    border-radius: 999px;
    background: var(--snifffr-mp-pink);
    color: #fff;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
}
.snifffr-mp-add-cta:hover,
.snifffr-mp-add-cta:focus { color: #fff; opacity: 0.92; }
.snifffr-mp-add-cta-icon { font-size: 16px; line-height: 1; }

/* Back button in the desktop wrap. Hidden by default; only shown on mobile
   when manage mode is active. */
.snifffr-mp-manage-back { display: none; }
@media (max-width: 991.98px) {
    /* The shop / IU / PC click handlers scroll the page down to the form
       on open, which used to push this pill out of view. Sticky-pin it to
       the top of the desktop-wrap so it stays accessible after that scroll. */
    body.snifffr-mp-manage .snifffr-profile-desktop-wrap { position: relative; }
    body.snifffr-mp-manage .snifffr-mp-manage-back {
        display: inline-flex !important;
        align-items: center;
        position: sticky;
        top: 0;
        z-index: 30;
        margin: 15px 16px 15px !important;
        padding: 8px 14px;
        border: 1px solid var(--snifffr-mp-purple-08);
        border-radius: 999px;
        background: #fff;
        color: var(--snifffr-mp-purple);
        font-family: inherit;
        font-size: 13px;
        font-weight: 600;
        cursor: pointer;
        appearance: none;
        -webkit-appearance: none;
        box-shadow: 0 4px 12px rgba(66, 62, 89, 0.08);
    }
}

/* ---- snifffr mobile profile: header (cover + identity) ---- */

.snifffr-mp { background: #fff; color: var(--snifffr-mp-purple); font-size: 14px; }

.snifffr-mp-cover-wrap { position: relative; padding: 20px 16px 0; }

.snifffr-mp-cover {
    height: 250px;
    border-radius: 16px;
    background: linear-gradient(135deg, var(--snifffr-mp-pink-soft) 0%, var(--snifffr-mp-pink) 100%);
    background-size: cover;
    background-position: center;
    position: relative;
    overflow: hidden;
}

/* Multi-image cover slider — horizontal scroll-snap, native swipe. */
.snifffr-mp-cover-wrap.is-slider { padding-bottom: 18px; }
.snifffr-mp-cover-slider {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    border-radius: 16px;
}
.snifffr-mp-cover-slider::-webkit-scrollbar { display: none; }
.snifffr-mp-cover--slide {
    flex: 0 0 100%;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    border-radius: 16px;
}
.snifffr-mp-cover-dots {
    position: absolute;
    bottom: 6px;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    gap: 6px;
    pointer-events: none;
}
.snifffr-mp-cover-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.55);
    transition: background-color 0.2s ease, transform 0.2s ease;
}
.snifffr-mp-cover-dot.is-active {
    background: #fff;
    transform: scale(1.3);
}
.snifffr-mp-cover-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.35);
    color: #fff;
    cursor: pointer;
    z-index: 2;
    opacity: 0.85;
    transition: background 0.15s ease, opacity 0.15s ease;
    -webkit-tap-highlight-color: transparent;
}
.snifffr-mp-cover-arrow:hover,
.snifffr-mp-cover-arrow:focus {
    background: rgba(0, 0, 0, 0.55);
    opacity: 1;
    outline: none;
}
.snifffr-mp-cover-arrow--prev { left: 8px; }
.snifffr-mp-cover-arrow--next { right: 8px; }
/* Only ever rendered inside .is-slider, but defend in case markup
   shifts — hide outside slider mode so a single image never shows arrows. */
.snifffr-mp-cover-wrap:not(.is-slider) .snifffr-mp-cover-arrow {
    display: none !important;
}

.snifffr-mp-cover-pill {
    position: absolute;
    top: 10px;
    left: 10px;
    background: rgba(255, 255, 255, 0.95);
    color: #993556;
    font-size: 10px;
    padding: 4px 10px;
    border-radius: 12px;
    font-weight: 500;
    line-height: 1;
}

.snifffr-mp-avatar {
    position: absolute;
    left: 50%;
    bottom: -32px;
    transform: translateX(-50%);
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: #fff;
    padding: 3px;
    box-sizing: content-box;
}
.snifffr-mp-avatar img {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}
.snifffr-mp-avatar-dot {
    position: absolute;
    bottom: 4px;
    right: 4px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--snifffr-mp-active);
    border: 2px solid #fff;
    box-sizing: content-box;
}
/* Honour blur flag (matches desktop wbd-shouldBlur semantics). */
.snifffr-mp--blur .snifffr-mp-cover,
.snifffr-mp--blur .snifffr-mp-avatar img { filter: blur(14px); }

/* Self-only camera overlays for changing cover / avatar. */
.snifffr-mp-cover-edit {
    position: absolute;
    top: 32px;
    right: 28px;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    z-index: 10;
}
.snifffr-mp-cover-edit:hover,
.snifffr-mp-cover-edit:focus { color: #fff; background: rgba(0, 0, 0, 0.7); }

.snifffr-mp-avatar-edit {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 20px;
    height: 20px;
    padding: 0;
    border-radius: 50%;
    background: var(--snifffr-mp-pink);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    border: 1px solid #fff;
    box-sizing: border-box;
    line-height: 0;
    z-index: 3;
}
.snifffr-mp-avatar-edit svg { width: 10px; height: 10px; display: block; }
.snifffr-mp-avatar-edit:hover,
.snifffr-mp-avatar-edit:focus { color: #fff; opacity: 0.92; }

/* Avatar upload + crop sheet body. */
.snifffr-mp-avatar-upload { display: flex; flex-direction: column; gap: 12px; }

.snifffr-mp-avatar-pick {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 16px;
    border: 1px dashed var(--snifffr-mp-purple-08);
    border-radius: 12px;
    background: #fafafa;
    color: var(--snifffr-mp-purple);
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
}
.snifffr-mp-avatar-pick-icon { font-size: 18px; }

.snifffr-mp-avatar-stage { display: flex; flex-direction: column; gap: 8px; }

.snifffr-mp-avatar-crop {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: #000;
    border-radius: 12px;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
}
.snifffr-mp-avatar-crop-img {
    position: absolute;
    top: 50%;
    left: 50%;
    max-width: none;
    transform-origin: center center;
    transform: translate(-50%, -50%);
    pointer-events: none;
    will-change: transform;
}
/* Circular cutout overlay so the user sees the actual avatar shape. */
.snifffr-mp-avatar-crop-mask {
    position: absolute;
    inset: 0;
    pointer-events: none;
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.45);
    border-radius: 50%;
    /* Inset shadow trick: rounded mask sits inside the box,
       and the giant outer shadow darkens everything outside. */
    margin: 4%;
}

.snifffr-mp-avatar-zoom-row {
    display: flex;
    align-items: center;
    gap: 10px;
}
.snifffr-mp-avatar-zoom { flex: 1; }
.snifffr-mp-avatar-zoom-icon { color: var(--snifffr-mp-purple-60); font-size: 16px; width: 14px; text-align: center; }

.snifffr-mp-avatar-hint {
    font-size: 12px;
    color: var(--snifffr-mp-purple-60);
    text-align: center;
}

.snifffr-mp-avatar-feedback {
    font-size: 13px;
    padding: 8px 12px;
    border-radius: 8px;
    text-align: center;
}
.snifffr-mp-avatar-feedback.is-error { background: #fde8ee; color: #b3263f; }
.snifffr-mp-avatar-feedback.is-success { background: #e6f7ee; color: #1d7a4f; }

.snifffr-mp-avatar-submit:disabled { opacity: 0.5; cursor: not-allowed; }

/* Cover photos sheet body. */
.snifffr-mp-cover-upload { display: flex; flex-direction: column; gap: 12px; }
.snifffr-mp-cover-hint { font-size: 12px; color: var(--snifffr-mp-purple-60); }

.snifffr-mp-cover-thumbs {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
    gap: 8px;
}
.snifffr-mp-cover-thumb {
    position: relative;
    aspect-ratio: 4 / 3;
    border-radius: 8px;
    overflow: hidden;
    background: #eee;
}
.snifffr-mp-cover-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.snifffr-mp-cover-thumb-remove {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 22px;
    height: 22px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.65);
    color: #fff;
    font-size: 16px;
    line-height: 22px;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
}

.snifffr-mp-cover-add {
    aspect-ratio: 4 / 3;
    border: 2px dashed var(--snifffr-mp-purple-08);
    border-radius: 8px;
    background: #fafafa;
    color: var(--snifffr-mp-purple-60);
    font-size: 28px;
    font-weight: 300;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.snifffr-mp-cover-feedback {
    font-size: 13px;
    padding: 8px 12px;
    border-radius: 8px;
    text-align: center;
}
.snifffr-mp-cover-feedback.is-error { background: #fde8ee; color: #b3263f; }
.snifffr-mp-cover-feedback.is-success { background: #e6f7ee; color: #1d7a4f; }

.snifffr-mp-cover-save:disabled { opacity: 0.5; cursor: not-allowed; }

/* ==========================================================================
   Mobile profile edit (/profile/edit/) — full-screen edit page at ≤991.98px.
   Three sticky sub-tabs swap visible field panels in place; submit POSTs
   the whole form via AJAX (snifffr_mp_edit_save).
   ========================================================================== */

.snifffr-mpe {
    --snifffr-mp-purple:     #423E59;
    --snifffr-mp-purple-60:  rgba(66, 62, 89, 0.6);
    --snifffr-mp-purple-08:  rgba(66, 62, 89, 0.22);
    --snifffr-mp-pink:       #E65C95;
    --snifffr-mp-lavender:   #ECEAF2;
    background: #fff;
    color: var(--snifffr-mp-purple);
    font-size: 14px;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.snifffr-mpe-header {
    position: sticky;
    top: 0;
    z-index: 20;
    background: #fff;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--snifffr-mp-purple-08);
}
.snifffr-mpe-back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    color: var(--snifffr-mp-purple);
    text-decoration: none;
    border-radius: 50%;
}
.snifffr-mpe-back:hover { background: var(--snifffr-mp-lavender); color: var(--snifffr-mp-purple); }
.snifffr-mpe-title {
    flex: 1;
    text-align: center;
    font-weight: 600;
    font-size: 16px;
}
.snifffr-mpe-header-spacer { width: 36px; }

.snifffr-mpe-tabs {
    position: sticky;
    top: 60px; /* sits below the 60px header */
    z-index: 19;
    background: #fff;
    display: flex;
    gap: 0;
    padding: 0 16px;
    border-bottom: 1px solid var(--snifffr-mp-purple-08);
}
.snifffr-mpe-tab {
    flex: 1;
    background: transparent;
    border: 0;
    padding: 12px 4px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    color: var(--snifffr-mp-purple-60);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    appearance: none;
    -webkit-appearance: none;
}
.snifffr-mpe-tab.is-active {
    color: var(--snifffr-mp-pink);
    border-bottom-color: var(--snifffr-mp-pink);
}

.snifffr-mpe-form { padding: 16px; padding-bottom: 96px; }

.snifffr-mpe-panel { display: flex; flex-direction: column; gap: 14px; }
.snifffr-mpe-panel[hidden] { display: none; }

.snifffr-mpe-field { display: flex; flex-direction: column; gap: 6px; }
.snifffr-mpe-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--snifffr-mp-purple-60);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

body .snifffr-mpe-input,
body .snifffr-mpe-textarea,
body .snifffr-mpe-select {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--snifffr-mp-purple-08);
    border-radius: 10px;
    background: #fff;
    color: var(--snifffr-mp-purple);
    font-family: inherit;
    font-size: 14px;
    line-height: 1.4;
    box-sizing: border-box;
    appearance: none;
    -webkit-appearance: none;
}
body .snifffr-mpe-textarea { resize: vertical; min-height: 120px; }
body .snifffr-mpe-input:focus,
body .snifffr-mpe-textarea:focus,
body .snifffr-mpe-select:focus {
    outline: none;
    border-color: var(--snifffr-mp-pink);
    box-shadow: 0 0 0 3px rgba(230, 92, 149, 0.15);
}
body .snifffr-mpe-select {
    background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2210%22%20height%3D%226%22%20viewBox%3D%220%200%2010%206%22%3E%3Cpath%20fill%3D%22%23423E59%22%20d%3D%22M0%200l5%206%205-6z%22%2F%3E%3C%2Fsvg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 36px;
}

/* Checkbox-group as pill chips. */
.snifffr-mpe-checks {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.snifffr-mpe-check {
    display: inline-flex;
    align-items: center;
    padding: 8px 14px;
    border: 1px solid var(--snifffr-mp-purple-08);
    border-radius: 999px;
    font-size: 13px;
    color: var(--snifffr-mp-purple);
    cursor: pointer;
    user-select: none;
    background: #fff;
    transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
.snifffr-mpe-check input { position: absolute; opacity: 0; pointer-events: none; }
.snifffr-mpe-check.is-checked {
    background: var(--snifffr-mp-pink);
    border-color: var(--snifffr-mp-pink);
    color: #fff;
}

.snifffr-mpe-feedback {
    margin-top: 12px;
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 13px;
    text-align: center;
}
.snifffr-mpe-feedback.is-error { background: #fde8ee; color: #b3263f; }
.snifffr-mpe-feedback.is-success { background: #e6f7ee; color: #1d7a4f; }

/* Sticky save bar at the bottom. */
.snifffr-mpe-actions {
    position: sticky;
    bottom: 0;
    margin: 16px -16px -16px;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
    background: #fff;
    border-top: 1px solid var(--snifffr-mp-purple-08);
    z-index: 18;
}
body .snifffr-mpe-submit {
    width: 100%;
    padding: 14px;
    border: 0;
    border-radius: 12px;
    background: var(--snifffr-mp-pink);
    color: #fff;
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
}
body .snifffr-mpe-submit:disabled { opacity: 0.5; cursor: not-allowed; }

/* When the Interview tab is active, hide the entire xprofile form — its
   16/96px padding eats vertical space even with empty panels, and its
   sticky save bar isn't relevant on the Interview tab anyway. */
.snifffr-mpe[data-active-tab="interview"] .snifffr-mpe-form { display: none; }

/* Interview panel (4th tab on /profile/edit/) — questions list + save.
   Lives outside the main form so it needs its own 16/96 padding. */
.snifffr-mpe-panel--interview {
    padding: 16px;
    padding-bottom: 96px;
}
.snifffr-mpe-interview-intro {
    font-size: 13px;
    color: var(--snifffr-mp-purple-60);
    margin: 0 0 16px;
    line-height: 1.45;
}
.snifffr-mpe-interview-empty {
    font-size: 14px;
    color: var(--snifffr-mp-purple-60);
    margin: 24px 0;
    text-align: center;
}
.snifffr-mpe-interview-list { display: flex; flex-direction: column; gap: 14px; }
.snifffr-mpe-q {
    background: #fff;
    border: 1px solid var(--snifffr-mp-purple-08);
    border-radius: 12px;
    padding: 14px;
}
.snifffr-mpe-q-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--snifffr-mp-purple);
    margin-bottom: 8px;
    line-height: 1.4;
}
.snifffr-mpe-q-input {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--snifffr-mp-purple-08);
    border-radius: 10px;
    background: #fff;
    color: var(--snifffr-mp-purple);
    font-family: inherit;
    font-size: 14px;
    line-height: 1.4;
    box-sizing: border-box;
    resize: vertical;
    min-height: 96px;
    appearance: none;
    -webkit-appearance: none;
}
.snifffr-mpe-q-input:focus {
    outline: 0;
    border-color: var(--snifffr-mp-pink);
    box-shadow: 0 0 0 3px rgba(230, 92, 149, 0.12);
}
.snifffr-mpe-interview-feedback {
    font-size: 13px;
    margin-top: 10px;
    padding: 10px 12px;
    border-radius: 10px;
}
.snifffr-mpe-interview-feedback.is-success {
    color: #1d9e75;
    background: rgba(35, 153, 95, 0.10);
    border: 1px solid rgba(35, 153, 95, 0.20);
}
.snifffr-mpe-interview-feedback.is-error {
    color: #c0322c;
    background: rgba(192, 50, 44, 0.10);
    border: 1px solid rgba(192, 50, 44, 0.20);
}
.snifffr-mpe-panel--interview .snifffr-mpe-actions {
    /* Same sticky pink save styling as the xprofile actions row. */
    position: sticky;
    bottom: 0;
    margin: 16px -16px -16px;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
    background: #fff;
    border-top: 1px solid var(--snifffr-mp-purple-08);
    z-index: 18;
}
.snifffr-mpe-interview-save {
    width: 100%;
    padding: 14px;
    border: 0;
    border-radius: 12px;
    background: var(--snifffr-mp-pink);
    color: #fff;
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    box-sizing: border-box;
}
.snifffr-mpe-interview-save:disabled { opacity: 0.5; cursor: not-allowed; }

/* ==========================================================================
   Mobile profile settings (/settings/*) — shared chrome wraps BP's existing
   per-screen forms. Tab strip horizontally scrolls (5 tabs > screen width)
   and a thin body restyles BP's .standard-form for mobile.
   ========================================================================== */

.snifffr-mps {
    --snifffr-mp-purple:     #423E59;
    --snifffr-mp-purple-60:  rgba(66, 62, 89, 0.6);
    --snifffr-mp-purple-08:  rgba(66, 62, 89, 0.22);
    --snifffr-mp-pink:       #E65C95;
    --snifffr-mp-lavender:   #ECEAF2;
    background: #fff;
    color: var(--snifffr-mp-purple);
    font-size: 14px;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.snifffr-mps-header {
    position: sticky;
    top: 0;
    z-index: 20;
    background: #fff;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--snifffr-mp-purple-08);
}
.snifffr-mps-back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    color: var(--snifffr-mp-purple);
    text-decoration: none;
    border-radius: 50%;
}
.snifffr-mps-back:hover { background: var(--snifffr-mp-lavender); color: var(--snifffr-mp-purple); }
.snifffr-mps-title {
    flex: 1;
    text-align: center;
    font-weight: 600;
    font-size: 16px;
}
.snifffr-mps-header-spacer { width: 36px; }

.snifffr-mps-tabs {
    position: sticky;
    top: 60px;
    z-index: 19;
    background: #fff;
    display: flex;
    gap: 0;
    padding: 0 8px;
    border-bottom: 1px solid var(--snifffr-mp-purple-08);
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.snifffr-mps-tabs::-webkit-scrollbar { display: none; }
.snifffr-mps-tab {
    flex: 0 0 auto;
    padding: 12px 12px;
    font-size: 13px;
    font-weight: 600;
    color: var(--snifffr-mp-purple-60);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    white-space: nowrap;
}
.snifffr-mps-tab:hover { color: var(--snifffr-mp-purple); }
.snifffr-mps-tab.is-active {
    color: var(--snifffr-mp-pink);
    border-bottom-color: var(--snifffr-mp-pink);
}

.snifffr-mps-body { padding: 16px; padding-bottom: 96px; }

/* ---- Restyle BP's .standard-form markup that the embedded screens
   render. Scoped under .snifffr-mps so it doesn't leak to desktop. ---- */

.snifffr-mps .standard-form { background: transparent; padding: 0; box-shadow: none; }
.snifffr-mps #settings-form,
.snifffr-mps form.standard-form {
    background: transparent;
    padding: 0;
    box-shadow: none;
    border-radius: 0;
}
.snifffr-mps .standard-form h2,
.snifffr-mps .standard-form h3,
.snifffr-mps .standard-form h4,
.snifffr-mps .section-title {
    font-size: 14px;
    font-weight: 600;
    margin: 16px 0 8px;
    color: var(--snifffr-mp-purple);
}
.snifffr-mps .standard-form h2:first-child,
.snifffr-mps .standard-form h3:first-child,
.snifffr-mps .standard-form h4:first-child,
.snifffr-mps .section-title:first-child { margin-top: 0; }

.snifffr-mps .standard-form p { font-size: 13px; color: var(--snifffr-mp-purple-60); margin: 0 0 12px; }

.snifffr-mps .standard-form label,
.snifffr-mps .field-label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--snifffr-mp-purple-60);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 6px;
}

.snifffr-mps .standard-form input[type="text"],
.snifffr-mps .standard-form input[type="email"],
.snifffr-mps .standard-form input[type="password"],
.snifffr-mps .standard-form input[type="url"],
.snifffr-mps .standard-form input[type="number"],
.snifffr-mps .standard-form select,
.snifffr-mps .standard-form textarea {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--snifffr-mp-purple-08);
    border-radius: 10px;
    background: #fff;
    color: var(--snifffr-mp-purple);
    font-family: inherit;
    font-size: 14px;
    line-height: 1.4;
    box-sizing: border-box;
    height: auto;
    appearance: none;
    -webkit-appearance: none;
}
.snifffr-mps .standard-form input:focus,
.snifffr-mps .standard-form select:focus,
.snifffr-mps .standard-form textarea:focus {
    outline: none;
    border-color: var(--snifffr-mp-pink);
    box-shadow: 0 0 0 3px rgba(230, 92, 149, 0.15);
}

.snifffr-mps .standard-form .field-group { margin-bottom: 14px; }

/* Submit button — pink pill, full-width on mobile. */
.snifffr-mps .standard-form .submit { margin-top: 16px; }
.snifffr-mps-privacy .standard-form .submit,
.snifffr-mps form[name="bp-profile-visibility_settings"] .submit { margin-top: 0; }
.snifffr-mps .standard-form input[type="submit"],
.snifffr-mps .standard-form button[type="submit"],
.snifffr-mps .standard-form #submit,
.snifffr-mps .standard-form input.auto[type="submit"] {
    width: 100% !important;
    max-width: 100% !important;
    padding: 14px !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 12px !important;
    background: var(--snifffr-mp-pink) !important;
    color: #fff !important;
    font-family: inherit !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
    line-height: 1.2 !important;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    box-sizing: border-box !important;
    display: block !important;
}
.snifffr-mps .standard-form input[type="submit"]:disabled { opacity: 0.5; cursor: not-allowed; }

/* Notifications screen renders <table> rows with checkboxes — let them flow
   in a column on mobile rather than a cramped grid. */
.snifffr-mps table { width: 100%; border-collapse: collapse; margin: 0 0 16px; }
.snifffr-mps table th,
.snifffr-mps table td {
    display: block;
    width: 100%;
    padding: 8px 0;
    text-align: left;
    border: 0;
}
.snifffr-mps table thead { display: none; } /* "Yes / No" column header is noise on mobile */
.snifffr-mps table tr {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 10px 0;
    border-bottom: 1px solid var(--snifffr-mp-purple-08);
}
.snifffr-mps table tr td:first-child { flex: 1 1 100%; font-size: 14px; color: var(--snifffr-mp-purple); }
.snifffr-mps table tr td { padding: 0; }
.snifffr-mps table input[type="radio"],
.snifffr-mps table input[type="checkbox"] { margin-right: 6px; }

/* Profile privacy screen renders per-field visibility radios — keep readable. */
.snifffr-mps .field-visibility-settings,
.snifffr-mps .field-visibility-settings-toggle { font-size: 13px; }
.snifffr-mps .field-visibility-settings legend { font-weight: 600; padding-bottom: 6px; }

/* Delete-account warning — softer card, not the angry red the desktop uses. */
.snifffr-mps #delete-account-form { display: flex; flex-direction: column; gap: 10px; }
.snifffr-mps .alert,
.snifffr-mps .delete-account-warning {
    background: #fff5e6;
    border: 1px solid #f1c089;
    color: #8a4a00;
    padding: 12px 14px;
    border-radius: 10px;
    font-size: 13px;
}

/* Email feedback (under email input on the General screen). */
.snifffr-mps .email-feedback { font-size: 12px; margin-top: 4px; min-height: 16px; }
.snifffr-mps .email-feedback.success { color: #1d7a4f; }
.snifffr-mps .email-feedback.error   { color: #b3263f; }

/* ---- Per-tab body styling. Sections stack as cards in the body. ---- */

.snifffr-mps-section {
    margin: 0 0 16px;
    display: block;
}
.snifffr-mps-section-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--snifffr-mp-purple);
    margin: 0 0 8px;
}
.snifffr-mps-section-hint {
    font-size: 13px;
    color: var(--snifffr-mp-purple-60);
    margin: 0 0 12px;
}
.snifffr-mps-field-label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--snifffr-mp-purple-60);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 12px 0 6px;
}
.snifffr-mps-field-label:first-child { margin-top: 0; }

.snifffr-mps-section input[type="email"],
.snifffr-mps-section input[type="text"],
.snifffr-mps-section input[type="password"] {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--snifffr-mp-purple-08);
    border-radius: 10px;
    background: #fff;
    color: var(--snifffr-mp-purple);
    font-family: inherit;
    font-size: 14px;
    line-height: 1.4;
    box-sizing: border-box;
    height: auto;
    appearance: none;
    -webkit-appearance: none;
}
.snifffr-mps-section input:focus {
    outline: none;
    border-color: var(--snifffr-mp-pink);
    box-shadow: 0 0 0 3px rgba(230, 92, 149, 0.15);
}

/* Pink full-width primary save buttons. */
.snifffr-mps-save,
button.snifffr-mps-save {
    display: block;
    width: 100%;
    margin-top: 16px;
    padding: 14px;
    border: 0;
    border-radius: 12px;
    background: var(--snifffr-mp-pink);
    color: #fff;
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
}
.snifffr-mps-save:disabled { opacity: 0.5; cursor: not-allowed; }
.snifffr-mps-save--soft   { background: var(--snifffr-mp-purple); }
.snifffr-mps-save--danger { background: #c0344d; }

.snifffr-mps-feedback {
    margin-top: 10px;
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 13px;
    text-align: center;
}
.snifffr-mps-feedback.is-error { background: #fde8ee; color: #b3263f; }
.snifffr-mps-feedback.is-success { background: #e6f7ee; color: #1d7a4f; }

/* Password input + show/hide toggle. */
.snifffr-mps-pw-wrap { position: relative; }
.snifffr-mps-pw-wrap input { padding-right: 44px; }
.snifffr-mps-pw-toggle {
    position: absolute;
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--snifffr-mp-purple-60);
    font-size: 16px;
    cursor: pointer;
    line-height: 1;
}
.snifffr-mps-pw-toggle:hover { color: var(--snifffr-mp-pink); }

/* Privacy: per-field visibility row. */
.snifffr-mps-privacy-group { margin-bottom: 16px; }
.snifffr-mps-privacy-group-title {
    font-size: 12px;
    font-weight: 600;
    color: var(--snifffr-mp-purple-60);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 0 0 8px;
}
.snifffr-mps-privacy-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px 0;
    border-bottom: 1px solid var(--snifffr-mp-purple-08);
}
.snifffr-mps-privacy-row:last-child { border-bottom: 0; }
.snifffr-mps-privacy-field-name { font-size: 14px; font-weight: 500; color: var(--snifffr-mp-purple); }
.snifffr-mps-privacy-field-vis select {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid var(--snifffr-mp-purple-08);
    border-radius: 10px;
    background: #fff;
    color: var(--snifffr-mp-purple);
    font-family: inherit;
    font-size: 14px;
    box-sizing: border-box;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2210%22%20height%3D%226%22%20viewBox%3D%220%200%2010%206%22%3E%3Cpath%20fill%3D%22%23423E59%22%20d%3D%22M0%200l5%206%205-6z%22%2F%3E%3C%2Fsvg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 36px;
}

/* Delete-account cards: soft, info, danger variants. */
.snifffr-mps-card {
    padding: 16px;
    border-radius: 14px;
    border: 1px solid var(--snifffr-mp-purple-08);
    background: #fff;
}
.snifffr-mps-card--soft   { background: #faf7ff; }
.snifffr-mps-card--info   { background: #eef6ff; border-color: #bfd9ff; color: #134a91; }
.snifffr-mps-card--danger { background: #fff5f5; border-color: #f4c2c8; }
.snifffr-mps-card-title { font-size: 15px; font-weight: 600; margin: 0 0 6px; }
.snifffr-mps-card p { font-size: 13px; color: var(--snifffr-mp-purple); margin: 0 0 10px; }
.snifffr-mps-card-list {
    margin: 0 0 12px;
    padding-left: 18px;
    font-size: 13px;
    color: var(--snifffr-mp-purple);
}
.snifffr-mps-card-list li { margin-bottom: 4px; }

.snifffr-mps-delete-intro {
    background: #fffaef;
    border: 1px solid #f3e3b6;
    padding: 14px 16px;
    border-radius: 14px;
    text-align: center;
}
.snifffr-mps-delete-icon { font-size: 24px; margin-bottom: 4px; }
.snifffr-mps-delete-intro-title { font-size: 15px; font-weight: 600; margin-bottom: 4px; }

/* Blocked list. */
.snifffr-mps-block-types { display: flex; flex-direction: column; gap: 8px; }
.snifffr-mps-block-type {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    border: 1px solid var(--snifffr-mp-purple-08);
    border-radius: 10px;
    background: #fff;
    font-size: 14px;
    color: var(--snifffr-mp-purple);
    cursor: pointer;
}
.snifffr-mps-block-type input { margin: 0; transform: scale(1.2); }
.snifffr-mps-block-type.is-checked { background: #fff5fa; border-color: var(--snifffr-mp-pink); }

.snifffr-mps-blocked-list { list-style: none; margin: 0; padding: 0; }
.snifffr-mps-blocked-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 0;
    border-bottom: 1px solid var(--snifffr-mp-purple-08);
}
.snifffr-mps-blocked-row:last-child { border-bottom: 0; }
.snifffr-mps-blocked-user {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: var(--snifffr-mp-purple);
    min-width: 0;
}
.snifffr-mps-blocked-avatar img { width: 36px; height: 36px; border-radius: 50%; display: block; }
.snifffr-mps-blocked-name { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.snifffr-mps-blocked-unblock {
    flex: 0 0 auto;
    padding: 6px 12px;
    border: 1px solid var(--snifffr-mp-purple-08);
    border-radius: 999px;
    color: var(--snifffr-mp-purple);
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
}
.snifffr-mps-blocked-unblock:hover { background: var(--snifffr-mp-lavender); color: var(--snifffr-mp-purple); }

.snifffr-mps-empty {
    padding: 16px;
    background: #fafafa;
    border-radius: 10px;
    color: var(--snifffr-mp-purple-60);
    font-size: 13px;
    text-align: center;
}

/* ---- Notifications: BP <table>s flattened into stacked toggle rows ---- */
.snifffr-mps-notifs { padding: 0; background: transparent; box-shadow: none; }
.snifffr-mps-notifs table {
    width: 100%;
    border: 0;
    border-collapse: collapse;
    margin: 0;
    background: transparent;
}
.snifffr-mps-notifs table:last-of-type { margin-bottom: 16px; }
.snifffr-mps-notifs table thead { display: block; }
.snifffr-mps-notifs table thead tr { display: block; }
.snifffr-mps-notifs table thead th { display: none; }
.snifffr-mps-notifs table thead th.title { display: none; }
.snifffr-mps-notifs table tbody { display: block; }
.snifffr-mps-notifs table tbody tr {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 0;
    border-top: 1px solid var(--snifffr-mp-purple-08);
    background: transparent;
}
.snifffr-mps-notifs table tbody tr:last-child {
    border-bottom: 0;
}
.snifffr-mps-notifs table tbody td {
    padding: 0;
    border: 0;
    background: transparent;
    vertical-align: middle;
}
.snifffr-mps-notifs table tbody td:first-child { display: none; } /* icon col */
.snifffr-mps-notifs table tbody td:nth-child(2) {
    flex: 1 1 auto;
    font-size: 15px;
    line-height: 1.35;
    color: var(--snifffr-mp-purple);
}
.snifffr-mps-notifs table tbody td.yes,
.snifffr-mps-notifs table tbody td.no { display: none; }

/* iOS-style pill switch — replaces yes/no radios via JS shim. */
.snifffr-mps-switch {
    position: relative;
    flex: 0 0 auto;
    width: 50px;
    height: 30px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: #d6d3dc;
    cursor: pointer;
    transition: background-color .2s ease;
    -webkit-tap-highlight-color: transparent;
}
.snifffr-mps-switch:focus-visible {
    outline: 2px solid var(--snifffr-mp-purple);
    outline-offset: 2px;
}
.snifffr-mps-switch::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 24px;
    height: 24px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
    transition: transform .2s ease;
}
.snifffr-mps-switch.is-on { background: var(--snifffr-mp-pink-soft); }
.snifffr-mps-switch.is-on::after { transform: translateX(20px); }

/* ---- Privacy: render bp-profile-visibility-manager plugin form ---- */
.snifffr-mps-privacy form.standard-form,
.snifffr-mps-privacy form { background: transparent; box-shadow: none; padding: 0; margin: 0; }
.snifffr-mps-privacy .bppv-visibility-settings-block {
    padding: 14px 0;
    border-top: 1px solid var(--snifffr-mp-purple-08);
}
.snifffr-mps-privacy .bppv-visibility-settings-block:first-of-type { border-top: 0; padding-top: 0; }
.snifffr-mps-privacy .bppv-visibility-settings-block > label {
    display: block;
    margin: 0 0 10px;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--snifffr-mp-purple-60);
}
.snifffr-mps-privacy .bppv-visibility-settings-block .radio {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
}
.snifffr-mps-privacy .bppv-visibility-settings-block .radio label {
    flex: 1 1 calc(50% - 4px);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border: 1px solid var(--snifffr-mp-purple-08);
    border-radius: 999px;
    color: var(--snifffr-mp-purple);
    font-size: 14px;
    cursor: pointer;
    text-transform: none;
    letter-spacing: 0;
    font-weight: 500;
}
.snifffr-mps-privacy .bppv-visibility-settings-block .radio input[type="radio"] { margin: 0; }
.snifffr-mps-privacy .bppv-visibility-settings-block select {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--snifffr-mp-purple-08);
    border-radius: 10px;
    font-size: 15px;
    color: var(--snifffr-mp-purple);
    background: #fff;
}
.snifffr-mps-privacy .bppv-visibility-settings-block .help-block {
    margin: 8px 0 0;
    font-size: 12px;
    color: var(--snifffr-mp-purple-60);
    line-height: 1.4;
}
.snifffr-mps-privacy p.submit { margin: 20px 0 0; }
.snifffr-mps-privacy p.submit input[type="submit"],
.snifffr-mps-privacy #bppv_save_submit {
    width: 100% !important;
    max-width: 100% !important;
    padding: 14px !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 12px !important;
    background: var(--snifffr-mp-pink) !important;
    color: #fff !important;
    font-family: inherit !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
    line-height: 1.2 !important;
    text-transform: none !important;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    box-sizing: border-box !important;
    display: block !important;
}

/* ---- Interview (/seller-questionnaire/) — mobile chrome.
        Reuses the .snifffr-mps shell so header, tabs, padding match the
        Settings page exactly. Extra rules below are just for the question
        list inside the body. ---- */
.snifffr-mpi-saved {
    background: rgba(35, 153, 95, 0.10);
    color: #1d9e75;
    border: 1px solid rgba(35, 153, 95, 0.20);
    border-radius: 10px;
    padding: 10px 12px;
    font-size: 13px;
    margin: 0 0 14px;
}
.snifffr-mpi-intro {
    font-size: 13px;
    color: var(--snifffr-mp-purple-60);
    margin: 0 0 16px;
}
.snifffr-mpi-empty {
    font-size: 14px;
    color: var(--snifffr-mp-purple-60);
    margin: 24px 0;
    text-align: center;
}
.snifffr-mpi-form { display: flex; flex-direction: column; gap: 16px; }
.snifffr-mpi-q {
    background: #fff;
    border: 1px solid var(--snifffr-mp-purple-08);
    border-radius: 12px;
    padding: 14px;
}
.snifffr-mpi-q-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--snifffr-mp-purple);
    margin-bottom: 8px;
    line-height: 1.4;
}
.snifffr-mpi-q-input {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--snifffr-mp-purple-08);
    border-radius: 10px;
    background: #fff;
    color: var(--snifffr-mp-purple);
    font-family: inherit;
    font-size: 14px;
    line-height: 1.4;
    box-sizing: border-box;
    resize: vertical;
    min-height: 96px;
    appearance: none;
    -webkit-appearance: none;
}
.snifffr-mpi-q-input:focus {
    outline: 0;
    border-color: var(--snifffr-mp-pink);
    box-shadow: 0 0 0 3px rgba(230, 92, 149, 0.12);
}
.snifffr-mpi-actions { margin-top: 4px; }
.snifffr-mpi-save {
    width: 100%;
    max-width: 100%;
    padding: 14px;
    margin: 0;
    border: 0;
    border-radius: 12px;
    background: var(--snifffr-mp-pink);
    color: #fff;
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    box-sizing: border-box;
}
.snifffr-mpi-save:hover { filter: brightness(1.06); }

/* ---- Mobile soft restyle for .iu-form-card forms (Add Listing, Add
        Private Content, Add Instant Media). Scoped to ≤991.98px so
        desktop keeps its existing look. Matches the cover-photos sheet
        aesthetic: lavender accents, pink Save, soft purple typography. */
@media (max-width: 991.98px) {
    .iu-form-card {
        background: #fff;
        border-radius: 16px;
        padding: 20px 18px 18px;
        margin: 0 0 20px;
        box-shadow: 0 8px 28px rgba(66, 62, 89, 0.06);
        border: 1px solid var(--snifffr-mp-purple-08);
    }
    .iu-form-card h4 {
        margin: 0 0 16px;
        font-size: 13px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        color: var(--snifffr-mp-purple);
    }
    .iu-form-card .form-group { margin: 0 0 14px; }
    .iu-form-card .form-group > label {
        display: block;
        margin: 0 0 6px;
        font-size: 13px;
        font-weight: 500;
        color: var(--snifffr-mp-purple);
        text-transform: none;
        letter-spacing: 0;
    }
    .iu-form-card .form-control,
    .iu-form-card input[type="text"],
    .iu-form-card input[type="number"],
    .iu-form-card input[type="email"],
    .iu-form-card textarea,
    .iu-form-card select {
        width: 100%;
        max-width: 100%;
        padding: 12px 14px;
        border: 1px solid rgba(66, 62, 89, 0.18);
        border-radius: 12px;
        background: #fff;
        font-size: 15px;
        color: var(--snifffr-mp-purple);
        line-height: 1.4;
        box-shadow: none;
        -webkit-appearance: none;
        appearance: none;
    }
    .iu-form-card textarea { min-height: 96px; resize: vertical; }
    /* Native <select> with appearance:none collapses its own intrinsic
       height — just padding/line-height aren't enough at 15px and the
       descender on "category" gets clipped. Force a comfortable height
       and add right-side room for a chevron via background-image. */
    .iu-form-card select,
    .iu-form-card select.form-control {
        height: auto;
        min-height: 46px;
        line-height: 1.5;
        padding-right: 36px;
        background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23332e4d'><path d='M7 10l5 5 5-5z'/></svg>");
        background-repeat: no-repeat;
        background-position: right 10px center;
        background-size: 16px 16px;
    }
    .iu-form-card .form-control::placeholder,
    .iu-form-card input::placeholder,
    .iu-form-card textarea::placeholder { color: var(--snifffr-mp-purple-60); }
    .iu-form-card .form-control:focus,
    .iu-form-card input:focus,
    .iu-form-card textarea:focus,
    .iu-form-card select:focus {
        outline: none;
        border-color: var(--snifffr-mp-pink);
        box-shadow: 0 0 0 3px rgba(230, 92, 149, 0.12);
    }
    /* Strip the inline max-width on the price input so it spans the row. */
    .iu-form-card input#iu-price,
    .iu-form-card input#item-price { max-width: 100% !important; }

    .iu-form-card .iu-drop-zone {
        border: 2px dashed rgba(66, 62, 89, 0.18);
        border-radius: 16px;
        background: var(--snifffr-mp-lavender);
        padding: 28px 18px 24px;
    }
    .iu-form-card .iu-drop-zone:hover,
    .iu-form-card .iu-drop-zone--over {
        border-color: var(--snifffr-mp-pink);
        background: #faf2f6;
    }
    .iu-form-card .iu-drop-zone-icon { color: var(--snifffr-mp-purple-60); }
    .iu-form-card .iu-drop-zone:hover .iu-drop-zone-icon,
    .iu-form-card .iu-drop-zone--over .iu-drop-zone-icon { color: var(--snifffr-mp-pink); }
    .iu-form-card .iu-drop-zone-title {
        font-size: 14px;
        font-weight: 600;
        color: var(--snifffr-mp-purple);
    }
    .iu-form-card .iu-drop-zone-sub  { font-size: 13px; color: var(--snifffr-mp-purple-60); }
    .iu-form-card .iu-drop-zone-browse {
        color: var(--snifffr-mp-pink);
        text-decoration: none;
        font-weight: 600;
    }
    .iu-form-card .iu-drop-zone-hint { font-size: 11px; color: var(--snifffr-mp-purple-60); }

    .iu-form-card .iu-form-actions {
        flex-direction: column;
        gap: 10px;
        margin-top: 18px;
    }
    .iu-form-card .iu-form-actions .btn {
        width: 100%;
        padding: 14px 18px !important;
        border-radius: 999px !important;
        border: 0 !important;
        font-size: 15px !important;
        font-weight: 600 !important;
        line-height: 1 !important;
        text-transform: none !important;
        letter-spacing: 0 !important;
        box-shadow: none !important;
    }
    .iu-form-card .iu-form-actions .btn-primary,
    .iu-form-card .iu-form-actions .btn-primary.purple,
    .iu-form-card .iu-form-actions button.btn-primary,
    .iu-form-card .iu-form-actions button.btn-primary.purple {
        background: var(--snifffr-mp-pink) !important;
        background-color: var(--snifffr-mp-pink) !important;
        color: #fff !important;
        border-color: var(--snifffr-mp-pink) !important;
    }
    .iu-form-card .iu-form-actions .btn-primary:hover,
    .iu-form-card .iu-form-actions .btn-primary.purple:hover,
    .iu-form-card .iu-form-actions .btn-primary:focus,
    .iu-form-card .iu-form-actions .btn-primary.purple:focus {
        background: #d94a83 !important;
        background-color: #d94a83 !important;
        color: #fff !important;
        border-color: #d94a83 !important;
    }
    .iu-form-card .iu-form-actions .btn-outline-secondary,
    .iu-form-card .iu-form-actions button.btn-outline-secondary {
        background: var(--snifffr-mp-lavender) !important;
        background-color: var(--snifffr-mp-lavender) !important;
        color: var(--snifffr-mp-purple) !important;
        border-color: var(--snifffr-mp-lavender) !important;
    }
    .iu-form-card .iu-form-actions .btn-outline-secondary:hover,
    .iu-form-card .iu-form-actions .btn-outline-secondary:focus {
        background: #e0dde9 !important;
        background-color: #e0dde9 !important;
        color: var(--snifffr-mp-purple) !important;
        border-color: #e0dde9 !important;
    }

    /* Hard override by ID — beats any .btn-primary.purple:focus rule that
       turns the button white-on-white when focused after a click. */
    #pc-save-btn,
    #iu-save-btn,
    #item-save-btn,
    #pc-save-btn:hover, #pc-save-btn:focus, #pc-save-btn:active,
    #iu-save-btn:hover, #iu-save-btn:focus, #iu-save-btn:active,
    #item-save-btn:hover, #item-save-btn:focus, #item-save-btn:active {
        display: block !important;
        width: 100% !important;
        padding: 14px 18px !important;
        border-radius: 999px !important;
        border: 0 !important;
        background: var(--snifffr-mp-pink) !important;
        background-color: var(--snifffr-mp-pink) !important;
        color: #fff !important;
        font-size: 15px !important;
        font-weight: 600 !important;
        line-height: 1 !important;
        text-transform: none !important;
        letter-spacing: 0 !important;
        box-shadow: none !important;
        outline: none !important;
    }
    #pc-cancel-btn,
    #iu-cancel-btn,
    #item-cancel-btn,
    #pc-cancel-btn:hover, #pc-cancel-btn:focus, #pc-cancel-btn:active,
    #iu-cancel-btn:hover, #iu-cancel-btn:focus, #iu-cancel-btn:active,
    #item-cancel-btn:hover, #item-cancel-btn:focus, #item-cancel-btn:active {
        display: block !important;
        width: 100% !important;
        padding: 14px 18px !important;
        border-radius: 999px !important;
        border: 0 !important;
        background: var(--snifffr-mp-lavender) !important;
        background-color: var(--snifffr-mp-lavender) !important;
        color: var(--snifffr-mp-purple) !important;
        font-size: 15px !important;
        font-weight: 600 !important;
        line-height: 1 !important;
        text-transform: none !important;
        letter-spacing: 0 !important;
        box-shadow: none !important;
        outline: none !important;
    }
}

.snifffr-mp-identity { text-align: center; padding: 42px 16px 8px; }

.snifffr-mp-name-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}
.snifffr-mp-name {
    font-weight: 500;
    font-size: 17px;
    color: var(--snifffr-mp-purple);
    letter-spacing: -0.01em;
}
.snifffr-mp-age {
    font-size: 13px;
    color: var(--snifffr-mp-purple);
    opacity: 0.5;
}
.snifffr-mp-flag { font-size: 13px; line-height: 1; display: inline-flex; align-items: center; }

/* 3-dot "more actions" trigger next to the flag — opens the actions
   bottom sheet, which mirrors the More-tabs sheet styling. */
.snifffr-mp-extra {
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--snifffr-mp-purple);
    opacity: 0.55;
    border-radius: 50%;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    line-height: 1;
    transition: background 0.15s, opacity 0.15s;
}
.snifffr-mp-extra:hover, .snifffr-mp-extra:focus {
    opacity: 1;
    background: var(--snifffr-mp-lavender);
    outline: none;
}

/* Actions sheet: render only the BP block button, restyled as a prominent
   pink call-to-action — same energy as the old design's BLOCK button, but
   sized to fit inside the mobile profile bottom sheet. */
.snifffr-mp-block-wrap {
    display: block;
    margin: 4px 0 8px;
}
.snifffr-mp-block-wrap .generic-button,
.snifffr-mp-block-wrap .block-member {
    display: block;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
}
.snifffr-mp-block-wrap a,
.snifffr-mp-block-wrap button,
.snifffr-mp-block-wrap .generic-button > a,
.snifffr-mp-block-wrap .block-member > a {
    display: block !important;
    width: 100% !important;
    padding: 14px 16px !important;
    background: var(--snifffr-mp-pink) !important;
    color: #fff !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    letter-spacing: 0.5px;
    text-align: center !important;
    text-decoration: none !important;
    text-transform: uppercase !important;
    border: 0 !important;
    border-radius: 12px !important;
    box-shadow: none !important;
    line-height: 1.4 !important;
}
.snifffr-mp-block-wrap a:hover,
.snifffr-mp-block-wrap button:hover {
    background: #d8407a !important;   /* slightly darker pink on hover */
    color: #fff !important;
}

/* On non-About pages (e.g. shop-actions sheet) the Block button is plain text
   matching the other sheet links — no pink CTA. Selectors prefixed with
   #buddypress + body to outweigh the global #buddypress .generic-button rules. */
body [data-snifffr-mp-sheet="shop-actions"] .snifffr-mp-block-wrap,
body [data-snifffr-mp-sheet="shop-actions"] .snifffr-mp-block-wrap .generic-button,
body [data-snifffr-mp-sheet="shop-actions"] .snifffr-mp-block-wrap .block-member {
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}
body #buddypress [data-snifffr-mp-sheet="shop-actions"] .snifffr-mp-block-wrap a,
body #buddypress [data-snifffr-mp-sheet="shop-actions"] .snifffr-mp-block-wrap button,
body [data-snifffr-mp-sheet="shop-actions"] .snifffr-mp-block-wrap a,
body [data-snifffr-mp-sheet="shop-actions"] .snifffr-mp-block-wrap button {
    display: block !important;
    width: 100% !important;
    padding: 14px 4px !important;
    background: transparent !important;
    background-color: transparent !important;
    color: var(--snifffr-mp-purple) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
    text-align: left !important;
    text-transform: none !important;
    border: 0 !important;
    border-bottom: 0.5px solid var(--snifffr-mp-lavender) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    line-height: 1.3 !important;
}
body #buddypress [data-snifffr-mp-sheet="shop-actions"] .snifffr-mp-block-wrap a:hover,
body #buddypress [data-snifffr-mp-sheet="shop-actions"] .snifffr-mp-block-wrap button:hover,
body [data-snifffr-mp-sheet="shop-actions"] .snifffr-mp-block-wrap a:hover,
body [data-snifffr-mp-sheet="shop-actions"] .snifffr-mp-block-wrap button:hover {
    background: transparent !important;
    background-color: transparent !important;
    color: var(--snifffr-mp-pink) !important;
}

/* Other sheet-link entries (Place order, Tip, Friend) — confirm left-align
   and force-reset any global padding overrides (.open-tip-popup added 20px L/R). */
body [data-snifffr-mp-sheet="shop-actions"] .snifffr-mp-sheet-link,
body [data-snifffr-mp-sheet="shop-actions"] .snifffr-mp-sheet-link.open-tip-popup,
body [data-snifffr-mp-sheet="shop-actions"] a.open-tip-popup {
    padding: 14px 4px !important;
    text-align: left !important;
    height: auto !important;
}
body [data-snifffr-mp-sheet="shop-actions"] .snifffr-mp-sheet-cancel {
    text-align: center !important;
}
.snifffr-mp-actions-note {
    margin: 12px 4px 4px;
    font-size: 12px;
    line-height: 1.4;
    color: var(--snifffr-mp-purple);
    opacity: 0.65;
}
/* Cancel button at bottom of every sheet — lavender pill, centered. The
   .snifffr-mp-sheet-link base rule (defined later in the file) sets
   background:transparent!important, so we need a higher-specificity
   selector here (qualified with .snifffr-mp-sheet-link) to win. Applied
   across every sheet so the pill style is consistent everywhere. */
.snifffr-mp-sheet-link.snifffr-mp-sheet-cancel,
button.snifffr-mp-sheet-cancel {
    display: flex !important;
    width: 100% !important;
    margin-top: 12px !important;
    background: var(--snifffr-mp-lavender) !important;
    border: 0 !important;
    border-bottom: 0 !important;
    border-radius: 999px !important;
    padding: 14px 4px !important;
    font-weight: 600 !important;
    text-align: center !important;
    justify-content: center !important;
    align-items: center !important;
    cursor: pointer;
    color: var(--snifffr-mp-purple) !important;
}
.snifffr-mp-sheet-link.snifffr-mp-sheet-cancel:hover,
.snifffr-mp-sheet-link.snifffr-mp-sheet-cancel:focus,
button.snifffr-mp-sheet-cancel:hover,
button.snifffr-mp-sheet-cancel:focus {
    background: rgba(66, 62, 89, 0.10) !important;
    outline: 0;
}

/* ---- snifffr mobile profile: Place Order sheet ---- */

.snifffr-mp-sheet--form .snifffr-mp-sheet-list {
    padding-bottom: 16px;
}
.snifffr-mp-order-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--snifffr-mp-purple);
    margin: 4px 4px 14px;
}
.snifffr-mp-order-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.snifffr-mp-order-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--snifffr-mp-purple);
    opacity: 0.75;
    margin: 6px 4px -4px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
body .snifffr-mp-order-form input[type="text"],
body .snifffr-mp-order-form input[type="number"],
body .snifffr-mp-order-form textarea {
    width: 100% !important;
    padding: 12px 14px !important;
    background: var(--snifffr-mp-lavender) !important;
    border: 0 !important;
    border-radius: 12px !important;
    font-size: 14px !important;
    color: var(--snifffr-mp-purple) !important;
    box-shadow: none !important;
    box-sizing: border-box;
    margin: 0 !important;
    line-height: 1.4;
}
.snifffr-mp-order-form textarea {
    min-height: 80px;
    resize: vertical;
    font-family: inherit;
}
.snifffr-mp-order-form input::placeholder,
.snifffr-mp-order-form textarea::placeholder {
    color: var(--snifffr-mp-purple);
    opacity: 0.5;
}
body .snifffr-mp-order-form input:focus,
body .snifffr-mp-order-form textarea:focus {
    outline: 2px solid var(--snifffr-mp-pink);
    outline-offset: 0;
}
.snifffr-mp-order-hint {
    font-size: 11px;
    color: var(--snifffr-mp-purple);
    opacity: 0.65;
    margin: -4px 4px 0;
}
.snifffr-mp-msgat {
    margin: 6px 0 2px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.snifffr-mp-msgat .snifffr-mp-order-label {
    margin-bottom: 0;
}
.snifffr-mp-msgat .snifffr-mp-order-hint {
    margin: 0 0 4px;
}
.snifffr-mp-msgat-btn {
    align-self: flex-start;
    background: #fff;
    color: var(--snifffr-mp-purple);
    border: 1px solid rgba(78, 60, 110, 0.25);
    border-radius: 999px;
    padding: 8px 18px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}
.snifffr-mp-msgat-btn:hover,
.snifffr-mp-msgat-btn:focus {
    background: var(--snifffr-mp-lavender);
    border-color: var(--snifffr-mp-purple);
    outline: none;
}
.snifffr-mp-message-form .msgat-uploaded-file {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--snifffr-mp-lavender);
    color: var(--snifffr-mp-purple);
    border-radius: 999px;
    padding: 4px 10px;
    margin: 4px 4px 0 0;
    font-size: 12px;
}
.snifffr-mp-order-tnc {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--snifffr-mp-purple);
    margin: 6px 0 4px;
    cursor: pointer;
}
.snifffr-mp-order-tnc input[type="checkbox"] {
    width: auto !important;
    accent-color: var(--snifffr-mp-pink);
    margin: 0;
    flex-shrink: 0;
}
.snifffr-mp-order-tnc a {
    color: var(--snifffr-mp-pink);
    text-decoration: underline;
}
.snifffr-mp-order-submit {
    display: block;
    width: 100%;
    margin-top: 10px;
    padding: 14px 16px;
    background: var(--snifffr-mp-pink);
    color: #fff;
    border: 0;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.4px;
    text-align: center;
    text-transform: none;
    box-shadow: 0 2px 6px rgba(230, 92, 149, 0.25);
    cursor: pointer;
}
.snifffr-mp-order-submit:hover { background: #d8407a; }

/* jQuery UI datepicker is appended to <body>, so its z-index isn't tied to
   the sheet. Force it above the sheet (z-index 9999) so the calendar shows
   over the form when the date inputs are tapped. */
.ui-datepicker { z-index: 10001 !important; }
.snifffr-mp-flag img,
.snifffr-mp-flag svg { width: 16px; height: 16px; vertical-align: middle; }

.snifffr-mp-pills {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-bottom: 0px;
    flex-wrap: wrap;
}
.snifffr-mp-pill {
    font-size: 11px;
    padding: 3px 9px;
    border-radius: 10px;
    font-weight: 500;
    line-height: 1.4;
}
.snifffr-mp-pill--premium { color: #993556; background: var(--snifffr-mp-pink-soft); }
.snifffr-mp-pill--verified { color: var(--snifffr-mp-purple); background: var(--snifffr-mp-lavender); }
.snifffr-mp-pill--basic {
    color: #993556 !important;
    background: var(--snifffr-mp-pink-soft);
    text-decoration: none !important;
    transition: background 0.15s ease;
}
a.snifffr-mp-pill--basic:hover,
a.snifffr-mp-pill--basic:focus {
    background: var(--snifffr-mp-pink);
    color: #fff !important;
}
.snifffr-mp-pill--unverified {
    color: var(--snifffr-mp-purple) !important;
    background: var(--snifffr-mp-lavender);
    text-decoration: none !important;
    transition: background 0.15s ease;
}
a.snifffr-mp-pill--unverified:hover,
a.snifffr-mp-pill--unverified:focus {
    background: var(--snifffr-mp-purple);
    color: #fff !important;
}

.snifffr-mp-bio {
    margin: 20px 16px 0;
    text-align: center;
    font-size: 14px;
    line-height: 1.4;
    color: var(--snifffr-mp-purple);
    word-wrap: break-word;
    overflow-wrap: anywhere;
}

.snifffr-mp-rating {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    font-size: 12px;
    color: var(--snifffr-mp-purple);
    opacity: 0.85;
}
.snifffr-mp-rating-stars { color: var(--snifffr-mp-pink); letter-spacing: 1px; }
.snifffr-mp-rating-text { opacity: 0.85; }
.snifffr-mp-identity .snifffr-mp-rating { padding-top: 15px; }

/* ---- snifffr mobile profile: action stack ---- */

.snifffr-mp-actions { padding: 12px 16px; }

.snifffr-mp-action-primary {
    display: block;
    width: 100%;
    background: var(--snifffr-mp-pink);
    color: #fff !important;
    font-size: 14px;
    font-weight: 500;
    font-family: inherit;
    padding: 13px;
    text-align: center;
    border: 0;
    border-radius: 12px;
    margin-bottom: 18px;
    text-decoration: none !important;
    line-height: 1.2;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}
.snifffr-mp-action-primary:hover { opacity: 0.92; }
button.snifffr-mp-action-primary:focus { outline: 2px solid #fff; outline-offset: -3px; }

.snifffr-mp-action-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 8px;
}
.snifffr-mp-action-grid--quad {
    grid-template-columns: 1fr 1fr 1fr 1fr;
    padding-top: 3px;
}
.snifffr-mp-action-grid--duo {
    grid-template-columns: 1fr 1fr;
}
.snifffr-mp-action-secondary { position: relative; }
.snifffr-mp-action-badge {
    position: absolute;
    top: 4px;
    right: 4px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    background: var(--snifffr-mp-pink);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
    border-radius: 9px;
    box-sizing: border-box;
}
.snifffr-mp-action-secondary {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--snifffr-mp-lavender);
    padding: 11px 6px;
    border: 0;
    border-radius: 10px;
    color: var(--snifffr-mp-purple) !important;
    font-size: 11px;
    font-weight: 500;
    font-family: inherit;
    text-decoration: none !important;
    text-align: center;
    line-height: 1.2;
    min-height: 56px;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}
button.snifffr-mp-action-secondary:focus { outline: 2px solid var(--snifffr-mp-pink); outline-offset: 2px; }
.snifffr-mp-action-icon {
    font-size: 15px;
    line-height: 1;
    margin-bottom: 3px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.snifffr-mp-action-icon svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
    display: block;
}
.snifffr-mp-action-icon i,
.snifffr-mp-action-icon i.bi {
    font-size: 18px;
    line-height: 1;
    display: block;
}
.snifffr-mp-action-label { line-height: 1.2; }

/* Friend cell wraps BP's own button — neutralize its default markup so only
   our icon + label show, but keep its anchor's interactivity (AJAX handler). */
.snifffr-mp-friend-cell { position: relative; cursor: pointer; overflow: hidden; }
/* BP's bp_add_friend_button() may render its anchor with or without a
   wrapper div. Either way, our visible icon+label live in the cell and
   the BP anchor sits as a transparent overlay that captures taps. */
.snifffr-mp-friend-cell .generic-button { display: contents; }
.snifffr-mp-friend-cell > a,
.snifffr-mp-friend-cell .generic-button > a,
.snifffr-mp-friend-cell .friendship-button,
.snifffr-mp-friend-cell .generic-button .friendship-button {
    position: absolute !important;
    inset: 0 !important;
    z-index: 2;
    color: transparent !important;
    background: transparent !important;
    border: 0 !important;
    text-decoration: none !important;
    font-size: 0 !important;
    line-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    text-indent: -9999em !important;
    overflow: hidden !important;
    display: block !important;
}
.snifffr-mp-friend-cell a > *,
.snifffr-mp-friend-cell a svg,
.snifffr-mp-friend-cell .friendship-button > *,
.snifffr-mp-friend-cell .friendship-button svg {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    opacity: 0 !important;
}

/* ---- snifffr mobile profile: section labels + offers ---- */

.snifffr-mp-section-label {
    font-size: 11px;
    color: var(--snifffr-mp-purple);
    opacity: 0.5;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: 8px;
    font-weight: 500;
}

.snifffr-mp-offers,
.snifffr-mp-wants { padding: 8px 16px 16px; }
.snifffr-mp-offers-row {
    display: flex;
    flex-wrap: nowrap;
    gap: 6px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.snifffr-mp-offers-row::-webkit-scrollbar { display: none; }
.snifffr-mp-chip {
    flex: 0 0 auto;
    font-size: 11px;
    padding: 4px 10px;
    background: transparent;
    border: 1px solid var(--snifffr-mp-lavender);
    color: var(--snifffr-mp-purple) !important;
    opacity: 0.7;
    border-radius: 4px;
    font-weight: 500;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    line-height: 1.4;
    white-space: nowrap;
    cursor: default;
}

/* ---- snifffr mobile profile: tabs + More bottom sheet ---- */

.snifffr-mp-tabs-wrap { padding: 0px 16px 4px; }
.snifffr-mp:not(.snifffr-mp--shop) .snifffr-mp-tabs-wrap { padding: 10px 16px 4px; }
.snifffr-mp.snifffr-mp--shop[data-variant="visitor"] .snifffr-mp-tabs-wrap { padding: 20px 16px 4px; }
.snifffr-mp-tabs {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    align-items: center;
}
.snifffr-mp-tabs::-webkit-scrollbar { display: none; }
.snifffr-mp-tab {
    flex: 0 0 auto;
    font-size: 14px;
    font-weight: 600;
    color: var(--snifffr-mp-purple) !important;
    background: #fff;
    padding: 8px 16px;
    border: 1px solid var(--snifffr-mp-pink);
    border-radius: 999px;
    cursor: pointer;
    text-decoration: none !important;
    white-space: nowrap;
    line-height: 1.2;
    letter-spacing: 0.2px;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.snifffr-mp-tab.is-active {
    background: var(--snifffr-mp-pink);
    color: #fff !important;
    border-color: var(--snifffr-mp-pink);
    box-shadow: 0 2px 6px rgba(230, 92, 149, 0.25);
}
.snifffr-mp-tab.is-empty { opacity: 0.45; }
.snifffr-mp-tab--more { font-weight: 600; }

/* ---- snifffr mobile profile: condensed shop header ---- */

/* Shop variant — body sits on white; shophead floats as a soft card. */
.snifffr-mp--shop { background: #fff; padding-top: 24px; }

.snifffr-mp-shophead {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: #fff;
    margin: 0 12px;
    border: 1px solid var(--snifffr-mp-purple-08);
    border-radius: 16px;
    box-shadow: 0 2px 8px rgba(66, 62, 89, 0.06);
}
.snifffr-mp-shophead-avatar {
    position: relative;
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
}
.snifffr-mp-shophead-avatar img {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}
.snifffr-mp-shophead-dot {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--snifffr-mp-active);
    border: 2px solid #fff;
}
.snifffr-mp-shophead-meta {
    flex: 1 1 auto;
    min-width: 0;
}
.snifffr-mp-shophead-name {
    font-size: 15px;
    font-weight: 600;
    color: var(--snifffr-mp-purple);
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.snifffr-mp-shophead-name a {
    color: inherit !important;
    text-decoration: none !important;
}
.snifffr-mp-shophead-active {
    font-size: 12px;
    color: var(--snifffr-mp-purple);
    opacity: 0.6;
    margin-top: 2px;
}
.snifffr-mp-shophead-msg {
    flex: 0 0 auto;
    background: var(--snifffr-mp-pink);
    color: #fff !important;
    text-decoration: none !important;
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    padding: 8px 16px;
    border: 0;
    border-radius: 999px;
    line-height: 1.2;
    box-shadow: 0 2px 6px rgba(230, 92, 149, 0.25);
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}
.snifffr-mp-shophead-more {
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    background: transparent;
    border: 0;
    border-radius: 50%;
    color: var(--snifffr-mp-purple);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.snifffr-mp-shophead-more:hover { background: var(--snifffr-mp-lavender); }

/* Self-only shortcuts on the right of the shophead — Messages + Notifications
   icon buttons with optional unread badges. Sized to match -shophead-more
   so the row stays aligned visually. */
.snifffr-mp-shophead-quick {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
}
.snifffr-mp-shophead-iconbtn {
    position: relative;
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: var(--snifffr-mp-purple) !important;
    background: transparent;
    text-decoration: none !important;
    transition: background 0.15s ease;
}
.snifffr-mp-shophead-iconbtn:hover,
.snifffr-mp-shophead-iconbtn:focus { background: var(--snifffr-mp-lavender); }
.snifffr-mp-shophead-iconbtn svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
    display: block;
}
.snifffr-mp-shophead-iconbadge {
    position: absolute;
    top: -2px;
    right: -2px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    background: var(--snifffr-mp-pink);
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
    border-radius: 8px;
    box-sizing: border-box;
    border: 2px solid #fff;
}

/* ---- snifffr mobile profile: shop grid ---- */

.snifffr-mp-shop { padding: 12px; }
.snifffr-mp-shop-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}
.snifffr-mp-shop-card-wrap {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--snifffr-mp-purple-08);
    box-shadow: 0 2px 4px rgba(66, 62, 89, 0.06), 0 8px 20px rgba(66, 62, 89, 0.10);
}
.snifffr-mp-shop-card {
    display: block;
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    text-decoration: none !important;
    color: var(--snifffr-mp-purple) !important;
}
.snifffr-mp-shop-card-wrap .snifffr-mp-shop-card {
    border: 0;
    box-shadow: none;
    border-radius: 0;
}
/* Self-seller action row stuck under each card. */
.snifffr-mp-shop-card-actions {
    display: flex;
    gap: 6px;
    padding: 10px 10px 12px;
    border-top: 1px solid var(--snifffr-mp-purple-08);
}
.snifffr-mp-shop-card-action {
    flex: 1 1 0;
    min-width: 0;
    text-align: center;
    padding: 8px 4px;
    border: 0;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    text-decoration: none !important;
    background: #ECEAF2;
    color: #423E59;
    transition: background 0.15s ease, color 0.15s ease, opacity 0.15s ease;
}
.snifffr-mp-shop-card-action:hover,
.snifffr-mp-shop-card-action:focus {
    background: var(--snifffr-mp-lavender);
    color: var(--snifffr-mp-purple);
}
.snifffr-mp-shop-card-repost {
    background: rgba(66, 62, 89, 0.06);
    color: #423E59;
}
.snifffr-mp-shop-card-repost.is-disabled {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
}
.snifffr-mp-shop-card-delete,
.snifffr-mp-shop-card-delete:hover,
.snifffr-mp-shop-card-delete:focus {
    background: rgba(230, 92, 149, 0.12);
    color: #E65C95;
}
.snifffr-mp-shop-card-img {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    background: var(--snifffr-mp-lavender);
    overflow: hidden;
}
.snifffr-mp-shop-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.snifffr-mp-shop-card-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}
.snifffr-mp-shop-card-placeholder img {
    width: 56px;
    height: 56px;
    object-fit: contain;
}
.snifffr-mp-shop-empty-icon img {
    width: 64px;
    height: 64px;
    object-fit: contain;
}
.snifffr-mp-shop-card-price {
    position: absolute;
    left: 8px;
    bottom: 8px;
    background: rgba(255, 255, 255, 0.95);
    color: var(--snifffr-mp-purple);
    font-size: 13px;
    font-weight: 700;
    padding: 4px 8px;
    border-radius: 4px;
    line-height: 1.2;
}
.snifffr-mp-shop-card-title {
    padding: 8px 10px 10px;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
/* Pink-pill paginator under the shop grid (matches friends + tokens). */
.snifffr-mp-shop-pagination {
    margin: 16px 0 4px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--snifffr-mp-purple-60);
    text-align: center;
}
.snifffr-mp-shop-pag-count { opacity: 0.75; }
.snifffr-mp-shop-pag-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
}
.snifffr-mp-shop-pag-links a,
.snifffr-mp-shop-pag-links span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    padding: 0 10px;
    border-radius: 999px;
    background: #fff;
    color: var(--snifffr-mp-purple);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    border: 1px solid rgba(66, 62, 89, 0.12);
    line-height: 1;
    transition: background 0.12s ease, border-color 0.12s ease;
}
.snifffr-mp-shop-pag-links a:hover {
    background: var(--snifffr-mp-lavender);
    border-color: rgba(66, 62, 89, 0.18);
}
.snifffr-mp-shop-pag-links span.current {
    background: var(--snifffr-mp-pink);
    color: #fff;
    border-color: var(--snifffr-mp-pink);
    box-shadow: 0 4px 12px rgba(230, 92, 149, 0.25);
}
.snifffr-mp-shop-empty {
    text-align: center;
    padding: 60px 16px;
    color: var(--snifffr-mp-purple);
}
.snifffr-mp-shop-empty-icon { margin-bottom: 8px; display: flex; justify-content: center; }
.snifffr-mp-shop-empty-text { font-size: 14px; opacity: 0.6; }

/* Category filter chips above the seller's shop grid. Horizontally scrollable
   when there are more chips than fit on screen — same scroll behaviour as the
   offer chips. Active chip gets the brand pink fill. */
.snifffr-mp-shop-filter {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 0 12px 10px;
    margin: 0 -12px;
}
.snifffr-mp-shop-filter::-webkit-scrollbar { display: none; }
.snifffr-mp-shop-filter-chip {
    flex: 0 0 auto;
    padding: 7px 14px;
    background: #fff;
    border: 1px solid var(--snifffr-mp-purple-08);
    border-radius: 999px;
    color: var(--snifffr-mp-purple);
    font-size: 12px;
    font-weight: 500;
    font-family: inherit;
    line-height: 1.2;
    white-space: nowrap;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.snifffr-mp-shop-filter-chip.is-active {
    background: var(--snifffr-mp-pink);
    border-color: var(--snifffr-mp-pink);
    color: #fff;
    box-shadow: 0 2px 6px rgba(230, 92, 149, 0.25);
}

/* Placeholder for sub-pages whose body hasn't been migrated yet
   (Gallery / Reviews / Private Content). */
.snifffr-mp-pending { text-align: center; padding: 60px 16px; color: var(--snifffr-mp-purple); }
.snifffr-mp-pending-text { font-size: 14px; opacity: 0.5; letter-spacing: 0.5px; text-transform: uppercase; }

/* ---- snifffr mobile profile: Gallery (mediapress) ---- */

.snifffr-mp-gallery { padding: 12px; }

/* Gallery-level cards (own profile) — each gallery as a horizontal card
   with cover thumb, title, media count, and edit / delete actions.
   Matches the IU / PC mobile card aesthetic. */
.snifffr-mp-gallery-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0 0 14px;
}
.snifffr-mp-gallery-card {
    display: flex;
    gap: 12px;
    padding: 10px;
    background: #fff;
    border: 1px solid var(--snifffr-mp-purple-08);
    border-radius: 14px;
    box-shadow: 0 4px 14px rgba(66, 62, 89, 0.05);
}
.snifffr-mp-gallery-card-thumb {
    position: relative;
    flex: 0 0 88px;
    width: 88px;
    height: 88px;
    border-radius: 10px;
    overflow: hidden;
    background: var(--snifffr-mp-lavender);
    display: block;
}
.snifffr-mp-gallery-card-thumb img,
.snifffr-mp-gallery-card-thumb video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.snifffr-mp-gallery-card-thumb video {
    background: #000;
}
/* Small play badge centred over the video thumbnail so it reads as a video. */
.snifffr-mp-gallery-card-thumb--video::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 28px;
    height: 28px;
    margin: -14px 0 0 -14px;
    background: rgba(0, 0, 0, 0.55);
    border-radius: 50%;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'><path d='M8 5v14l11-7z'/></svg>");
    background-repeat: no-repeat;
    background-position: 55% 50%;
    background-size: 14px 14px;
    pointer-events: none;
}
.snifffr-mp-gallery-card-thumb .snifffr-mp-gallery-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    opacity: 0.4;
}
.snifffr-mp-gallery-card-count {
    position: absolute;
    bottom: 6px;
    right: 6px;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: 999px;
    background: rgba(66, 62, 89, 0.78);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.snifffr-mp-gallery-card-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 4px;
}
.snifffr-mp-gallery-card-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--snifffr-mp-purple) !important;
    text-decoration: none !important;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.snifffr-mp-gallery-card-meta {
    font-size: 11px;
    color: var(--snifffr-mp-purple-60);
    text-transform: capitalize;
}
.snifffr-mp-gallery-card-actions {
    display: flex;
    gap: 6px;
    margin-top: 4px;
}
/* The Delete button lives inside its own <form> so it can POST without
   navigating to MediaPress's confirm page. `display: contents` collapses
   the form into the flex parent so the button still flexes like its
   sibling <a> buttons. */
.snifffr-mp-gallery-card-actions .snifffr-mp-gallery-delete-form {
    display: contents;
}
.snifffr-mp-gallery-card-btn {
    flex: 1 1 auto;
    text-align: center;
    padding: 6px 8px;
    border: 0;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none !important;
    line-height: 1.2;
    cursor: pointer;
    font-family: inherit;
}
.snifffr-mp-gallery-card-btn--add {
    background: var(--snifffr-mp-pink-soft);
    color: var(--snifffr-mp-pink) !important;
}
.snifffr-mp-gallery-card-btn--edit {
    background: var(--snifffr-mp-lavender);
    color: var(--snifffr-mp-purple) !important;
}
.snifffr-mp-gallery-card-btn--delete {
    background: rgba(230, 92, 149, 0.12);
    color: var(--snifffr-mp-pink) !important;
}

.snifffr-mp-gallery-list-divider {
    margin: 6px 0 10px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--snifffr-mp-purple-60);
}

.snifffr-mp-gallery-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
.snifffr-mp-gallery-cell {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    background: var(--snifffr-mp-lavender);
    border: 0;
    border-radius: 12px;
    overflow: hidden;
    padding: 0;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    box-shadow: 0 2px 4px rgba(66, 62, 89, 0.06), 0 8px 20px rgba(66, 62, 89, 0.10);
}
.snifffr-mp-gallery-cell img,
.snifffr-mp-gallery-cell video.snifffr-mp-gallery-cell-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
/* The <video> element sits below the .snifffr-mp-gallery-play badge; tap
   events must hit the button, not the video element (which would also
   try to play on click in some browsers). */
.snifffr-mp-gallery-cell video.snifffr-mp-gallery-cell-video {
    pointer-events: none;
    background: #000;
}
.snifffr-mp-gallery-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    opacity: 0.4;
}
.snifffr-mp-gallery-play {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(0,0,0,0.55);
    color: #fff;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-left: 3px;
    pointer-events: none;
}
/* Locked video cell — non-verified buyer (or guest) viewing a seller's
   gallery. Cell still renders the thumbnail, but with a frosted overlay
   and lock badge to telegraph that the video itself is gated. Tap fires
   the lightbox into its locked-CTA state (see openLockedVideoLightbox
   in snifffr-mobile-profile.php). */
.snifffr-mp-gallery-cell--locked img {
    filter: blur(14px) brightness(0.85);
    transform: scale(1.08);
}
.snifffr-mp-gallery-cell--locked .snifffr-mp-gallery-play {
    background: rgba(230, 92, 149, 0.92);
    padding-left: 0;
}
/* Lightbox locked-state body — replaces the <video> for unverified viewers. */
.snifffr-mp-gallery-locked-overlay {
    color: #fff;
    text-align: center;
    padding: 28px 22px;
    max-width: 360px;
    margin: 0 auto;
}
.snifffr-mp-gallery-locked-icon {
    font-size: 44px;
    margin-bottom: 12px;
}
.snifffr-mp-gallery-locked-title {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 8px;
}
.snifffr-mp-gallery-locked-text {
    font-size: 14px;
    line-height: 1.45;
    opacity: 0.9;
    margin-bottom: 18px;
}
.snifffr-mp-gallery-locked-cta {
    display: inline-block;
    padding: 10px 22px;
    background: var(--color-pink, #e65c95);
    color: #fff !important;
    border-radius: 999px;
    text-decoration: none !important;
    font-weight: 600;
    font-size: 14px;
}
.snifffr-mp-gallery-locked-cta:hover,
.snifffr-mp-gallery-locked-cta:focus {
    background: #d24a82;
    text-decoration: none !important;
}

/* Lightbox — shared by photos + videos. Mounts behind body-scroll-lock,
   above any sheet (z-index 10010). */
.snifffr-mp-lightbox {
    position: fixed;
    inset: 0;
    z-index: 10010;
    background: rgba(0, 0, 0, 0.92);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}
.snifffr-mp-lightbox[hidden] { display: none; }
.snifffr-mp-lightbox-stage {
    width: 100%;
    max-width: 100vw;
    max-height: calc(100vh - 80px);
    display: flex;
    align-items: center;
    justify-content: center;
}
.snifffr-mp-lightbox-stage img,
.snifffr-mp-lightbox-stage video {
    max-width: 100%;
    max-height: calc(100vh - 80px);
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 6px;
    background: #000;
}
.snifffr-mp-lightbox-close {
    position: fixed;
    top: 14px;
    right: 14px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255,255,255,0.15);
    border: 1px solid rgba(255,255,255,0.25);
    color: #fff;
    font-size: 24px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10011;
}
.snifffr-mp-lightbox-close:hover { background: rgba(255,255,255,0.28); }

/* ---- snifffr mobile profile: Single shop item ---- */

.snifffr-mp-shop-item { padding: 12px; display: flex; flex-direction: column; gap: 12px; }

.snifffr-mp-shop-item-media {
    position: relative;
    background: #fff;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid var(--snifffr-mp-purple-08);
    box-shadow: 0 2px 4px rgba(66, 62, 89, 0.06), 0 8px 20px rgba(66, 62, 89, 0.10);
}
.snifffr-mp-shop-item-slider {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.snifffr-mp-shop-item-slider::-webkit-scrollbar { display: none; }
.snifffr-mp-shop-item-slide {
    flex: 0 0 100%;
    scroll-snap-align: start;
    aspect-ratio: 4 / 5;
    background: var(--snifffr-mp-lavender);
    display: flex;
    align-items: center;
    justify-content: center;
}
.snifffr-mp-shop-item-slide .snifffr-mp-shop-item-zoom {
    display: block;
    width: 100%;
    height: 100%;
    cursor: zoom-in;
}
.snifffr-mp-shop-item-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.snifffr-mp-shop-item-slider[data-single="1"] .snifffr-mp-shop-item-slide { flex: 0 0 100%; }
.snifffr-mp-shop-item-zoom-hint {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.45);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.snifffr-mp-shop-item-zoom-hint svg { display: block; }
.snifffr-mp-shop-item-dots {
    position: absolute;
    bottom: 10px;
    left: 0; right: 0;
    display: flex;
    justify-content: center;
    gap: 6px;
}
.snifffr-mp-shop-item-dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: rgba(255,255,255,0.55);
    transition: background 0.2s, transform 0.2s;
    cursor: pointer;
}
.snifffr-mp-shop-item-dot.is-active { background: #fff; transform: scale(1.3); }

.snifffr-mp-shop-item-card {
    background: #fff;
    border: 1px solid var(--snifffr-mp-purple-08);
    border-radius: 14px;
    box-shadow: 0 2px 4px rgba(66, 62, 89, 0.06), 0 8px 20px rgba(66, 62, 89, 0.10);
    padding: 18px;
    color: var(--snifffr-mp-purple);
}
.snifffr-mp-shop-item-head {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 12px;
}
.snifffr-mp-shop-item-title {
    font-size: 19px;
    font-weight: 700;
    margin: 0;
    line-height: 1.25;
    color: var(--snifffr-mp-purple);
    flex: 1 1 auto;
    min-width: 0;
    word-break: break-word;
}
.snifffr-mp-shop-item-age-pill {
    flex: 0 0 auto;
    font-size: 11px;
    font-weight: 500;
    line-height: 1;
    padding: 6px 10px;
    border-radius: 999px;
    background: var(--snifffr-mp-lavender);
    color: var(--snifffr-mp-purple);
    white-space: nowrap;
    align-self: center;
}
.snifffr-mp-shop-item-desc {
    font-size: 14px;
    line-height: 1.5;
    margin-bottom: 14px;
    color: var(--snifffr-mp-purple);
    opacity: 0.85;
}
.snifffr-mp-shop-item-desc p { margin: 0 0 8px; }
.snifffr-mp-shop-item-desc p:last-child { margin-bottom: 0; }
.snifffr-mp-shop-item-price-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 0 14px;
    border-top: 1px solid var(--snifffr-mp-purple-08);
    margin-bottom: 14px;
}
.snifffr-mp-shop-item-price-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--snifffr-mp-purple);
    opacity: 0.55;
}
.snifffr-mp-shop-item-price {
    display: flex;
    align-items: baseline;
    gap: 8px;
}
.snifffr-mp-shop-item-price-amount {
    font-size: 24px;
    font-weight: 700;
    color: var(--snifffr-mp-pink);
    line-height: 1;
}
.snifffr-mp-shop-item-price-unit {
    font-size: 12px;
    font-weight: 500;
    color: var(--snifffr-mp-purple);
    opacity: 0.6;
}
.snifffr-mp-shop-item-buy {
    display: block;
    width: 100%;
    padding: 14px 16px;
    background: var(--snifffr-mp-pink);
    color: #fff;
    border: 0;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 600;
    font-family: inherit;
    letter-spacing: 0.4px;
    text-align: center;
    box-shadow: 0 2px 6px rgba(230, 92, 149, 0.25);
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}
.snifffr-mp-shop-item-buy:hover { background: #d8407a; }

.snifffr-mp-shop-item-contact .snifffr-mp-section-label { margin-bottom: 8px; }
.snifffr-mp-shop-item-msg {
    width: 100%;
    padding: 12px 14px;
    background: var(--snifffr-mp-lavender);
    border: 0;
    border-radius: 12px;
    font-size: 14px;
    color: var(--snifffr-mp-purple);
    box-shadow: none;
    box-sizing: border-box;
    min-height: 90px;
    resize: vertical;
    font-family: inherit;
    margin-bottom: 10px;
}
.snifffr-mp-shop-item-msg:focus { outline: 2px solid var(--snifffr-mp-pink); outline-offset: 0; }
.snifffr-mp-shop-item-feedback {
    margin: 0 0 10px;
    padding: 10px 12px;
    border-radius: 10px;
    font-size: 13px;
}
.snifffr-mp-shop-item-feedback.is-success { background: rgba(29, 158, 117, 0.12); color: var(--snifffr-mp-active); }
.snifffr-mp-shop-item-feedback.is-error { background: rgba(204, 0, 0, 0.08); color: #cc0000; }
.snifffr-mp-shop-item-send {
    display: block;
    width: 100%;
    padding: 13px 16px;
    background: var(--snifffr-mp-pink);
    color: #fff;
    border: 0;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}
.snifffr-mp-shop-item-send:hover { background: #d8407a; }
.snifffr-mp-shop-item-notice {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    background: rgba(255, 235, 175, 0.45);
    border: 1px solid rgba(216, 165, 50, 0.30);
    border-radius: 12px;
}
.snifffr-mp-shop-item-notice-icon {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(216, 165, 50, 0.18);
    color: #b48323;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.snifffr-mp-shop-item-notice-icon svg { display: block; }
.snifffr-mp-shop-item-verify-note { font-size: 13px; color: var(--snifffr-mp-purple); margin: 0; line-height: 1.4; }
.snifffr-mp-shop-item-verify-note a { color: var(--snifffr-mp-pink); font-weight: 600; text-decoration: none; }
.snifffr-mp-shop-item-verify-note a:hover { text-decoration: underline; }

.snifffr-mp-shop-item-tags-wrap {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.snifffr-mp-shop-item-tags-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--snifffr-mp-purple);
    opacity: 0.55;
}
.snifffr-mp-shop-item-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    list-style: none;
    padding: 0;
    margin: 0;
}
.snifffr-mp-shop-item-tags li { margin: 0; }
.snifffr-mp-shop-item-tags a {
    display: inline-block;
    padding: 5px 11px;
    background: var(--snifffr-mp-lavender);
    color: var(--snifffr-mp-purple) !important;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 500;
    text-decoration: none !important;
    transition: background 0.15s ease, color 0.15s ease;
}
.snifffr-mp-shop-item-tags a:hover {
    background: var(--snifffr-mp-pink);
    color: #fff !important;
}

.snifffr-mp-shop-item-all {
    display: block;
    text-align: center;
    padding: 12px;
    background: #fff;
    border: 1px solid var(--snifffr-mp-pink);
    color: var(--snifffr-mp-pink) !important;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none !important;
    margin-top: 4px;
}

/* ---- snifffr mobile profile: Instant Media ---- */

.snifffr-mp-iu { padding: 12px; }
.snifffr-mp-iu-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }

/* The card uses .snifffr-mp-shop-card for the rounded shadow shell — see
   shop-grid block above. Below we tune just the Instant Media interior. */
.snifffr-mp-iu-media {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    background: var(--snifffr-mp-lavender);
    overflow: hidden;
}
.snifffr-mp-iu-media--locked .snifffr-mp-iu-locked-preview {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: blur(18px) saturate(0.85);
    transform: scale(1.1);   /* hide blur edge */
}
.snifffr-mp-iu-locked-placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--snifffr-mp-pink-soft), var(--snifffr-mp-lavender));
}
.snifffr-mp-iu-lock-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(66, 62, 89, 0.18);
    pointer-events: none;
}
.snifffr-mp-iu-lock-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    color: #fff;
    text-shadow: 0 1px 6px rgba(0,0,0,0.4);
}
.snifffr-mp-iu-lock-icon {
    width: 36px;
    height: 36px;
}
.snifffr-mp-iu-lock-count {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.4px;
}

/* Unlocked: render media as a horizontal scroll-snap slider when there
   are multiple items, so users can swipe between images/videos instead
   of scrolling a tall vertical stack. */
.snifffr-mp-iu-media:has(.snifffr-mp-iu-img + .snifffr-mp-iu-img),
.snifffr-mp-iu-media:has(.snifffr-mp-iu-img + .snifffr-mp-iu-video),
.snifffr-mp-iu-media:has(.snifffr-mp-iu-video + .snifffr-mp-iu-img),
.snifffr-mp-iu-media:has(.snifffr-mp-iu-video + .snifffr-mp-iu-video) {
    aspect-ratio: 4 / 3;
    background: var(--snifffr-mp-lavender);
    display: flex;
    flex-direction: row;
    gap: 0;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.snifffr-mp-iu-media::-webkit-scrollbar { display: none; }

.snifffr-mp-iu-img { display: block; }
.snifffr-mp-iu-img img,
.snifffr-mp-iu-video {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}
/* When multiple, each slide spans the full card width and snaps. */
.snifffr-mp-iu-media:has(.snifffr-mp-iu-img + .snifffr-mp-iu-img) > .snifffr-mp-iu-img,
.snifffr-mp-iu-media:has(.snifffr-mp-iu-img + .snifffr-mp-iu-video) > .snifffr-mp-iu-img,
.snifffr-mp-iu-media:has(.snifffr-mp-iu-img + .snifffr-mp-iu-video) > .snifffr-mp-iu-video,
.snifffr-mp-iu-media:has(.snifffr-mp-iu-video + .snifffr-mp-iu-img) > .snifffr-mp-iu-img,
.snifffr-mp-iu-media:has(.snifffr-mp-iu-video + .snifffr-mp-iu-img) > .snifffr-mp-iu-video,
.snifffr-mp-iu-media:has(.snifffr-mp-iu-video + .snifffr-mp-iu-video) > .snifffr-mp-iu-video {
    flex: 0 0 100%;
    width: 100%;
    height: 100%;
    scroll-snap-align: start;
}
.snifffr-mp-iu-media:has(.snifffr-mp-iu-img + .snifffr-mp-iu-img) > .snifffr-mp-iu-img img {
    height: 100%;
    object-fit: cover;
}

/* IU slider arrow buttons — only rendered on .is-slider (count > 1).
   Mirrors the cover-slider arrows. */
.snifffr-mp-iu-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.35);
    color: #fff;
    cursor: pointer;
    z-index: 2;
    opacity: 0.85;
    transition: background 0.15s ease, opacity 0.15s ease;
    -webkit-tap-highlight-color: transparent;
}
.snifffr-mp-iu-arrow:hover,
.snifffr-mp-iu-arrow:focus {
    background: rgba(0, 0, 0, 0.55);
    opacity: 1;
    outline: none;
}
.snifffr-mp-iu-arrow--prev { left: 8px; }
.snifffr-mp-iu-arrow--next { right: 8px; }
.snifffr-mp-iu-media:not(.is-slider) .snifffr-mp-iu-arrow {
    display: none !important;
}

.snifffr-mp-iu-body { padding: 14px 16px 4px; }
.snifffr-mp-iu-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--snifffr-mp-purple);
    line-height: 1.3;
    margin-bottom: 4px;
}
.snifffr-mp-iu-desc {
    font-size: 13px;
    color: var(--snifffr-mp-purple);
    opacity: 0.7;
    line-height: 1.4;
    margin-bottom: 12px;
}

/* Price badge inside the mobile IU card — give it room to breathe between
   description and the edit/delete actions row. */
.snifffr-mp-iu-body .iu-price-badge {
    display: inline-block;
    margin: 0 0 14px;
    padding: 5px 12px;
    background: var(--snifffr-mp-pink-soft);
    color: var(--snifffr-mp-pink);
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.02em;
}

/* Edit / Delete row sits flush at the card's bottom; bump bottom padding
   so the buttons don't kiss the card border. */
.snifffr-mp-iu-body .snifffr-mp-pc-card-actions {
    padding: 0 0 4px;
    margin-top: 4px;
}

/* Buy / unlock action row — full-width pink CTA, label includes the price. */
.snifffr-mp-iu-buy { margin-top: 12px; }
.snifffr-mp-iu-btn,
.snifffr-mp-iu-btn.iu-buy-btn {
    display: block;
    width: 100%;
    background: var(--snifffr-mp-pink) !important;
    color: #fff !important;
    border: 0 !important;
    border-radius: 999px !important;
    padding: 12px 16px !important;
    font-size: 14px !important;
    font-weight: 600;
    letter-spacing: 0.4px;
    cursor: pointer;
    text-align: center;
    text-transform: none !important;
    box-shadow: 0 2px 6px rgba(230, 92, 149, 0.25);
}
.snifffr-mp-iu-btn-price { font-weight: 500; opacity: 0.9; }
.snifffr-mp-iu-btn:disabled,
.snifffr-mp-iu-btn--disabled {
    background: var(--snifffr-mp-lavender) !important;
    color: var(--snifffr-mp-purple) !important;
    opacity: 0.7;
    cursor: not-allowed;
    box-shadow: none;
}

.snifffr-mp-iu-access {
    margin-top: 10px;
}
.snifffr-mp-iu-access-badge {
    display: inline-block;
    background: var(--snifffr-mp-active);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 6px;
    letter-spacing: 0.3px;
}

/* ---- snifffr mobile profile: Private Content ---- */

.snifffr-mp-pc { padding: 12px; }
.snifffr-mp-pc-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }

/* Locked subscription gate. */
.snifffr-mp-pc-gate {
    padding: 28px 20px;
    text-align: center;
    color: var(--snifffr-mp-purple);
}
.snifffr-mp-pc-gate-icon {
    width: 48px;
    height: 48px;
    margin: 0 auto 14px;
    color: var(--snifffr-mp-pink);
}
.snifffr-mp-pc-gate-icon svg { width: 100%; height: 100%; }
.snifffr-mp-pc-gate-title {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 6px;
}
.snifffr-mp-pc-gate-desc {
    font-size: 13px;
    opacity: 0.7;
    line-height: 1.5;
    margin-bottom: 18px;
}
.snifffr-mp-pc-gate-cta {
    display: inline-block;
    background: var(--snifffr-mp-pink);
    color: #fff !important;
    font-size: 14px;
    font-weight: 600;
    padding: 12px 24px;
    border-radius: 999px;
    text-decoration: none !important;
    box-shadow: 0 2px 6px rgba(230, 92, 149, 0.25);
}
.snifffr-mp-pc-gate-note {
    font-size: 13px;
    opacity: 0.6;
    margin-top: 4px;
}

/* Subscription tiers. */
.snifffr-mp-pc-packages {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 6px;
    text-align: left;
}
.snifffr-mp-pc-pkg {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    background: var(--snifffr-mp-lavender);
    border-radius: 12px;
}
.snifffr-mp-pc-pkg-meta {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.snifffr-mp-pc-pkg-label { font-size: 14px; font-weight: 600; color: var(--snifffr-mp-purple); }
.snifffr-mp-pc-pkg-price { font-size: 12px; color: var(--snifffr-mp-purple); opacity: 0.7; }
.snifffr-mp-pc-pkg .snifffr-mp-iu-btn {
    flex: 0 0 auto;
    width: auto;
    padding: 8px 18px;
    font-size: 13px;
}

/* Unlocked feed cards. */
.snifffr-mp-pc-card { padding: 0; overflow: hidden; }
.snifffr-mp-pc-media {
    position: relative;
    width: 100%;
    background: var(--snifffr-mp-lavender);
}
.snifffr-mp-pc-media img,
.snifffr-mp-pc-media video {
    width: 100%;
    max-height: 70vh;
    object-fit: cover;
    display: block;
}
.snifffr-mp-pc-title {
    padding: 12px 14px 4px;
    font-size: 14px;
    font-weight: 600;
    color: var(--snifffr-mp-purple);
}
.snifffr-mp-pc-desc {
    padding: 0 14px 14px;
    font-size: 13px;
    color: var(--snifffr-mp-purple);
    opacity: 0.75;
    line-height: 1.45;
}

.snifffr-mp-pc-card-actions {
    display: flex;
    gap: 10px;
    padding: 0 14px 14px;
}
.snifffr-mp-pc-card-edit,
.snifffr-mp-pc-card-del {
    flex: 1 1 auto;
    background: var(--snifffr-mp-lavender);
    color: var(--snifffr-mp-purple);
    border: 0;
    border-radius: 8px;
    padding: 9px 12px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}
.snifffr-mp-pc-card-del { background: rgba(230, 92, 149, 0.12); color: var(--snifffr-mp-pink); }

/* ---- Private Content sub-tabs (Posts / Settings / Subscribers) ---- */
.snifffr-mp-pc-subtabs {
    display: flex;
    gap: 6px;
    padding: 0 14px;
    margin: 12px 0 14px;
    overflow-x: auto;
    scrollbar-width: none;
}
.snifffr-mp-pc-subtabs::-webkit-scrollbar { display: none; }
.snifffr-mp-pc-subtab {
    flex: 0 0 auto;
    padding: 8px 14px;
    border-radius: 999px;
    background: var(--snifffr-mp-lavender);
    color: var(--snifffr-mp-purple);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}
.snifffr-mp-pc-subtab.is-active {
    background: var(--snifffr-mp-purple);
    color: #fff;
}

/* Restyle the BuddyPress #subnav (item-list-tabs#subnav) to match the
   snifffr-mp-pc-subtab pill aesthetic. Higher specificity than the
   existing #buddypress div.item-list-tabs#subnav rules earlier in this
   file (lines ~5526-5553) by adding the body.bp-user prefix. */
@media (max-width: 991.98px) {
    body.bp-user #buddypress div.item-list-tabs#subnav,
    body.bp-user #buddypress .item-list-tabs#subnav {
        background: transparent !important;
        border: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        float: none !important;
        width: 100% !important;
    }
    body.bp-user #buddypress div.item-list-tabs#subnav ul {
        list-style: none !important;
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 8px !important;
        padding: 4px 14px 14px !important;
        margin: 0 !important;
        overflow-x: auto !important;
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
        background: transparent !important;
    }
    body.bp-user #buddypress div.item-list-tabs#subnav ul::-webkit-scrollbar {
        display: none !important;
    }
    body.bp-user #buddypress div.item-list-tabs#subnav ul li {
        list-style: none !important;
        margin: 0 !important;
        padding: 0 !important;
        background: transparent !important;
        border: 0 !important;
        flex: 0 0 auto !important;
        float: none !important;
        width: auto !important;
        max-width: none !important;
        min-width: 0 !important;
    }
    body.bp-user #buddypress div.item-list-tabs#subnav ul li a,
    body.bp-user #buddypress div.item-list-tabs#subnav ul li span {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 8px 14px !important;
        border-radius: 999px !important;
        background: #ECEAF2 !important;
        background-color: #ECEAF2 !important;
        color: #423E59 !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        text-decoration: none !important;
        white-space: nowrap !important;
        border: 0 !important;
        text-transform: none !important;
        letter-spacing: 0 !important;
        line-height: 1.2 !important;
        opacity: 1 !important;
        text-align: center !important;
    }
    body.bp-user #buddypress div.item-list-tabs#subnav ul li a:hover,
    body.bp-user #buddypress div.item-list-tabs#subnav ul li a:focus {
        background: #FFC8E6 !important;
        background-color: #FFC8E6 !important;
        color: #423E59 !important;
    }
    body.bp-user #buddypress div.item-list-tabs#subnav ul li.current a,
    body.bp-user #buddypress div.item-list-tabs#subnav ul li.selected a,
    body.bp-user #buddypress div.item-list-tabs#subnav ul li.current a:hover,
    body.bp-user #buddypress div.item-list-tabs#subnav ul li.selected a:hover {
        background: #423E59 !important;
        background-color: #423E59 !important;
        color: #fff !important;
    }
}

/* ---- Private Content / Settings: subscription pricing form ---- */
.snifffr-mp-pc-settings {
    margin: 0 14px 18px;
    padding: 16px;
    background: #fff;
    border: 1px solid var(--snifffr-mp-purple-08);
    border-radius: 16px;
    box-shadow: 0 8px 28px rgba(66, 62, 89, 0.06);
}
.snifffr-mp-pc-settings-intro { margin-bottom: 14px; }
.snifffr-mp-pc-settings-title {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--snifffr-mp-purple);
    margin-bottom: 6px;
}
.snifffr-mp-pc-settings-hint {
    font-size: 12px;
    color: var(--snifffr-mp-purple-60);
    margin: 0;
    line-height: 1.4;
}
.snifffr-mp-pc-settings-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 0;
    border-top: 1px solid var(--snifffr-mp-purple-08);
}
.snifffr-mp-pc-settings-row:first-of-type { border-top: 0; }
.snifffr-mp-pc-settings-label {
    font-size: 14px;
    font-weight: 600;
    color: var(--snifffr-mp-purple);
}
.snifffr-mp-pc-settings-input {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.snifffr-mp-pc-settings-input input[type="number"] {
    width: 80px;
    padding: 8px 10px;
    border: 1px solid rgba(66, 62, 89, 0.18);
    border-radius: 10px;
    background: #fff;
    color: var(--snifffr-mp-purple);
    font-size: 14px;
    text-align: right;
    -webkit-appearance: none;
    appearance: none;
}
.snifffr-mp-pc-settings-suffix {
    font-size: 12px;
    color: var(--snifffr-mp-purple-60);
}
.snifffr-mp-pc-settings-save {
    width: 100%;
    margin-top: 14px;
    padding: 14px 18px;
    border: 0;
    border-radius: 999px;
    background: var(--snifffr-mp-pink);
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
}

/* ---- Private Content / Subscribers: list ---- */
.snifffr-mp-pc-subs { padding: 0 14px 18px; }
.snifffr-mp-pc-sub-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    background: #fff;
    border: 1px solid var(--snifffr-mp-purple-08);
    border-radius: 14px;
    margin-bottom: 8px;
    box-shadow: 0 4px 12px rgba(66, 62, 89, 0.04);
}
.snifffr-mp-pc-sub-user {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1 1 auto;
    min-width: 0;
    text-decoration: none;
    color: var(--snifffr-mp-purple);
}
.snifffr-mp-pc-sub-avatar img {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}
.snifffr-mp-pc-sub-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.snifffr-mp-pc-sub-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--snifffr-mp-purple);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.snifffr-mp-pc-sub-detail {
    font-size: 12px;
    color: var(--snifffr-mp-purple-60);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.snifffr-mp-pc-sub-badge {
    flex: 0 0 auto;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.snifffr-mp-pc-sub-row.is-active .snifffr-mp-pc-sub-badge {
    background: rgba(29, 158, 117, 0.12);
    color: var(--snifffr-mp-active);
}
.snifffr-mp-pc-sub-row.is-expired .snifffr-mp-pc-sub-badge {
    background: var(--snifffr-mp-lavender);
    color: var(--snifffr-mp-purple-60);
}

/* Mobile carousel — keep desktop's prev/next/dots JS; just restyle dots. */
.snifffr-mp-pc-card .pc-carousel-prev,
.snifffr-mp-pc-card .pc-carousel-next {
    width: 32px; height: 32px; font-size: 1.2rem;
}
.snifffr-mp-pc-card .pc-carousel-dot {
    width: 7px; height: 7px;
}

/* ---- snifffr mobile profile: Reviews ---- */

.snifffr-mp-reviews { padding: 12px; }

/* ---- snifffr mobile profile: Add-review form ---- */

.snifffr-mp-review-form { padding: 16px; }

/* Container card: rounded, soft shadow — matches shop / pc cards. */
.snifffr-mp-review-form .bupr-bp-member-review-no-popup-add-block,
.snifffr-mp-review-form .bp-member-add-form {
    background: #fff;
    border-radius: 16px;
    border: 1px solid var(--snifffr-mp-purple-08);
    box-shadow: 0 2px 4px rgba(66, 62, 89, 0.06), 0 8px 20px rgba(66, 62, 89, 0.10);
    padding: 18px 16px;
    color: var(--snifffr-mp-purple);
}
.snifffr-mp-review-form .bupr-bp-member-review-no-popup-add-block { background: transparent; box-shadow: none; border: 0; padding: 0; }

.snifffr-mp-review-form .bp-member-add-form > p {
    margin: 0 0 12px;
    font-size: 13px;
    color: var(--snifffr-mp-purple);
    opacity: 0.8;
}
.snifffr-mp-review-form .bp-member-add-form br { display: none; }

/* Inputs / textarea — lavender pill / rounded box, no borders. */
.snifffr-mp-review-form input[type="text"],
.snifffr-mp-review-form input[type="email"],
.snifffr-mp-review-form select,
.snifffr-mp-review-form textarea {
    width: 100% !important;
    padding: 12px 14px !important;
    background: var(--snifffr-mp-lavender) !important;
    border: 0 !important;
    border-radius: 12px !important;
    font-size: 14px !important;
    color: var(--snifffr-mp-purple) !important;
    box-shadow: none !important;
    box-sizing: border-box;
    margin-bottom: 4px !important;
}
.snifffr-mp-review-form textarea {
    min-height: 110px;
    resize: vertical;
    font-family: inherit;
}
.snifffr-mp-review-form input::placeholder,
.snifffr-mp-review-form textarea::placeholder {
    color: var(--snifffr-mp-purple);
    opacity: 0.55;
}
.snifffr-mp-review-form input:focus,
.snifffr-mp-review-form textarea:focus,
.snifffr-mp-review-form select:focus {
    outline: 2px solid var(--snifffr-mp-pink);
    outline-offset: 0;
}

/* Per-criterion star rows. */
.snifffr-mp-review-form .multi-review {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 0 !important;
    border-bottom: 0.5px solid var(--snifffr-mp-purple-08);
    margin: 0 !important;
    flex-wrap: wrap;
}
.snifffr-mp-review-form .multi-review:last-of-type { border-bottom: 0; }
.snifffr-mp-review-form .bupr-criteria-label {
    flex: 1 1 auto !important;
    width: auto !important;
    font-size: 13px !important;
    font-weight: 500;
    color: var(--snifffr-mp-purple) !important;
    opacity: 0.85;
    text-transform: capitalize;
    padding: 0 !important;
}
.snifffr-mp-review-form .bupr-criteria-content {
    flex: 0 0 auto !important;
    width: auto !important;
    padding: 0 !important;
    display: flex;
    gap: 4px;
}
.snifffr-mp-review-form .bupr-criteria-content .bupr-stars,
.snifffr-mp-review-form .bupr-criteria-content .member_stars,
.snifffr-mp-review-form .bupr-criteria-content .bupr-star-rate {
    font-size: 20px !important;
    color: var(--snifffr-mp-pink) !important;
    cursor: pointer;
    line-height: 1;
}
.snifffr-mp-review-form .bupr-error-fields {
    display: none;
    font-size: 11px !important;
    color: #cc0000 !important;
}

/* Anonymous checkbox row. */
.snifffr-mp-review-form input[type="checkbox"] {
    margin-right: 6px;
    accent-color: var(--snifffr-mp-pink);
}
.snifffr-mp-review-form label {
    font-size: 13px;
    color: var(--snifffr-mp-purple);
    display: inline-flex;
    align-items: center;
    cursor: pointer;
}

/* Submit button — full-width pink pill. */
.snifffr-mp-review-form #bupr_save_review,
.snifffr-mp-review-form button[name="submit-review"] {
    display: block !important;
    width: 100% !important;
    background: var(--snifffr-mp-pink) !important;
    color: #fff !important;
    border: 0 !important;
    border-radius: 999px !important;
    padding: 13px 16px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    letter-spacing: 0.4px !important;
    text-align: center !important;
    text-transform: none !important;
    box-shadow: 0 2px 6px rgba(230, 92, 149, 0.25) !important;
    cursor: pointer;
    margin-top: 12px;
}
.snifffr-mp-review-form #bupr_save_review:hover,
.snifffr-mp-review-form button[name="submit-review"]:hover {
    background: #d8407a !important;
}

/* Hide the redundant "Review Subject" field — bupr already hides it via class. */
.snifffr-mp-review-form .bupr-hide-subject { display: none !important; }

/* Spinner. */
/* Plugin keeps the spinner display:none by default and toggles it via .show()
   on submit. Don't force display here — only style it when shown. */
.snifffr-mp-review-form .bupr-save-reivew-spinner { margin: 8px auto 0; }

/* Success / error message banners. */
.snifffr-mp-review-form #message {
    margin: 0 0 12px;
    padding: 10px 12px;
    border-radius: 10px;
    font-size: 13px;
}
.snifffr-mp-review-form #message.success { background: rgba(29, 158, 117, 0.12); color: var(--snifffr-mp-active); }
.snifffr-mp-review-form #message.error,
.snifffr-mp-review-form #message.info { background: var(--snifffr-mp-lavender); color: var(--snifffr-mp-purple); }

/* Add-review CTA above the summary card. */
.snifffr-mp-review-add-btn {
    display: block;
    width: 100%;
    background: var(--snifffr-mp-pink) !important;
    color: #fff !important;
    text-decoration: none !important;
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    padding: 12px 16px;
    border-radius: 999px;
    margin-bottom: 14px;
    box-shadow: 0 2px 6px rgba(230, 92, 149, 0.25);
    letter-spacing: 0.4px;
}
.snifffr-mp-review-add-btn:hover { background: #d8407a !important; color: #fff !important; }

/* Big rating summary card up top. */
.snifffr-mp-reviews-summary {
    text-align: center;
    padding: 22px 16px 18px;
    margin-bottom: 16px;
}
.snifffr-mp-reviews-avg {
    font-size: 38px;
    font-weight: 700;
    color: var(--snifffr-mp-purple);
    line-height: 1;
}
.snifffr-mp-reviews-stars {
    color: var(--snifffr-mp-pink);
    font-size: 18px;
    letter-spacing: 2px;
    margin: 6px 0 4px;
}
.snifffr-mp-reviews-count {
    font-size: 13px;
    color: var(--snifffr-mp-purple);
    opacity: 0.7;
}

/* Review feed. */
.snifffr-mp-reviews-list { display: grid; grid-template-columns: 1fr; gap: 12px; }
.snifffr-mp-review {
    padding: 14px;
    background: #fff;
    border: 1px solid var(--snifffr-mp-purple-08);
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(66, 62, 89, 0.04);
}
.snifffr-mp-review-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--snifffr-mp-purple-08);
}
.snifffr-mp-review-avatar {
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    display: block;
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px var(--snifffr-mp-purple-08);
}
.snifffr-mp-review-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.snifffr-mp-review-meta {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.snifffr-mp-review-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--snifffr-mp-purple) !important;
    text-decoration: none !important;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.snifffr-mp-review-date {
    font-size: 12px;
    color: var(--snifffr-mp-purple);
    opacity: 0.6;
}
.snifffr-mp-review-remove {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(66, 62, 89, 0.06);
    color: var(--snifffr-mp-purple) !important;
    font-size: 14px;
    line-height: 1;
    text-decoration: none !important;
}
.snifffr-mp-review-remove:hover { background: rgba(230, 92, 149, 0.12); color: var(--snifffr-mp-pink) !important; }

.snifffr-mp-review-body {
    font-size: 13px;
    color: var(--snifffr-mp-purple);
    line-height: 1.5;
}
.snifffr-mp-review-body p { margin: 0 0 8px; }
.snifffr-mp-review-body p:last-child { margin-bottom: 0; }

.snifffr-mp-review-criteria {
    margin-top: 12px;
    padding: 10px 12px;
    background: var(--snifffr-mp-lavender);
    border-radius: 10px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 14px;
    row-gap: 6px;
}
.snifffr-mp-review-crit {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 11.5px;
    min-width: 0;
}
.snifffr-mp-review-crit-label {
    color: var(--snifffr-mp-purple);
    opacity: 0.75;
    text-transform: capitalize;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.snifffr-mp-review-crit-stars {
    color: var(--snifffr-mp-pink);
    letter-spacing: 1px;
    font-size: 10px;
    flex: 0 0 auto;
}
/* On very narrow screens fall back to single column so the labels don't
   ellipsis-clip too aggressively. */
@media (max-width: 380px) {
    .snifffr-mp-review-criteria {
        grid-template-columns: 1fr;
    }
}

/* Bottom sheet */
.snifffr-mp-sheet-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(66, 62, 89, 0.45);
    opacity: 0;
    transition: opacity 220ms ease;
    z-index: 9998;
}
.snifffr-mp-sheet-backdrop.is-open { opacity: 1; }
.snifffr-mp-sheet-backdrop[hidden] { display: none; }

.snifffr-mp-sheet {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    background: #fff;
    border-radius: 20px 20px 0 0;
    padding: 12px 16px 24px;
    transform: translateY(100%);
    transition: transform 240ms ease;
    z-index: 9999;
    box-shadow: 0 -8px 24px rgba(66, 62, 89, 0.18);
    max-height: 70vh;
    overflow-y: auto;
}
.snifffr-mp-sheet.is-open { transform: translateY(0); }
.snifffr-mp-sheet[hidden] { display: none; }

.snifffr-mp-sheet-grabber {
    width: 40px;
    height: 4px;
    background: var(--snifffr-mp-lavender);
    border-radius: 2px;
    margin: 0 auto 12px;
}
.snifffr-mp-sheet-list { display: flex; flex-direction: column; }
.snifffr-mp-sheet-link {
    /* The shop-actions sheet mixes <button>, <div>, and the BP friendship
       <a>/<div> wrapper inside .snifffr-mp-friend-cell. Native <button>
       defaults to a buttonface background that shows up as a lavender row
       fill while the <div>/<a> rows stay transparent. Reset all of them to
       a uniform transparent row so every action looks identical. */
    background: transparent !important;
    border: 0;
    border-bottom: 0.5px solid var(--snifffr-mp-lavender);
    appearance: none;
    -webkit-appearance: none;
    width: 100%;
    text-align: left;
    cursor: pointer;
    padding: 14px 4px;
    color: var(--snifffr-mp-purple) !important;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none !important;
    display: flex;
    align-items: center;
    gap: 12px;
}
/* Action-sheet row icon — neutral grey glyph, no background. */
.snifffr-mp-sheet-link-icon {
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 0;
    background: transparent;
    color: var(--snifffr-mp-purple-60, rgba(66, 62, 89, 0.6));
    line-height: 1;
}
.snifffr-mp-sheet-link-icon svg {
    width: 18px;
    height: 18px;
    display: block;
}
.snifffr-mp-sheet-link-icon i,
.snifffr-mp-sheet-link-icon i.bi {
    font-size: 18px;
    line-height: 1;
    display: block;
}
.snifffr-mp-sheet-link-icon--order,
.snifffr-mp-sheet-link-icon--tip,
.snifffr-mp-sheet-link-icon--friend,
.snifffr-mp-sheet-link-icon--block {
    background: transparent;
    color: var(--snifffr-mp-purple-60, rgba(66, 62, 89, 0.6));
}
.snifffr-mp-sheet-link-label { flex: 1 1 auto; }
/* Block row — flex with the icon left of the BP plugin's button output. The
   BP plugin emits <div class="generic-button"><a class="block-button">Block
   </a></div>. Earlier rules force the inner <a> to display:block; width:100%
   which would stretch it as a flex child and break alignment. Here we
   override to keep both flex children compact and centered together, and
   draw the row divider on the wrap (full width) instead of on the inner
   button (truncated width). Selector specificity beats the earlier
   `body [data-snifffr-mp-sheet="shop-actions"] .snifffr-mp-block-wrap`
   rules that set padding/border to 0. */
body [data-snifffr-mp-sheet="shop-actions"] .snifffr-mp-block-wrap--icon {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 14px 4px !important;
    border-bottom: 0.5px solid var(--snifffr-mp-lavender) !important;
    margin: 0 !important;
}
body [data-snifffr-mp-sheet="shop-actions"] .snifffr-mp-block-wrap--icon > * {
    align-self: center !important;
}
body [data-snifffr-mp-sheet="shop-actions"] .snifffr-mp-block-wrap--icon .snifffr-mp-sheet-link-icon {
    flex: 0 0 28px;
}
body [data-snifffr-mp-sheet="shop-actions"] .snifffr-mp-block-wrap--icon .generic-button,
body [data-snifffr-mp-sheet="shop-actions"] .snifffr-mp-block-wrap--icon .block-member {
    flex: 1 1 auto !important;
    display: flex !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
}
body [data-snifffr-mp-sheet="shop-actions"] .snifffr-mp-block-wrap--icon a,
body [data-snifffr-mp-sheet="shop-actions"] .snifffr-mp-block-wrap--icon button,
body #buddypress [data-snifffr-mp-sheet="shop-actions"] .snifffr-mp-block-wrap--icon a,
body #buddypress [data-snifffr-mp-sheet="shop-actions"] .snifffr-mp-block-wrap--icon button {
    display: inline-flex !important;
    align-items: center !important;
    width: auto !important;
    border-bottom: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    line-height: 1 !important;
}
.snifffr-mp-sheet-link:last-child { border-bottom: 0; }
.snifffr-mp-sheet-link.is-empty { opacity: 0.5; }
/* Active sub-page in the More sheet (e.g. Reviews / Private Content) — pink
   so the user knows which tab they're on without having to scan the URL. */
.snifffr-mp-sheet-link.is-active { color: var(--snifffr-mp-pink) !important; font-weight: 600; }

body.snifffr-mp-sheet-locked { overflow: hidden; }

/* ---- snifffr mobile profile: details + stats + activity ---- */

.snifffr-mp-aboutme { padding: 16px 16px 30px; }
.snifffr-mp-aboutme-card {
    position: relative;
    background: var(--snifffr-mp-lavender);
    border-radius: 12px;
    padding: 12px 14px;
    color: var(--snifffr-mp-purple);
    font-size: 13px;
    line-height: 1.5;
    word-wrap: break-word;
    text-align: left;
}
/* Clamp bio to 6 lines until user expands. The line-clamp uses
   the card's own line-height (13px font * 1.5 ≈ 19.5px per line).
   When clamped, a fade-out gradient hints there's more below. */
.snifffr-mp-aboutme-card[data-snifffr-mp-clamp="bio"]:not(.is-expanded) .snifffr-mp-aboutme-text {
    display: -webkit-box;
    -webkit-line-clamp: 6;
    -webkit-box-orient: vertical;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(180deg, #000 70%, rgba(0,0,0,0.35) 100%);
            mask-image: linear-gradient(180deg, #000 70%, rgba(0,0,0,0.35) 100%);
}
.snifffr-mp-aboutme-card.is-expanded .snifffr-mp-aboutme-text {
    -webkit-mask-image: none;
            mask-image: none;
}
.snifffr-mp-aboutme-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    margin: 12px 0 0;
    padding: 10px 14px;
    background: #fff;
    border: 1px solid var(--snifffr-mp-purple-08);
    border-radius: 999px;
    color: var(--snifffr-mp-pink);
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.3px;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
    -webkit-appearance: none;
    appearance: none;
}
.snifffr-mp-aboutme-toggle::after {
    content: "";
    width: 8px;
    height: 8px;
    border-right: 1.6px solid currentColor;
    border-bottom: 1.6px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
    transition: transform 0.2s ease;
}
.snifffr-mp-aboutme-card.is-expanded .snifffr-mp-aboutme-toggle::after {
    transform: translateY(2px) rotate(-135deg);
}
.snifffr-mp-aboutme-toggle:hover,
.snifffr-mp-aboutme-toggle:focus-visible {
    background: var(--snifffr-mp-pink);
    border-color: var(--snifffr-mp-pink);
    color: #fff;
    box-shadow: 0 4px 12px rgba(230, 92, 149, 0.25);
    outline: none;
}

.snifffr-mp-details { padding: 16px; }
.snifffr-mp-details-card {
    background: var(--snifffr-mp-lavender);
    border-radius: 12px;
    padding: 4px 14px;
}
.snifffr-mp-detail-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 9px 0;
    border-bottom: 0.5px solid var(--snifffr-mp-purple-08);
    font-size: 12px;
    gap: 12px;
}
.snifffr-mp-detail-row:last-child { border-bottom: 0; }
.snifffr-mp-detail-label { color: var(--snifffr-mp-purple); opacity: 0.6; }
.snifffr-mp-detail-value { color: var(--snifffr-mp-purple); font-weight: 500; text-align: right; }
.snifffr-mp-detail-flag {
    display: inline-flex;
    align-items: center;
    margin-left: 6px;
    vertical-align: middle;
}
.snifffr-mp-detail-flag .user-country-flag { width: 1.2em; height: 0.9em; border-radius: 2px; }
.snifffr-mp-detail-verified.is-yes { color: var(--snifffr-mp-active); }
a.snifffr-mp-detail-verified {
    color: var(--snifffr-mp-pink) !important;
    text-decoration: none !important;
}
a.snifffr-mp-detail-verified:hover,
a.snifffr-mp-detail-verified:focus { text-decoration: underline !important; }

.snifffr-mp-stats { padding: 20px 16px 16px; }
body.bp-displayed-type-buyer .snifffr-mp-stats { padding: 0 16px 16px; }
.snifffr-mp-stats.snifffr-mp-stats--tight { padding-top: 10px; }
.snifffr-mp-stats-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 8px;
}
.snifffr-mp-stats-row--two {
    grid-template-columns: 1fr 1fr;
}
.snifffr-mp-stat {
    background: var(--snifffr-mp-lavender);
    padding: 12px 8px;
    border-radius: 12px;
    text-align: center;
    min-height: 56px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
a.snifffr-mp-stat,
a.snifffr-mp-stat--link {
    color: var(--snifffr-mp-purple) !important;
    text-decoration: none !important;
    transition: background 0.15s ease;
}
a.snifffr-mp-stat:hover,
a.snifffr-mp-stat:focus,
a.snifffr-mp-stat--link:hover,
a.snifffr-mp-stat--link:focus {
    background: var(--snifffr-mp-pink-soft);
}
/* Tiny pink alarm on the Friends tile when there are pending friend
   requests. Disappears automatically once each request is accepted or
   rejected (no row left in BP's friendship table). */
.snifffr-mp-stat-num { position: relative; display: inline-block; }
.snifffr-mp-stat-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 16px;
    height: 16px;
    padding: 0 5px;
    margin-left: 4px;
    vertical-align: 4px;
    background: var(--snifffr-mp-pink);
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    line-height: 1;
    border-radius: 8px;
    box-sizing: border-box;
    box-shadow: 0 0 0 2px var(--snifffr-mp-lavender);
}
.snifffr-mp-stat-num {
    font-size: 18px;
    font-weight: 500;
    color: var(--snifffr-mp-purple);
    line-height: 1.1;
}
.snifffr-mp-stat-active {
    font-size: 14px;
    padding-top: 2px;
    color: var(--snifffr-mp-purple);
    opacity: 0.55;
}
.snifffr-mp-stat-active.is-on {
    color: var(--snifffr-mp-active);
    opacity: 1;
}
.snifffr-mp-stat-label {
    font-size: 10px;
    color: var(--snifffr-mp-purple);
    opacity: 0.6;
    margin-top: 2px;
}
.snifffr-mp-member-since {
    font-size: 11px;
    color: var(--snifffr-mp-purple);
    opacity: 0.4;
    text-align: center;
    margin-top: 8px;
}

/* Self-view "What's new" post form on the profile page (BP's
   activity/post-form template part embedded above Recent activity).
   Wraps the default BP markup in a soft card so it reads as part of
   the mobile redesign. */
.snifffr-mp-postform {
    margin: 30px 16px 16px;
    padding: 14px 16px 12px;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}
.snifffr-mp-postform #whats-new-form,
.snifffr-mp-postform form#whats-new-form,
.snifffr-mp-postform .standard-form {
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* Buyer profiles only ever surface the Profile tab in #object-nav. Body
   class `bp-displayed-type-buyer` is set in functions.php based on the
   *displayed* user (not the viewer), so the rule applies regardless of
   who's looking at the page. Scoped to the mobile breakpoint since this
   is the mobile redesign — desktop layout is untouched. */
@media (max-width: 991.98px) {
    body.snifffr-mobile-beta.bp-displayed-type-buyer #buddypress #object-nav > ul > li {
        display: none !important;
    }
    body.snifffr-mobile-beta.bp-displayed-type-buyer #buddypress #object-nav > ul > li.xprofile-personal-li,
    body.snifffr-mobile-beta.bp-displayed-type-buyer #buddypress #object-nav > ul > li.profile-personal-li {
        display: list-item !important;
    }
}
.snifffr-mp-postform #whats-new-avatar {
    float: left;
    margin: 0 12px 8px 0;
}
.snifffr-mp-postform #whats-new-avatar img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}
.snifffr-mp-postform .activity-greeting {
    margin: 8px 0 8px 0;
    font-size: 14px;
    font-weight: 600;
    color: #4e3c6e;
    line-height: 40px;
}
.snifffr-mp-postform #whats-new-content {
    clear: both;
}
.snifffr-mp-postform #whats-new-textarea textarea,
.snifffr-mp-postform #whats-new {
    width: 100%;
    min-height: 70px;
    padding: 10px 12px;
    border: 1px solid rgba(78, 60, 110, 0.12);
    border-radius: 12px;
    background: #fafafd;
    font-size: 14px;
    color: #4e3c6e;
    box-sizing: border-box;
    resize: vertical;
}
.snifffr-mp-postform #whats-new-textarea textarea:focus,
.snifffr-mp-postform #whats-new:focus {
    outline: 2px solid #d63384;
    outline-offset: 0;
    background: #fff;
}
.snifffr-mp-postform #whats-new-options {
    display: flex !important;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px solid rgba(78, 60, 110, 0.06);
}
.snifffr-mp-postform #whats-new-submit {
    margin-left: auto;
}
.snifffr-mp-postform #mpp-activity-upload-buttons,
.snifffr-mp-postform .mpp-upload-buttons {
    display: flex;
    align-items: center;
    gap: 8px;
}
/* Replace mediapress raster upload icons with Font Awesome glyphs.
   Applies site-wide (profile post form + main /activity/ page) since
   the IDs are unique to the plugin. */
#mpp-photo-upload img,
#mpp-video-upload img {
    display: none !important;
}
#mpp-photo-upload,
#mpp-video-upload {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 999px;
    color: #4e3c6e;
    text-decoration: none !important;
    transition: background 0.15s ease, color 0.15s ease;
}
#mpp-photo-upload:hover,
#mpp-video-upload:hover {
    background: rgba(214, 51, 132, 0.08);
    color: #d63384;
}
#mpp-photo-upload::before,
#mpp-video-upload::before {
    font-family: "Font Awesome 5 Free";
    font-size: 18px;
    line-height: 1;
}
/* fa-image is a regular-weight icon (far → font-weight 400);
   fa-video is solid (fas → font-weight 900). */
#mpp-photo-upload::before {
    content: "\f03e"; /* fa-image */
    font-weight: 400;
}
#mpp-video-upload::before {
    content: "\f04b"; /* fa-play */
    font-weight: 900;
}
.snifffr-mp-postform #whats-new-submit input[type="submit"],
.snifffr-mp-postform #aw-whats-new-submit {
    padding: 9px 18px;
    border: 0;
    border-radius: 999px;
    background: #d63384;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}
.snifffr-mp-postform #whats-new-submit input[type="submit"]:hover,
.snifffr-mp-postform #aw-whats-new-submit:hover {
    background: #b91d6e;
}
.snifffr-mp-postform #mpp-activity-media-upload-container {
    margin-top: 10px;
    padding: 10px;
    border: 1px dashed rgba(78, 60, 110, 0.20);
    border-radius: 12px;
    background: #fafafd;
}
/* Default-hide until the user clicks the photo/video icon (which adds an
   active state). The plugin's own `mpp-upload-container-inactive` class
   was leaking through styling without hiding, so just hide the
   container by default and only show when actively uploading. */
.snifffr-mp-postform #mpp-activity-media-upload-container,
.snifffr-mp-postform #mpp-activity-media-upload-container.mpp-upload-container-inactive,
.snifffr-mp-postform .mpp-upload-container-inactive {
    display: none !important;
}
.snifffr-mp-postform #mpp-activity-media-upload-container.mpp-upload-container-active {
    display: block !important;
}

/* Mediapress upload UI restyle — applies to both the profile post form
   and /activity/. Replaces the bright red X close button with a subtle
   purple FA glyph, tightens the dropzone visuals, and pinks the
   "Select files" button to match the brand. */
.snifffr-mp-postform .mpp-upload-container-close,
.activity-list .mpp-upload-container-close,
#whats-new-form .mpp-upload-container-close {
    position: absolute !important;
    top: 8px;
    right: 8px;
    width: 28px;
    height: 28px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: transparent !important;
    color: rgba(78, 60, 110, 0.55) !important;
    text-decoration: none !important;
    transition: background 0.15s ease, color 0.15s ease;
    z-index: 2;
}
.snifffr-mp-postform .mpp-upload-container-close:hover,
.activity-list .mpp-upload-container-close:hover,
#whats-new-form .mpp-upload-container-close:hover {
    background: rgba(78, 60, 110, 0.08) !important;
    color: #4e3c6e !important;
}
.snifffr-mp-postform .mpp-upload-container-close span,
.activity-list .mpp-upload-container-close span,
#whats-new-form .mpp-upload-container-close span {
    display: none !important;
}
.snifffr-mp-postform .mpp-upload-container-close::before,
.activity-list .mpp-upload-container-close::before,
#whats-new-form .mpp-upload-container-close::before {
    content: "\f00d"; /* fa-times */
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 14px;
    line-height: 1;
}

/* Dropzone polish — softer dashed border, generous spacing, brand pink
   "Select files" pill button. */
.snifffr-mp-postform .mpp-dropzone,
#whats-new-form .mpp-dropzone {
    border: 1px dashed rgba(78, 60, 110, 0.25) !important;
    border-radius: 12px !important;
    background: #fafafd !important;
    padding: 22px 16px !important;
    text-align: center;
}
.snifffr-mp-postform .mpp-drag-drop-inside,
#whats-new-form .mpp-drag-drop-inside {
    margin: 0 !important;
}
.snifffr-mp-postform .mpp-drag-drop-info,
#whats-new-form .mpp-drag-drop-info {
    margin: 0 0 4px !important;
    font-size: 14px;
    font-weight: 600;
    color: #4e3c6e;
}
.snifffr-mp-postform .mpp-drag-drop-buttons,
#whats-new-form .mpp-drag-drop-buttons {
    margin: 6px 0 !important;
}
.snifffr-mp-postform .mpp-button-select-files,
.snifffr-mp-postform input.mpp-button-select-files,
#whats-new-form .mpp-button-select-files,
#whats-new-form input.mpp-button-select-files {
    padding: 8px 18px !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: #d63384 !important;
    background-color: #d63384 !important;
    color: #fff !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    cursor: pointer;
    box-shadow: none !important;
    transition: background 0.15s ease;
}
.snifffr-mp-postform .mpp-button-select-files:hover,
#whats-new-form .mpp-button-select-files:hover {
    background: #b91d6e !important;
    background-color: #b91d6e !important;
}
.snifffr-mp-postform .mpp-uploader-allowed-file-type-info,
#whats-new-form .mpp-uploader-allowed-file-type-info {
    margin: 4px 0 0 !important;
    font-size: 11px;
    color: rgba(78, 60, 110, 0.55);
}

/* Mediapress upload error/feedback restyle — replaces raw red bullet
   list with a soft alert card. */
.snifffr-mp-postform .mpp-feedback,
#whats-new-form .mpp-feedback,
#mpp-upload-feedback-activity {
    margin: 10px 0 0 !important;
}
.snifffr-mp-postform .mpp-feedback ul,
#whats-new-form .mpp-feedback ul,
#mpp-upload-feedback-activity ul {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}
.snifffr-mp-postform .mpp-feedback ul li,
#whats-new-form .mpp-feedback ul li,
#mpp-upload-feedback-activity ul li {
    list-style: none !important;
    margin: 0 0 6px !important;
    padding: 10px 14px 10px 38px !important;
    background: rgba(214, 51, 132, 0.06) !important;
    border: 1px solid rgba(214, 51, 132, 0.18) !important;
    border-radius: 12px !important;
    color: #b91d6e !important;
    font-size: 12px !important;
    line-height: 1.4;
    position: relative;
    word-wrap: break-word;
}
.snifffr-mp-postform .mpp-feedback ul li::before,
#whats-new-form .mpp-feedback ul li::before,
#mpp-upload-feedback-activity ul li::before {
    content: "\f071"; /* fa-exclamation-triangle */
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 14px;
    color: #d63384;
    position: absolute;
    left: 14px;
    top: 11px;
}
/* The plugin appends an "x" close marker after the filename — hide
   the raw character so the warning reads cleanly. */
.snifffr-mp-postform .mpp-feedback ul li > x,
#whats-new-form .mpp-feedback ul li > x,
#mpp-upload-feedback-activity ul li > x {
    display: none !important;
}

.snifffr-mp-activity { padding: 0 16px 24px; }
.snifffr-mp-activity-list { display: flex; flex-direction: column; gap: 10px; }
.snifffr-mp-activity-item {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    background: #fff;
    border: 1px solid var(--snifffr-mp-purple-08);
    border-radius: 12px;
    padding: 12px;
    box-shadow: 0 2px 4px rgba(66, 62, 89, 0.06), 0 8px 20px rgba(66, 62, 89, 0.10);
}
.snifffr-mp-activity-avatar {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    border-radius: 50%;
    overflow: hidden;
    background: var(--snifffr-mp-pink-soft);
    display: flex;
    align-items: center;
    justify-content: center;
}
.snifffr-mp-activity-avatar img,
.snifffr-mp-activity-avatar .avatar { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; display: block; }
.snifffr-mp-activity-body { flex: 1; min-width: 0; }
.snifffr-mp-activity-text {
    font-size: 12px;
    color: var(--snifffr-mp-purple);
    line-height: 1.4;
}
.snifffr-mp-activity-text a { color: var(--snifffr-mp-pink) !important; font-weight: 500; text-decoration: none !important; }
.snifffr-mp-activity-text img.avatar {
    border-radius: 50%;
    object-fit: cover;
    vertical-align: middle;
    margin: 0 2px;
}
.snifffr-mp-activity-content {
    margin-top: 4px;
    font-size: 13px;
    color: var(--snifffr-mp-purple);
    line-height: 1.45;
    word-wrap: break-word;
}
/* Activity feed links — pink for both the on-profile feed (.snifffr-mp-
   activity-content) and the /activity/ directory feed (body.activity). */
.snifffr-mp-activity-content a,
body.activity .activity-content a,
body.activity .activity-list .activity-content a,
body.activity #activity-stream .activity-content a {
    color: var(--snifffr-mp-pink, #E65C95) !important;
}
.snifffr-mp-activity-content p { margin: 0 0 6px; }
.snifffr-mp-activity-content p:last-child { margin-bottom: 0; }
/* User-pasted markup (bp_activity_content_body) often renders <h2>/<h3>
   etc. that pick up the theme's giant default heading size. Cap them
   to 1rem so the activity feed doesn't have huge bold blocks. */
.snifffr-mp-activity-content h1,
.snifffr-mp-activity-content h2,
.snifffr-mp-activity-content h3,
.snifffr-mp-activity-content h4,
.snifffr-mp-activity-content h5,
.snifffr-mp-activity-content h6 {
    font-size: 1rem !important;
    line-height: 1.4 !important;
    margin: 0 0 6px !important;
    font-weight: 600;
    color: var(--snifffr-mp-purple);
}
.snifffr-mp-activity-content img,
.snifffr-mp-activity-content video {
    max-width: 100%;
    height: auto;
    border-radius: 10px;
    margin-top: 6px;
    display: block;
}
.snifffr-mp-activity-time {
    font-size: 10px;
    color: var(--snifffr-mp-purple);
    opacity: 0.4;
    margin-top: 2px;
}

/* BP injects a `.time-since` span inside bp_activity_action() — we already
   render the relative time on its own line, so hide the inline duplicate. */
.snifffr-mp-activity-text .time-since,
.snifffr-mp-activity-text .activity-time-since { display: none; }

/* ==========================================================================
   snifffr — MediaPress gallery create + manage (mobile)
   --------------------------------------------------------------------------
   Routing helper (snifffr-mobile-routing.php) tags the body with
   `snifffr-mp-gallery-form` when MediaPress is on a create or manage screen.
   We use that to hide the BP subnav + "My Gallery" h3, swap in a
   snifffr-style header (back arrow + title), and soften the create form +
   upload page to match the rest of the mobile redesign.
   ========================================================================== */

@media (max-width: 991.98px) {
    /* The default <h3>My Gallery</h3>, the BP subnav and the MediaPress
       breadcrumbs are noisy on a phone; the new header replaces them. */
    /* The global "My <X>" h2 (functions.php → profile_pages_title) is
       redundant on every mobile profile page — both the mobile-wrap and
       the manage-mode desktop-wrap render their own header. Hide it
       sitewide at phone widths. */
    .profile-pages-title { display: none !important; }

    /* MediaPress's "Gallery created! Click the PHOTO or VIDEO tab below"
       feedback notice points users at the desktop admin menu (which we
       hide on mobile) — so the instruction is misleading on phones. The
       upload form is already on screen, so the notice is redundant. */
    body.snifffr-mp-gallery-manage #message.mpp-template-notice,
    body.snifffr-mp-gallery-form #message.mpp-template-notice {
        display: none !important;
    }

    /* Post-delete toast ("Deleted." etc) — rendered by mpp.notify() into
       #mpp-container as a bare red-bordered <div>. Restyle it as a soft
       mobile-friendly card. */
    body.snifffr-mp-gallery-form #mpp-notice-message {
        margin: 0 16px 12px !important;
        padding: 12px 14px !important;
        border: 0 !important;
        border-radius: 12px !important;
        background: var(--snifffr-mp-lavender, #ECEAF2) !important;
        color: var(--snifffr-mp-purple, #423E59) !important;
        font-size: 13px !important;
        font-weight: 500;
        box-shadow: 0 4px 14px rgba(66, 62, 89, 0.06) !important;
        animation: snifffr-mp-notice-in 0.2s ease-out;
    }
    body.snifffr-mp-gallery-form #mpp-notice-message.error {
        background: rgba(230, 92, 149, 0.12) !important;
        color: var(--snifffr-mp-pink, #E65C95) !important;
    }
    body.snifffr-mp-gallery-form #mpp-notice-message p {
        margin: 0 !important;
        padding: 0 !important;
        background: transparent !important;
        background-color: transparent !important;
        border: 0 !important;
        color: var(--snifffr-mp-purple, #423E59) !important;
        font-size: 13px !important;
        line-height: 1.4;
    }
    @keyframes snifffr-mp-notice-in {
        from { opacity: 0; transform: translateY(-4px); }
        to   { opacity: 1; transform: translateY(0); }
    }

    body.snifffr-mp-gallery-form .snifffr-profile-desktop-wrap > #subnav,
    body.snifffr-mp-gallery-form .snifffr-profile-desktop-wrap > h3,
    body.snifffr-mp-gallery-form .snifffr-profile-desktop-wrap .mpp-breadcrumbs,
    body.snifffr-mp-gallery-form .snifffr-profile-desktop-wrap .mpp-gallery-admin-menu,
    body.snifffr-mp-gallery-form .snifffr-profile-desktop-wrap .mpp-gallery-admin-menu + hr,
    /* mpp_display_space_usage() prints a bare <strong> right inside
       #mpp-container — no wrapping class to target, so hide direct
       strong children of the members component. */
    body.snifffr-mp-gallery-form #mpp-container.mpp-members-component > strong {
        display: none !important;
    }

    /* The plugin's #mpp-container is padded with rules from the desktop
       layout — flatten it on phones so the new header reaches edge-to-edge. */
    body.snifffr-mp-gallery-form #mpp-container {
        padding: 0 !important;
        margin: 0 !important;
        background: #fff;
    }

    /* ----- Create gallery form -------------------------------------------
       The form sits inside an .iu-form-card (matches shop add-listing).
       We just need a few CSS variables here for the tile selector and
       to flatten the legacy mpp-* layout grid. */
    .snifffr-mp-gallery-form-wrap {
        --snifffr-mp-purple:    #423E59;
        --snifffr-mp-purple-60: rgba(66, 62, 89, 0.6);
        --snifffr-mp-purple-08: rgba(66, 62, 89, 0.22);
        --snifffr-mp-pink:      #E65C95;
        --snifffr-mp-pink-soft: #FFC8E6;
        --snifffr-mp-lavender:  #ECEAF2;
        color: var(--snifffr-mp-purple);
        font-size: 14px;
    }

    /* Photo / Video tile selector — replaces the type <select> on mobile. */
    .snifffr-mp-gallery-type-tiles {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
        margin: 0 0 18px;
    }
    .snifffr-mp-gallery-type-tiles:has(.snifffr-mp-gallery-type-tile:nth-child(3)) {
        grid-template-columns: repeat(3, 1fr);
    }
    .snifffr-mp-gallery-type-tile {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 6px;
        padding: 16px 10px;
        background: #fff;
        border: 1.5px solid rgba(66, 62, 89, 0.18);
        border-radius: 14px;
        color: var(--snifffr-mp-purple);
        font-family: inherit;
        font-size: 13px;
        font-weight: 600;
        cursor: pointer;
        appearance: none;
        -webkit-appearance: none;
        transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
    }
    .snifffr-mp-gallery-type-tile .snifffr-mp-gallery-type-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 38px;
        height: 38px;
        border-radius: 50%;
        background: var(--snifffr-mp-lavender);
        color: var(--snifffr-mp-purple);
    }
    .snifffr-mp-gallery-type-tile.is-selected {
        border-color: var(--snifffr-mp-pink);
        background: linear-gradient(135deg, #fff 0%, var(--snifffr-mp-pink-soft) 100%);
        color: var(--snifffr-mp-purple);
        box-shadow: 0 0 0 3px rgba(230, 92, 149, 0.15);
    }
    .snifffr-mp-gallery-type-tile.is-selected .snifffr-mp-gallery-type-icon {
        background: var(--snifffr-mp-pink);
        color: #fff;
    }

    /* Hide the underlying <select> on mobile — tiles drive it via JS. */
    .snifffr-mp-gallery-form-wrap .mpp-editable-gallery-type {
        display: none;
    }

    /* Stack status full-width and soften it. */
    .snifffr-mp-gallery-form-wrap .mpp-g .mpp-u-1-2,
    .snifffr-mp-gallery-form-wrap .mpp-g .mpp-u-1-1 {
        width: 100% !important;
        margin: 0 0 14px !important;
        float: none !important;
        padding: 0 !important;
    }
    .snifffr-mp-gallery-form-wrap label {
        display: block;
        font-size: 12px;
        font-weight: 600;
        color: var(--snifffr-mp-purple-60);
        text-transform: uppercase;
        letter-spacing: 0.04em;
        margin-bottom: 6px;
    }
    .snifffr-mp-gallery-form-wrap input[type="text"],
    .snifffr-mp-gallery-form-wrap textarea,
    .snifffr-mp-gallery-form-wrap select {
        width: 100%;
        padding: 12px 14px;
        border: 1px solid rgba(66, 62, 89, 0.18);
        border-radius: 10px;
        background: #fff;
        color: var(--snifffr-mp-purple);
        font-family: inherit;
        font-size: 14px;
        line-height: 1.4;
        box-sizing: border-box;
        appearance: none;
        -webkit-appearance: none;
    }
    .snifffr-mp-gallery-form-wrap textarea {
        resize: vertical;
        min-height: 120px;
    }
    .snifffr-mp-gallery-form-wrap input[type="text"]:focus,
    .snifffr-mp-gallery-form-wrap textarea:focus,
    .snifffr-mp-gallery-form-wrap select:focus {
        outline: none;
        border-color: var(--snifffr-mp-pink);
        box-shadow: 0 0 0 3px rgba(230, 92, 149, 0.15);
    }
    .snifffr-mp-gallery-form-wrap select {
        background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2210%22%20height%3D%226%22%20viewBox%3D%220%200%2010%206%22%3E%3Cpath%20fill%3D%22%23423E59%22%20d%3D%22M0%200l5%206%205-6z%22%2F%3E%3C%2Fsvg%3E");
        background-repeat: no-repeat;
        background-position: right 14px center;
        padding-right: 36px;
    }

    /* Submit button — pink primary, matches the rest of the mobile redesign. */
    .snifffr-mp-gallery-form-wrap .mpp-submit-button {
        margin-top: 8px !important;
    }
    .snifffr-mp-gallery-form-wrap .mpp-create-gallery-button {
        width: 100% !important;
        float: none !important;
        margin: 0 !important;
        padding: 14px 16px !important;
        background: var(--snifffr-mp-pink) !important;
        border: 0 !important;
        border-radius: 12px !important;
        color: #fff !important;
        font-family: inherit !important;
        font-size: 15px !important;
        font-weight: 600 !important;
        text-transform: none !important;
        cursor: pointer;
        box-shadow: 0 6px 18px rgba(230, 92, 149, 0.25);
    }
    .snifffr-mp-gallery-form-wrap .mpp-create-gallery-button:hover,
    .snifffr-mp-gallery-form-wrap .mpp-create-gallery-button:focus,
    .snifffr-mp-gallery-form-wrap .mpp-create-gallery-button:active {
        background: var(--snifffr-mp-pink) !important;
        color: #fff !important;
        opacity: 0.95;
    }

    /* ----- Manage / Edit gallery (settings) -------------------------------- */
    .snifffr-mp-gallery-edit-cover {
        display: flex;
        gap: 14px;
        align-items: flex-start;
        margin: 0 0 18px;
    }
    .snifffr-mp-gallery-edit-cover .mpp-gallery-editable-cover {
        position: relative;
        flex: 0 0 96px;
        width: 96px;
        height: 96px;
        border-radius: 14px;
        overflow: hidden;
        background: var(--snifffr-mp-lavender);
    }
    .snifffr-mp-gallery-edit-cover .mpp-gallery-cover-image {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }
    .snifffr-mp-gallery-edit-cover-actions {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 8px;
        margin: 0 !important;
    }
    .snifffr-mp-gallery-edit-cover-btn,
    .snifffr-mp-gallery-edit-cover-btn:hover,
    .snifffr-mp-gallery-edit-cover-btn:focus {
        display: inline-block;
        padding: 9px 14px;
        border-radius: 999px;
        font-size: 13px;
        font-weight: 600;
        text-align: center;
        text-decoration: none !important;
        cursor: pointer;
    }
    .snifffr-mp-gallery-edit-cover-btn--upload,
    .snifffr-mp-gallery-edit-cover-btn--upload:hover,
    .snifffr-mp-gallery-edit-cover-btn--upload:focus {
        background: var(--snifffr-mp-lavender);
        color: var(--snifffr-mp-purple) !important;
    }
    .snifffr-mp-gallery-edit-cover-btn--delete,
    .snifffr-mp-gallery-edit-cover-btn--delete:hover,
    .snifffr-mp-gallery-edit-cover-btn--delete:focus {
        background: rgba(230, 92, 149, 0.12);
        color: var(--snifffr-mp-pink) !important;
    }

    /* The edit screen uses the same colour vars as create, but it's not
       wrapped in .snifffr-mp-gallery-form-wrap so we re-declare them here.
       Without this scope, var(--snifffr-mp-pink) is undefined and the Save
       button's background-color resolves to the browser default (white). */
    .snifffr-mp-gallery-edit {
        --snifffr-mp-purple:    #423E59;
        --snifffr-mp-purple-60: rgba(66, 62, 89, 0.6);
        --snifffr-mp-purple-08: rgba(66, 62, 89, 0.22);
        --snifffr-mp-pink:      #E65C95;
        --snifffr-mp-pink-soft: #FFC8E6;
        --snifffr-mp-lavender:  #ECEAF2;
    }
    .snifffr-mp-gallery-edit-save { margin-top: 6px; }
    .snifffr-mp-gallery-edit-save-btn,
    .snifffr-mp-gallery-edit-save-btn:hover,
    .snifffr-mp-gallery-edit-save-btn:focus,
    .snifffr-mp-gallery-edit-save-btn:active {
        display: block;
        width: 100%;
        padding: 14px 18px;
        border: 0;
        border-radius: 999px;
        background: var(--snifffr-mp-pink) !important;
        color: #fff !important;
        font-family: inherit;
        font-size: 15px;
        font-weight: 600;
        text-transform: none;
        letter-spacing: 0;
        cursor: pointer;
        box-shadow: 0 6px 18px rgba(230, 92, 149, 0.25);
    }

    /* Existing-media grid on the edit screen — reuses upload-form CSS via
       the .snifffr-mp-gallery-upload class. Just need a header + hint. */
    .snifffr-mp-gallery-edit-media {
        margin-top: 22px;
        padding-top: 16px;
        border-top: 1px solid var(--snifffr-mp-purple-08);
    }
    .snifffr-mp-gallery-edit-media h5 {
        margin: 0 0 4px;
        font-size: 13px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        color: var(--snifffr-mp-purple);
    }
    .snifffr-mp-gallery-edit-media-hint {
        margin: 0 0 12px;
        font-size: 12px;
        color: var(--snifffr-mp-purple-60);
    }

    /* Drag-to-reorder visuals. The dragged tile shows a soft outline on the
       slot it would land in; the floating ghost tracks the pointer. */
    .snifffr-mp-gallery-reorder li {
        touch-action: none;        /* let pointermove preventDefault scroll */
        cursor: grab;
        user-select: none;
        -webkit-user-select: none;
    }
    .snifffr-mp-gallery-reorder li.is-dragging {
        opacity: 0.25;
        cursor: grabbing;
    }
    .snifffr-reorder-ghost {
        list-style: none;
        border-radius: 10px;
        overflow: hidden;
        box-shadow: 0 14px 30px rgba(66, 62, 89, 0.35);
        transform: scale(1.04);
        opacity: 0.95;
    }
    .snifffr-reorder-ghost img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }
    .snifffr-reorder-ghost .mpp-delete-uploaded-media-item {
        display: none !important;
    }
    /* Brief tint while the new order is saving. */
    .snifffr-mp-gallery-reorder.is-saving {
        position: relative;
    }
    .snifffr-mp-gallery-reorder.is-saving::after {
        content: '';
        position: absolute;
        inset: 0;
        background: rgba(255, 255, 255, 0.35);
        border-radius: 12px;
        pointer-events: none;
    }
    .snifffr-mp-gallery-reorder.is-save-error {
        outline: 2px solid var(--snifffr-mp-pink);
        outline-offset: 4px;
        border-radius: 12px;
    }

    /* "Add more media" section sits below the existing-media grid on the
       same edit screen. Same header treatment as the existing-media grid. */
    .snifffr-mp-gallery-edit-add {
        margin-top: 22px;
        padding-top: 16px;
        border-top: 1px solid var(--snifffr-mp-purple-08);
    }
    /* First-time post-create: dropzone is the only thing on the card, so
       drop the divider treatment that separates it from the edit form. */
    .snifffr-mp-gallery-edit-add.is-first-add {
        margin-top: 0;
        padding-top: 0;
        border-top: 0;
    }
    .snifffr-mp-gallery-edit-add h5 {
        margin: 0 0 12px;
        font-size: 13px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        color: var(--snifffr-mp-purple);
    }
    .snifffr-mp-gallery-edit-add-typehint {
        margin: 0 0 10px;
        font-size: 12px;
        color: var(--snifffr-mp-purple-60);
    }
    /* Video tiles: render first frame via <video preload="metadata"> the
       same way photo thumbnails fill the square. The grid <li> already
       enforces aspect-ratio and overflow:hidden via the upload-list rules. */
    .snifffr-mp-gallery-upload [id^="mpp-uploaded-media-list-"] li video {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        background: #000;
    }
    /* Subtle play badge so a video tile reads as a video at a glance. */
    .snifffr-mp-tile--video::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 32px;
        height: 32px;
        margin: -16px 0 0 -16px;
        background: rgba(0, 0, 0, 0.55);
        border-radius: 50%;
        background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'><path d='M8 5v14l11-7z'/></svg>");
        background-repeat: no-repeat;
        background-position: 55% 50%;
        background-size: 16px 16px;
        pointer-events: none;
        z-index: 1;
    }
    .snifffr-mp-tile--video.is-deleting::after {
        display: none;
    }

    /* ----- Manage / Delete gallery ---------------------------------------- */
    .snifffr-mp-gallery-delete .snifffr-mp-gallery-delete-warning {
        margin: 0 0 16px;
        font-size: 14px;
        color: var(--snifffr-mp-purple);
        line-height: 1.5;
    }
    .snifffr-mp-gallery-delete .snifffr-mp-gallery-delete-warning strong {
        color: var(--snifffr-mp-pink);
    }
    .snifffr-mp-gallery-delete .snifffr-mp-gallery-delete-confirm {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 12px 14px;
        margin: 0 0 18px;
        background: var(--snifffr-mp-lavender);
        border-radius: 12px;
        font-size: 13px;
        color: var(--snifffr-mp-purple);
        cursor: pointer;
    }
    .snifffr-mp-gallery-delete input[type="checkbox"]#mpp-delete-gallery-agree {
        width: 18px;
        height: 18px;
        margin: 0;
        accent-color: var(--snifffr-mp-pink);
        cursor: pointer;
    }
    .snifffr-mp-gallery-delete-actions {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
    .snifffr-mp-gallery-delete-cancel,
    .snifffr-mp-gallery-delete-cancel:hover,
    .snifffr-mp-gallery-delete-cancel:focus,
    .snifffr-mp-gallery-delete-cancel:active {
        display: block;
        width: 100%;
        padding: 14px 18px;
        border: 0;
        border-radius: 999px;
        background: var(--snifffr-mp-lavender) !important;
        color: var(--snifffr-mp-purple) !important;
        font-family: inherit;
        font-size: 15px;
        font-weight: 600;
        text-align: center;
        text-decoration: none !important;
        cursor: pointer;
    }
    .snifffr-mp-gallery-delete-submit,
    .snifffr-mp-gallery-delete-submit:hover,
    .snifffr-mp-gallery-delete-submit:focus,
    .snifffr-mp-gallery-delete-submit:active {
        display: block;
        width: 100%;
        padding: 14px 18px;
        border: 0;
        border-radius: 999px;
        background: var(--snifffr-mp-pink) !important;
        color: #fff !important;
        font-family: inherit;
        font-size: 15px;
        font-weight: 600;
        text-align: center;
        text-transform: none;
        letter-spacing: 0;
        cursor: pointer;
        box-shadow: 0 6px 18px rgba(230, 92, 149, 0.25);
    }

    /* ----- Manage / Add media (upload) -------------------------------------
       Sits inside an .iu-form-card (matches shop add-listing). Just need a
       few CSS variables for the dropzone / feedback styling below. */
    .snifffr-mp-gallery-upload {
        --snifffr-mp-purple:    #423E59;
        --snifffr-mp-purple-60: rgba(66, 62, 89, 0.6);
        --snifffr-mp-purple-08: rgba(66, 62, 89, 0.22);
        --snifffr-mp-pink:      #E65C95;
        --snifffr-mp-pink-soft: #FFC8E6;
        --snifffr-mp-lavender:  #ECEAF2;
        color: var(--snifffr-mp-purple);
    }
    .snifffr-mp-gallery-upload .mpp-dropzone,
    .snifffr-mp-gallery-upload #mpp-upload-dropzone-gallery {
        border: 2px dashed rgba(66, 62, 89, 0.18) !important;
        border-radius: 14px !important;
        background: var(--snifffr-mp-lavender) !important;
        color: var(--snifffr-mp-purple-60) !important;
        padding: 28px 16px !important;
        text-align: center !important;
        margin: 0 0 16px !important;
        min-height: 180px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .snifffr-mp-gallery-upload .mpp-drag-drop-inside {
        width: 100%;
    }
    .snifffr-mp-gallery-upload .mpp-drag-drop-info {
        font-size: 14px !important;
        font-weight: 600 !important;
        color: var(--snifffr-mp-purple) !important;
        margin: 0 0 8px !important;
    }
    .snifffr-mp-gallery-upload .mpp-drag-drop-buttons {
        margin: 6px 0 !important;
    }
    .snifffr-mp-gallery-upload .mpp-button-select-files {
        background: var(--snifffr-mp-pink) !important;
        border: 0 !important;
        border-radius: 12px !important;
        color: #fff !important;
        font-family: inherit !important;
        font-size: 14px !important;
        font-weight: 600 !important;
        padding: 12px 22px !important;
        cursor: pointer;
        box-shadow: 0 6px 18px rgba(230, 92, 149, 0.25);
    }
    .snifffr-mp-gallery-upload .mpp-uploader-allowed-file-type-info,
    .snifffr-mp-gallery-upload .mpp-uploader-allowed-max-file-size-info {
        font-size: 11px !important;
        color: var(--snifffr-mp-purple-60) !important;
        margin: 6px 0 0 !important;
    }
    .snifffr-mp-gallery-upload [id^="mpp-uploaded-media-list-"] ul {
        list-style: none;
        margin: 0 0 12px;
        padding: 0;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
    }
    .snifffr-mp-gallery-upload [id^="mpp-uploaded-media-list-"] li {
        position: relative;
        border-radius: 10px;
        overflow: hidden;
        background: var(--snifffr-mp-lavender);
        aspect-ratio: 1 / 1;
    }
    /* While the file is still uploading, the plugin renders an <li> WITHOUT
       the mpp-uploaded-media-item class — just file name + size + a <b>
       progress hook. Hide that text and show a pulsing-dots indicator. */
    .snifffr-mp-gallery-upload [id^="mpp-uploaded-media-list-"] li:not(.mpp-uploaded-media-item) > * {
        display: none !important;
    }
    .snifffr-mp-gallery-upload [id^="mpp-uploaded-media-list-"] li:not(.mpp-uploaded-media-item) {
        background:
            linear-gradient(135deg, var(--snifffr-mp-lavender) 0%, #fff 50%, var(--snifffr-mp-lavender) 100%);
        background-size: 200% 200%;
        animation: snifffr-mp-shimmer 1.4s ease-in-out infinite;
    }
    .snifffr-mp-gallery-upload [id^="mpp-uploaded-media-list-"] li:not(.mpp-uploaded-media-item)::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 8px;
        height: 8px;
        margin: -4px 0 0 -4px;
        border-radius: 50%;
        background: var(--snifffr-mp-purple-60);
        box-shadow:
            -14px 0 0 var(--snifffr-mp-purple-60),
             14px 0 0 var(--snifffr-mp-purple-60);
        animation: snifffr-mp-dots 1s ease-in-out infinite;
    }
    @keyframes snifffr-mp-shimmer {
        0%   { background-position: 0% 50%; }
        50%  { background-position: 100% 50%; }
        100% { background-position: 0% 50%; }
    }
    @keyframes snifffr-mp-dots {
        0%, 100% { opacity: 0.3; transform: scale(0.85); }
        50%      { opacity: 1;   transform: scale(1); }
    }
    .snifffr-mp-gallery-upload [id^="mpp-uploaded-media-list-"] li img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }
    /* Deleting state — replace the plugin's heart-shaped loader image
       with a clean modern circular spinner. JS adds .is-deleting on the
       <li> when the X is clicked. */
    .snifffr-mp-gallery-upload [id^="mpp-uploaded-media-list-"] li.is-deleting img {
        opacity: 0.25;
        filter: grayscale(100%);
        /* The plugin swaps the <img src> to its loader; mask it. */
        visibility: hidden;
    }
    .snifffr-mp-gallery-upload [id^="mpp-uploaded-media-list-"] li.is-deleting::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 26px;
        height: 26px;
        margin: -13px 0 0 -13px;
        border-radius: 50%;
        border: 2.5px solid rgba(66, 62, 89, 0.18);
        border-top-color: var(--snifffr-mp-pink);
        animation: snifffr-mp-spin 0.7s linear infinite;
        z-index: 1;
    }
    @keyframes snifffr-mp-spin {
        to { transform: rotate(360deg); }
    }
    /* Delete X overlay — injected by upload-form.php JS on each tile. The
       plugin's delete handler reads data-media-id from the parent <li>. */
    .snifffr-mp-gallery-upload [id^="mpp-uploaded-media-list-"] li .mpp-delete-uploaded-media-item {
        position: absolute;
        top: 6px !important;
        right: 6px !important;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        width: 26px !important;
        height: 26px !important;
        border-radius: 50% !important;
        /* Plugin's mpp-core.css sets a delete.png background + text-indent
           -99999px to ship the X off-screen — override both so our white
           "×" character is visible inside the pill. */
        background: rgba(66, 62, 89, 0.85) !important;
        background-image: none !important;
        text-indent: 0 !important;
        color: #fff !important;
        font-size: 18px !important;
        line-height: 1 !important;
        font-weight: 600;
        text-align: center;
        text-decoration: none !important;
        cursor: pointer;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
        z-index: 2;
    }
    .snifffr-mp-gallery-upload [id^="mpp-uploaded-media-list-"] li .mpp-delete-uploaded-media-item:hover,
    .snifffr-mp-gallery-upload [id^="mpp-uploaded-media-list-"] li .mpp-delete-uploaded-media-item:focus {
        background: var(--snifffr-mp-pink);
        color: #fff !important;
    }
    .snifffr-mp-gallery-upload #mpp-upload-feedback-gallery {
        margin: 0 0 12px;
    }
    .snifffr-mp-gallery-upload #mpp-upload-feedback-gallery ul {
        list-style: none;
        margin: 0;
        padding: 0;
    }
    .snifffr-mp-gallery-upload #mpp-upload-feedback-gallery li {
        background: var(--snifffr-mp-lavender);
        color: var(--snifffr-mp-purple);
        padding: 8px 12px;
        border-radius: 8px;
        font-size: 12px;
        margin: 0 0 6px;
    }
    .snifffr-mp-gallery-upload .mpp-remote-media-container {
        margin-top: 18px;
        padding-top: 18px;
        border-top: 1px solid var(--snifffr-mp-purple-08);
    }
    .snifffr-mp-gallery-upload .mpp-remote-add-media-row {
        display: flex;
        gap: 8px;
    }
    .snifffr-mp-gallery-upload .mpp-remote-media-url {
        flex: 1;
        padding: 12px 14px !important;
        border: 1px solid rgba(66, 62, 89, 0.18) !important;
        border-radius: 10px !important;
        background: #fff !important;
        color: var(--snifffr-mp-purple) !important;
        font-family: inherit !important;
        font-size: 14px !important;
    }
    .snifffr-mp-gallery-upload .mpp-add-remote-media {
        background: var(--snifffr-mp-pink) !important;
        border: 0 !important;
        border-radius: 10px !important;
        color: #fff !important;
        font-family: inherit !important;
        font-size: 14px !important;
        font-weight: 600 !important;
        padding: 0 18px !important;
        cursor: pointer;
    }

    /* /activity/ post-form uploader — MediaPress renders the same
       #mpp-uploaded-media-list-activity tile + .mpp-delete-uploaded-media-item
       X markup as the gallery, but the plugin's success handler can pass
       an undefined thumbnail URL while metadata is still generating, which
       leaves a broken-image icon inside the tile. The plugin's default
       delete X is also a red 3D PNG. Match the gallery treatment: soft
       lavender tile, hide broken <img>, snifffr X overlay. */
    body.activity #mpp-uploaded-media-list-activity ul {
        list-style: none;
        margin: 12px 0 0;
        padding: 0;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
    }
    body.activity #mpp-uploaded-media-list-activity li {
        position: relative;
        border-radius: 10px;
        overflow: hidden;
        background: #ECEAF2;
        aspect-ratio: 1 / 1;
        list-style: none;
    }
    body.activity #mpp-uploaded-media-list-activity li img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }
    /* Suppress the browser's broken-image icon when the plugin's success
       handler fires before the thumbnail size is generated (src ends up as
       "undefined" or empty). The lavender tile background then reads as a
       deliberate placeholder. */
    body.activity #mpp-uploaded-media-list-activity li img[src=""],
    body.activity #mpp-uploaded-media-list-activity li img:not([src]),
    body.activity #mpp-uploaded-media-list-activity li img[src$="undefined"] {
        visibility: hidden;
    }
    body.activity #mpp-uploaded-media-list-activity li .mpp-delete-uploaded-media-item {
        position: absolute;
        top: 6px !important;
        right: 6px !important;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        width: 26px !important;
        height: 26px !important;
        border-radius: 50% !important;
        background: rgba(66, 62, 89, 0.85) !important;
        background-image: none !important;
        text-indent: 0 !important;
        color: #fff !important;
        font-size: 18px !important;
        line-height: 1 !important;
        font-weight: 600;
        text-align: center;
        text-decoration: none !important;
        cursor: pointer;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
        z-index: 2;
    }
    body.activity #mpp-uploaded-media-list-activity li .mpp-delete-uploaded-media-item:hover,
    body.activity #mpp-uploaded-media-list-activity li .mpp-delete-uploaded-media-item:focus {
        background: var(--color-pink, #E65C95) !important;
        color: #fff !important;
    }

    /* =========================================================
       Notifications & Messages — mobile restyle
       ========================================================= */

    .snifffr-notif-card,
    .snifffr-msg-card,
    .snifffr-msg-thread-card,
    .snifffr-msg-compose,
    .snifffr-notif-upgrade,
    .snifffr-msg-upgrade,
    .snifffr-msg-empty {
        --snifffr-mp-purple:    #423E59;
        --snifffr-mp-purple-60: rgba(66, 62, 89, 0.6);
        --snifffr-mp-purple-08: rgba(66, 62, 89, 0.22);
        --snifffr-mp-pink:      #E65C95;
        --snifffr-mp-pink-soft: #FFC8E6;
        --snifffr-mp-lavender:  #ECEAF2;
        color: var(--snifffr-mp-purple);
    }

    /* Hide the legacy "Notifications:" / "Messages:" h3 the desktop template
       still emits inside plugins.php (h3 with bp_template_title hook). */
    body.snifffr-mp-notifications .snifffr-profile-desktop-wrap > h3,
    body.snifffr-mp-messages .snifffr-profile-desktop-wrap > h3,
    body.snifffr-mp-friends .snifffr-profile-desktop-wrap > h3,
    body.snifffr-mp-tokens .snifffr-profile-desktop-wrap > h3,
    body.snifffr-mp-iu-purchases .snifffr-profile-desktop-wrap > h3,
    body.snifffr-mp-pc-purchases .snifffr-profile-desktop-wrap > h3,
    body.snifffr-mp-notifications #subnav.item-list-tabs h3,
    body.snifffr-mp-messages #subnav.item-list-tabs h3,
    body.snifffr-mp-friends #subnav.item-list-tabs h3,
    body.snifffr-mp-tokens #subnav.item-list-tabs h3,
    body.snifffr-mp-iu-purchases #subnav.item-list-tabs h3,
    body.snifffr-mp-pc-purchases #subnav.item-list-tabs h3 {
        display: none;
    }

    /* Notifications / messages / friends render the compact shophead + tabs
       at the top of the mobile-wrap (same as /shop/), then the BP loop
       content below. The desktop-wrap is normally hidden at mobile width —
       force it visible so the iu-form-card content shows. */
    body.snifffr-mp-notifications .snifffr-profile-desktop-wrap,
    body.snifffr-mp-messages .snifffr-profile-desktop-wrap,
    body.snifffr-mp-friends .snifffr-profile-desktop-wrap,
    body.snifffr-mp-tokens .snifffr-profile-desktop-wrap,
    body.snifffr-mp-iu-purchases .snifffr-profile-desktop-wrap,
    body.snifffr-mp-pc-purchases .snifffr-profile-desktop-wrap {
        display: block !important;
        margin-top: 16px;
    }

    /* On these pages the mobile shophead (snifffr-mobile-profile.php) already
       renders the avatar, name, online dot — so the BP #item-header (cover
       image + member-header) inside the desktop-wrap is duplicate chrome and
       should be hidden on the entire 991.98px range, not just <575px where
       legacy rules happen to collapse it. Same goes for the badges /
       progress-bar row that home.php emits before the component content. */
    body.snifffr-mp-notifications .snifffr-profile-desktop-wrap #item-header,
    body.snifffr-mp-messages .snifffr-profile-desktop-wrap #item-header,
    body.snifffr-mp-friends .snifffr-profile-desktop-wrap #item-header,
    body.snifffr-mp-notifications .snifffr-profile-desktop-wrap .badge-progress-bar-row,
    body.snifffr-mp-messages .snifffr-profile-desktop-wrap .badge-progress-bar-row,
    body.snifffr-mp-friends .snifffr-profile-desktop-wrap .badge-progress-bar-row,
    body.snifffr-mp-tokens .snifffr-profile-desktop-wrap #item-header,
    body.snifffr-mp-tokens .snifffr-profile-desktop-wrap .badge-progress-bar-row,
    body.snifffr-mp-iu-purchases .snifffr-profile-desktop-wrap #item-header,
    body.snifffr-mp-iu-purchases .snifffr-profile-desktop-wrap .badge-progress-bar-row,
    body.snifffr-mp-pc-purchases .snifffr-profile-desktop-wrap #item-header,
    body.snifffr-mp-pc-purchases .snifffr-profile-desktop-wrap .badge-progress-bar-row {
        display: none !important;
    }

    /* Restyle the BP options nav (Unread/Read, Inbox/Sentbox/Compose) as
       compact pill tabs at the top of each card group. We have to outweigh
       a high-specificity rule earlier in the file (line ~12469:
       `#buddypress #subnav ul li a { background-color: transparent !important; }`)
       which would otherwise leave unselected tabs as plain text. Including
       both #buddypress and #subnav in the selectors matches the conflicting
       rule's specificity, then source-order tiebreak picks the later (ours)
       rule. */
    body.snifffr-mp-notifications #buddypress #subnav,
    body.snifffr-mp-messages #buddypress #subnav,
    body.snifffr-mp-friends #buddypress #subnav,
    body.snifffr-mp-tokens #buddypress #subnav {
        /* Override legacy `.friends #subnav { display: none !important; }` at
           custom.css:7472 — that rule hides the friends subnav site-wide. We
           need it visible on the mobile redesign so the My Friendships /
           Friend Requests pill tabs show. */
        display: block !important;
        margin: 0px 15px 14px !important;
        padding: 0 !important;
        background: transparent !important;
        border: 0 !important;
        overflow: visible !important;
    }
    body.snifffr-mp-notifications #buddypress #subnav ul,
    body.snifffr-mp-messages #buddypress #subnav ul,
    body.snifffr-mp-friends #buddypress #subnav ul,
    body.snifffr-mp-tokens #buddypress #subnav ul {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        gap: 8px !important;
        list-style: none !important;
        margin: 0 !important;
        padding: 0 !important;
        background: transparent !important;
        border: 0 !important;
    }
    body.snifffr-mp-notifications #buddypress #subnav ul li,
    body.snifffr-mp-messages #buddypress #subnav ul li,
    body.snifffr-mp-friends #buddypress #subnav ul li,
    body.snifffr-mp-tokens #buddypress #subnav ul li {
        display: block !important;
        margin: 0 !important;
        padding: 0 !important;
        background: transparent !important;
        border: 0 !important;
        float: none !important;
        flex: 0 0 auto !important;
        width: auto !important;
    }
    body.snifffr-mp-notifications #buddypress #subnav ul li a,
    body.snifffr-mp-messages #buddypress #subnav ul li a,
    body.snifffr-mp-friends #buddypress #subnav ul li a,
    body.snifffr-mp-tokens #buddypress #subnav ul li a {
        display: inline-flex !important;
        align-items: center !important;
        padding: 8px 18px !important;
        border-radius: 999px !important;
        background: #fff !important;
        color: #423E59 !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        text-decoration: none !important;
        line-height: 1.2 !important;
        border: 1px solid rgba(66, 62, 89, 0.12) !important;
        width: auto !important;
        text-align: center;
    }
    body.snifffr-mp-notifications #buddypress #subnav ul li a:hover,
    body.snifffr-mp-messages #buddypress #subnav ul li a:hover,
    body.snifffr-mp-friends #buddypress #subnav ul li a:hover,
    body.snifffr-mp-tokens #buddypress #subnav ul li a:hover {
        background: #ECEAF2 !important;
        border-color: rgba(66, 62, 89, 0.18) !important;
    }
    body.snifffr-mp-notifications #buddypress #subnav ul li.selected a,
    body.snifffr-mp-notifications #buddypress #subnav ul li.current a,
    body.snifffr-mp-messages #buddypress #subnav ul li.selected a,
    body.snifffr-mp-messages #buddypress #subnav ul li.current a,
    body.snifffr-mp-friends #buddypress #subnav ul li.selected a,
    body.snifffr-mp-friends #buddypress #subnav ul li.current a,
    body.snifffr-mp-tokens #buddypress #subnav ul li.selected a,
    body.snifffr-mp-tokens #buddypress #subnav ul li.current a {
        background: #E65C95 !important;
        color: #fff !important;
        border-color: #E65C95 !important;
        box-shadow: 0 4px 12px rgba(230, 92, 149, 0.25);
    }
    /* Override the existing rule that fills the whole <li> pink for the
       current tab — the pink lives on the <a> in the new design. */
    body.snifffr-mp-notifications #buddypress #subnav ul li.current,
    body.snifffr-mp-notifications #buddypress #subnav ul li.selected,
    body.snifffr-mp-messages #buddypress #subnav ul li.current,
    body.snifffr-mp-messages #buddypress #subnav ul li.selected,
    body.snifffr-mp-friends #buddypress #subnav ul li.current,
    body.snifffr-mp-friends #buddypress #subnav ul li.selected,
    body.snifffr-mp-tokens #buddypress #subnav ul li.current,
    body.snifffr-mp-tokens #buddypress #subnav ul li.selected {
        background: transparent !important;
    }
    /* Hide BP's "Order By" filter on the friends subnav — same treatment
       as on notifications/messages. The existing rule at ~line 13656
       (`#buddypress div.item-list-tabs#subnav ul li#members-order-select`)
       has high specificity, match it exactly and rely on source-order. */
    body.snifffr-mp-friends #buddypress div.item-list-tabs#subnav ul li#members-order-select,
    body.snifffr-mp-tokens #buddypress div.item-list-tabs#subnav ul li#members-order-select {
        display: none !important;
    }
    /* The snifffr-escrow plugin registers `create` and `view` subnav items
       used internally (open a deal / open single deal). They shouldn't
       appear as visible pill tabs alongside Balance/Log/Orders. */
    body.snifffr-mp-tokens #buddypress #subnav ul li#create-personal-li,
    body.snifffr-mp-tokens #buddypress #subnav ul li#view-personal-li {
        display: none !important;
    }
    /* Hide the BP "Order By" filter that bp_notifications_sort_order_form()
       hooks onto the subnav. The existing rule at line ~13656
       (#buddypress div.item-list-tabs#subnav ul li#members-order-select)
       forces it visible with width:100% + display:inline-block + !important,
       so we have to match or beat that selector to override it. */
    #buddypress div.item-list-tabs#subnav ul li#members-order-select,
    #buddypress div.item-list-tabs#subnav ul li.filter {
        display: none !important;
    }

    /* ----- Notifications list ----- */
    .snifffr-notif-card .snifffr-notif-toolbar {
        display: flex;
        align-items: center;
        margin: 0 0 10px;
        font-size: 12px;
        color: var(--snifffr-mp-purple-60);
    }
    .snifffr-notif-selectall {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        cursor: pointer;
    }
    .snifffr-notif-selectall input {
        accent-color: var(--snifffr-mp-pink);
        width: 16px;
        height: 16px;
        margin: 0;
    }

    .snifffr-notif-list {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
    .snifffr-notif-item {
        display: grid;
        grid-template-columns: auto auto 1fr;
        gap: 12px;
        align-items: start;
        padding: 12px;
        background: var(--snifffr-mp-lavender);
        border: 1px solid rgba(66, 62, 89, 0.12);
        border-radius: 12px;
    }
    /* Read screen (/notifications/read/): mute the bg to white. Unread is the
       default state and keeps the lavender highlight. */
    .snifffr-notif-list--read .snifffr-notif-item {
        background: #fff;
    }
    .snifffr-notif-check {
        display: flex;
        align-items: center;
        cursor: pointer;
        padding-top: 14px;
    }
    .snifffr-notif-check input {
        width: 18px;
        height: 18px;
        margin: 0;
        accent-color: var(--snifffr-mp-pink);
    }
    .snifffr-notif-avatar {
        width: 44px;
        height: 44px;
        border-radius: 50%;
        overflow: hidden;
        flex-shrink: 0;
    }
    .snifffr-notif-avatar img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }
    .snifffr-notif-body {
        min-width: 0;
    }
    .snifffr-notif-desc {
        margin: 0 0 4px;
        font-size: 14px;
        line-height: 1.4;
        color: var(--snifffr-mp-purple);
    }
    .snifffr-notif-desc a {
        color: var(--snifffr-mp-pink);
        text-decoration: none;
        font-weight: 600;
    }
    .snifffr-notif-time {
        font-size: 11px;
        color: var(--snifffr-mp-purple-60);
    }
    .snifffr-notif-actions {
        margin-top: 8px;
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
    }
    .snifffr-notif-actions a {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        padding: 6px 10px;
        border-radius: 999px;
        background: #fff;
        color: var(--snifffr-mp-purple);
        font-size: 12px;
        font-weight: 600;
        text-decoration: none;
        border: 1px solid var(--snifffr-mp-purple-08);
    }
    .snifffr-notif-actions a.delete {
        background: #fff;
        color: var(--snifffr-mp-pink);
    }
    .snifffr-notif-actions a:hover,
    .snifffr-notif-actions a:focus {
        background: var(--snifffr-mp-pink);
        color: #fff !important;
        border-color: var(--snifffr-mp-pink);
    }

    .snifffr-notif-bulk {
        margin-top: 14px;
        padding-top: 14px;
        border-top: 1px solid var(--snifffr-mp-purple-08);
    }
    .snifffr-notif-bulk select {
        max-width: 200px;
        margin-right: 8px;
        border-radius: 8px;
        border: 1px solid var(--snifffr-mp-purple-08);
        padding: 8px 10px;
        background: #fff;
        font-size: 13px;
    }
    .snifffr-notif-bulk input[type="submit"] {
        background: var(--snifffr-mp-pink);
        color: #fff;
        border: 0;
        border-radius: 999px;
        padding: 8px 16px;
        font-size: 13px;
        font-weight: 600;
        cursor: pointer;
    }

    .snifffr-notif-upgrade,
    .snifffr-msg-upgrade {
        text-align: center;
    }
    .snifffr-notif-upgrade-btn,
    .snifffr-msg-upgrade-btn,
    .snifffr-notif-upgrade-btn:hover,
    .snifffr-msg-upgrade-btn:hover,
    .snifffr-notif-upgrade-btn:focus,
    .snifffr-msg-upgrade-btn:focus {
        display: inline-block;
        margin-top: 10px;
        padding: 12px 22px;
        border-radius: 999px;
        background: var(--snifffr-mp-pink) !important;
        color: #fff !important;
        font-size: 14px;
        font-weight: 600;
        text-decoration: none !important;
    }

    /* ----- Tokens (Balance / Log / Orders) ----- */
    .snifffr-tokens-card { /* iu-form-card already gives bg/padding/border */
    }
    .snifffr-tokens-balance-intro {
        margin: 0 0 14px;
        font-size: 13px;
        line-height: 1.5;
        color: var(--snifffr-mp-purple-60, rgba(66, 62, 89, 0.7));
    }
    .snifffr-tokens-balance-amount {
        display: flex;
        align-items: baseline;
        gap: 8px;
        font-size: 32px;
        font-weight: 700;
        color: var(--snifffr-mp-purple);
        margin: 0 0 16px;
        line-height: 1;
    }
    .snifffr-tokens-balance-unit {
        font-size: 14px;
        font-weight: 600;
        color: var(--snifffr-mp-purple-60, rgba(66, 62, 89, 0.7));
        text-transform: uppercase;
        letter-spacing: 0.04em;
    }
    .snifffr-tokens-balance-cta {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 8px 14px;
        border-radius: 999px;
        background: #fff !important;
        color: var(--snifffr-mp-purple) !important;
        border: 1px solid rgba(66, 62, 89, 0.16);
        font-size: 12px;
        font-weight: 600;
        letter-spacing: 0.25px;
        text-transform: uppercase;
        text-decoration: none !important;
        transition: background 0.15s ease, border-color 0.15s ease;
    }
    .snifffr-tokens-balance-cta:hover,
    .snifffr-tokens-balance-cta:focus {
        background: #ECEAF2 !important;
        border-color: rgba(66, 62, 89, 0.22);
    }

    /* Seller "Ways to earn tokens" card on the Balance tab. */
    .snifffr-tokens-earn-list {
        list-style: none;
        margin: 4px 0 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        gap: 12px;
    }
    .snifffr-tokens-earn-list li {
        display: flex;
        align-items: flex-start;
        gap: 12px;
        padding: 12px 14px;
        background: #fff;
        border: 1px solid rgba(66, 62, 89, 0.10);
        border-radius: 12px;
    }
    .snifffr-tokens-earn-icon {
        flex: 0 0 auto;
        width: 36px;
        height: 36px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 18px;
        background: #ECEAF2;
        border-radius: 999px;
    }
    .snifffr-tokens-earn-body {
        display: flex;
        flex-direction: column;
        gap: 2px;
        min-width: 0;
    }
    .snifffr-tokens-earn-body strong {
        font-size: 13px;
        font-weight: 700;
        color: var(--snifffr-mp-purple);
    }
    .snifffr-tokens-earn-body span {
        font-size: 12px;
        line-height: 1.5;
        color: var(--snifffr-mp-purple-60, rgba(66, 62, 89, 0.7));
    }

    /* Premium upgrade CTA card on the seller Balance tab. */
    .snifffr-tokens-upgrade { text-align: center; }
    .snifffr-tokens-upgrade h4 {
        margin-top: 0;
        color: var(--snifffr-mp-purple);
    }
    .snifffr-tokens-upgrade p {
        margin: 0 0 16px;
        font-size: 13px;
        line-height: 1.5;
        color: var(--snifffr-mp-purple-60, rgba(66, 62, 89, 0.7));
    }
    .snifffr-tokens-upgrade-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 12px 24px;
        border-radius: 999px;
        background: var(--snifffr-mp-pink, #E65C95) !important;
        color: #fff !important;
        font-size: 13px;
        font-weight: 700;
        letter-spacing: 0.4px;
        text-transform: uppercase;
        text-decoration: none !important;
        box-shadow: 0 4px 12px rgba(230, 92, 149, 0.25);
        transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
    }
    .snifffr-tokens-upgrade-btn:hover,
    .snifffr-tokens-upgrade-btn:focus {
        opacity: 0.94;
        box-shadow: 0 6px 16px rgba(230, 92, 149, 0.32);
        transform: translateY(-1px);
    }
    .snifffr-tokens-buy-cta {
        display: inline-flex;
        align-items: center;
        padding: 10px 20px;
        border-radius: 999px;
        background: var(--snifffr-mp-pink);
        color: #fff !important;
        font-weight: 600;
        text-decoration: none !important;
        box-shadow: 0 4px 12px rgba(230, 92, 149, 0.25);
    }
    .snifffr-tokens-buy-cta:hover { opacity: 0.92; }

    /* ----- Tokens tables (Log + Orders) — unified mobile treatment -----
       Both tabs render a wide tabular dataset that doesn't fit on phones.
       Strategy: same card-wrapper, same typography, same row dividers.
       Below 575px each row collapses to a stacked mini-card so content is
       readable without horizontal scroll. */
    body.snifffr-mp-tokens .snifffr-profile-desktop-wrap .mycred-table,
    body.snifffr-mp-tokens .snifffr-profile-desktop-wrap .table-responsive,
    .snifffr-tokens-log .mycred-table {
        margin: 12px 0 0;
        background: #fff;
        border: 1px solid rgba(66, 62, 89, 0.12);
        border-radius: 12px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    /* mycred_history wraps its table in <div class="mycred-history-wrapper">
       <form class="form-inline">. Bootstrap's .form-inline is display:flex,
       which collapses the inner <table> to its content width. Force the
       wrapper + form to be block and the inner table to span the full card. */
    body.snifffr-mp-tokens .mycred-history-wrapper,
    body.snifffr-mp-tokens .mycred-history-wrapper form.form-inline,
    body.snifffr-mp-tokens .mycred-history-wrapper form,
    body.snifffr-mp-tokens .table-responsive,
    .snifffr-tokens-log .mycred-history-wrapper,
    .snifffr-tokens-log .mycred-history-wrapper form.form-inline,
    .snifffr-tokens-log .mycred-history-wrapper form,
    .snifffr-tokens-log .table-responsive {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        flex: 0 0 100% !important;
    }
    body.snifffr-mp-tokens table.mycred-table,
    body.snifffr-mp-tokens table.table.mycred-table,
    .snifffr-tokens-log table.mycred-table,
    .snifffr-tokens-log table.table {
        width: 100% !important;
        max-width: 100% !important;
        table-layout: auto;
    }
    /* The <th> cells were white-space:nowrap; with very short labels
       (DATE / TOKENS / ENTRY) the cells stay narrow even if the table
       itself is 100% — only the header band looks half-width. Allow the
       last column (Entry) to stretch. */
    body.snifffr-mp-tokens table.mycred-table th:last-child,
    body.snifffr-mp-tokens table.mycred-table td:last-child,
    .snifffr-tokens-log table.mycred-table th:last-child,
    .snifffr-tokens-log table.table th:last-child,
    .snifffr-tokens-log table.mycred-table td:last-child,
    .snifffr-tokens-log table.table td:last-child {
        width: 100%;
    }
    body.snifffr-mp-tokens .snifffr-profile-desktop-wrap table.table,
    body.snifffr-mp-tokens .snifffr-profile-desktop-wrap table.mycred-table,
    .snifffr-tokens-log table.mycred-table,
    .snifffr-tokens-log table.table {
        width: 100%;
        margin: 0;
        font-size: 12px;
        color: var(--snifffr-mp-purple);
        border-collapse: collapse;
        background: transparent;
    }
    body.snifffr-mp-tokens .snifffr-profile-desktop-wrap table.table th,
    body.snifffr-mp-tokens .snifffr-profile-desktop-wrap table.mycred-table th,
    .snifffr-tokens-log table.mycred-table th,
    .snifffr-tokens-log table.table th {
        padding: 10px 10px;
        font-size: 11px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: var(--snifffr-mp-purple-60);
        text-align: left;
        background: var(--snifffr-mp-lavender);
        border: 0;
        border-bottom: 1px solid rgba(66, 62, 89, 0.12);
        white-space: nowrap;
    }
    body.snifffr-mp-tokens .snifffr-profile-desktop-wrap table.table td,
    body.snifffr-mp-tokens .snifffr-profile-desktop-wrap table.mycred-table td,
    .snifffr-tokens-log table.mycred-table td,
    .snifffr-tokens-log table.table td {
        padding: 10px 10px;
        font-size: 13px;
        color: var(--snifffr-mp-purple);
        border: 0;
        border-bottom: 1px solid rgba(66, 62, 89, 0.06);
        vertical-align: middle;
        background: transparent;
    }
    /* Date column (first <td>) — keep on one line so the m-d-y string
       doesn't wrap into two rows on narrow phones. */
    body.snifffr-mp-tokens .snifffr-profile-desktop-wrap table.table td:first-child,
    body.snifffr-mp-tokens .snifffr-profile-desktop-wrap table.mycred-table td:first-child,
    .snifffr-tokens-log table.mycred-table td:first-child,
    .snifffr-tokens-log table.table td:first-child {
        white-space: nowrap;
    }
    body.snifffr-mp-tokens .snifffr-profile-desktop-wrap table tr:last-child td,
    .snifffr-tokens-log table tr:last-child td {
        border-bottom: 0;
    }
    body.snifffr-mp-tokens .snifffr-profile-desktop-wrap table.table a,
    .snifffr-tokens-log table.mycred-table a,
    .snifffr-tokens-log table.table a {
        color: var(--snifffr-mp-pink);
        text-decoration: none;
        font-weight: 600;
    }
    body.snifffr-mp-tokens .snifffr-profile-desktop-wrap table.table a:hover,
    .snifffr-tokens-log table.mycred-table a:hover,
    .snifffr-tokens-log table.table a:hover {
        text-decoration: underline;
    }

    /* Place-new-order CTA at the top of the Orders tab — pink pill. */
    body.snifffr-mp-tokens .snifffr-profile-desktop-wrap a#create-btn {
        display: inline-flex;
        align-items: center;
        margin: 0 0 14px;
        padding: 10px 20px;
        border-radius: 999px;
        background: var(--snifffr-mp-pink);
        color: #fff !important;
        font-weight: 600;
        font-size: 13px;
        text-decoration: none !important;
        box-shadow: 0 4px 12px rgba(230, 92, 149, 0.25);
    }

    /* ===== Balance sub-tab — mirror /points-ledger/ content as mobile cards.
       Source markup (mycred-module-buddypress.php) gives us .tokenbuy1, .coinsb
       (with .currentbalance + .wbd-tokens-wrapper QuickPay form), .tokenbuy2,
       .tokenbuy3, .tokenbuyfaq. Wrap each in a soft card to match the rest of
       the mobile shell.

       The --snifffr-mp-* vars are only defined on .snifffr-mp /
       .snifffr-profile-mobile-wrap (sibling, not ancestor of the
       desktop-wrap), so re-declare them here so var() resolves. ===== */
    body.snifffr-mp-tokens .snifffr-profile-desktop-wrap {
        --snifffr-mp-purple:    #423E59;
        --snifffr-mp-purple-60: rgba(66, 62, 89, 0.6);
        --snifffr-mp-purple-08: rgba(66, 62, 89, 0.22);
        --snifffr-mp-pink:      #E65C95;
        --snifffr-mp-pink-soft: #FFC8E6;
        --snifffr-mp-lavender:  #ECEAF2;
    }
    /* .tokenbuy1 is now a transparent wrapper around an accordion (single
       card). The accordion's own .card provides the chrome — same treatment
       as #accordion below. The other blocks (.coinsb / .tokenbuy2 /
       .tokenbuy3 / .tokenbuyfaq) are still soft white cards. */
    body.snifffr-mp-tokens .snifffr-profile-desktop-wrap .tokenbuy1 {
        background: transparent;
        border: 0;
        padding: 0 14px;
        margin: 10px 0 14px;
        box-shadow: none;
        color: var(--snifffr-mp-purple);
    }
    body.snifffr-mp-tokens .snifffr-profile-desktop-wrap .coinsb,
    body.snifffr-mp-tokens .snifffr-profile-desktop-wrap .tokenbuy2,
    body.snifffr-mp-tokens .snifffr-profile-desktop-wrap .tokenbuy3,
    body.snifffr-mp-tokens .snifffr-profile-desktop-wrap .tokenbuyfaq {
        background: #fff;
        border: 1px solid rgba(66, 62, 89, 0.10);
        border-radius: 16px;
        padding: 18px;
        margin: 0 0 14px;
        box-shadow: 0 6px 20px rgba(66, 62, 89, 0.04);
        color: var(--snifffr-mp-purple);
    }
    body.snifffr-mp-tokens .snifffr-profile-desktop-wrap .coinsb h3,
    body.snifffr-mp-tokens .snifffr-profile-desktop-wrap .tokenbuy2 h4,
    body.snifffr-mp-tokens .snifffr-profile-desktop-wrap .tokenbuy3 h4,
    body.snifffr-mp-tokens .snifffr-profile-desktop-wrap .tokenbuyfaq h4 {
        margin: 0 0 10px;
        font-size: 16px;
        font-weight: 700;
        color: var(--snifffr-mp-purple);
        line-height: 1.3;
    }
    /* Inside-the-accordion content for .tokenbuy1's how-it-works card. */
    body.snifffr-mp-tokens .snifffr-profile-desktop-wrap .tokenbuy1 .card-body h4 {
        margin: 14px 0 8px;
        font-size: 13px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: var(--snifffr-mp-purple-60);
    }
    body.snifffr-mp-tokens .snifffr-profile-desktop-wrap .tokenbuy1 .card-body p,
    body.snifffr-mp-tokens .snifffr-profile-desktop-wrap .tokenbuy2 p {
        margin: 0 0 8px;
        font-size: 13.5px;
        line-height: 1.55;
        color: var(--snifffr-mp-purple);
    }
    body.snifffr-mp-tokens .snifffr-profile-desktop-wrap .tokenbuy1 .card-body ol {
        margin: 0;
        padding: 0 0 0 18px;
        font-size: 13.5px;
        line-height: 1.55;
    }
    body.snifffr-mp-tokens .snifffr-profile-desktop-wrap .tokenbuy1 .card-body ol li {
        margin: 0 0 10px;
        padding-left: 4px;
    }
    body.snifffr-mp-tokens .snifffr-profile-desktop-wrap .tokenbuy1 .card-body ol li b {
        display: block;
        margin-bottom: 2px;
        color: var(--snifffr-mp-purple);
        font-weight: 700;
    }
    body.snifffr-mp-tokens .snifffr-profile-desktop-wrap .tokenbuy3 ul {
        margin: 0;
        padding: 0;
        list-style: none;
    }
    body.snifffr-mp-tokens .snifffr-profile-desktop-wrap .tokenbuy3 ul li {
        position: relative;
        padding: 8px 0 8px 24px;
        font-size: 13.5px;
        line-height: 1.45;
        border-bottom: 1px solid rgba(66, 62, 89, 0.06);
    }
    body.snifffr-mp-tokens .snifffr-profile-desktop-wrap .tokenbuy3 ul li:last-child {
        border-bottom: 0;
    }
    body.snifffr-mp-tokens .snifffr-profile-desktop-wrap .tokenbuy3 ul li::before {
        content: "✦";
        position: absolute;
        left: 4px;
        top: 8px;
        color: var(--snifffr-mp-pink);
        font-size: 13px;
    }

    /* The .coinsb card holds the current balance + QuickPay token packages. */
    body.snifffr-mp-tokens .snifffr-profile-desktop-wrap .coinsb .currentbalance {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 10px;
        margin: 6px 0 14px;
        padding: 12px 14px;
        background: var(--snifffr-mp-lavender);
        border-radius: 12px;
        font-size: 13px;
        font-weight: 600;
        color: var(--snifffr-mp-purple-60);
        text-transform: uppercase;
        letter-spacing: 0.04em;
    }
    body.snifffr-mp-tokens .snifffr-profile-desktop-wrap .coinsb .currentbalance b {
        font-size: 18px;
        font-weight: 700;
        color: var(--snifffr-mp-purple);
        text-transform: none;
        letter-spacing: 0;
    }

    /* QuickPay token packages — 2-up grid on mobile, scrollable on tiny phones. */
    body.snifffr-mp-tokens .snifffr-profile-desktop-wrap .wbd-tokens-wrapper {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
        margin: 0;
        padding: 0;
    }
    body.snifffr-mp-tokens .snifffr-profile-desktop-wrap .wbd-tokens-wrapper .inner {
        position: relative;
        background: #fff;
        border: 1.5px solid rgba(66, 62, 89, 0.10);
        border-radius: 14px;
        padding: 14px 12px 12px;
        text-align: center;
        transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
        cursor: pointer;
    }
    body.snifffr-mp-tokens .snifffr-profile-desktop-wrap .wbd-tokens-wrapper .inner:hover {
        border-color: transparent;
        transform: translateY(-1px);
        box-shadow: 0 6px 16px rgba(230, 92, 149, 0.12);
    }
    body.snifffr-mp-tokens .snifffr-profile-desktop-wrap .wbd-tokens-wrapper .inner.active {
        border-color: transparent;
        background: linear-gradient(180deg, #FFF5FA 0%, #FFFFFF 60%);
        box-shadow: 0 8px 22px rgba(230, 92, 149, 0.15);
    }
    body.snifffr-mp-tokens .snifffr-profile-desktop-wrap .wbd-tokens-wrapper .inner > input[type="radio"] {
        position: absolute;
        opacity: 0;
        pointer-events: none;
    }
    /* Badge sits INSIDE the card top — the global rule (line ~10447) sets
       overflow:hidden on .inner which clips anything overhanging, so we'd have
       to fight that with overflow:visible. Tucking the badge inside is simpler
       and reads cleanly with the rotate-45deg ribbon-style desktop badge
       being overridden here too. */
    body.snifffr-mp-tokens .snifffr-profile-desktop-wrap .wbd-tokens-wrapper .popular {
        position: absolute;
        top: 8px;
        left: 50%;
        right: auto;
        transform: translateX(-50%);
        padding: 3px 12px;
        background: var(--snifffr-mp-purple);
        color: #fff;
        font-size: 10px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        border-radius: 999px;
        box-shadow: 0 4px 10px rgba(230, 92, 149, 0.25);
        white-space: nowrap;
    }
    /* When a card carries the popular badge, push the icon row down so the
       icon doesn't sit underneath the badge. */
    body.snifffr-mp-tokens .snifffr-profile-desktop-wrap .wbd-tokens-wrapper .inner.active .icons {
        margin-top: 18px;
    }
    body.snifffr-mp-tokens .snifffr-profile-desktop-wrap .wbd-tokens-wrapper .icons {
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 4px 0 6px;
        min-height: 36px;
    }
    body.snifffr-mp-tokens .snifffr-profile-desktop-wrap .wbd-tokens-wrapper .icons img,
    body.snifffr-mp-tokens .snifffr-profile-desktop-wrap .wbd-tokens-wrapper .icons svg {
        max-width: 36px;
        max-height: 36px;
    }
    body.snifffr-mp-tokens .snifffr-profile-desktop-wrap .wbd-tokens-wrapper h4.tokentitle {
        margin: 2px 0 0;
        font-size: 14px;
        font-weight: 700;
        color: var(--snifffr-mp-purple);
    }
    body.snifffr-mp-tokens .snifffr-profile-desktop-wrap .wbd-tokens-wrapper h4.pricetitle {
        margin: 4px 0 0;
        font-size: 20px;
        font-weight: 800;
        color: var(--snifffr-mp-pink);
        line-height: 1;
    }
    body.snifffr-mp-tokens .snifffr-profile-desktop-wrap .wbd-tokens-wrapper .bonus-tokens {
        margin: 6px 0 0;
        font-size: 11px;
        color: var(--snifffr-mp-purple-60);
        line-height: 1.3;
    }
    body.snifffr-mp-tokens .snifffr-profile-desktop-wrap .wbd-tokens-wrapper .submit-coin {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        margin-top: 10px;
        padding: 9px 12px;
        border: 0;
        border-radius: 999px;
        background: var(--snifffr-mp-pink);
        color: #fff;
        font-size: 12px;
        font-weight: 700;
        letter-spacing: 0.02em;
        cursor: pointer;
        box-shadow: 0 4px 12px rgba(230, 92, 149, 0.22);
        transition: transform 0.12s ease, box-shadow 0.12s ease;
    }
    body.snifffr-mp-tokens .snifffr-profile-desktop-wrap .wbd-tokens-wrapper .submit-coin:hover,
    body.snifffr-mp-tokens .snifffr-profile-desktop-wrap .wbd-tokens-wrapper .submit-coin:focus {
        transform: translateY(-1px);
        box-shadow: 0 6px 16px rgba(230, 92, 149, 0.32);
        outline: 0;
    }

    /* The "row > col-md-12" wrapper inflates the inner card with horizontal
       gutters from Bootstrap. Strip that on mobile so .coinsb fills the shell. */
    body.snifffr-mp-tokens .snifffr-profile-desktop-wrap .row {
        margin-left: 0;
        margin-right: 0;
    }
    body.snifffr-mp-tokens .snifffr-profile-desktop-wrap .row > .col-md-12 {
        padding-left: 0;
        padding-right: 0;
    }

    /* Accordion styling — covers both the Balance sub-tab's #accordion-howit
       (How Token Payments Work) and the FAQ #accordion. */
    body.snifffr-mp-tokens .snifffr-profile-desktop-wrap #accordion,
    body.snifffr-mp-tokens .snifffr-profile-desktop-wrap #accordion-howit {
        margin: 0;
    }
    body.snifffr-mp-tokens .snifffr-profile-desktop-wrap #accordion .card,
    body.snifffr-mp-tokens .snifffr-profile-desktop-wrap #accordion-howit .card {
        background: #fff;
        border: 1px solid rgba(66, 62, 89, 0.12);
        border-radius: 12px;
        margin-bottom: 12px;
        overflow: hidden;
        box-shadow: none;
    }
    body.snifffr-mp-tokens .snifffr-profile-desktop-wrap #accordion-howit .card {
        margin-bottom: 0;
        box-shadow: 0 6px 20px rgba(66, 62, 89, 0.04);
    }
    body.snifffr-mp-tokens .snifffr-profile-desktop-wrap #accordion .card-header,
    body.snifffr-mp-tokens .snifffr-profile-desktop-wrap #accordion-howit .card-header {
        background: var(--snifffr-mp-lavender);
        padding: 0;
        border: 0;
    }
    body.snifffr-mp-tokens .snifffr-profile-desktop-wrap #accordion .btn-link,
    body.snifffr-mp-tokens .snifffr-profile-desktop-wrap #accordion-howit .btn-link {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        width: 100%;
        text-align: left;
        padding: 12px 14px;
        font-size: 13px;
        font-weight: 600;
        color: var(--snifffr-mp-purple);
        text-decoration: none !important;
    }
    /* Replace the legacy chevron with +/− that toggles on collapsed state. */
    body.snifffr-mp-tokens .snifffr-profile-desktop-wrap #accordion .btn-link i.fa,
    body.snifffr-mp-tokens .snifffr-profile-desktop-wrap #accordion-howit .btn-link i.fa {
        display: none !important;
    }
    body.snifffr-mp-tokens .snifffr-profile-desktop-wrap #accordion .btn-link::after,
    body.snifffr-mp-tokens .snifffr-profile-desktop-wrap #accordion-howit .btn-link::after {
        content: "+";
        flex: 0 0 auto;
        font-size: 18px;
        font-weight: 400;
        line-height: 1;
        color: var(--snifffr-mp-pink);
    }
    body.snifffr-mp-tokens .snifffr-profile-desktop-wrap #accordion .btn-link:not(.collapsed)::after,
    body.snifffr-mp-tokens .snifffr-profile-desktop-wrap #accordion-howit .btn-link:not(.collapsed)::after {
        content: "−";
    }

    /* FAQ list — native <details>/<summary> so it always opens regardless of
       Bootstrap collapse JS state. Visual treatment matches the rest of the
       Tokens-page accordions: lavender header pill, white body, +/− indicator
       on the right that swaps when [open]. */
    body.snifffr-mp-tokens .snifffr-profile-desktop-wrap .snifffr-faq-list {
        margin: 0;
    }
    body.snifffr-mp-tokens .snifffr-profile-desktop-wrap .snifffr-faq-item {
        background: #fff;
        border: 1px solid rgba(66, 62, 89, 0.12);
        border-radius: 12px;
        margin-bottom: 12px;
        overflow: hidden;
        box-shadow: none;
    }
    body.snifffr-mp-tokens .snifffr-profile-desktop-wrap .snifffr-faq-item:last-child {
        margin-bottom: 0;
    }
    body.snifffr-mp-tokens .snifffr-profile-desktop-wrap .snifffr-faq-item > summary {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        padding: 12px 14px;
        background: var(--snifffr-mp-lavender);
        font-size: 13px;
        font-weight: 600;
        color: var(--snifffr-mp-purple);
        cursor: pointer;
        list-style: none;
        user-select: none;
    }
    /* Hide the default disclosure triangle in WebKit / Firefox. */
    body.snifffr-mp-tokens .snifffr-profile-desktop-wrap .snifffr-faq-item > summary::-webkit-details-marker {
        display: none;
    }
    body.snifffr-mp-tokens .snifffr-profile-desktop-wrap .snifffr-faq-item > summary::after {
        content: "+";
        flex: 0 0 auto;
        font-size: 18px;
        font-weight: 400;
        line-height: 1;
        color: var(--snifffr-mp-pink);
    }
    body.snifffr-mp-tokens .snifffr-profile-desktop-wrap .snifffr-faq-item[open] > summary::after {
        content: "−";
    }
    body.snifffr-mp-tokens .snifffr-profile-desktop-wrap .snifffr-faq-body {
        padding: 14px;
        font-size: 13px;
        line-height: 1.5;
        color: var(--snifffr-mp-purple);
    }
    body.snifffr-mp-tokens .snifffr-profile-desktop-wrap #accordion .card-body,
    body.snifffr-mp-tokens .snifffr-profile-desktop-wrap #accordion-howit .card-body {
        padding: 14px;
        font-size: 13px;
        line-height: 1.5;
        color: var(--snifffr-mp-purple);
    }

    /* ===== /escrow/create/ — Place a New Order form. The plugin's create
       partial (snifffr-escrow/.../snifffr-escrow-public-display-create.php)
       is plain Bootstrap form-group/row/col-md markup with no mobile chrome;
       wrap it in a soft card and stack label/field vertically. The trailing
       "seller will be notified" paragraph is wrapped in legacy <tr><td> from
       a half-deleted table — force display:block so it lays out as a card
       footer below the form. ===== */
    body.snifffr-mp-tokens .snifffr-profile-desktop-wrap form.escrow-create {
        background: #fff;
        border: 1px solid rgba(66, 62, 89, 0.10);
        border-radius: 16px;
        padding: 18px;
        margin: 0 14px 14px;
        box-shadow: 0 6px 20px rgba(66, 62, 89, 0.04);
        color: var(--snifffr-mp-purple);
    }
    body.snifffr-mp-tokens .snifffr-profile-desktop-wrap form.escrow-create .form-group {
        margin: 0 0 14px;
    }
    body.snifffr-mp-tokens .snifffr-profile-desktop-wrap form.escrow-create .form-group:last-of-type {
        margin-bottom: 0;
    }
    body.snifffr-mp-tokens .snifffr-profile-desktop-wrap form.escrow-create .form-group .row {
        display: block;
        margin: 0;
    }
    body.snifffr-mp-tokens .snifffr-profile-desktop-wrap form.escrow-create .form-group .col-md {
        padding: 0;
        flex: none;
        max-width: 100%;
    }
    body.snifffr-mp-tokens .snifffr-profile-desktop-wrap form.escrow-create label {
        display: block;
        margin: 0 0 6px;
        font-size: 12px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: var(--snifffr-mp-purple-60);
    }
    body.snifffr-mp-tokens .snifffr-profile-desktop-wrap form.escrow-create input[type="text"],
    body.snifffr-mp-tokens .snifffr-profile-desktop-wrap form.escrow-create input[type="number"],
    body.snifffr-mp-tokens .snifffr-profile-desktop-wrap form.escrow-create textarea,
    body.snifffr-mp-tokens .snifffr-profile-desktop-wrap form.escrow-create .form-control {
        width: 100%;
        border: 1.5px solid rgba(66, 62, 89, 0.12);
        border-radius: 10px;
        padding: 10px 12px;
        font-size: 14px;
        line-height: 1.4;
        color: var(--snifffr-mp-purple);
        background: #fff;
        box-shadow: none;
    }
    body.snifffr-mp-tokens .snifffr-profile-desktop-wrap form.escrow-create textarea {
        min-height: 110px;
        resize: vertical;
    }
    body.snifffr-mp-tokens .snifffr-profile-desktop-wrap form.escrow-create input:focus,
    body.snifffr-mp-tokens .snifffr-profile-desktop-wrap form.escrow-create textarea:focus,
    body.snifffr-mp-tokens .snifffr-profile-desktop-wrap form.escrow-create .form-control:focus {
        outline: 0;
        border-color: var(--snifffr-mp-pink);
        box-shadow: 0 0 0 3px rgba(230, 92, 149, 0.12);
    }
    body.snifffr-mp-tokens .snifffr-profile-desktop-wrap form.escrow-create small {
        display: block;
        margin-top: 6px;
        font-size: 12px;
        color: var(--snifffr-mp-purple-60);
    }
    body.snifffr-mp-tokens .snifffr-profile-desktop-wrap form.escrow-create .error {
        display: block;
        margin-top: 4px;
        font-size: 12px;
        font-weight: 600;
        color: #d33b3b;
    }
    /* T&Cs row — radio sits beside the inline label/link, not below an
       all-caps "label". Source markup puts the wording in <label>; reset that
       to inline body text. */
    body.snifffr-mp-tokens .snifffr-profile-desktop-wrap form.escrow-create .form-group:nth-last-of-type(2) label {
        display: inline;
        margin: 0;
        font-size: 13.5px;
        font-weight: 500;
        text-transform: none;
        letter-spacing: 0;
        color: var(--snifffr-mp-purple);
    }
    body.snifffr-mp-tokens .snifffr-profile-desktop-wrap form.escrow-create input[type="radio"] {
        margin: 0 8px 0 0;
        accent-color: var(--snifffr-mp-pink);
        transform: translateY(2px);
    }
    body.snifffr-mp-tokens .snifffr-profile-desktop-wrap form.escrow-create a.tndc {
        color: var(--snifffr-mp-pink);
        font-weight: 600;
        text-decoration: underline;
    }
    /* Submit pill */
    body.snifffr-mp-tokens .snifffr-profile-desktop-wrap form.escrow-create input[type="submit"],
    body.snifffr-mp-tokens .snifffr-profile-desktop-wrap form.escrow-create #escrow_submit {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        margin: 6px 0 0;
        padding: 12px 20px;
        border: 0;
        border-radius: 999px;
        background: var(--snifffr-mp-pink);
        color: #fff;
        font-size: 13px;
        font-weight: 700;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        cursor: pointer;
        box-shadow: 0 4px 12px rgba(230, 92, 149, 0.22);
        transition: transform 0.12s ease, box-shadow 0.12s ease;
    }
    body.snifffr-mp-tokens .snifffr-profile-desktop-wrap form.escrow-create input[type="submit"]:hover,
    body.snifffr-mp-tokens .snifffr-profile-desktop-wrap form.escrow-create input[type="submit"]:focus {
        transform: translateY(-1px);
        box-shadow: 0 6px 16px rgba(230, 92, 149, 0.32);
        outline: 0;
    }
    /* Trailing "seller will be notified" footer — orphan tr/td/p that
       lives right after form.escrow-create in the partial. Force just
       those orphan cells to display as block so the paragraph lays out
       as a card under the form. The previous, broader selectors (every
       tr/td under .snifffr-profile-desktop-wrap) were collapsing legit
       tabular data on the escrow purchases page — narrow scope only. */
    body.snifffr-mp-tokens .snifffr-profile-desktop-wrap form.escrow-create ~ table,
    body.snifffr-mp-tokens .snifffr-profile-desktop-wrap form.escrow-create ~ tr,
    body.snifffr-mp-tokens .snifffr-profile-desktop-wrap form.escrow-create ~ tr td,
    body.snifffr-mp-tokens .snifffr-profile-desktop-wrap table:has(.escrow-create),
    body.snifffr-mp-tokens .snifffr-profile-desktop-wrap table:has(.escrow-create) tr,
    body.snifffr-mp-tokens .snifffr-profile-desktop-wrap table:has(.escrow-create) td {
        display: block;
        width: 100%;
    }
    body.snifffr-mp-tokens .snifffr-profile-desktop-wrap form.escrow-create ~ tr td:empty {
        display: none;
    }
    body.snifffr-mp-tokens .snifffr-profile-desktop-wrap form.escrow-create ~ tr p {
        margin: 0 14px 14px;
        padding: 14px 16px;
        background: var(--snifffr-mp-lavender);
        border-radius: 12px;
        font-size: 12.5px;
        line-height: 1.5;
        color: var(--snifffr-mp-purple);
    }

    /* Make sure narrow phones can swipe to see all columns. The wrapper
       above (.table-responsive / .iu-form-card) keeps the rest of the page
       width-bounded; the inner table is allowed to be wider than the
       viewport and scrolls within its container. */
    body.snifffr-mp-tokens .snifffr-profile-desktop-wrap table.table,
    .snifffr-tokens-log table.mycred-table,
    .snifffr-tokens-log table.table {
        min-width: 480px;
    }

    /* mycred history shortcode emits both a top and bottom pagination
       (.row.pagination-top / .pagination-bottom). The top one is redundant
       on a single-shortcode tab — hide it and style the bottom one as a
       compact pill row matching the mobile design. */
    .snifffr-tokens-log .pagination-top {
        display: none;
    }
    .snifffr-tokens-log .pagination-bottom {
        margin: 14px 0 0;
    }
    .snifffr-tokens-log .pagination-bottom .col-xs-12 {
        padding: 0;
    }
    .snifffr-tokens-log ul.pagination {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 6px;
    }
    .snifffr-tokens-log ul.pagination li {
        margin: 0;
        padding: 0;
        background: transparent;
        border: 0;
    }
    .snifffr-tokens-log ul.pagination li a,
    .snifffr-tokens-log ul.pagination li span {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 32px;
        height: 32px;
        padding: 0 10px;
        border-radius: 999px;
        background: #fff;
        color: var(--snifffr-mp-purple);
        font-size: 13px;
        font-weight: 600;
        text-decoration: none;
        border: 1px solid rgba(66, 62, 89, 0.12);
        line-height: 1;
        transition: background 0.12s ease, border-color 0.12s ease;
    }
    .snifffr-tokens-log ul.pagination li a:hover {
        background: var(--snifffr-mp-lavender);
        border-color: rgba(66, 62, 89, 0.18);
    }
    .snifffr-tokens-log ul.pagination li.active span,
    .snifffr-tokens-log ul.pagination li.active span.current,
    .snifffr-tokens-log ul.pagination li > span.current,
    body.snifffr-mp-tokens .snifffr-tokens-log ul.pagination li.active span {
        background: var(--snifffr-mp-pink) !important;
        color: #fff !important;
        border-color: var(--snifffr-mp-pink) !important;
        box-shadow: 0 4px 12px rgba(230, 92, 149, 0.25);
    }
    /* Disabled (first/last/prev/next at boundaries) — muted appearance. */
    .snifffr-tokens-log ul.pagination li span.tablenav-pages-navspan {
        opacity: 0.4;
        pointer-events: none;
    }

    /* ----- Friends list ----- */
    .snifffr-friends-list {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
    .snifffr-friend-item {
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 10px;
        align-items: center;
        padding: 12px;
        background: var(--snifffr-mp-lavender);
        border: 1px solid rgba(66, 62, 89, 0.12);
        border-radius: 12px;
    }
    .snifffr-friend-link {
        display: grid;
        grid-template-columns: auto 1fr;
        gap: 12px;
        align-items: center;
        text-decoration: none !important;
        color: inherit;
        min-width: 0;
    }
    .snifffr-friend-avatar img {
        width: 48px;
        height: 48px;
        border-radius: 50%;
        object-fit: cover;
        display: block;
    }
    .snifffr-friend-body {
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: 2px;
    }
    .snifffr-friend-name {
        font-size: 14px;
        font-weight: 600;
        color: var(--snifffr-mp-purple);
        line-height: 1.3;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .snifffr-friend-meta {
        font-size: 12px;
        color: var(--snifffr-mp-purple-60);
    }
    /* BP's friend-action chips (Cancel friendship / Send message etc.) — give
       them the pill treatment used elsewhere on mobile. */
    .snifffr-friend-item .generic-button a,
    .snifffr-friend-item .generic-button button {
        display: inline-flex;
        align-items: center;
        padding: 6px 12px;
        border-radius: 999px;
        background: #fff;
        color: var(--snifffr-mp-purple);
        font-size: 12px;
        font-weight: 600;
        text-decoration: none;
        border: 1px solid rgba(66, 62, 89, 0.16);
    }
    .snifffr-friend-item .generic-button a:hover,
    .snifffr-friend-item .generic-button button:hover {
        background: #ECEAF2;
    }
    .snifffr-friends-pagination {
        margin: 18px 0 4px;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 10px;
        font-size: 12px;
        color: var(--snifffr-mp-purple-60);
        text-align: center;
    }
    .snifffr-friends-pag-count {
        opacity: 0.75;
    }
    .snifffr-friends-pag-links {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 6px;
    }
    .snifffr-friends-pag-links a,
    .snifffr-friends-pag-links span {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 32px;
        height: 32px;
        padding: 0 10px;
        margin: 0;
        border-radius: 999px;
        background: #fff;
        color: var(--snifffr-mp-purple);
        font-size: 13px;
        font-weight: 600;
        text-decoration: none;
        border: 1px solid rgba(66, 62, 89, 0.12);
        line-height: 1;
        transition: background 0.12s ease, border-color 0.12s ease;
    }
    .snifffr-friends-pag-links a:hover {
        background: var(--snifffr-mp-lavender);
        border-color: rgba(66, 62, 89, 0.18);
    }
    .snifffr-friends-pag-links span.current,
    .snifffr-friends-pag-links span.page-numbers.current {
        background: var(--snifffr-mp-pink);
        color: #fff;
        border-color: var(--snifffr-mp-pink);
        box-shadow: 0 4px 12px rgba(230, 92, 149, 0.25);
    }
    .snifffr-friends-pag-links span.dots {
        background: transparent;
        border: 0;
        opacity: 0.5;
        box-shadow: none;
    }

    /* ----- Friendship requests (#friend-list) ---------------------------
       Stock BP requests.php emits ul#friend-list > li with .item-avatar,
       .item, .action — restyle to match the rest of the mobile design.
       Uses literal hex instead of CSS vars because this list can render
       inside .snifffr-profile-desktop-wrap (where --snifffr-mp-* aren't
       defined) — falling back to var() left the buttons white-on-white. */
    body.snifffr-mobile-beta #friend-list.item-list {
        list-style: none !important;
        margin: 0 16px !important;
        padding: 0 !important;
        display: flex;
        flex-direction: column;
        gap: 10px;
        max-width: calc(100% - 32px);
        box-sizing: border-box;
    }
    body.snifffr-mobile-beta #friend-list.item-list li {
        display: grid !important;
        grid-template-columns: 48px 1fr;
        align-items: center;
        column-gap: 12px;
        row-gap: 8px;
        padding: 12px !important;
        background: #fff !important;
        border: 1px solid rgba(66, 62, 89, 0.12) !important;
        border-radius: 14px !important;
        margin: 0 !important;
        list-style: none;
        position: static !important;
        box-sizing: border-box;
        max-width: 100%;
        overflow: hidden;
    }
    body.snifffr-mobile-beta #friend-list.item-list li .item-avatar {
        grid-column: 1 / 2;
        grid-row: 1 / 2;
        margin: 0 !important;
        padding: 0 !important;
        width: 48px;
        position: static !important;
    }
    body.snifffr-mobile-beta #friend-list.item-list li .item-avatar img {
        width: 48px !important;
        height: 48px !important;
        border-radius: 50% !important;
        object-fit: cover;
        display: block;
        margin: 0 !important;
    }
    body.snifffr-mobile-beta #friend-list.item-list li .item {
        grid-column: 2 / 3;
        grid-row: 1 / 2;
        min-width: 0;
        margin: 0 !important;
        padding: 0 !important;
        position: static !important;
    }
    body.snifffr-mobile-beta #friend-list.item-list li .item-title {
        font-size: 14px !important;
        font-weight: 600;
        color: #423E59 !important;
        line-height: 1.3;
        margin: 0 !important;
        text-align: left !important;
    }
    body.snifffr-mobile-beta #friend-list.item-list li .item-title a {
        color: #423E59 !important;
        text-decoration: none !important;
    }
    body.snifffr-mobile-beta #friend-list.item-list li .item-meta {
        font-size: 12px !important;
        color: rgba(66, 62, 89, 0.6) !important;
        margin: 2px 0 0 !important;
    }
    body.snifffr-mobile-beta #friend-list.item-list li .action {
        grid-column: 1 / 3;
        grid-row: 2 / 3;
        display: flex;
        gap: 8px;
        margin: 0 !important;
        padding: 0 !important;
        position: static !important;
        right: auto !important;
        top: auto !important;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        font-size: 0;  /* swallows the &nbsp; text node between Accept/Reject */
    }
    body.snifffr-mobile-beta #friend-list.item-list li .action a.button,
    body.snifffr-mobile-beta #friend-list.item-list li .action a {
        flex: 1 1 0;
        min-width: 0;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        padding: 9px 14px !important;
        border-radius: 999px !important;
        font-size: 13px !important;
        font-weight: 700 !important;
        letter-spacing: 0.02em;
        text-transform: none !important;
        text-decoration: none !important;
        line-height: 1;
        box-sizing: border-box;
        transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
    }
    body.snifffr-mobile-beta #friend-list.item-list li .action a.accept,
    body.snifffr-mobile-beta #friend-list.item-list li .action a.button.accept {
        background: #E65C95 !important;
        background-color: #E65C95 !important;
        color: #fff !important;
        border: 0 !important;
        box-shadow: 0 4px 12px rgba(214, 51, 132, 0.22);
    }
    body.snifffr-mobile-beta #friend-list.item-list li .action a.accept:hover {
        transform: translateY(-1px);
        box-shadow: 0 6px 16px rgba(214, 51, 132, 0.32);
        background: #E65C95 !important;
        color: #fff !important;
    }
    body.snifffr-mobile-beta #friend-list.item-list li .action a.reject,
    body.snifffr-mobile-beta #friend-list.item-list li .action a.button.reject {
        background: #fff !important;
        background-color: #fff !important;
        color: #423E59 !important;
        border: 1.5px solid rgba(66, 62, 89, 0.16) !important;
    }
    body.snifffr-mobile-beta #friend-list.item-list li .action a.reject:hover {
        background: #ECEAF2 !important;
        color: #423E59 !important;
        border-color: rgba(66, 62, 89, 0.28) !important;
    }
    /* Empty-state notice ("You have no pending friendship requests.") */
    body.snifffr-mobile-beta #message.info {
        margin: 14px 16px !important;
        padding: 14px 16px;
        background: #ECEAF2;
        border: 0 !important;
        border-radius: 12px;
        color: #423E59;
        font-size: 14px;
    }
    body.snifffr-mobile-beta #message.info p { margin: 0; }

    /* ----- Messages list ----- */
    .snifffr-msg-card .snifffr-msg-toolbar {
        display: flex;
        align-items: center;
        margin: 0 0 10px;
        font-size: 12px;
        color: var(--snifffr-mp-purple-60);
    }
    .snifffr-msg-selectall {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        cursor: pointer;
    }
    .snifffr-msg-selectall input {
        accent-color: var(--snifffr-mp-pink);
        width: 16px;
        height: 16px;
        margin: 0;
    }
    .snifffr-msg-list {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
    .snifffr-msg-list,
    .snifffr-msg-list li,
    .snifffr-msg-list table { /* belt-and-braces — disable any legacy table styling */
        background: transparent;
        border: 0;
    }
    .snifffr-msg-list li.snifffr-msg-thread {
        position: relative;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        column-gap: 10px;
        row-gap: 4px;
        padding: 8px 10px;
        background: #fff;
        /* 2-row layout: checkbox + link (avatar+body) on row 1 taking the
           full content width, actions on row 2 right-aligned. Avoids the
           crowded single-row layout where the date string overlapped the
           star/Unread/trash buttons on narrow screens. The `bp_messages_
           inbox_list_item` action hook still flows between link and
           actions but has no visible output by default; `margin-left:auto`
           on actions still pins them right within their row.            */
        border: 1px solid rgba(66, 62, 89, 0.12);
        border-radius: 12px;
    }
    .snifffr-msg-list li.snifffr-msg-thread > .snifffr-msg-check { flex: 0 0 auto !important; }
    .snifffr-msg-list li.snifffr-msg-thread > .snifffr-msg-thread-link {
        flex-grow: 1 !important;
        flex-shrink: 1 !important;
        flex-basis: 0 !important;
        min-width: 0 !important;
    }
    .snifffr-msg-list li.snifffr-msg-thread > .snifffr-msg-actions {
        flex-grow: 0 !important;
        flex-shrink: 0 !important;
        flex-basis: 100% !important;
        width: 100% !important;
        justify-content: flex-end !important;
        margin-left: 0 !important;
    }
    .snifffr-msg-list li.snifffr-msg-thread.is-unread {
        background: var(--snifffr-mp-lavender);
    }
    .snifffr-msg-check {
        display: flex;
        align-items: center;
    }
    .snifffr-msg-check input {
        width: 18px;
        height: 18px;
        accent-color: var(--snifffr-mp-pink);
        margin: 0;
    }
    /* `display: contents` on the link makes its avatar + body children
       promote up to direct children of the outer LI flex container. We
       were fighting nested-flex specificity wars (BP's #buddypress a
       cascade kept clobbering our inner display:flex), so this avoids
       the problem entirely: the LI's flex layout positions avatar and
       body directly, the link still works as a clickable wrapper for
       its children (display:contents preserves focusability + click
       behavior per the CSS Display spec).                              */
    #buddypress #message-threads .snifffr-msg-thread-link,
    .snifffr-msg-list .snifffr-msg-thread-link {
        display: contents !important;
        text-decoration: none !important;
        color: inherit !important;
    }
    /* Hover affordance — without a link box of its own, the only signal
       that the row opens the thread comes from the LI. Cursor +
       background shift make the click target obvious. Actions row
       sits inside the LI but should NOT inherit the link cursor — its
       own buttons have their own handlers and shouldn't look like
       part of the link.                                                 */
    .snifffr-msg-list li.snifffr-msg-thread {
        cursor: pointer;
        transition: background-color 0.12s;
    }
    .snifffr-msg-list li.snifffr-msg-thread:hover {
        background: #FAF8FD;
    }
    .snifffr-msg-list li.snifffr-msg-thread.is-unread:hover {
        background: #E8E2F0;
    }
    .snifffr-msg-list li.snifffr-msg-thread > .snifffr-msg-actions,
    .snifffr-msg-list li.snifffr-msg-thread > .snifffr-msg-check {
        cursor: default;
    }
    .snifffr-msg-avatar {
        flex: 0 0 48px !important;
        width: 48px !important;
        height: 48px !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    .snifffr-msg-avatar img {
        width: 48px !important;
        height: 48px !important;
        border-radius: 50% !important;
        object-fit: cover !important;
        display: block !important;
        margin: 0 !important;
        border: 0 !important;
    }
    /* Body fills the remainder of the link. overflow:hidden is critical —
       it clips the name/date row if the inner text refuses to shrink, so
       nothing visually overflows the card border on narrow screens. Flex
       properties spelled out individually so a stray longhand override
       elsewhere (e.g. `flex-grow: 0`) can't silently leave the body
       sized to its content width.                                       */
    #buddypress #message-threads .snifffr-msg-body,
    .snifffr-msg-list .snifffr-msg-body {
        flex-grow: 1 !important;
        flex-shrink: 1 !important;
        flex-basis: 0 !important;
        min-width: 0 !important;
        width: auto !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        text-align: left !important;
    }
    /* Row1 = single inline line of "name date". No more flex with
       space-between — that variant let .snifffr-msg-from refuse to shrink
       (flex items default to min-width: auto = min-content) and pushed
       the row's right edge past the card. A plain block with
       white-space: nowrap + text-overflow: ellipsis truncates the whole
       line cleanly from the right.                                     */
    .snifffr-msg-row1 {
        display: block !important;
        margin: 0 0 2px !important;
        line-height: 1.3 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        text-align: left !important;
    }
    .snifffr-msg-from {
        font-size: 13px;
        font-weight: 600;
        color: var(--snifffr-mp-purple);
    }
    .snifffr-msg-body a,
    .snifffr-msg-body a:hover,
    .snifffr-msg-body a:focus,
    .snifffr-msg-body a:visited,
    .snifffr-msg-from a {
        color: var(--snifffr-mp-pink) !important;
        text-decoration: none !important;
    }
    .snifffr-msg-time {
        margin-left: 6px;
        font-size: 11px;
        font-weight: 400;
        color: var(--snifffr-mp-purple-60);
    }
    .snifffr-msg-subject {
        font-size: 14px;
        font-weight: 600;
        color: var(--snifffr-mp-purple);
        line-height: 1.3;
        margin-bottom: 4px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        text-align: left;
    }
    .snifffr-msg-thread.is-unread .snifffr-msg-subject {
        color: var(--snifffr-mp-pink);
    }
    .snifffr-msg-count {
        display: inline-block;
        font-size: 11px;
        color: var(--snifffr-mp-purple-60);
        margin-left: 4px;
        font-weight: 500;
    }
    .snifffr-msg-excerpt {
        margin: 0;
        font-size: 12px;
        color: var(--snifffr-mp-purple-60);
        line-height: 1.4;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .snifffr-msg-actions {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-end;
        gap: 6px;
        flex-shrink: 0;
    }
    .snifffr-msg-action,
    .snifffr-msg-action:hover,
    .snifffr-msg-action:focus {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 28px;
        height: 28px;
        padding: 0 10px;
        border-radius: 999px;
        font-size: 11px;
        font-weight: 600;
        line-height: 1;
        text-decoration: none !important;
        background: #fff;
        color: var(--snifffr-mp-purple);
        border: 1px solid var(--snifffr-mp-purple-08);
        white-space: nowrap;
    }
    .snifffr-msg-action--delete,
    .snifffr-msg-action--delete:hover,
    .snifffr-msg-action--delete:focus {
        width: 28px;
        padding: 0;
        color: var(--snifffr-mp-pink);
        border-color: rgba(230, 92, 149, 0.25);
        background: rgba(230, 92, 149, 0.06);
    }
    .snifffr-msg-action--delete svg {
        width: 14px;
        height: 14px;
    }
    .snifffr-msg-star {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 28px;
        height: 28px;
        border-radius: 999px;
        border: 1px solid var(--snifffr-mp-purple-08);
        background: #fff;
    }
    .snifffr-msg-star a {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
        color: var(--snifffr-mp-purple-60);
        text-decoration: none !important;
    }
    .snifffr-msg-star a.starred {
        color: var(--snifffr-mp-pink);
    }
    /* When the message row is too narrow to fit star + label + trash on one
       line, drop the textual Read/Unread label so it renders as a small
       circle dot — the trash + star always stay visible at the edge.       */
    @media (max-width: 460px) {
        .snifffr-msg-action--read,
        .snifffr-msg-action--unread {
            width: 28px;
            padding: 0;
            font-size: 0;
        }
        .snifffr-msg-action--read::after,
        .snifffr-msg-action--unread::after {
            content: "●";
            font-size: 10px;
            line-height: 1;
        }
        .snifffr-msg-action--unread::after { color: var(--snifffr-mp-pink); }
    }

    .snifffr-msg-pagination {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 12px;
        margin-top: 14px;
        padding-top: 14px;
        border-top: 1px solid var(--snifffr-mp-purple-08);
        font-size: 12px;
        color: var(--snifffr-mp-purple-60);
    }
    .snifffr-msg-pagination a {
        color: var(--snifffr-mp-pink);
        text-decoration: none;
        font-weight: 600;
    }
    .snifffr-msg-bulk {
        margin-top: 14px;
    }
    .snifffr-msg-bulk select {
        max-width: 200px;
        margin-right: 8px;
        border-radius: 8px;
        border: 1px solid var(--snifffr-mp-purple-08);
        padding: 8px 10px;
        background: #fff;
        font-size: 13px;
    }
    .snifffr-msg-bulk input[type="submit"] {
        background: var(--snifffr-mp-pink);
        color: #fff;
        border: 0;
        border-radius: 999px;
        padding: 8px 16px;
        font-size: 13px;
        font-weight: 600;
        cursor: pointer;
    }

    /* ----- Single thread ----- */
    .snifffr-msg-thread-card .snifffr-msg-thread-header {
        margin-bottom: 16px;
        padding-bottom: 14px;
        border-bottom: 1px solid var(--snifffr-mp-purple-08);
    }
    .snifffr-msg-thread-card #message-subject {
        margin: 0 0 4px;
        font-size: 15px;
        font-weight: 700;
        color: var(--snifffr-mp-purple);
    }
    .snifffr-msg-thread-recipients {
        margin: 0 0 8px;
        font-size: 12px;
        color: var(--snifffr-mp-purple-60);
    }
    .snifffr-msg-thread-recipients a {
        color: var(--snifffr-mp-pink);
        text-decoration: none;
    }
    .snifffr-msg-thread-delete,
    .snifffr-msg-thread-delete:hover,
    .snifffr-msg-thread-delete:focus {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 6px 12px;
        border-radius: 999px;
        background: #fff;
        color: var(--snifffr-mp-pink) !important;
        font-size: 12px;
        font-weight: 600;
        text-decoration: none !important;
        border: 1px solid var(--snifffr-mp-pink-soft);
    }

    .snifffr-msg-bubbles {
        list-style: none;
        margin: 0 0 16px;
        padding: 0;
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
    .snifffr-msg-bubble {
        max-width: 88%;
        padding: 10px 14px;
        border-radius: 16px;
        background: var(--snifffr-mp-lavender);
        font-size: 14px;
        line-height: 1.45;
        color: var(--snifffr-mp-purple);
    }
    .snifffr-msg-bubble.is-self {
        align-self: flex-end;
        background: var(--snifffr-mp-pink-soft);
        border-bottom-right-radius: 4px;
    }
    .snifffr-msg-bubble.is-other {
        align-self: flex-start;
        border-bottom-left-radius: 4px;
    }
    .snifffr-msg-bubble-meta {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 6px;
    }
    .snifffr-msg-bubble-meta img {
        width: 28px;
        height: 28px;
        border-radius: 50%;
        object-fit: cover;
        display: block;
    }
    .snifffr-msg-bubble-meta-text {
        display: flex;
        flex-direction: column;
        gap: 2px;
    }
    .snifffr-msg-bubble-name {
        font-size: 12px;
        font-weight: 600;
        color: var(--snifffr-mp-purple);
        text-decoration: none !important;
    }
    .snifffr-msg-bubble-time {
        font-size: 10px;
        color: var(--snifffr-mp-purple-60);
    }
    .snifffr-msg-bubble-content {
        font-size: 14px;
        line-height: 1.5;
        word-break: break-word;
    }
    .snifffr-msg-bubble-content p {
        margin: 0 0 6px;
    }
    .snifffr-msg-bubble-content p:last-child {
        margin: 0;
    }
    .snifffr-msg-bubble-star {
        margin-top: 6px;
        font-size: 11px;
    }
    .snifffr-msg-bubble-star a {
        color: var(--snifffr-mp-purple-60);
        text-decoration: none;
    }

    .snifffr-msg-reply-form {
        padding-top: 14px;
        border-top: 1px solid var(--snifffr-mp-purple-08);
    }
    .snifffr-msg-reply-form textarea {
        width: 100%;
        padding: 12px 14px;
        border: 1px solid var(--snifffr-mp-purple-08);
        border-radius: 12px;
        font-family: inherit;
        font-size: 14px;
        resize: vertical;
        background: #fff;
        color: var(--snifffr-mp-purple);
    }
    .snifffr-msg-reply-form textarea:focus {
        outline: none;
        border-color: var(--snifffr-mp-pink);
    }
    .snifffr-msg-reply-submit {
        margin-top: 10px;
    }
    .snifffr-msg-reply-btn,
    .snifffr-msg-reply-btn:hover,
    .snifffr-msg-reply-btn:focus,
    .snifffr-msg-reply-btn:active,
    .snifffr-msg-compose-btn,
    .snifffr-msg-compose-btn:hover,
    .snifffr-msg-compose-btn:focus,
    .snifffr-msg-compose-btn:active {
        display: block;
        width: 100%;
        padding: 14px 18px;
        border: 0 !important;
        border-radius: 999px;
        background: var(--snifffr-mp-pink) !important;
        color: #fff !important;
        font-family: inherit;
        font-size: 15px;
        font-weight: 600;
        text-align: center;
        text-transform: none;
        letter-spacing: 0;
        cursor: pointer;
        box-shadow: 0 6px 18px rgba(230, 92, 149, 0.25);
    }

    .snifffr-msg-locked,
    .snifffr-msg-compose-locked {
        margin: 12px 0 0;
        padding: 12px 14px;
        background: var(--snifffr-mp-lavender);
        border-radius: 10px;
        font-size: 13px;
        color: var(--snifffr-mp-purple-60);
        text-align: center;
    }

    /* ----- Compose ----- */
    .snifffr-msg-compose .form-group {
        margin-bottom: 14px;
    }
    .snifffr-msg-compose label {
        display: block;
        margin-bottom: 6px;
        font-size: 12px;
        font-weight: 600;
        color: var(--snifffr-mp-purple);
        text-transform: uppercase;
        letter-spacing: 0.04em;
    }
    .snifffr-msg-compose input[type="text"],
    .snifffr-msg-compose textarea {
        width: 100%;
        padding: 12px 14px;
        border: 1px solid var(--snifffr-mp-purple-08);
        border-radius: 12px;
        font-family: inherit;
        font-size: 14px;
        background: #fff;
        color: var(--snifffr-mp-purple);
    }
    .snifffr-msg-compose textarea {
        resize: vertical;
        min-height: 140px;
    }
    .snifffr-msg-compose input[type="text"]:focus,
    .snifffr-msg-compose textarea:focus {
        outline: none;
        border-color: var(--snifffr-mp-pink);
    }
    .snifffr-msg-compose .acfb-holder {
        list-style: none;
        margin: 0;
        padding: 0;
    }
    .snifffr-msg-compose-notice {
        display: flex;
        align-items: center;
        gap: 8px;
        margin: 0 0 14px;
        font-size: 13px;
        color: var(--snifffr-mp-purple);
        cursor: pointer;
        text-transform: none;
        letter-spacing: 0;
        font-weight: 500;
    }
    .snifffr-msg-compose-notice input {
        accent-color: var(--snifffr-mp-pink);
        width: 18px;
        height: 18px;
        margin: 0;
    }
    .snifffr-msg-compose-submit {
        margin-top: 18px;
    }
}

/* =========================================================
   Modern site-wide feedback notice (#message + .bp-feedback)
   Used by BuddyPress for inline notices: info, error, updated,
   warning, success. Replaces the old white-with-pink-border
   box that bp-legacy / earlier theme rules produced.
   Outside the mobile @media so it applies at every width.
   ========================================================= */

#buddypress div#message,
#buddypress div.bp-feedback,
#sitewide-notice {
    --snifffr-notice-bg:     #F5F4F8;
    --snifffr-notice-border: #423E59;
    --snifffr-notice-fg:     #423E59;
    margin: 12px 16px !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}
#buddypress div#message > p,
#buddypress div#message p,
#buddypress div.bp-feedback > p,
#buddypress div.bp-feedback p,
#sitewide-notice p {
    position: relative !important;
    display: flex !important;
    align-items: flex-start !important;
    gap: 10px !important;
    margin: 0 !important;
    padding: 14px 16px 14px 16px !important;
    background: var(--snifffr-notice-bg) !important;
    border: 0 !important;
    border-left: 3px solid var(--snifffr-notice-border) !important;
    border-radius: 12px !important;
    color: var(--snifffr-notice-fg) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 1.5 !important;
    text-decoration: none !important;
    box-shadow: 0 1px 2px rgba(66, 62, 89, 0.04);
}

/* Variant: info / default — calm purple accent on lavender */
#buddypress div#message.info,
#buddypress div.bp-feedback.info {
    --snifffr-notice-bg:     #ECEAF2;
    --snifffr-notice-border: #423E59;
    --snifffr-notice-fg:     #423E59;
}

/* Variant: success / updated — muted green accent */
#buddypress div#message.updated,
#buddypress div#message.success,
#buddypress div.bp-feedback.success {
    --snifffr-notice-bg:     #E6F4EE;
    --snifffr-notice-border: #1d9e75;
    --snifffr-notice-fg:     #134d3a;
}

/* Variant: warning — soft amber */
#buddypress div#message.warning,
#buddypress div.bp-feedback.warning {
    --snifffr-notice-bg:     #FFF6E5;
    --snifffr-notice-border: #C68A00;
    --snifffr-notice-fg:     #5C3F00;
}

/* Variant: error — soft pink */
#buddypress div#message.error,
#buddypress div.bp-feedback.error {
    --snifffr-notice-bg:     #FCE8EF;
    --snifffr-notice-border: #E65C95;
    --snifffr-notice-fg:     #6E1F3D;
}

/* Inline links inside notices stay readable. */
#buddypress div#message a,
#buddypress div.bp-feedback a,
#sitewide-notice a {
    color: inherit !important;
    text-decoration: underline !important;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

/* Icon prefix per variant. Inserted via ::before on the <p> so we don't
   need to touch BP markup. SVGs are inlined as data URIs to avoid extra
   requests. */
#buddypress div#message > p::before,
#buddypress div#message p:first-child::before,
#buddypress div.bp-feedback > p::before,
#buddypress div.bp-feedback p:first-child::before,
#sitewide-notice p::before {
    content: '';
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    margin-top: 2px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23423E59' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><line x1='12' y1='16' x2='12' y2='12'/><line x1='12' y1='8' x2='12.01' y2='8'/></svg>");
}
#buddypress div#message.updated > p::before,
#buddypress div#message.success > p::before,
#buddypress div.bp-feedback.success > p::before {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231d9e75' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
}
#buddypress div#message.warning > p::before,
#buddypress div.bp-feedback.warning > p::before {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C68A00' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z'/><line x1='12' y1='9' x2='12' y2='13'/><line x1='12' y1='17' x2='12.01' y2='17'/></svg>");
}
#buddypress div#message.error > p::before,
#buddypress div.bp-feedback.error > p::before {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E65C95' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><line x1='12' y1='8' x2='12' y2='12'/><line x1='12' y1='16' x2='12.01' y2='16'/></svg>");
}

/* ==========================================================================
   /buyers/ and /sellers/ — modern member cards (mobile redesign — Option A)

   Clean Instagram-style profile card:
     [ square 1:1 photo, online dot top-right ]
     [ white strip: username (age) flag         ]
     [ pink full-width "Message" pill button    ]

   No gradient overlay, no white-on-photo text. Everything below the image
   sits on a clean white panel. The blur (premium-gating) overlay still
   works — .lock-item.lock-image.prem0 markup is unchanged, we just shape
   its container to the new square image area.
   ========================================================================== */
@media (max-width: 991.98px) {

    .buyer-page-row #buddypress ul.member-main-list,
    .seller-page-row #buddypress ul.member-main-list {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
        /* Pull past bootstrap's .col-12 15px side padding so cards reach
           the viewport edges; an 8px inner padding insets them slightly. */
        margin: 0 -15px 14px !important;
        padding: 8px !important;
        list-style: none;
        /* Body / #buddypress bg is var(--color-bg) light grey — force white
           on the grid so it covers everything behind the cards. */
        background: #fff !important;
    }

    .buyer-page-row #buddypress ul.member-main-list li,
    .seller-page-row #buddypress ul.member-main-list li {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 5px !important;
        margin: 0 !important;
        background: transparent !important;
        border: 0 !important;
        vertical-align: top;
        box-sizing: border-box;
    }

    /* Card chrome — borderless with a soft natural drop shadow.
       The previous 1px translucent purple border (rgba 51,46,77,0.10)
       read as harsh grey lines around each card; the shadow gives a
       cleaner lift without the visual noise. */
    .buyer-page-row .member-item-block,
    .seller-page-row .member-item-block {
        position: relative;
        background: #fff;
        border: 0 !important;
        border-radius: 14px !important;
        overflow: hidden;
        margin-bottom: 0 !important;
        box-shadow:
            0 1px 2px rgba(66, 62, 89, 0.04),
            0 4px 14px rgba(66, 62, 89, 0.08) !important;
    }

    /* .item-avatar contains: image link, title link, online badge, msg btn.
       Stack them as a flex column so they fall in document order: image at
       the top, title strip below, message button at the bottom. */
    .buyer-page-row .member-item-block .item-avatar,
    .seller-page-row .member-item-block .item-avatar {
        position: relative;
        margin: 0;
        padding: 0;
        box-shadow: none !important;
        background: #fff;
        display: flex;
        flex-direction: column;
    }

    /* Kill the site-wide grey bg on member list items for these pages. */
    .buyer-page-row .data-container-buyer,
    .seller-page-row .data-container-seller,
    .buyer-page-row .buyer-results-col,
    .seller-page-row .seller-results-col {
        background: #fff !important;
    }

    /* custom.css:10718 sets .promsell { margin-bottom: -30px } site-wide,
       which pulls the seller/buyer card grid up INTO the lavender promoted
       strip on mobile so the first row of cards visibly overlaps the bottom
       of the promsell block. Reset to a clean positive gap. Soft rounded
       corners + a touch of bottom padding so the names below the avatars
       don't sit on the block edge. */
    .seller-page-row .promsell,
    .buyer-page-row .promsell {
        margin-bottom: 16px !important;
        padding: 19px 12px 12px !important;
        border-radius: 14px;
        background: #ECEAF2 !important;
        box-shadow: none !important;
        overflow: hidden;
    }
    /* Hide the lightSlider side chevrons — they sit half-on top of the
       first/last avatar and look broken at mobile widths. Users can
       swipe / drag instead. */
    .seller-page-row .promsell .lSAction,
    .buyer-page-row .promsell .lSAction,
    .seller-page-row .promsell .lSAction > a,
    .buyer-page-row .promsell .lSAction > a {
        display: none !important;
    }
    /* Header row — `.prombut` has `margin-bottom: -55px` site-wide
       (custom.css:10739) which pulls the avatar grid up under the
       "Promoted" pill. Reset to a proper positive gap and tighten
       typography. */
    .seller-page-row .promsell .prombut,
    .buyer-page-row .promsell .prombut {
        margin-bottom: 10px !important;
    }
    .seller-page-row .promsell .promleft,
    .buyer-page-row .promsell .promleft,
    .seller-page-row .promsell .promright,
    .buyer-page-row .promsell .promright {
        font-size: 10px !important;
        margin: 0 !important;
        line-height: 1.4;
        color: var(--snifffr-mp-purple, #4a3a7a);
    }
    .seller-page-row .promsell .promleft i,
    .buyer-page-row .promsell .promleft i {
        margin-right: 4px;
        color: var(--snifffr-mp-pink, #e91e63);
    }
    /* Avatar grid row — give each item room to breathe and clip name
       cleanly with ellipsis instead of mid-word "WesternMes…" cut. */
    .seller-page-row .promsell .buyers_feat_widget_mobile,
    .buyer-page-row .promsell .buyers_feat_widget_mobile {
        background: transparent !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    .seller-page-row .promsell ul.item-list,
    .buyer-page-row .promsell ul.item-list {
        display: flex !important;
        gap: 10px !important;
        padding: 0 !important;
        margin: 0 !important;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .seller-page-row .promsell ul.item-list::-webkit-scrollbar,
    .buyer-page-row .promsell ul.item-list::-webkit-scrollbar {
        display: none;
    }
    .seller-page-row .promsell ul.item-list li,
    .buyer-page-row .promsell ul.item-list li {
        flex: 0 0 auto !important;
        width: 80px !important;
        background: transparent !important;
        border: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        scroll-snap-align: start;
    }
    .seller-page-row .promsell .item-avatar,
    .buyer-page-row .promsell .item-avatar {
        margin: 0 !important;
    }
    .seller-page-row .promsell .item-avatar img,
    .buyer-page-row .promsell .item-avatar img {
        width: 72px !important;
        height: 72px !important;
        min-height: 72px !important;
        border-radius: 50% !important;
        display: block;
        margin: 0 auto !important;
    }
    .seller-page-row .promsell .item-title,
    .buyer-page-row .promsell .item-title {
        display: block !important;
        max-width: 80px;
        margin: 6px auto 0 !important;
        padding: 0 !important;
        background: transparent !important;
        font-size: 11px !important;
        font-weight: 600;
        color: var(--snifffr-mp-purple, #4a3a7a) !important;
        text-align: center !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .seller-page-row .promsell .item-title a,
    .buyer-page-row .promsell .item-title a {
        color: inherit !important;
    }

    /* Image link — first <a> inside .item-avatar. Square 1:1. Covers both
       unblurred (<a><img></a>) and blurred (<a class="lock-item lock-image
       prem0"><img></a>) paths. */
    .buyer-page-row .member-item-block .item-avatar > a:first-child,
    .seller-page-row .member-item-block .item-avatar > a:first-child {
        display: block;
        width: 100%;
        aspect-ratio: 1 / 1;
        position: relative;
        overflow: hidden;
        max-width: none !important;
        order: 1;
    }

    .buyer-page-row #buddypress ul.member-main-list li img.avatar,
    .seller-page-row #buddypress ul.member-main-list li img.avatar {
        width: 100% !important;
        height: 100% !important;
        max-width: none !important;
        object-fit: cover !important;
        border: 0 !important;
        border-radius: 0 !important;
        margin: 0 !important;
        display: block;
    }

    /* Title strip — second <a> wrapping the h4. Sits BELOW the image on a
       clean white panel. No gradient, no overlay. */
    .buyer-page-row .member-item-block .item-avatar > a:nth-child(2),
    .seller-page-row .member-item-block .item-avatar > a:nth-child(2),
    .buyer-page-row .member-item-block .item-avatar > a:has(> h4.item-title),
    .seller-page-row .member-item-block .item-avatar > a:has(> h4.item-title) {
        position: static !important;
        display: block !important;
        background: #fff !important;
        padding: 12px 12px 8px !important;
        margin: 0 !important;
        text-decoration: none !important;
        order: 2;
        max-width: none !important;
    }

    /* Override the site-wide rule at line ~10700:
       ".member-item-block h4.item-title { background-color: #fff !important; }"
       still applies and is fine here (white on white panel). We just need
       the type to be the brand purple, not the inherited site colour. */
    .buyer-page-row .member-item-block h4.item-title,
    .seller-page-row .member-item-block h4.item-title {
        color: var(--color-purple) !important;
        background: #fff !important;
        background-color: #fff !important;
        font-size: 14px !important;
        font-weight: 600 !important;
        margin: 0 !important;
        padding: 0 !important;
        letter-spacing: 0.2px !important;
        line-height: 1.3;
        text-shadow: none !important;
        display: flex;
        align-items: center;
        gap: 6px;
        flex-wrap: nowrap;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    /* Country flag inline with name — small, no border. */
    .buyer-page-row .member-item-block h4.item-title img,
    .seller-page-row .member-item-block h4.item-title img {
        width: 16px !important;
        height: auto !important;
        max-width: 16px !important;
        border: 0 !important;
        border-radius: 2px !important;
        display: inline-block !important;
        margin: 0 0 0 4px !important;
        box-shadow: none !important;
        flex-shrink: 0;
    }

    /* Online badge — small green dot top-right of the IMAGE area. We anchor
       it to the image link (the first <a>), which is the closest positioned
       ancestor since .item-avatar is a flex container without `position:
       relative` on its children. The badge is a sibling of the image link
       inside .item-avatar though — so anchor it to .item-avatar instead and
       use top-right of the image area via top:10px right:10px. */
    .buyer-page-row .member-item-block .online-badge,
    .seller-page-row .member-item-block .online-badge {
        position: absolute !important;
        top: 10px !important;
        right: 10px !important;
        left: auto !important;
        bottom: auto !important;
        width: 12px !important;
        height: 12px !important;
        padding: 0 !important;
        font-size: 0 !important;
        line-height: 0 !important;
        background: #4ade80 !important;
        border: 2px solid #fff !important;
        border-radius: 50% !important;
        box-shadow: none !important;
        z-index: 4;
    }

    /* Message envelope — floating pink circle, top-left of the image. */
    .buyer-page-row .member-item-block .directmessagebs,
    .seller-page-row .member-item-block .directmessagebs {
        position: absolute !important;
        top: 10px !important;
        left: 10px !important;
        right: auto !important;
        bottom: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        background: transparent !important;
        z-index: 4;
    }

    .buyer-page-row .member-item-block .directmessagebs a,
    .seller-page-row .member-item-block .directmessagebs a {
        display: flex !important;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 32px;
        background: var(--color-pink) !important;
        color: #fff !important;
        border-radius: 50% !important;
        box-shadow: none !important;
        text-decoration: none !important;
        transition: transform 0.15s ease;
    }

    .buyer-page-row .member-item-block .directmessagebs a:hover,
    .seller-page-row .member-item-block .directmessagebs a:hover {
        transform: scale(1.08);
    }

    .buyer-page-row .member-item-block .directmessagebs i,
    .seller-page-row .member-item-block .directmessagebs i {
        font-size: 13px !important;
        color: #fff !important;
        margin: 0 !important;
    }

    /* Hide empty .item and .action divs — they sit below .item-avatar in
       the markup and would push the card height up. */
    .buyer-page-row .member-item-block > .item,
    .seller-page-row .member-item-block > .item,
    .buyer-page-row .member-item-block > .action,
    .seller-page-row .member-item-block > .action {
        display: none !important;
    }

    /* Blur overlay — unchanged behaviour, just sized to the new square image. */
    .buyer-page-row .member-item-block .lock-item.lock-image,
    .seller-page-row .member-item-block .lock-item.lock-image {
        width: 100% !important;
        height: 100% !important;
        max-width: none !important;
        display: block;
    }

    .buyer-page-row .member-item-block .lock-item.lock-image.prem0::before,
    .seller-page-row .member-item-block .lock-item.lock-image.prem0::before {
        font-size: 12px !important;
        padding: 14px !important;
        line-height: 1.4;
    }

    /* "not-to-be-ban" admin marker — small orange dot, top-centre on image. */
    .buyer-page-row .member-item-block.not-to-be-ban:after,
    .seller-page-row .member-item-block.not-to-be-ban:after {
        top: 10px !important;
        right: auto !important;
        bottom: auto !important;
        left: 50% !important;
        transform: translateX(-50%);
        z-index: 5;
    }

}

/* Tiny phones — keep 2-col but shrink the gutter slightly. */
@media (max-width: 380px) {
    .buyer-page-row #buddypress ul.member-main-list,
    .seller-page-row #buddypress ul.member-main-list {
        gap: 8px !important;
    }
}

/* Tablet (768–991.98) — bump to 3 columns so cards aren't comically wide. */
@media (min-width: 768px) and (max-width: 991.98px) {
    .buyer-page-row #buddypress ul.member-main-list,
    .seller-page-row #buddypress ul.member-main-list {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

/* ==========================================================================
   /activity/ — modern mobile restyle.
   PHP/markup unchanged; this is purely visual polish to bring the activity
   directory in line with the rest of the mobile redesign.

   Scoped to body.activity (BP applies this on the /activity/ directory and
   on user activity tabs) and constrained to ≤991.98px so desktop is
   untouched. Uses the same design language as iu-form-card: 14px rounded
   corners, soft purple-tinted borders, brand pink accents, no shadow.
   ========================================================================== */
@media (max-width: 991.98px) {

    /* ------------------------------------------------------------
       Hide the dark "ACTIVITY" page-title bar on mobile — the page
       title is already implied by the navbar context, and the bar
       eats screen real estate.
       ------------------------------------------------------------ */
    body.activity .seller-menu {
        display: none !important;
    }

    /* Replace the spacing the .seller-menu bar used to give us. */
    body.activity #full-width-content {
        padding-top: 70px !important;
        padding-bottom: 50px !important;
    }

    /* ------------------------------------------------------------
       Welcome banner — first-48-hours greeting card.
       ------------------------------------------------------------ */
    body.activity .welcomebuyermob {
        background: #fff !important;
        border: 1px solid rgba(214, 169, 196, 0.30) !important;
        border-radius: 14px !important;
        padding: 16px 16px 12px !important;
        margin: 8px 0 18px !important;
        box-shadow: none !important;
        text-align: left !important;
    }
    body.activity .welcomebuyermob h5 {
        color: var(--color-purple) !important;
        font-weight: 700 !important;
        margin: 0 0 6px !important;
        font-size: 15px !important;
        letter-spacing: 0 !important;
    }
    body.activity .welcomebuyermob p {
        color: var(--color-purple) !important;
        opacity: 0.78;
        font-size: 13px !important;
        line-height: 1.45 !important;
        margin: 0 !important;
    }

    /* ------------------------------------------------------------
       Featured Sellers widget — section title + frame.
       ------------------------------------------------------------ */
    body.activity .buyers_feat_widget_mobile.activityfeatsel,
    body.activity .buyers_feat_widget_mobile {
        background: #fff !important;
        border: 1px solid rgba(51, 46, 77, 0.08) !important;
        border-radius: 14px !important;
        padding: 14px 12px !important;
        margin: 18px 0 !important;
    }
    body.activity .buyers_feat_widget_mobile > h4 {
        color: var(--color-purple) !important;
        font-size: 14px !important;
        font-weight: 700 !important;
        margin: 0 0 4px !important;
        text-align: center;
        letter-spacing: 0.3px;
    }
    body.activity .buyers_feat_widget_mobile > p {
        text-align: center;
        font-size: 12px !important;
        color: var(--color-purple);
        opacity: 0.7;
        margin: 0 0 12px !important;
    }
    /* Hide the lightSlider side chevrons — they sit on top of the
       first/last avatar at mobile widths. Swipe scroll instead. */
    body.activity .buyers_feat_widget_mobile .lSAction,
    body.activity .buyers_feat_widget_mobile .lSAction > a {
        display: none !important;
    }
    /* BP/lightSlider wrappers — strip inline-set widths/transforms so
       items flow naturally into the flex scroller below. */
    body.activity .buyers_feat_widget_mobile .lSSlideOuter,
    body.activity .buyers_feat_widget_mobile .lSSlideWrapper,
    body.activity .buyers_feat_widget_mobile .bp-featured-members-widget {
        background: transparent !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    body.activity .buyers_feat_widget_mobile .lSSlideWrapper.usingCss {
        transition: none !important;
    }
    body.activity .buyers_feat_widget_mobile ul.item-list,
    body.activity .buyers_feat_widget_mobile ul.lightSlider {
        display: flex !important;
        gap: 10px !important;
        padding: 0 !important;
        margin: 0 !important;
        list-style: none;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        width: auto !important;
        height: auto !important;
        transform: none !important;
    }
    body.activity .buyers_feat_widget_mobile ul.item-list::-webkit-scrollbar,
    body.activity .buyers_feat_widget_mobile ul.lightSlider::-webkit-scrollbar {
        display: none;
    }
    body.activity .buyers_feat_widget_mobile ul li.featured-member-item {
        flex: 0 0 auto !important;
        width: 80px !important;
        margin: 0 !important;
        padding: 0 !important;
        background: transparent !important;
        border: 0 !important;
        scroll-snap-align: start;
    }
    body.activity .buyers_feat_widget_mobile .item-avatar {
        margin: 0 !important;
    }
    body.activity .buyers_feat_widget_mobile .item-avatar img {
        width: 72px !important;
        height: 72px !important;
        min-height: 72px !important;
        border-radius: 50% !important;
        display: block;
        margin: 0 auto !important;
    }
    body.activity .buyers_feat_widget_mobile .item-title {
        display: block !important;
        max-width: 80px;
        margin: 6px auto 0 !important;
        padding: 0 !important;
        background: transparent !important;
        font-size: 11px !important;
        font-weight: 600;
        color: var(--color-purple) !important;
        text-align: center !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    body.activity .buyers_feat_widget_mobile .item-title a {
        color: inherit !important;
    }
    /* Hide the activity-time meta — too noisy under tiny avatars. */
    body.activity .buyers_feat_widget_mobile .item-meta {
        display: none !important;
    }
    /* Pink star in the section title. */
    body.activity .buyers_feat_widget_mobile > h4 span {
        color: var(--color-pink, #E65C95) !important;
    }

    /* ------------------------------------------------------------
       Recently active block — `.buyers_widget_mobile` with the
       legacy `.avatar-block` grid of round avatars. Currently floats
       avatars left with a 1px border, looks bland next to the rest
       of the redesign. Re-clad as a soft white card with a centered
       section title and a flex row of round avatars (the widget
       title `h4` is hidden by custom.css:2682, so we replace it with
       a synthesised label via ::before).
       ------------------------------------------------------------ */
    body.activity .buyers_widget_mobile {
        background: #fff !important;
        border: 1px solid rgba(51, 46, 77, 0.08) !important;
        border-radius: 14px !important;
        padding: 14px 12px !important;
        margin: 18px 0 !important;
        box-shadow: none !important;
    }
    body.activity .buyers_widget_mobile::before {
        content: "Recently Active";
        display: block;
        text-align: center;
        font-size: 14px;
        font-weight: 700;
        color: var(--color-purple);
        margin-bottom: 10px;
        letter-spacing: 0.3px;
    }
    /* The widget itself is wrapped in <section class="widget buddypress
       wdbrecentactive-2 ...">. Strip the legacy section frame around it. */
    body.activity .buyers_widget_mobile section.widget {
        background: transparent !important;
        border: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    body.activity .buyers_widget_mobile section.widget h4,
    body.activity .buyers_widget_mobile section.widget h2,
    body.activity .buyers_widget_mobile section.widget h3 {
        display: none !important;
    }
    /* The legacy float-left layout becomes a horizontal swipe row. */
    body.activity .buyers_widget_mobile .avatar-block {
        display: flex !important;
        flex-wrap: nowrap;
        gap: 10px;
        margin: 0 !important;
        padding: 0 !important;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    body.activity .buyers_widget_mobile .avatar-block::-webkit-scrollbar {
        display: none;
    }
    body.activity .buyers_widget_mobile .avatar-block .item-avatar {
        flex: 0 0 auto;
        margin: 0 !important;
        padding: 0 !important;
        scroll-snap-align: start;
    }
    body.activity .buyers_widget_mobile .avatar-block .item-avatar a {
        display: block !important;
        float: none !important;
        margin: 0 !important;
        padding: 0 !important;
        border-radius: 50%;
        overflow: hidden;
        position: relative;
    }
    body.activity .buyers_widget_mobile .avatar-block .item-avatar img {
        width: 56px !important;
        height: 56px !important;
        min-height: 56px !important;
        border: 1px solid var(--color-pink) !important;
        border-radius: 50% !important;
        display: block;
        margin: 0 !important;
        object-fit: cover;
    }
    /* Pink ring around avatars inside the Who's Online widget — visual
       cue that these users are currently active. Applied via box-shadow
       so it sits flush against the rounded image without expanding the
       layout box. */
    body.activity .widget_bp_core_whos_online_widget .item-avatar img,
    .widget_bp_core_whos_online_widget .item-avatar img {
        box-shadow: 0 0 0 2px var(--color-pink, #E65C95);
    }
    /* Subtle online dot — overlay pink ring on hover via box-shadow. */
    body.activity .buyers_widget_mobile .avatar-block .item-avatar a:hover img {
        box-shadow: 0 0 0 2px var(--color-pink, #E65C95);
    }
    /* "VIEW ALL BUYERS" CTA below the row — soften and right-size. */
    body.activity .buyers_widget_mobile + .btn.btn-primary.purple.wide {
        display: block;
        margin: 10px auto 0 !important;
        max-width: 240px;
        font-size: 12px !important;
        letter-spacing: 0.4px;
        border-radius: 999px !important;
    }

    /* ------------------------------------------------------------
       Profile completion widget shell.
       ------------------------------------------------------------ */
    body.activity .compromob {
        /* background: #fff !important; */
        /* border: 1px solid rgba(51, 46, 77, 0.08) !important; */
        /* border-radius: 14px !important; */
        /* padding: 14px !important; */
        /* margin: 18px 0 !important; */
        /* box-shadow: none !important; */
    }

    /* ------------------------------------------------------------
       Full-width primary CTAs (VIEW ALL BUYERS / SELLERS, etc).
       Modernise the .btn-primary.purple.wide and .btn-primary.pink
       used throughout the activity sidebar.
       ------------------------------------------------------------ */
    body.activity .btn-primary.purple.wide:not(.lc),
    body.activity .btn-primary.pink:not(.lc) {
        display: block !important;
        width: 100% !important;
        padding: 11px 16px !important;
        border-radius: 10px !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        letter-spacing: 0.4px !important;
        text-transform: uppercase !important;
        text-align: center !important;
        border: 0 !important;
        box-shadow: none !important;
        transition: filter 0.15s ease, transform 0.1s ease !important;
        margin: 4px 0 !important;
    }
    /* Pull "+ Create Your First Listing" closer to "View All Buyers" — there's
       a wrapping element between them adding ~30px we don't want on mobile. */
    body.activity .btn-primary.pink:not(.lc) {
        margin-top: -28px !important;
    }
    body.activity .btn-primary.purple.wide:not(.lc) {
        background: var(--color-purple) !important;
        color: #fff !important;
    }
    body.activity .btn-primary.pink:not(.lc) {
        background: var(--color-pink) !important;
        color: #fff !important;
    }
    body.activity .btn-primary.purple.wide:not(.lc):hover,
    body.activity .btn-primary.pink:not(.lc):hover,
    body.activity .btn-primary.purple.wide:not(.lc):focus,
    body.activity .btn-primary.pink:not(.lc):focus {
        filter: brightness(1.06);
        transform: translateY(-1px);
    }

    body.activity .btn-primary.pinkfeatbut {
        background: var(--color-pink) !important;
        color: #fff !important;
        border: 0 !important;
        border-radius: 10px !important;
        padding: 9px 14px !important;
        font-weight: 600 !important;
        letter-spacing: 0.3px;
    }

    body.activity .activemob {
        margin-bottom: 0;
    }

    /* ------------------------------------------------------------
       Collapsible info cards (HOW DOES SNIFFFR WORK?, FEATURED
       SELLER, YOUR PROFILE VISITORS) — bootstrap accordion cards.
       ------------------------------------------------------------ */
    body.activity .activemob > .buddyside .card,
    body.activity .activemob .card.featformcollapse {
        background: #fff !important;
        border: 1px solid rgba(51, 46, 77, 0.10) !important;
        border-radius: 14px !important;
        margin: 18px 0 !important;
        overflow: hidden;
        box-shadow: none !important;
    }
    body.activity .activemob > .buddyside .card-header,
    body.activity .activemob .card.featformcollapse .card-header {
        background: #fff !important;
        border: 0 !important;
        padding: 0 !important;
    }
    body.activity .activemob > .buddyside .card-header .btn-link,
    body.activity .activemob .card.featformcollapse .card-header .btn-link {
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        width: 100% !important;
        padding: 14px 16px !important;
        color: var(--color-purple) !important;
        font-size: 13px !important;
        font-weight: 700 !important;
        letter-spacing: 0.4px !important;
        text-transform: uppercase !important;
        text-decoration: none !important;
        border: 0 !important;
        background: transparent !important;
        text-align: left !important;
    }
    body.activity .activemob > .buddyside .card-header .btn-link::after,
    body.activity .activemob .card.featformcollapse .card-header .btn-link::after {
        content: "+";
        font-size: 18px;
        font-weight: 400;
        color: var(--color-pink);
        transition: transform 0.2s ease;
    }
    body.activity .activemob > .buddyside .card-header .btn-link:not(.collapsed)::after,
    body.activity .activemob .card.featformcollapse .card-header .btn-link:not(.collapsed)::after {
        content: "−";
    }
    /* Hide the legacy <i class="fa"> chevron in the button — the + / − we
       inject via ::after is the only indicator we want now. */
    body.activity .activemob > .buddyside .card-header .btn-link i.fa,
    body.activity .activemob .card.featformcollapse .card-header .btn-link i.fa {
        display: none !important;
    }
    body.activity .activemob > .buddyside .card-body,
    body.activity .activemob .card.featformcollapse .card-body {
        padding: 4px 16px 14px !important;
        font-size: 13px !important;
        color: var(--color-purple) !important;
        line-height: 1.5 !important;
        border-top: 1px solid rgba(51, 46, 77, 0.06) !important;
    }
    body.activity .activemob > .buddyside .card-body p {
        font-size: 13px !important;
        margin: 0 0 10px !important;
    }
    body.activity .activemob > .buddyside .card-body p:last-child {
        margin-bottom: 0 !important;
    }

    /* ------------------------------------------------------------
       Activity type tabs (All Members / My Friends / My Groups /
       My Favorites). Pill-nav style matching the rest of the
       mobile redesign — white default, lavender hover, pink fill
       selected.
       ------------------------------------------------------------ */
    body.activity #buddypress div.item-list-tabs.activity-type-tabs {
        background: transparent !important;
        border: 0 !important;
        padding: 0 !important;
        margin: 14px 0 30px !important;
    }
    body.activity #buddypress .activity-type-tabs ul {
        display: flex;
        gap: 6px;
        list-style: none;
        margin: 0 !important;
        padding: 0 !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    body.activity #buddypress .activity-type-tabs ul::-webkit-scrollbar {
        display: none;
    }
    body.activity #buddypress .activity-type-tabs ul li {
        flex: 0 0 auto !important;
        width: auto !important;
        background: transparent !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
    }
    body.activity #buddypress .activity-type-tabs ul li a {
        display: inline-flex !important;
        align-items: center;
        gap: 5px;
        padding: 5px 10px !important;
        background: #fff !important;
        color: var(--color-purple) !important;
        border: 1px solid rgba(51, 46, 77, 0.10) !important;
        border-radius: 999px !important;
        font-size: 10px !important;
        font-weight: 600 !important;
        letter-spacing: 0.25px !important;
        text-transform: uppercase !important;
        text-decoration: none !important;
        white-space: nowrap;
        transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
    }
    body.activity #buddypress .activity-type-tabs ul li a span {
        background: rgba(51, 46, 77, 0.08);
        color: var(--color-purple);
        padding: 0 5px;
        border-radius: 999px;
        font-size: 9px;
        font-weight: 700;
    }
    body.activity #buddypress .activity-type-tabs ul li:hover a,
    body.activity #buddypress .activity-type-tabs ul li a:hover,
    body.activity #buddypress .activity-type-tabs ul li a:focus {
        background: #ECEAF2 !important;
        border-color: rgba(51, 46, 77, 0.16) !important;
        color: var(--color-purple) !important;
    }
    body.activity #buddypress .activity-type-tabs ul li.selected a {
        background: #ECEAF2 !important;
        color: var(--color-purple) !important;
        border-color: rgba(51, 46, 77, 0.18) !important;
    }
    body.activity #buddypress .activity-type-tabs ul li.selected a span {
        background: rgba(51, 46, 77, 0.12);
        color: var(--color-purple);
    }

    /* ------------------------------------------------------------
       Activity filter dropdown row (Show: [Everything ▾]).
       ------------------------------------------------------------ */
    body.activity #buddypress div.item-list-tabs.no-ajax#subnav {
        background: transparent !important;
        border: 0 !important;
        padding: 0 !important;
        margin: 4px 0 14px !important;
    }
    body.activity #buddypress #subnav ul {
        margin: 0 !important;
        padding: 0 !important;
        list-style: none;
        display: flex;
        justify-content: flex-end;
    }
    body.activity #buddypress #subnav li#activity-filter-select {
        display: flex;
        align-items: center;
        gap: 8px;
        background: transparent !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    body.activity #buddypress #subnav li#activity-filter-select label {
        color: var(--color-purple) !important;
        font-size: 12px !important;
        font-weight: 600 !important;
        letter-spacing: 0.3px;
        text-transform: uppercase;
        margin: 0 !important;
    }
    body.activity #buddypress #subnav li#activity-filter-select select {
        background: #fff !important;
        color: var(--color-purple) !important;
        border: 1px solid rgba(51, 46, 77, 0.15) !important;
        border-radius: 8px !important;
        padding: 6px 28px 6px 12px !important;
        font-size: 12px !important;
        font-weight: 600 !important;
        appearance: none;
        -webkit-appearance: none;
        background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none' stroke='%23332e4d' stroke-width='1.5'><polyline points='1 1 5 5 9 1'/></svg>") !important;
        background-repeat: no-repeat;
        background-position: right 10px center;
    }

    /* ------------------------------------------------------------
       Activity post form (whats-new) polish.
       ------------------------------------------------------------ */
    body.activity #buddypress form#whats-new-form {
        background: #fff !important;
        border: 1px solid rgba(51, 46, 77, 0.10) !important;
        border-radius: 14px !important;
        padding: 14px !important;
        margin: -30px 0 18px !important;
        box-shadow: none !important;
    }
    body.activity #buddypress form#whats-new-form textarea#whats-new {
        background: #fff !important;
        border: 1px solid rgba(51, 46, 77, 0.12) !important;
        border-radius: 10px !important;
        padding: 10px 12px !important;
        font-size: 14px !important;
        color: var(--color-purple) !important;
        min-height: 64px;
        width: 100% !important;
    }
    body.activity #buddypress form#whats-new-form textarea#whats-new:focus {
        outline: 0 !important;
        border-color: var(--color-pink) !important;
        box-shadow: 0 0 0 3px rgba(230, 92, 149, 0.12) !important;
    }
    body.activity #buddypress form#whats-new-form input#aw-whats-new-submit,
    body.activity #buddypress form#whats-new-form button#aw-whats-new-submit,
    body.activity #buddypress form#whats-new-form input#whats-new-submit,
    body.activity #buddypress form#whats-new-form button#whats-new-submit,
    body.activity #buddypress form#whats-new-form #whats-new-submit input[type="submit"],
    body.activity #buddypress form#whats-new-form #whats-new-submit button[type="submit"],
    body.activity #buddypress form#whats-new-form #whats-new-submit > a,
    body.activity #buddypress form#whats-new-form #whats-new-submit a.button {
        background: var(--color-pink) !important;
        color: #fff !important;
        border: 0 !important;
        border-radius: 10px !important;
        padding: 9px 18px !important;
        font-size: 12px !important;
        font-weight: 700 !important;
        letter-spacing: 0.4px !important;
        text-transform: uppercase !important;
        box-shadow: none !important;
        transition: filter 0.15s ease, transform 0.1s ease;
    }
    body.activity #buddypress form#whats-new-form input#aw-whats-new-submit:hover,
    body.activity #buddypress form#whats-new-form button#aw-whats-new-submit:hover,
    body.activity #buddypress form#whats-new-form input#whats-new-submit:hover,
    body.activity #buddypress form#whats-new-form button#whats-new-submit:hover,
    body.activity #buddypress form#whats-new-form #whats-new-submit input[type="submit"]:hover,
    body.activity #buddypress form#whats-new-form #whats-new-submit button[type="submit"]:hover,
    body.activity #buddypress form#whats-new-form #whats-new-submit > a:hover,
    body.activity #buddypress form#whats-new-form #whats-new-submit a.button:hover {
        filter: brightness(1.06);
        transform: translateY(-1px);
    }

    /* ------------------------------------------------------------
       Activity feed (.activity-list) — softer card per entry.
       ------------------------------------------------------------ */
    body.activity #buddypress .activity-list {
        list-style: none;
        margin: 0 !important;
        padding: 0 !important;
    }
    body.activity #buddypress .activity-list > li {
        background: #fff !important;
        border: 1px solid rgba(51, 46, 77, 0.08) !important;
        border-radius: 14px !important;
        padding: 14px !important;
        margin: 0 0 12px !important;
        box-shadow: none !important;
        list-style: none;
    }
    body.activity #buddypress .activity-list > li.mini {
        padding: 10px 14px !important;
    }
    body.activity #buddypress .activity-list .activity-content .activity-header {
        font-size: 13px !important;
        line-height: 1.45 !important;
        color: var(--color-purple) !important;
    }
    body.activity #buddypress .activity-list a.activity-time-since {
        font-size: 11px !important;
        opacity: 0.7;
        text-decoration: none;
    }
    body.activity #buddypress .activity-list .activity-meta {
        margin-top: 8px;
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
    }
    body.activity #buddypress .activity-list .activity-meta a.button {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        background: #fff !important;
        color: var(--color-purple) !important;
        border: 1px solid rgba(51, 46, 77, 0.12) !important;
        border-radius: 999px !important;
        padding: 5px 12px !important;
        font-size: 11px !important;
        font-weight: 600 !important;
        letter-spacing: 0.3px;
        text-transform: uppercase;
        text-decoration: none !important;
        transition: background 0.15s ease, border-color 0.15s ease;
    }
    body.activity #buddypress .activity-list .activity-meta a.button:hover {
        background: var(--color-pink-pale) !important;
        border-color: var(--color-pink-light) !important;
    }

    /* "Load more" / "Load newest" pagination buttons in the feed. */
    body.activity #buddypress .activity-list li.load-more,
    body.activity #buddypress .activity-list li.load-newest {
        background: transparent !important;
        border: 0 !important;
        padding: 6px 0 !important;
        text-align: center;
    }
    body.activity #buddypress .activity-list li.load-more a,
    body.activity #buddypress .activity-list li.load-newest a {
        display: inline-block;
        background: var(--color-pink) !important;
        color: #fff !important;
        border-radius: 10px !important;
        padding: 9px 22px !important;
        font-size: 12px !important;
        font-weight: 700 !important;
        letter-spacing: 0.4px;
        text-transform: uppercase;
        text-decoration: none !important;
    }

    /* ------------------------------------------------------------
       Profile completion accordion (.profile-data-completelist).
       Matches the iu-form-card aesthetic used elsewhere: 14px
       rounded corners, soft purple-tinted border, modern progress
       bar, +/− toggle indicator, polished task checklist.
       ------------------------------------------------------------ */
    .profile-data-completelist {
        background: #fff !important;
        border: 1px solid rgba(51, 46, 77, 0.10) !important;
        border-radius: 14px !important;
        margin: 18px 0 !important;
        box-shadow: none !important;
        overflow: hidden;
    }

    .profile-data-completelist button.pd {
        position: relative;
        display: block;
        width: 100%;
        background: #fff !important;
        border: 0 !important;
        border-radius: 0 !important;
        padding: 14px 44px 14px 16px !important;
        text-align: left;
        cursor: pointer;
        overflow: hidden;
    }

    /* The progress bar fill behind the title. Brand pink-pale, animates
       smoothly when the user completes new tasks. */
    .profile-data-completelist button.pd .progress-bar {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        bottom: 0 !important;
        height: 100% !important;
        background: linear-gradient(90deg,
            rgba(230, 92, 149, 0.14) 0%,
            rgba(230, 92, 149, 0.22) 100%) !important;
        z-index: 1;
        transition: width 0.4s ease;
    }

    .profile-data-completelist button.pd .title {
        position: relative;
        z-index: 2;
        display: flex !important;
        align-items: center;
        gap: 8px;
        margin: 0 !important;
        padding: 0 !important;
        color: var(--color-purple) !important;
        font-size: 13px !important;
        font-weight: 700 !important;
        letter-spacing: 0.4px !important;
        text-transform: uppercase !important;
        line-height: 1.3 !important;
    }

    .profile-data-completelist button.pd .title svg {
        flex-shrink: 0;
        margin: 0 !important;
        width: 16px;
        height: 16px;
    }
    .profile-data-completelist button.pd .title svg path {
        fill: var(--color-pink);
    }

    /* Hide the legacy <i class="fa"> chevron — the +/− indicator below
       replaces it, matching the other activity-page accordions. */
    .profile-data-completelist button.pd .title i.fa {
        display: none !important;
    }

    /* +/− toggle indicator — pinned to the right edge of the button. */
    .profile-data-completelist button.pd::after {
        content: "+";
        position: absolute;
        top: 50%;
        right: 16px;
        transform: translateY(-50%);
        z-index: 3;
        color: var(--color-pink);
        font-size: 18px;
        font-weight: 400;
        line-height: 1;
    }
    .profile-data-completelist button.pd:not(.collapsed)::after {
        content: "−";
    }

    /* Body — task list panel below the toggle.
       Apply padding + border on the .collapse element directly (not just on
       .collapse.show) so the scrollHeight Bootstrap measures during the
       animation already includes them. Otherwise the panel "jumps" right
       and down at the instant .collapsing flips to .collapse.show. */
    .profile-data-completelist .collapse,
    .profile-data-completelist .collapsing {
        background: #fff;
        padding: 12px 16px 14px !important;
        border: 0 !important;
        border-top: 1px solid rgba(51, 46, 77, 0.06) !important;
        border-radius: 0 !important;
        box-sizing: border-box;
    }
    .profile-data-completelist .collapsing {
        overflow: hidden;
    }

    .profile-data-completelist p.pctv {
        color: var(--color-purple) !important;
        opacity: 0.78;
        font-size: 12px !important;
        margin: 0 0 10px !important;
        line-height: 1.45;
    }

    .profile-data-completelist ul.task_complete_data {
        list-style: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    .profile-data-completelist ul.task_complete_data li {
        list-style: none !important;
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 9px 0;
        margin: 0 !important;
        border-bottom: 1px solid rgba(51, 46, 77, 0.05);
    }
    .profile-data-completelist ul.task_complete_data li:last-child {
        border-bottom: 0;
    }

    /* Modern checkbox circle — empty grey, filled pink with white tick
       when the task is complete. Replaces the legacy bg-image checkbox. */
    .profile-data-completelist ul.task_complete_data li .checkbox {
        flex-shrink: 0;
        width: 20px;
        height: 20px;
        border: 1.5px solid rgba(51, 46, 77, 0.20);
        border-radius: 50%;
        background: #fff !important;
        background-image: none !important;
        position: relative;
    }
    .profile-data-completelist ul.task_complete_data li .checkbox.true {
        border-color: var(--color-pink);
        background: var(--color-pink) !important;
        background-image: none !important;
    }
    .profile-data-completelist ul.task_complete_data li .checkbox.true::after {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        width: 9px;
        height: 5px;
        border-left: 2px solid #fff;
        border-bottom: 2px solid #fff;
        transform: translate(-50%, -65%) rotate(-45deg);
    }

    .profile-data-completelist ul.task_complete_data li a {
        color: var(--color-purple) !important;
        font-size: 13px !important;
        font-weight: 500 !important;
        text-decoration: none !important;
        flex: 1;
        line-height: 1.3;
        transition: color 0.15s ease;
    }
    .profile-data-completelist ul.task_complete_data li a:hover {
        color: var(--color-pink) !important;
    }
    /* Completed-task link colour — slightly muted to read as "done". */
    .profile-data-completelist ul.task_complete_data li a.trues {
        color: var(--color-purple) !important;
        opacity: 0.55;
        text-decoration: line-through !important;
    }

    /* ==========================================================================
       Messages — single thread (/messages/view/{id}/) + compose (/compose/)
       polish to match the latest flat aesthetic. The base layout already
       exists earlier in this file (line ~20810); this block only refines
       chrome/colour/shadow to match the rest of the mobile redesign.
       ========================================================================== */

    /* Card chrome — bump rounded corners 8px → 14px, drop the soft drop
       shadow, add a subtle purple-tinted border. Same as iu-form-card mobile
       elsewhere. */
    body.snifffr-mp-messages .snifffr-msg-thread-card,
    body.snifffr-mp-messages .snifffr-msg-compose,
    .snifffr-msg-thread-card,
    .snifffr-msg-compose {
        border: 1px solid var(--snifffr-mp-purple-08) !important;
        border-radius: 14px !important;
        box-shadow: none !important;
        padding: 16px !important;
    }

    /* Header — subject + recipients + delete pill. */
    .snifffr-msg-thread-card .snifffr-msg-thread-header {
        margin-bottom: 14px;
        padding-bottom: 12px;
        border-bottom: 1px solid var(--snifffr-mp-purple-08);
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        align-items: flex-start;
    }
    .snifffr-msg-thread-card #message-subject {
        flex: 1 1 100%;
        margin: 0 !important;
        font-size: 15px !important;
        font-weight: 700 !important;
        color: var(--snifffr-mp-purple) !important;
        line-height: 1.3;
    }
    .snifffr-msg-thread-recipients {
        flex: 1 1 auto;
        margin: 0 !important;
        font-size: 12px !important;
        color: var(--snifffr-mp-purple-60) !important;
        line-height: 1.4;
    }
    .snifffr-msg-thread-delete,
    .snifffr-msg-thread-delete:hover,
    .snifffr-msg-thread-delete:focus {
        flex: 0 0 auto;
        padding: 5px 10px !important;
        font-size: 11px !important;
        background: #fff !important;
        color: var(--snifffr-mp-pink) !important;
        border: 1px solid var(--snifffr-mp-pink-soft) !important;
        border-radius: 999px !important;
        transition: background 0.15s ease, border-color 0.15s ease;
    }
    .snifffr-msg-thread-delete:hover {
        background: rgba(230, 92, 149, 0.06) !important;
    }
    .snifffr-msg-thread-delete span {
        font-size: 11px;
        font-weight: 600;
    }

    /* Chat bubbles — slightly tighter and softer. */
    .snifffr-msg-bubbles {
        margin: 0 0 16px !important;
        gap: 8px !important;
    }
    .snifffr-msg-bubble {
        max-width: 82% !important;
        padding: 9px 13px !important;
        border-radius: 14px !important;
        font-size: 13.5px !important;
        line-height: 1.5 !important;
    }
    .snifffr-msg-bubble.is-self {
        background: var(--snifffr-mp-pink-soft) !important;
        border-bottom-right-radius: 4px !important;
    }
    .snifffr-msg-bubble.is-other {
        background: var(--snifffr-mp-lavender) !important;
        border-bottom-left-radius: 4px !important;
    }
    .snifffr-msg-bubble-meta img {
        width: 26px !important;
        height: 26px !important;
    }
    .snifffr-msg-bubble-time {
        font-size: 10px !important;
        opacity: 0.75;
    }

    /* Reply form — flat textarea with pink focus ring. */
    .snifffr-msg-reply-form {
        padding-top: 14px !important;
        border-top: 1px solid var(--snifffr-mp-purple-08) !important;
        margin: 0 !important;
    }
    .snifffr-msg-reply-form textarea {
        border: 1px solid var(--snifffr-mp-purple-08) !important;
        border-radius: 12px !important;
        padding: 10px 12px !important;
        font-size: 14px !important;
        background: #fff !important;
        transition: border-color 0.15s ease, box-shadow 0.15s ease;
    }
    .snifffr-msg-reply-form textarea:focus {
        outline: 0 !important;
        border-color: var(--snifffr-mp-pink) !important;
        box-shadow: 0 0 0 3px rgba(230, 92, 149, 0.12) !important;
    }

    /* Send buttons — strip the heavy pink drop-shadow that doesn't match the
       flat aesthetic anymore. Stay full-width pink pill. */
    .snifffr-msg-reply-btn,
    .snifffr-msg-reply-btn:hover,
    .snifffr-msg-reply-btn:focus,
    .snifffr-msg-reply-btn:active,
    .snifffr-msg-compose-btn,
    .snifffr-msg-compose-btn:hover,
    .snifffr-msg-compose-btn:focus,
    .snifffr-msg-compose-btn:active {
        padding: 12px 18px !important;
        font-size: 13px !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.4px !important;
        box-shadow: none !important;
        transition: filter 0.15s ease;
    }
    .snifffr-msg-reply-btn:hover,
    .snifffr-msg-compose-btn:hover {
        filter: brightness(1.06);
    }

    /* Compose form fields — same input styling as the reply form, with
       consistent focus ring. */
    .snifffr-msg-compose .form-group {
        margin-bottom: 14px;
    }
    .snifffr-msg-compose label {
        font-size: 11px !important;
        letter-spacing: 0.6px !important;
    }
    .snifffr-msg-compose input[type="text"],
    .snifffr-msg-compose textarea {
        border: 1px solid var(--snifffr-mp-purple-08) !important;
        border-radius: 12px !important;
        padding: 10px 12px !important;
        font-size: 14px !important;
        background: #fff !important;
        transition: border-color 0.15s ease, box-shadow 0.15s ease;
    }
    .snifffr-msg-compose input[type="text"]:focus,
    .snifffr-msg-compose textarea:focus {
        outline: 0 !important;
        border-color: var(--snifffr-mp-pink) !important;
        box-shadow: 0 0 0 3px rgba(230, 92, 149, 0.12) !important;
    }

    /* The "send to" autocomplete list (acfb-holder) is a BP-default plugin
       widget — give it the same input chrome as the rest of the form. */
    .snifffr-msg-compose ul.acfb-holder {
        list-style: none;
        margin: 0 !important;
        padding: 0 !important;
    }
    .snifffr-msg-compose ul.acfb-holder > li {
        list-style: none;
        margin: 0 !important;
        padding: 0 !important;
    }
    .snifffr-msg-compose ul.acfb-holder input.send-to-input {
        width: 100%;
        border: 1px solid var(--snifffr-mp-purple-08) !important;
        border-radius: 12px !important;
        padding: 10px 12px !important;
        font-size: 14px !important;
        background: #fff !important;
    }
    .snifffr-msg-compose ul.acfb-holder input.send-to-input:focus {
        outline: 0 !important;
        border-color: var(--snifffr-mp-pink) !important;
        box-shadow: 0 0 0 3px rgba(230, 92, 149, 0.12) !important;
    }

    /* Sitewide-notice checkbox row (admin-only) — small inline pill. */
    .snifffr-msg-compose-notice {
        display: flex;
        align-items: center;
        gap: 8px;
        margin: 6px 0 14px !important;
        padding: 8px 12px;
        background: var(--snifffr-mp-lavender);
        border-radius: 10px;
        font-size: 12px;
        color: var(--snifffr-mp-purple);
        cursor: pointer;
    }
    .snifffr-msg-compose-notice input[type="checkbox"] {
        margin: 0;
        accent-color: var(--snifffr-mp-pink);
    }

    /* Locked / read-only / age-gate notice — softer panel. */
    .snifffr-msg-locked,
    .snifffr-msg-compose-locked {
        margin: 12px 0 0 !important;
        padding: 12px 14px !important;
        background: var(--snifffr-mp-lavender) !important;
        border: 0 !important;
        border-radius: 10px !important;
        font-size: 12px !important;
        color: var(--snifffr-mp-purple-60) !important;
        text-align: center;
        line-height: 1.45;
    }

    /* Send reply / Send message — tighter, less imposing.
       Auto-width pill so it doesn't stretch full-width and dominate. */
    .snifffr-msg-reply-btn,
    .snifffr-msg-reply-btn:hover,
    .snifffr-msg-reply-btn:focus,
    .snifffr-msg-reply-btn:active,
    .snifffr-msg-compose-btn,
    .snifffr-msg-compose-btn:hover,
    .snifffr-msg-compose-btn:focus,
    .snifffr-msg-compose-btn:active {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        gap: 6px;
        width: auto !important;
        min-width: 130px;
        padding: 9px 18px !important;
        font-size: 12px !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.5px !important;
        background: var(--snifffr-mp-pink) !important;
        color: #fff !important;
        border: 0 !important;
        border-radius: 999px !important;
        box-shadow: none !important;
        cursor: pointer;
        transition: filter 0.15s ease;
    }
    .snifffr-msg-reply-submit,
    .snifffr-msg-compose-submit {
        display: flex;
        justify-content: flex-end;
        margin-top: 12px !important;
    }

    /* BP Message Attachment plugin — "Choose file" button + wrapper.
       Plugin emits:
         <div class="bp_msgat_ui_wrapper">
           <label>Add an attachment</label>
           <small>Allowed file types : ...</small>
           <p><button class="button button-secondary" id="btn_msgat_upload">Choose file</button></p>
         </div>
       and after upload appends:
         <span class="msgat-uploaded-file">name <a class="remove-uploaded-file">x</a></span>
       Restyle to match the pink/lavender aesthetic. */
    .snifffr-msg-thread-card .bp_msgat_ui_wrapper,
    .snifffr-msg-compose .bp_msgat_ui_wrapper {
        margin: 12px 0 0;
        padding: 12px 14px;
        background: var(--snifffr-mp-lavender);
        border-radius: 12px;
    }
    .snifffr-msg-thread-card .bp_msgat_ui_wrapper > label,
    .snifffr-msg-compose .bp_msgat_ui_wrapper > label {
        display: block;
        margin: 0 0 2px;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.6px;
        text-transform: uppercase;
        color: var(--snifffr-mp-purple) !important;
    }
    .snifffr-msg-thread-card .bp_msgat_ui_wrapper > label br,
    .snifffr-msg-compose .bp_msgat_ui_wrapper > label br {
        display: none;
    }
    .snifffr-msg-thread-card .bp_msgat_ui_wrapper > small,
    .snifffr-msg-compose .bp_msgat_ui_wrapper > small {
        display: block;
        margin: 0 0 8px;
        font-size: 11px;
        font-style: normal;
        color: var(--snifffr-mp-purple-60);
    }
    .snifffr-msg-thread-card .bp_msgat_ui_wrapper > small em,
    .snifffr-msg-compose .bp_msgat_ui_wrapper > small em {
        font-style: normal;
    }
    .snifffr-msg-thread-card .bp_msgat_ui_wrapper > p,
    .snifffr-msg-compose .bp_msgat_ui_wrapper > p {
        margin: 0;
    }

    /* Profile-completion accordion when rendered above the Edit Profile
       button in the mobile profile shell. The component itself is already
       styled site-wide further up; this wrapper just gives it the same
       horizontal margin as the surrounding .snifffr-mp-actions block so it
       sits flush. */
    .snifffr-mp-profile-completion-wrap {
        margin: 15px 16px 12px;
    }
    .snifffr-mp-profile-completion-wrap .profile-data-completelist {
        margin: 0 !important;
    }

    /* Choose-file button — outlined pink pill, sits next to the file chip
       once one's uploaded.

       NOTE: We must beat #buddypress .standard-form button (line ~5866) and
       its :hover (line ~5880) which set color/background. Using the form id
       in the selector + hardcoded pink hex (no var) so the cascade can't
       silently drop us back to white-on-white. */
    body #buddypress #send-reply #btn_msgat_upload,
    body #buddypress #send_message_form #btn_msgat_upload,
    body #buddypress #send-reply #btn_msgat_upload:hover,
    body #buddypress #send_message_form #btn_msgat_upload:hover,
    body #buddypress #send-reply #btn_msgat_upload:focus,
    body #buddypress #send_message_form #btn_msgat_upload:focus,
    body #buddypress #send-reply #btn_msgat_upload:active,
    body #buddypress #send_message_form #btn_msgat_upload:active {
        display: inline-flex !important;
        align-items: center !important;
        gap: 6px !important;
        padding: 7px 14px !important;
        background: #fff !important;
        background-color: #fff !important;
        color: #E65C95 !important;
        border: 1px solid #FFC8E6 !important;
        border-radius: 999px !important;
        font-size: 11px !important;
        font-weight: 700 !important;
        letter-spacing: 0.5px !important;
        text-transform: uppercase !important;
        text-indent: 0 !important;
        text-shadow: none !important;
        cursor: pointer;
        box-shadow: none !important;
        transition: background 0.15s ease, border-color 0.15s ease;
        line-height: 1.2;
    }
    body #buddypress #send-reply #btn_msgat_upload:hover,
    body #buddypress #send_message_form #btn_msgat_upload:hover {
        background: rgba(230, 92, 149, 0.06) !important;
        background-color: rgba(230, 92, 149, 0.06) !important;
        border-color: #E65C95 !important;
        color: #E65C95 !important;
    }
    /* Inject a small paperclip icon before the label via a data-URI SVG so we
       don't need to touch the plugin markup. */
    body #buddypress #send-reply #btn_msgat_upload::before,
    body #buddypress #send_message_form #btn_msgat_upload::before {
        content: "";
        display: inline-block;
        width: 12px;
        height: 12px;
        flex-shrink: 0;
        background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E65C95' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='m21.44 11.05-9.19 9.19a6 6 0 0 1-8.49-8.49l8.57-8.57a4 4 0 0 1 5.66 5.66l-8.58 8.57a2 2 0 0 1-2.83-2.83l8.49-8.48'/></svg>");
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
    }
    /* Loading state while uploading — disabled style. */
    body #buddypress #send-reply #btn_msgat_upload.loading,
    body #buddypress #send_message_form #btn_msgat_upload.loading {
        opacity: 0.55;
        cursor: progress;
    }

    /* Uploaded file chip + remove × link. */
    .snifffr-msg-thread-card .msgat-uploaded-file,
    .snifffr-msg-compose .msgat-uploaded-file {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        margin-left: 8px;
        padding: 5px 10px 5px 12px;
        background: #fff;
        border: 1px solid var(--snifffr-mp-purple-08);
        border-radius: 999px;
        font-size: 11px;
        font-weight: 600;
        color: var(--snifffr-mp-purple);
    }
    .snifffr-msg-thread-card .msgat-uploaded-file a.remove-uploaded-file,
    .snifffr-msg-compose .msgat-uploaded-file a.remove-uploaded-file {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 16px;
        height: 16px;
        background: var(--snifffr-mp-purple-08);
        color: var(--snifffr-mp-purple) !important;
        border-radius: 50%;
        font-size: 10px;
        font-weight: 700;
        text-decoration: none !important;
        line-height: 1;
        transition: background 0.15s ease, color 0.15s ease;
    }
    .snifffr-msg-thread-card .msgat-uploaded-file a.remove-uploaded-file:hover,
    .snifffr-msg-compose .msgat-uploaded-file a.remove-uploaded-file:hover {
        background: var(--snifffr-mp-pink) !important;
        color: #fff !important;
    }

    /* Premium-upsell CTA on /members/<u>/messages/ for s2member_level0.
       The default `.btn-primary.upgrade` rule renders a full-bleed pink
       slab in caps that fights the iu-form-card aesthetic. Soften to a
       card-sized pill with sentence-case text and proper page padding. */
    body.messages #whats-new-submit {
        margin: 16px 14px 24px !important;
        padding: 0 !important;
        background: transparent !important;
        border: 0 !important;
    }
    body.messages #whats-new-submit br { display: none; }
    body.messages .btn-primary.upgrade {
        display: block;
        width: 100%;
        padding: 14px 18px !important;
        background: #E65C95 !important;
        color: #fff !important;
        border: 0 !important;
        border-radius: 12px !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        line-height: 1.35 !important;
        text-align: center !important;
        text-transform: none !important;
        letter-spacing: 0 !important;
        white-space: normal !important;
        box-shadow: 0 2px 6px rgba(230, 92, 149, 0.20) !important;
        box-sizing: border-box !important;
    }
    body.messages .btn-primary.upgrade:hover,
    body.messages .btn-primary.upgrade:focus {
        background: #332e4d !important;
        color: #fff !important;
        box-shadow: 0 2px 8px rgba(51, 46, 77, 0.20) !important;
    }

    /* /shop/ "first item is live!" upsell card. Default .btn-outline-primary
       on this CTA renders as an oversized purple-bordered slab; tighten to
       an inline pink pill that matches the mobile button language. */
    .oneitemupshop {
        margin: 0 0 14px;
        padding: 0;
    }
    .oneitemupshop p {
        margin: 0 0 6px;
        font-size: 13px;
        line-height: 1.45;
    }
    .oneitemupshop p:nth-of-type(1) { font-size: 14px; }
    .oneitemupshop p:last-of-type { margin-bottom: 12px; }
    .oneitemupshop .btn-outline-primary,
    .oneitemupshop .btn-outline-primary:hover,
    .oneitemupshop .btn-outline-primary:focus {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: auto;
        max-width: 100%;
        padding: 9px 18px !important;
        margin-bottom: 15px !important;
        background: #E65C95 !important;
        color: #fff !important;
        border: 0 !important;
        border-radius: 999px !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        line-height: 1.2 !important;
        text-transform: none !important;
        letter-spacing: 0 !important;
        white-space: nowrap !important;
        box-shadow: 0 2px 6px rgba(230, 92, 149, 0.20) !important;
        text-decoration: none !important;
    }
    .oneitemupshop .btn-outline-primary:hover,
    .oneitemupshop .btn-outline-primary:focus {
        background: #332e4d !important;
    }

    /* Gallery upsell card (subscribers on /mediapress/). Default rules render
       the CTA as a full-bleed pink slab in caps — match the mobile CTA
       language (sentence-case pill, 14/18 padding, soft shadow). Pull the
       back-to-gallery pill closer to the navbar (−30px on top) and add
       15px below it for proper separation from the upsell card. */
    body.mediapress .subscribernogallery {
        margin-top: 0;
    }
    /* Gallery create/manage screens (body.snifffr-mp-gallery-form) — pull
       the back pill flush to the navbar (15px less than the default). */
    body.snifffr-mp-gallery-form.snifffr-mp-manage .snifffr-mp-manage-back {
        margin-top: -15px !important;
    }

    /* /instant-unlocks/ subscriber upsell — default 30px top padding pushes
       the pill way below the back button, and the CTA inherits the desktop
       full-width purple style. Tighten both for mobile. */
    .iu-upsell {
        padding-top: 0 !important;
        margin-top: -5px !important;
    }
    .iu-upsell-btn,
    .iu-upsell-btn:hover,
    .iu-upsell-btn:focus {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        width: auto !important;
        max-width: 100%;
        padding: 12px 22px !important;
        margin: 4px auto 0 !important;
        background: #E65C95 !important;
        background-color: #E65C95 !important;
        color: #fff !important;
        border: 0 !important;
        border-radius: 999px !important;
        font-size: 14px !important;
        font-weight: 600 !important;
        line-height: 1.2 !important;
        text-transform: none !important;
        letter-spacing: 0 !important;
        white-space: nowrap !important;
        box-shadow: 0 2px 6px rgba(230, 92, 149, 0.20) !important;
        text-decoration: none !important;
    }
    .iu-upsell-btn:hover,
    .iu-upsell-btn:focus {
        background: #332e4d !important;
        background-color: #332e4d !important;
    }
    body.mediapress .subscribernogallery h5 {
        text-transform: none;
        font-size: 14px;
        font-weight: 700;
        margin-bottom: 8px;
    }
    body.mediapress .subscribernogallery p,
    body.mediapress .subscribernogallery li {
        font-size: 13px;
        line-height: 1.45;
    }
    body.mediapress .subscribernogallery .btn-primary.upgrade,
    body.mediapress .subscribernogallery .btn-primary.upgrade:hover,
    body.mediapress .subscribernogallery .btn-primary.upgrade:focus {
        display: block;
        width: 100%;
        padding: 14px 18px !important;
        background: #E65C95 !important;
        color: #fff !important;
        border: 0 !important;
        border-radius: 12px !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        line-height: 1.35 !important;
        text-align: center !important;
        text-transform: none !important;
        letter-spacing: 0 !important;
        white-space: normal !important;
        box-shadow: 0 2px 6px rgba(230, 92, 149, 0.20) !important;
        box-sizing: border-box !important;
        margin-bottom: 12px !important;
        text-decoration: none !important;
    }
    body.mediapress .subscribernogallery .btn-primary.upgrade:hover,
    body.mediapress .subscribernogallery .btn-primary.upgrade:focus {
        background: #332e4d !important;
        box-shadow: 0 2px 8px rgba(51, 46, 77, 0.20) !important;
    }

    /* ──────────────────────────────────────────────────────────
       Bottom-nav (.fixfoot) — modern restyle
       Matches the snifffr-mp design language: white surface, soft
       purple-tinted hairline, brand-pink active pill behind the
       current item, comfortable 56px bar height, iOS safe-area
       inset for notched devices.
       ────────────────────────────────────────────────────────── */
    .fixfoot {
        position: fixed !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        z-index: 999 !important;
        background: transparent !important;
        border-top: 0 !important;
        box-shadow: none !important;
        padding: 0 0 env(safe-area-inset-bottom) !important;
        pointer-events: none;
    }
    .fixfoot .container {
        padding: 0 !important;
        max-width: none;
    }
    .fixfoot .mobile-menu-bottom {
        background: rgba(255, 255, 255, 0.96);
        backdrop-filter: saturate(140%) blur(10px);
        -webkit-backdrop-filter: saturate(140%) blur(10px);
        border-top: 1px solid rgba(66, 62, 89, 0.08);
        border-radius: 0;
        box-shadow: 0 -2px 12px rgba(66, 62, 89, 0.06);
        padding: 6px 8px;
        pointer-events: auto;
        max-width: none;
        margin: 0;
    }
    .fixfoot .mobile-menu-bottom {
        text-align: center;
    }
    .fixfoot ul#menu-mobile-bottom {
        display: flex !important;
        justify-content: space-around !important;
        align-items: center;
        gap: 4px;
        margin: 0 !important;
        padding: 0 !important;
        list-style: none !important;
        max-width: none;
    }
    .fixfoot ul#menu-mobile-bottom li {
        flex: 1 1 0;
        padding: 0 !important;
        margin: 0 !important;
        position: relative;
    }
    /* Apple-style stacked tab item: icon on top, label below. Inactive
       items render in muted purple; the current page lights up brand
       pink across both icon + label, sitting on a soft pink pill. */
    .fixfoot ul#menu-mobile-bottom li a {
        display: flex !important;
        flex-direction: column !important;
        align-items: center;
        justify-content: center;
        gap: 3px;
        width: 100%;
        min-height: 52px;
        margin: 0 auto;
        padding: 6px 4px !important;
        border-radius: 16px;
        color: var(--snifffr-mp-purple) !important;
        font-size: 10px;
        font-weight: 600;
        letter-spacing: 0;
        line-height: 1.1;
        text-align: center;
        text-decoration: none !important;
        opacity: 0.7;
        transition: background 0.15s ease, color 0.15s ease, opacity 0.15s ease, transform 0.1s ease;
    }
    .fixfoot ul#menu-mobile-bottom li a:hover,
    .fixfoot ul#menu-mobile-bottom li a:focus {
        opacity: 1;
        color: var(--snifffr-mp-purple) !important;
    }
    .fixfoot ul#menu-mobile-bottom li a:active { transform: scale(0.96); }
    /* Active page — soft pink pill behind the stacked icon+label. */
    .fixfoot ul#menu-mobile-bottom li.current-menu-item a,
    .fixfoot ul#menu-mobile-bottom li.current_page_item a {
        background: var(--snifffr-mp-pink-soft);
        color: var(--snifffr-mp-pink) !important;
        opacity: 1;
    }
    /* Normalize the rendered icon — works whether the menu item uses an
       <i> icon-font glyph, a raster <img>, or an inline <svg>. The icon
       sits above the label thanks to flex-direction: column. */
    .fixfoot ul#menu-mobile-bottom li a i,
    .fixfoot ul#menu-mobile-bottom li a span i {
        font-size: 26px !important;
        line-height: 1 !important;
        display: block;
    }
    .fixfoot ul#menu-mobile-bottom li a img,
    .fixfoot ul#menu-mobile-bottom li a svg {
        width: 28px !important;
        height: 28px !important;
        display: block;
        fill: currentColor;
    }
    /* Count chips — restyle the bell / messages badges to match the
       shophead-iconbadge language (pink, white-ringed). Scoped to all
       menu items in the fixfoot so it covers notifications, messages,
       and any future numbered item. */
    .fixfoot ul#menu-mobile-bottom li span.menu-count {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        position: absolute !important;
        top: 2px;
        right: calc(50% - 22px);
        min-width: 16px;
        height: 16px;
        padding: 0 4px !important;
        margin: 0 !important;
        background: var(--snifffr-mp-pink) !important;
        color: #fff !important;
        font-size: 9px !important;
        font-weight: 700;
        line-height: 1;
        border: 2px solid #fff !important;
        border-radius: 8px !important;
    }

    /* Empty state for /iu-purchases/ + /private-content-purchases/ on mobile.
       Soft white card with centred copy — matches the iu-form-card language
       used elsewhere in the redesign. */
    body.snifffr-mp-iu-purchases .iu-empty,
    body.snifffr-mp-pc-purchases .iu-empty {
        margin: 16px;
        padding: 28px 22px;
        text-align: center;
        background: #fff;
        border: 1px solid var(--snifffr-mp-purple-08);
        border-radius: 16px;
        box-shadow: 0 8px 28px rgba(66, 62, 89, 0.06);
        color: var(--snifffr-mp-purple);
    }
    body.snifffr-mp-iu-purchases .iu-empty h4,
    body.snifffr-mp-pc-purchases .iu-empty h4 {
        margin: 0 0 12px;
        font-size: 15px;
        font-weight: 700;
        letter-spacing: 0.04em;
        color: var(--snifffr-mp-purple);
        text-transform: none;
    }
    body.snifffr-mp-iu-purchases .iu-empty p,
    body.snifffr-mp-pc-purchases .iu-empty p {
        margin: 0 0 10px;
        font-size: 13px;
        line-height: 1.55;
        color: rgba(66, 62, 89, 0.78);
    }
    body.snifffr-mp-iu-purchases .iu-empty p:last-child,
    body.snifffr-mp-pc-purchases .iu-empty p:last-child {
        margin-bottom: 0;
    }

}

/* ------------------------------------------------------------------------
   /shop/ — mobile redesign of the shortcode output (loop-item.php +
   pagshop). Scoped to .shop-item-list so it doesn't bleed into the
   per-seller shop tab on the mobile profile (which uses snifffr-mp-shop-*
   classes instead). The /shop/ page lives outside the .snifffr-mp wrapper,
   so the snifffr-mp-* CSS vars don't resolve here — every var() carries a
   hex fallback so the colours show up regardless.
   ------------------------------------------------------------------------ */
@media (max-width: 991.98px) {
    /* Outer column wrapper from loop-item.php is .col-6 — keep two columns
       on phones, snug gutter. */
    .shop-item-list > .row { margin-left: -6px; margin-right: -6px; }
    .shop-item-list > .row > [class*="col-"] {
        padding-left: 6px;
        padding-right: 6px;
        margin-bottom: 12px;
    }

    .shop-item-list .shop-item {
        position: relative;
        display: flex;
        flex-direction: column;
        background: #fff;
        border: 1px solid var(--snifffr-mp-purple-08, rgba(66, 62, 89, 0.08));
        border-radius: 14px;
        box-shadow: 0 2px 4px rgba(66, 62, 89, 0.06), 0 8px 20px rgba(66, 62, 89, 0.10);
        overflow: hidden;
        min-height: 0 !important; /* override the desktop 351px min-height */
        padding: 0 !important;
    }

    /* ---- Card header: avatar + username + listed time ---- */
    .shop-item-list .shop-item .shophead {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 10px 12px 8px;
        border: 0;
        background: transparent;
        flex-wrap: wrap;
    }
    .shop-item-list .shop-item .shophead .shop-item-author {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        text-decoration: none !important;
        flex: 1 1 auto;
        min-width: 0;
    }
    .shop-item-list .shop-item .shophead .item-avatar {
        flex: 0 0 auto;
        width: 32px;
        height: 32px;
        border-radius: 50%;
        overflow: hidden;
        background: var(--snifffr-mp-lavender, #ECEAF2);
    }
    .shop-item-list .shop-item .shophead .item-avatar img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }
    .shop-item-list .shop-item .shophead .shop-item-username {
        font-size: 13px !important;
        font-weight: 600;
        color: var(--snifffr-mp-purple, #423E59);
        line-height: 1.2;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .shop-item-list .shop-item .shophead .nametime {
        flex: 1 0 100%;
        font-size: 11px;
        color: var(--snifffr-mp-purple, #423E59);
        opacity: 0.55;
        margin: 0;
        padding-left: 40px; /* align with username (32px avatar + 8px gap) */
    }

    /* ---- Image area ---- */
    .shop-item-list .shop-item .shopimage1 {
        position: relative;
        width: 100%;
        aspect-ratio: 1 / 1;
        background: var(--snifffr-mp-lavender, #ECEAF2);
        overflow: hidden;
        margin: 0;
    }
    .shop-item-list .shop-item .shopimage1 a { display: block; height: 100%; }
    .shop-item-list .shop-item .shopimage1 img,
    .shop-item-list .shop-item .shopimage1 .img-responsive {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover;
        display: block;
    }

    /* ---- Body text + price ---- */
    .shop-item-list .shop-item .shoptext1 {
        padding: 10px 12px 12px !important;
        display: flex;
        flex-direction: column;
        gap: 4px;
        flex: 1 1 auto;
    }
    .shop-item-list .shop-item .shoptext1 h4 {
        margin: 0;
        font-size: 13px !important;
        font-weight: 700;
        line-height: 1.3;
        letter-spacing: 0.2px;
        text-transform: none;
        max-width: none;
        -webkit-line-clamp: 1;
    }
    .shop-item-list .shop-item .shoptext1 h4 a {
        color: var(--snifffr-mp-purple, #423E59) !important;
        text-decoration: none !important;
    }
    .shop-item-list .shop-item .shoptext1 .shopexc,
    .shop-item-list .shop-item .shoptext1 .shopexc p {
        font-size: 12px !important;
        line-height: 1.4;
        color: var(--snifffr-mp-purple, #423E59);
        opacity: 0.65;
        margin: 0;
    }

    /* Pink pill price — outweigh the desktop `p.priceshopnew a` rule (which
       paints a pale pink-light bg on white text → invisible) by qualifying
       with the `.shop-item-list .shop-item p.priceshopnew a` chain. */
    .shop-item-list .shop-item .shopricenew { margin: 6px 0 0 !important; padding: 0; }
    .shop-item-list .shop-item p.priceshopnew,
    .shop-item-list .shop-item .priceshopnew { margin: 0 !important; }
    .shop-item-list .shop-item p.priceshopnew a,
    .shop-item-list .shop-item .priceshopnew a {
        display: inline-flex !important;
        align-items: center;
        margin: 0 !important;
        padding: 5px 12px !important;
        background: #E65C95 !important;
        background-color: #E65C95 !important;
        color: #fff !important;
        font-size: 12px !important;
        font-weight: 600 !important;
        border-radius: 999px !important;
        text-decoration: none !important;
        line-height: 1.3 !important;
        box-shadow: 0 2px 6px rgba(230, 92, 149, 0.22);
    }

    /* "Image Is Under Review" overlay text — keep the gray cover but soften
       the typography. */
    .shop-item-list .shop-item .shopimage1 .shop-item-image-under-review,
    .shop-item-list .shop-item .shopimage1 .item-under-review,
    .shop-item-list .shop-item .shopimage1 .verifyone,
    .shop-item-list .shop-item .shopimage1 [class*="under-review"] {
        font-size: 12px !important;
        font-weight: 500;
        letter-spacing: 0.3px;
    }

    /* ---- Pagination ---- */
    .shop-item-list .pagshop,
    .shop .pagshop,
    body.page .pagshop {
        text-align: center !important;
        background: transparent !important;
        border: 0 !important;
        padding: 12px 8px 6px !important;
        margin: 8px 0 0;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 6px;
    }
    .shop-item-list .pagshop a,
    .shop-item-list .pagshop span,
    .shop .pagshop a,
    .shop .pagshop span,
    body.page .pagshop a,
    body.page .pagshop span {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        min-width: 34px;
        height: 34px;
        padding: 0 10px !important;
        border-radius: 999px !important;
        background: #fff !important;
        border: 1px solid rgba(66, 62, 89, 0.08) !important;
        color: #423E59 !important;
        font-size: 12px !important;
        font-weight: 600 !important;
        text-decoration: none !important;
        line-height: 1 !important;
        margin: 0 !important;
        box-shadow: 0 1px 2px rgba(66, 62, 89, 0.04);
    }
    .shop-item-list .pagshop a:hover,
    .shop .pagshop a:hover,
    body.page .pagshop a:hover {
        border-color: #E65C95 !important;
        color: #E65C95 !important;
    }
    .shop-item-list .pagshop .current,
    .shop-item-list .pagshop span.current,
    .shop-item-list .pagshop span.page-numbers.current,
    .shop .pagshop .current,
    .shop .pagshop span.page-numbers.current,
    body.page .pagshop .current,
    body.page .pagshop span.page-numbers.current {
        background: #E65C95 !important;
        border-color: #E65C95 !important;
        color: #fff !important;
        box-shadow: 0 2px 6px rgba(230, 92, 149, 0.25);
    }
    /* Ellipsis "…" should look passive, not like a button */
    .shop-item-list .pagshop .dots,
    .shop-item-list .pagshop span.page-numbers.dots,
    .shop .pagshop .dots,
    body.page .pagshop .dots {
        background: transparent !important;
        border-color: transparent !important;
        box-shadow: none !important;
        color: #423E59 !important;
        opacity: 0.5;
    }
    /* Prev / Next pills — slightly wider so the » / « breathe */
    .shop-item-list .pagshop a.prev,
    .shop-item-list .pagshop a.next,
    .shop .pagshop a.prev,
    .shop .pagshop a.next,
    body.page .pagshop a.prev,
    body.page .pagshop a.next {
        padding: 0 14px !important;
        color: #E65C95 !important;
        border-color: #E65C95 !important;
    }
}

/* ------------------------------------------------------------------------
   /fake-check-buyer/ + /fake-check/ — restyle the snifffr-Verified pages.
   The page content lives in WP admin (Fake Check template at theme/fake.php
   just renders the_content). The DB markup uses three landmark classes:
     .fcbi         — left column "task" card
     .flt          — checklist <ul>
     .fake-submit  — Gravity Form upload area below the columns
   These classes are scoped enough that we can style them globally without
   bleeding into other pages. The only collision is buddyforms/the-loop.php
   using <ul class="flt"> — so the .flt overrides are nested inside .fcbi /
   .fake-submit so that loop is untouched.
   ------------------------------------------------------------------------ */
body.page-id-341 .full-width-content,
body.page-id-4046764 .full-width-content,
body.page-id-4047065 .full-width-content,
body.page-id-4047447 .full-width-content {
    background: #FAF7FC;
    padding: 40px 0 60px;
}
body.page-id-341 .full-width-content > .container,
body.page-id-4046764 .full-width-content > .container,
body.page-id-4047065 .full-width-content > .container,
body.page-id-4047447 .full-width-content > .container {
    max-width: 880px;
}

/* Two-column row with a comfortable gutter; aligns columns vertically. */
body.page-id-341 .full-width-content .row,
body.page-id-4046764 .full-width-content .row,
body.page-id-4047065 .full-width-content .row,
body.page-id-4047447 .full-width-content .row {
    align-items: stretch;
}

/* ---- Left card: FAKE CHECK Task ---- */
.fcbi {
    background: #fff !important;
    border: 1px solid rgba(66, 62, 89, 0.08) !important;
    border-radius: 16px !important;
    padding: 22px 22px 18px !important;
    box-shadow: 0 2px 4px rgba(66, 62, 89, 0.06), 0 8px 24px rgba(66, 62, 89, 0.08) !important;
    height: 100%;
}
/* Promote the inline-styled "FAKE CHECK Task" heading without touching the
   inline color attribute (admin-managed). */
.fcbi h4 {
    font-size: 18px !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    margin: 0 0 14px !important;
    line-height: 1.3;
}

/* Custom checklist — replaces the bitmap tick-icn2.png used elsewhere. */
.fcbi .flt,
.fake-submit .flt {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}
.fcbi .flt li,
.fake-submit .flt li {
    position: relative;
    padding: 0 0 0 32px !important;
    margin: 0 0 12px !important;
    font-size: 14px;
    line-height: 1.55;
    color: #423E59;
}
.fcbi .flt li:last-child,
.fake-submit .flt li:last-child { margin-bottom: 0 !important; }
.fcbi .flt li::before,
.fake-submit .flt li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 2px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #E65C95;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23fff' d='M9 16.2 4.8 12l-1.4 1.4L9 19l12-12-1.4-1.4z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 14px 14px;
    box-shadow: 0 2px 4px rgba(230, 92, 149, 0.25);
}

/* ---- Right column: example image, made to match the card ---- */
body.page-id-341 .full-width-content .col-md-6 > img,
body.page-id-4046764 .full-width-content .col-md-6 > img,
body.page-id-4047065 .full-width-content .col-md-6 > img,
body.page-id-4047447 .full-width-content .col-md-6 > img {
    display: block;
    width: 100% !important;
    height: auto !important;
    max-width: 100%;
    border-radius: 16px;
    border: 1px solid rgba(66, 62, 89, 0.08);
    box-shadow: 0 2px 4px rgba(66, 62, 89, 0.06), 0 8px 24px rgba(66, 62, 89, 0.08);
    background: #fff;
}

/* ---- Submit block ---- */
.fake-submit {
    background: #fff;
    border: 1px solid rgba(66, 62, 89, 0.08);
    border-radius: 16px;
    padding: 28px 22px 24px;
    box-shadow: 0 2px 4px rgba(66, 62, 89, 0.06), 0 8px 24px rgba(66, 62, 89, 0.08);
    margin-top: 28px;
}
.fake-submit h4 {
    font-size: 18px;
    font-weight: 700;
    color: #423E59;
    margin: 0 0 16px;
    text-align: center;
}

/* Gravity Forms inside .fake-submit — slim down the default chrome to match
   the rest of the redesigned mobile aesthetic. Targets only forms nested
   inside .fake-submit so site-wide GF styling is untouched. */
.fake-submit .gform_wrapper {
    max-width: 480px;
    margin: 0 auto;
}
.fake-submit .gform_wrapper form,
.fake-submit .gform_wrapper .gform_body,
.fake-submit .gform_wrapper .gform_fields {
    margin: 0;
    padding: 0;
}
.fake-submit .gform_wrapper .gfield {
    margin-bottom: 14px !important;
}
.fake-submit .gform_wrapper label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: rgba(66, 62, 89, 0.6);
    margin: 0 0 6px;
}
.fake-submit .gform_wrapper input[type="text"],
.fake-submit .gform_wrapper input[type="email"],
.fake-submit .gform_wrapper input[type="number"],
.fake-submit .gform_wrapper input[type="tel"],
.fake-submit .gform_wrapper input[type="url"],
.fake-submit .gform_wrapper input[type="password"],
.fake-submit .gform_wrapper input[type="file"],
.fake-submit .gform_wrapper textarea,
.fake-submit .gform_wrapper select {
    width: 100% !important;
    padding: 12px 14px !important;
    border: 1px solid rgba(66, 62, 89, 0.12) !important;
    border-radius: 12px !important;
    background: #FAF8FC !important;
    font-size: 14px !important;
    color: #423E59 !important;
    box-shadow: none !important;
    -webkit-appearance: none;
    appearance: none;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.fake-submit .gform_wrapper input[type="file"] {
    padding: 10px 14px !important;
    background: #fff !important;
    cursor: pointer;
}
.fake-submit .gform_wrapper input:focus,
.fake-submit .gform_wrapper textarea:focus,
.fake-submit .gform_wrapper select:focus {
    border-color: #E65C95 !important;
    box-shadow: 0 0 0 3px rgba(230, 92, 149, 0.15) !important;
    outline: none !important;
}

/* Pink-pill submit button */
.fake-submit .gform_wrapper .gform_footer,
.fake-submit .gform_wrapper .gform_footer.top_label {
    margin-top: 18px !important;
    padding: 0 !important;
    text-align: center;
}
.fake-submit .gform_wrapper input[type="submit"],
.fake-submit .gform_wrapper button[type="submit"] {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-width: 200px;
    padding: 13px 28px !important;
    background: #E65C95 !important;
    background-color: #E65C95 !important;
    color: #fff !important;
    border: 0 !important;
    border-radius: 999px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(230, 92, 149, 0.30) !important;
    transition: transform 0.12s, box-shadow 0.12s, background 0.12s;
    -webkit-appearance: none;
    appearance: none;
}
.fake-submit .gform_wrapper input[type="submit"]:hover,
.fake-submit .gform_wrapper button[type="submit"]:hover {
    background: #d8407a !important;
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(230, 92, 149, 0.36) !important;
}
.fake-submit .gform_wrapper .gform_validation_errors,
.fake-submit .gform_wrapper .validation_error {
    background: rgba(204, 0, 0, 0.06) !important;
    border: 1px solid rgba(204, 0, 0, 0.18) !important;
    color: #c30000 !important;
    border-radius: 12px !important;
    padding: 12px 14px !important;
    margin: 0 0 14px !important;
    font-size: 13px;
}
.fake-submit .gform_wrapper .gform_confirmation_message {
    background: rgba(29, 158, 117, 0.08) !important;
    border: 1px solid rgba(29, 158, 117, 0.25) !important;
    color: #1d9e75 !important;
    border-radius: 12px !important;
    padding: 16px 18px !important;
    text-align: center;
    font-size: 14px;
}

/* Mobile: stack columns and tighten padding. */
@media (max-width: 767.98px) {
    body.page-id-341 .full-width-content,
    body.page-id-4046764 .full-width-content,
    body.page-id-4047065 .full-width-content,
    body.page-id-4047447 .full-width-content {
        padding: 24px 0 36px;
    }
    body.page-id-341 .full-width-content .col-md-6,
    body.page-id-4046764 .full-width-content .col-md-6,
    body.page-id-4047065 .full-width-content .col-md-6,
    body.page-id-4047447 .full-width-content .col-md-6 {
        margin-bottom: 16px;
    }
    .fcbi { padding: 18px !important; }
    .fcbi h4 { font-size: 16px !important; }
    .fake-submit { padding: 22px 16px 20px; margin-top: 18px; }
    .fake-submit h4 { font-size: 16px; }
}

/* ------------------------------------------------------------------------
   /photos/ + /videos/ — restyle the [mpp-list-gallery] shortcode output.
   Templates: page-photo.php (wrapper .pagephoto), page-video.php (.pagevid).
   Shortcode markup (mediapress/.../shortcodes/gallery-list.php):
     .pagephoto / .pagevid
       └── .container > .row > .col-md-12
             └── .mpp-shortcode-gallery-wrapper
                   ├── .mpp-shortcode-list-gallery   (the grid)
                   │     └── .mpp-gallery (one per item)
                   │           ├── .mpp-gallery-entry > a.mpp-gallery-cover > img
                   │           ├── a.mpp-gallery-title
                   │           └── .mpp-type-icon
                   └── .mpp-paginator
   Selectors are scoped via .pagephoto / .pagevid ancestor so the same
   classes inside a member's profile gallery list aren't affected.
   ------------------------------------------------------------------------ */
.full-width-content.pagephoto,
.full-width-content.pagevid {
    background: #FAF7FC;
    padding: 32px 0 56px !important;
}
.full-width-content.pagephoto > .container,
.full-width-content.pagevid > .container {
    max-width: 1200px;
}

/* Grid layout — override Bootstrap-ish .mpp-u-1-* width math from MediaPress
   with a CSS grid so cards size cleanly at every breakpoint. */
.full-width-content.pagephoto .mpp-shortcode-list-gallery,
.full-width-content.pagevid .mpp-shortcode-list-gallery {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin: 0 0 24px;
    list-style: none;
    padding: 0;
}
@media (max-width: 991.98px) {
    .full-width-content.pagephoto .mpp-shortcode-list-gallery,
    .full-width-content.pagevid .mpp-shortcode-list-gallery {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 12px;
    }
}
@media (max-width: 575.98px) {
    .full-width-content.pagephoto .mpp-shortcode-list-gallery,
    .full-width-content.pagevid .mpp-shortcode-list-gallery {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }
    .full-width-content.pagephoto,
    .full-width-content.pagevid {
        padding: 16px 0 32px !important;
    }
}

/* Reset the shortcode's .mpp-gallery item: no width math, just a card. */
.full-width-content.pagephoto .mpp-shortcode-list-gallery .mpp-gallery,
.full-width-content.pagevid .mpp-shortcode-list-gallery .mpp-gallery {
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #fff;
    border: 1px solid rgba(66, 62, 89, 0.08);
    border-radius: 14px;
    box-shadow: 0 2px 4px rgba(66, 62, 89, 0.06), 0 8px 20px rgba(66, 62, 89, 0.08);
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.full-width-content.pagephoto .mpp-shortcode-list-gallery .mpp-gallery:hover,
.full-width-content.pagevid .mpp-shortcode-list-gallery .mpp-gallery:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(66, 62, 89, 0.08), 0 14px 30px rgba(66, 62, 89, 0.12);
}

/* Hide the meta-top / meta-bottom rails (mostly empty hooks). */
.full-width-content.pagephoto .mpp-shortcode-list-gallery .mpp-gallery-meta-top,
.full-width-content.pagevid .mpp-shortcode-list-gallery .mpp-gallery-meta-top,
.full-width-content.pagephoto .mpp-shortcode-list-gallery .mpp-gallery-meta-bottom,
.full-width-content.pagevid .mpp-shortcode-list-gallery .mpp-gallery-meta-bottom {
    display: none !important;
}

/* Cover image: forced to a square thumbnail with object-fit cover. */
.full-width-content.pagephoto .mpp-shortcode-list-gallery .mpp-gallery-entry,
.full-width-content.pagevid .mpp-shortcode-list-gallery .mpp-gallery-entry {
    margin: 0;
    padding: 0;
    background: #ECEAF2;
}
.full-width-content.pagephoto .mpp-shortcode-list-gallery .mpp-gallery-cover,
.full-width-content.pagevid .mpp-shortcode-list-gallery .mpp-gallery-cover {
    display: block !important;
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: 0;
    background: #ECEAF2;
}
.full-width-content.pagephoto .mpp-shortcode-list-gallery .mpp-gallery-cover img,
.full-width-content.pagevid .mpp-shortcode-list-gallery .mpp-gallery-cover img {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    border-radius: 0 !important;
    display: block;
    transition: transform 0.4s ease;
}
.full-width-content.pagephoto .mpp-shortcode-list-gallery .mpp-gallery:hover .mpp-gallery-cover img,
.full-width-content.pagevid .mpp-shortcode-list-gallery .mpp-gallery:hover .mpp-gallery-cover img {
    transform: scale(1.04);
}

/* Video-gallery covers on /members/{user}/mediapress/ — the loop-gallery
   override renders a <video> element instead of <img> so the cover paints
   the first frame instead of the default purple placeholder. Size + crop
   it the same way the <img> cover is sized so the grid layout stays
   identical between photo and video galleries. */
.mpp-item-entry .mpp-item-thumbnail video.mpp-gallery-cover-video {
    display: block;
    width: 100%;
    height: auto;
    max-height: 220px;
    object-fit: cover;
    border-radius: 6px 6px 0 0;
    background: #000;
    pointer-events: none; /* clicks pass through to the wrapping <a>. */
}
.full-width-content.pagephoto .mpp-shortcode-list-gallery .mpp-gallery-cover video.mpp-gallery-cover-video,
.full-width-content.pagevid .mpp-shortcode-list-gallery .mpp-gallery-cover video.mpp-gallery-cover-video {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    max-height: none;
    object-fit: cover;
    border-radius: 0 !important;
}

/* Title — full-width footer of the card, ellipsis on overflow. */
.full-width-content.pagephoto .mpp-shortcode-list-gallery a.mpp-gallery-title,
.full-width-content.pagevid .mpp-shortcode-list-gallery a.mpp-gallery-title {
    display: block !important;
    margin: 0 !important;
    padding: 10px 12px !important;
    background: #fff !important;
    color: #423E59 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    border-radius: 0 !important;
    text-transform: none !important;
    text-decoration: none !important;
    text-align: center;
    border-top: 1px solid rgba(66, 62, 89, 0.06);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.full-width-content.pagephoto .mpp-shortcode-list-gallery a.mpp-gallery-title:hover,
.full-width-content.pagevid .mpp-shortcode-list-gallery a.mpp-gallery-title:hover {
    color: #E65C95 !important;
}

/* Video play indicator — overlay a circular play button on each card on
   the /videos/ page. The page wrapper guarantees we're on the videos
   gallery; cover-anchor is positioned, so we drop a pseudo-element on it. */
.full-width-content.pagevid .mpp-shortcode-list-gallery .mpp-gallery-cover::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 48px;
    height: 48px;
    margin-top: -24px;
    margin-left: -24px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.55);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M8 5v14l11-7z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 56% 50%;
    background-size: 22px 22px;
    pointer-events: none;
    transition: background-color 0.15s, transform 0.15s;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.full-width-content.pagevid .mpp-shortcode-list-gallery .mpp-gallery:hover .mpp-gallery-cover::after {
    background-color: #E65C95;
    transform: scale(1.06);
}

/* MediaPress' built-in type icon is a small badge — keep it but make it
   subtle since the play overlay above is the primary affordance. Hide on
   /videos/ since the central play button replaces it. */
.full-width-content.pagephoto .mpp-shortcode-list-gallery .mpp-type-icon,
.full-width-content.pagevid .mpp-shortcode-list-gallery .mpp-type-icon {
    display: none !important;
}

/* Inline admin "Edit" link — keep it accessible but de-emphasised so it
   doesn't compete with the title. */
.full-width-content.pagephoto .mpp-shortcode-list-gallery .mpp-gallery-entry > a[href*="post.php"],
.full-width-content.pagevid .mpp-shortcode-list-gallery .mpp-gallery-entry > a[href*="post.php"] {
    position: absolute;
    top: 6px;
    right: 6px;
    padding: 3px 8px;
    background: rgba(0, 0, 0, 0.55);
    color: #fff !important;
    font-size: 10px;
    font-weight: 600;
    border-radius: 999px;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    z-index: 2;
}

/* ---- Paginator ---- */
.full-width-content.pagephoto .mpp-paginator,
.full-width-content.pagevid .mpp-paginator,
.full-width-content.pagephoto .mpp-paginator.no-ajax,
.full-width-content.pagevid .mpp-paginator.no-ajax {
    background: transparent !important;
    border: 0 !important;
    padding: 12px 8px 0 !important;
    margin: 8px 0 0 !important;
    display: flex !important;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    text-align: center;
}
.full-width-content.pagephoto .mpp-paginator a,
.full-width-content.pagephoto .mpp-paginator span,
.full-width-content.pagevid .mpp-paginator a,
.full-width-content.pagevid .mpp-paginator span {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 34px;
    padding: 0 10px !important;
    border-radius: 999px !important;
    background: #fff !important;
    border: 1px solid rgba(66, 62, 89, 0.08) !important;
    color: #423E59 !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    line-height: 1 !important;
    margin: 0 !important;
    box-shadow: 0 1px 2px rgba(66, 62, 89, 0.04);
}
.full-width-content.pagephoto .mpp-paginator a:hover,
.full-width-content.pagevid .mpp-paginator a:hover {
    border-color: #E65C95 !important;
    color: #E65C95 !important;
}
.full-width-content.pagephoto .mpp-paginator .current,
.full-width-content.pagephoto .mpp-paginator span.current,
.full-width-content.pagephoto .mpp-paginator span.page-numbers.current,
.full-width-content.pagevid .mpp-paginator .current,
.full-width-content.pagevid .mpp-paginator span.current,
.full-width-content.pagevid .mpp-paginator span.page-numbers.current {
    background: #E65C95 !important;
    border-color: #E65C95 !important;
    color: #fff !important;
    box-shadow: 0 2px 6px rgba(230, 92, 149, 0.25);
}
.full-width-content.pagephoto .mpp-paginator .dots,
.full-width-content.pagevid .mpp-paginator .dots {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
    color: #423E59 !important;
    opacity: 0.5;
}
.full-width-content.pagephoto .mpp-paginator a.prev,
.full-width-content.pagephoto .mpp-paginator a.next,
.full-width-content.pagevid .mpp-paginator a.prev,
.full-width-content.pagevid .mpp-paginator a.next {
    padding: 0 14px !important;
    color: #E65C95 !important;
    border-color: #E65C95 !important;
}

/* ------------------------------------------------------------------------
   Mobile drawer menu — restyle the Responsive Menu Pro plugin output to
   a clean LIGHT theme that matches the new snifffr mobile aesthetic.
   The plugin emits its inline CSS at wp_head priority 100 (loads AFTER
   custom.css) and uses two-ID selectors like:
       #responsive-menu-pro-container #responsive-menu-pro li.responsive-menu-pro-item a
   so we mirror that chain (and add an extra class) to win specificity.
   ------------------------------------------------------------------------ */
body #responsive-menu-pro-container,
html body #responsive-menu-pro-container {
    background: #fff !important;
    background-color: #fff !important;
    background-image: none !important;
    color: #423E59 !important;
    box-shadow: 4px 0 24px rgba(66, 62, 89, 0.12) !important;
}
body #responsive-menu-pro-container #responsive-menu-pro-wrapper,
html body #responsive-menu-pro-container #responsive-menu-pro-wrapper {
    padding: 8px 12px 24px !important;
    background: transparent !important;
    background-color: transparent !important;
}

/* Title bar inside the drawer (logo / menu title row) */
body #responsive-menu-pro-container #responsive-menu-pro-title,
body #responsive-menu-pro-container .responsive-menu-pro-title {
    background: transparent !important;
    background-color: transparent !important;
    border-bottom: 1px solid rgba(66, 62, 89, 0.08) !important;
    padding: 14px 16px !important;
    color: #423E59 !important;
}

/* Search box (if enabled) — clean lavender pill */
body #responsive-menu-pro-container .responsive-menu-pro-search-box,
body #responsive-menu-pro-container input[type="text"].responsive-menu-pro-search-box {
    background: #ECEAF2 !important;
    color: #423E59 !important;
    border: 0 !important;
    border-radius: 999px !important;
    padding: 10px 16px !important;
    margin: 12px 12px 8px !important;
    font-size: 13px !important;
}

/* Reset menu lists & all submenu wrappers */
body #responsive-menu-pro-container ul,
body #responsive-menu-pro-container ol,
body #responsive-menu-pro-container .responsive-menu-pro-submenu,
body #responsive-menu-pro-container #responsive-menu-pro {
    background: transparent !important;
    background-color: transparent !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

/* ---- Items: every link painted by the plugin lives at this exact chain ---
   `#container #responsive-menu-pro li a` (specificity 2,1,1).
   We mirror it AND tack on a class for 2,2,1 so we always win. ---------- */
body #responsive-menu-pro-container #responsive-menu-pro li.responsive-menu-pro-item,
body #responsive-menu-pro-container li.responsive-menu-pro-item {
    background: transparent !important;
    background-color: transparent !important;
    border: 0 !important;
    margin: 2px 0 !important;
    padding: 0 !important;
    list-style: none !important;
}
body #responsive-menu-pro-container #responsive-menu-pro li.responsive-menu-pro-item a,
body #responsive-menu-pro-container #responsive-menu-pro li.responsive-menu-pro-item a.responsive-menu-pro-item-link,
body #responsive-menu-pro-container #responsive-menu-pro li.responsive-menu-pro-item > a {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 12px 14px !important;
    margin: 0 !important;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    color: #423E59 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    letter-spacing: 0.4px !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    border: 0 !important;
    border-radius: 12px !important;
    line-height: 1.3 !important;
    box-shadow: none !important;
    transition: background 0.12s ease, color 0.12s ease !important;
}
body #responsive-menu-pro-container #responsive-menu-pro li.responsive-menu-pro-item a:hover,
body #responsive-menu-pro-container #responsive-menu-pro li.responsive-menu-pro-item a:focus,
body #responsive-menu-pro-container #responsive-menu-pro li.responsive-menu-pro-item a.responsive-menu-pro-item-link:hover,
body #responsive-menu-pro-container #responsive-menu-pro li.responsive-menu-pro-item a.responsive-menu-pro-item-link:focus {
    background: #ECEAF2 !important;
    background-color: #ECEAF2 !important;
    color: #423E59 !important;
}

/* Inline icons before labels (LIVE CHAT, BUY TOKENS, etc.) */
body #responsive-menu-pro-container #responsive-menu-pro li.responsive-menu-pro-item a img,
body #responsive-menu-pro-container #responsive-menu-pro li.responsive-menu-pro-item a i,
body #responsive-menu-pro-container #responsive-menu-pro li.responsive-menu-pro-item a svg {
    width: 18px !important;
    height: 18px !important;
    flex: 0 0 auto !important;
    vertical-align: middle !important;
    color: #E65C95 !important;
    fill: currentColor !important;
}

/* Active item — lavender (light purple) background + pink text + pink bar.
   Plugin paints the active state with its own class
   `.responsive-menu-pro-current-item` at specificity (2,3,1) — we mirror
   that chain and add `a.responsive-menu-pro-item-link` to win at (2,3,3). */
body #responsive-menu-pro-container #responsive-menu-pro li.responsive-menu-pro-item.responsive-menu-pro-current-item > a,
body #responsive-menu-pro-container #responsive-menu-pro li.responsive-menu-pro-item.responsive-menu-pro-current-item > a.responsive-menu-pro-item-link,
body #responsive-menu-pro-container #responsive-menu-pro li.responsive-menu-pro-item.current-menu-item > a.responsive-menu-pro-item-link,
body #responsive-menu-pro-container #responsive-menu-pro li.responsive-menu-pro-item.current_page_item > a.responsive-menu-pro-item-link,
body #responsive-menu-pro-container #responsive-menu-pro li.responsive-menu-pro-item-current-parent > a.responsive-menu-pro-item-link,
body #responsive-menu-pro-container #responsive-menu-pro li.responsive-menu-pro-item-current-ancestor > a.responsive-menu-pro-item-link {
    background: #ECEAF2 !important;
    background-color: #ECEAF2 !important;
    color: #E65C95 !important;
    border-color: transparent !important;
    box-shadow: inset 3px 0 0 #E65C95 !important;
}
/* Hover variant for the active item — keep the same lavender bg + pink */
body #responsive-menu-pro-container #responsive-menu-pro li.responsive-menu-pro-item.responsive-menu-pro-current-item > a:hover,
body #responsive-menu-pro-container #responsive-menu-pro li.responsive-menu-pro-item.responsive-menu-pro-current-item > a.responsive-menu-pro-item-link:hover {
    background: #ECEAF2 !important;
    background-color: #ECEAF2 !important;
    color: #E65C95 !important;
}

/* Hairline divider between items */
body #responsive-menu-pro-container #responsive-menu-pro li.responsive-menu-pro-item + li.responsive-menu-pro-item {
    border-top: 1px solid rgba(66, 62, 89, 0.05) !important;
}

/* Unread / count badges (the "0" circles) — pink pill when non-zero */
body #responsive-menu-pro-container #responsive-menu-pro li.responsive-menu-pro-item .menu-counter,
body #responsive-menu-pro-container #responsive-menu-pro li.responsive-menu-pro-item .count,
body #responsive-menu-pro-container #responsive-menu-pro li.responsive-menu-pro-item .badge,
body #responsive-menu-pro-container #responsive-menu-pro li.responsive-menu-pro-item span[class*="count"] {
    margin-left: auto !important;
    min-width: 22px !important;
    height: 22px !important;
    padding: 0 7px !important;
    background: #E65C95 !important;
    background-color: #E65C95 !important;
    color: #fff !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    line-height: 22px !important;
    text-align: center !important;
    border-radius: 999px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 2px 6px rgba(230, 92, 149, 0.25) !important;
}
/* Zero-count badges — neutral lavender pill */
body #responsive-menu-pro-container #responsive-menu-pro li.responsive-menu-pro-item .menu-counter:empty,
body #responsive-menu-pro-container #responsive-menu-pro li.responsive-menu-pro-item span[class*="count-0"],
body #responsive-menu-pro-container #responsive-menu-pro li.responsive-menu-pro-item span.notification-count[data-count="0"] {
    background: #ECEAF2 !important;
    background-color: #ECEAF2 !important;
    color: rgba(66, 62, 89, 0.5) !important;
    box-shadow: none !important;
}

/* Submenu items — must out-specify the plugin's own
   `#responsive-menu-pro-container #responsive-menu-pro ul.responsive-menu-pro-submenu li.responsive-menu-pro-item a`
   rule (which paints submenu_item_background_colour from admin settings).
   Adding `a.responsive-menu-pro-item-link` gives us one more class. */
body #responsive-menu-pro-container #responsive-menu-pro ul.responsive-menu-pro-submenu li.responsive-menu-pro-item a,
body #responsive-menu-pro-container #responsive-menu-pro ul.responsive-menu-pro-submenu li.responsive-menu-pro-item a.responsive-menu-pro-item-link,
body #responsive-menu-pro-container #responsive-menu-pro .responsive-menu-pro-submenu li.responsive-menu-pro-item a.responsive-menu-pro-item-link {
    padding: 11px 14px 11px 32px !important;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    color: #423E59 !important;
    font-weight: 500 !important;
    text-transform: none !important;
    letter-spacing: 0.2px !important;
    border: 0 !important;
    border-bottom: 0 !important;
    border-radius: 12px !important;
    box-shadow: none !important;
    line-height: 1.4 !important;
}
body #responsive-menu-pro-container #responsive-menu-pro ul.responsive-menu-pro-submenu li.responsive-menu-pro-item a:hover,
body #responsive-menu-pro-container #responsive-menu-pro ul.responsive-menu-pro-submenu li.responsive-menu-pro-item a:focus,
body #responsive-menu-pro-container #responsive-menu-pro ul.responsive-menu-pro-submenu li.responsive-menu-pro-item a.responsive-menu-pro-item-link:hover,
body #responsive-menu-pro-container #responsive-menu-pro ul.responsive-menu-pro-submenu li.responsive-menu-pro-item a.responsive-menu-pro-item-link:focus {
    background: #ECEAF2 !important;
    background-color: #ECEAF2 !important;
    color: #423E59 !important;
    border-color: rgba(66, 62, 89, 0.05) !important;
}

/* Active submenu item — lavender background + pink text */
body #responsive-menu-pro-container #responsive-menu-pro ul.responsive-menu-pro-submenu li.responsive-menu-pro-item.current-menu-item > a,
body #responsive-menu-pro-container #responsive-menu-pro ul.responsive-menu-pro-submenu li.responsive-menu-pro-item.current_page_item > a {
    background: #ECEAF2 !important;
    background-color: #ECEAF2 !important;
    color: #E65C95 !important;
}

body #responsive-menu-pro-container #responsive-menu-pro .responsive-menu-pro-subarrow {
    color: rgba(66, 62, 89, 0.45) !important;
    background: transparent !important;
    background-color: transparent !important;
    border: 0 !important;
}
body #responsive-menu-pro-container #responsive-menu-pro .responsive-menu-pro-subarrow:hover {
    color: #E65C95 !important;
    background: transparent !important;
}

/* "Back" arrow row when user has descended into a submenu */
body #responsive-menu-pro-container #responsive-menu-pro li.responsive-menu-pro-back {
    background: transparent !important;
    background-color: transparent !important;
    color: #E65C95 !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.4px !important;
    padding: 10px 14px !important;
    border-bottom: 1px solid rgba(66, 62, 89, 0.08) !important;
}

/* Hamburger button — soft surface, dark bars */
body #responsive-menu-pro-button,
body .responsive-menu-pro-button {
    background: transparent !important;
    background-color: transparent !important;
    color: #423E59 !important;
    border-radius: 8px !important;
}
body #responsive-menu-pro-button:hover,
body .responsive-menu-pro-button:hover {
    background: rgba(66, 62, 89, 0.06) !important;
    background-color: rgba(66, 62, 89, 0.06) !important;
}
body #responsive-menu-pro-button .responsive-menu-pro-box .responsive-menu-pro-inner,
body #responsive-menu-pro-button .responsive-menu-pro-box .responsive-menu-pro-inner::before,
body #responsive-menu-pro-button .responsive-menu-pro-box .responsive-menu-pro-inner::after {
    background-color: #423E59 !important;
}

/* Backdrop / mask behind the drawer (only present when the plugin's
   menu_overlay option is on). Soft purple wash. */
body #responsive-menu-pro-mask {
    background: rgba(66, 62, 89, 0.18) !important;
    background-color: rgba(66, 62, 89, 0.18) !important;
    backdrop-filter: blur(1px) !important;
    -webkit-backdrop-filter: blur(1px) !important;
}

/* Page dim while the drawer is open.

   We can't use a plain ::after overlay on <html> or <body>: the drawer
   is rendered deep inside <body> (inside the navbar), and the plugin's
   "push" animation puts a transform on <body>. Both of those create
   stacking contexts that trap the drawer below any positive-z-index
   pseudo-element on <html>. Result: any full-viewport overlay we hang
   ABOVE z-index 0 on <html> ends up painted over the drawer too.

   Instead we paint the dim using a giant box-shadow on the drawer
   container itself. box-shadow only renders OUTSIDE the box's border
   edge, so the drawer interior is untouched. The 9999px spread is
   bigger than any viewport, so the rest of the screen is fully dimmed
   in the drawer's own stacking context. No overlay element needed. */
html.responsive-menu-pro-open body #responsive-menu-pro-container {
    box-shadow: 0 0 0 9999px rgba(66, 62, 89, 0.50) !important;
}

/* ============================================================
 * snifffr — mobile fixed bottom bar (.fixfoot) hardening
 *
 * Older rules elsewhere in this file (lines ~3764, ~11227, ~24095)
 * collectively position the bar but leave a gap on iOS during scroll-up
 * because of address-bar resize + extra padding rules competing. These
 * final rules sit at the bottom of the file so they win the cascade,
 * and they:
 *   - lock the bar to the viewport bottom (no transform / no top calc)
 *   - reserve room at the bottom of body so page content doesn't hide
 *     behind the bar
 *   - force its own GPU layer so iOS doesn't repaint the bar mid-scroll
 *   - apply iOS safe-area-inset-bottom to the inner pill, not the
 *     wrapper, so the wrapper's bottom can still be 0
 * ============================================================ */
@media (max-width: 991.98px) {
    body.logged-in {
        padding-bottom: calc(76px + env(safe-area-inset-bottom));
    }
    body.logged-in .fixfoot {
        position: fixed !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        top: auto !important;
        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        background: transparent !important;
        border-top: 0 !important;
        z-index: 1000 !important;
        /* GPU layer — keeps Safari from repainting the bar during the
           address-bar collapse animation. */
        transform: translateZ(0);
        will-change: transform;
        pointer-events: none;
    }
    body.logged-in .fixfoot .container {
        padding: 0 !important;
        margin: 0 !important;
        max-width: none !important;
        width: 100% !important;
    }
    body.logged-in .fixfoot .mobile-menu-bottom {
        background: rgba(255, 255, 255, 0.96);
        backdrop-filter: saturate(140%) blur(10px);
        -webkit-backdrop-filter: saturate(140%) blur(10px);
        border-top: 1px solid rgba(66, 62, 89, 0.08);
        box-shadow: 0 -2px 12px rgba(66, 62, 89, 0.06);
        padding: 6px 8px env(safe-area-inset-bottom);
        pointer-events: auto;
        margin: 0;
        max-width: none;
    }
    /* Hide the bar while the slide-in drawer is open — they share the
       same screen real estate visually. */
    body.snifffr-nav-is-open .fixfoot {
        display: none !important;
    }
    /* Drop the inline-style hack the old footer.php used to leave behind
       (footer { bottom: 60px; ... }). It's gone from the PHP now, but
       defend in case any cached page or third-party still sets it. */
    body.logged-in footer[style*="bottom"] {
        bottom: auto !important;
        position: static !important;
        margin-top: 0 !important;
    }

    /* Container-based list reset so the new mobile_bottom_buyer /
       mobile_bottom_seller menus get the same horizontal pill row as
       the old #menu-mobile-bottom. Without this, the inner ul keeps
       its UA bullets + vertical layout because the old rules targeted
       a specific menu id. */
    body.logged-in .fixfoot .mobile-menu-bottom > ul,
    body.logged-in .fixfoot .mobile-menu-bottom > ul > li,
    body.logged-in .fixfoot .mobile-menu-bottom > ul > li > ul {
        list-style: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    body.logged-in .fixfoot .mobile-menu-bottom > ul {
        display: flex !important;
        justify-content: space-around !important;
        align-items: center;
        gap: 4px;
        width: 100%;
    }
    body.logged-in .fixfoot .mobile-menu-bottom > ul > li {
        flex: 1 1 0;
        list-style: none !important;
        position: relative;
    }
    body.logged-in .fixfoot .mobile-menu-bottom > ul > li > a {
        display: flex !important;
        flex-direction: column !important;
        align-items: center;
        justify-content: center;
        gap: 3px;
        width: 100%;
        min-height: 52px;
        padding: 6px 4px !important;
        border-radius: 16px;
        color: var(--snifffr-mp-purple, #4e3c6e) !important;
        font-size: 10px;
        font-weight: 600;
        line-height: 1.1;
        text-align: center;
        text-decoration: none !important;
        opacity: 0.7;
        transition: background 0.15s ease, color 0.15s ease, opacity 0.15s ease;
    }
    body.logged-in .fixfoot .mobile-menu-bottom > ul > li.current-menu-item > a,
    body.logged-in .fixfoot .mobile-menu-bottom > ul > li.current_page_item > a {
        background: var(--snifffr-mp-pink-soft, rgba(214, 51, 132, 0.08));
        color: var(--snifffr-mp-pink, #d63384) !important;
        opacity: 1;
    }
    body.logged-in .fixfoot .mobile-menu-bottom > ul > li > a i {
        font-size: 22px !important;
        line-height: 1 !important;
        display: block;
    }
    /* Avatar swap: when the bottom-nav item links to the logged-in user's
       own profile, an <img class="snifffr-nav-avatar"> replaces the <i>.
       Sized to the same visual footprint as the icon it stands in for. */
    body.logged-in .fixfoot .mobile-menu-bottom > ul > li > a img.snifffr-nav-avatar {
        width: 26px !important;
        height: 26px !important;
        border-radius: 50% !important;
        object-fit: cover;
        display: block;
        margin: 0 auto;
        border: 1.5px solid currentColor;
    }
    /* Hide any nested dropdown the menu may have — the bar is a single
       row of icons; if the admin assigned a multi-level menu, the
       sub-items would otherwise render below the bar. */
    body.logged-in .fixfoot .mobile-menu-bottom .sub-menu,
    body.logged-in .fixfoot .mobile-menu-bottom > ul > li > ul {
        display: none !important;
    }

    /* Live unread-count badge for messages / notifications icons in the
       drawer or bottom bar. Injected via the walker_nav_menu_start_el
       filter when the menu item carries .drawmsgcount or .drawnotifcount
       — see functions/snifffr-mobile-nav.php. */
    .snifffr-nav-items .snifffr-nav-badge,
    .fixfoot .snifffr-nav-badge {
        position: absolute;
        top: 4px;
        right: calc(50% - 22px);
        min-width: 18px;
        height: 18px;
        padding: 0 5px;
        border-radius: 999px;
        background: #E65C95;
        color: #fff;
        font-size: 10px;
        font-weight: 700;
        line-height: 18px;
        text-align: center;
        box-shadow: 0 0 0 2px #fff;
        pointer-events: none;
    }
    /* Drawer rows are wider so anchor the badge to the right side of
       the icon rather than the row. */
    .snifffr-nav-items .snifffr-nav-badge {
        position: static;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        margin-left: 8px;
        box-shadow: none;
    }
}

/* ============================================================
 * snifffr — mobile slide-in nav drawer
 * Replaces the responsive_menu_pro plugin on mobile.
 * ============================================================ */

/* Force the hidden attribute to win over our own display rules. Without
 * this the drawer's `display: flex` defeats `hidden`, leaving it rendered
 * off-screen at translateX(-100%). The transformed region can spill into
 * the document's horizontal overflow on mobile and steal scroll/touch. */
.snifffr-nav-drawer[hidden],
.snifffr-nav-overlay[hidden] {
    display: none !important;
}

.snifffr-nav-toggle {
    display: none;
}

@media (max-width: 991.98px) {
    .snifffr-nav-toggle {
        display: inline-flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 5px;
        width: 44px;
        height: 44px;
        padding: 0;
        margin-left: auto;
        background: transparent;
        border: 0;
        border-radius: 8px;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }
    .snifffr-nav-toggle:focus-visible {
        outline: 2px solid #d63384;
        outline-offset: 2px;
    }
    .snifffr-nav-toggle-bar {
        display: block;
        width: 22px;
        height: 2px;
        background: #4e3c6e;
        border-radius: 2px;
        transition: transform 200ms ease, opacity 200ms ease;
    }
    body.snifffr-nav-is-open .snifffr-nav-toggle-bar:nth-child(1) {
        transform: translateY(7px) rotate(45deg);
    }
    body.snifffr-nav-is-open .snifffr-nav-toggle-bar:nth-child(2) {
        opacity: 0;
    }
    body.snifffr-nav-is-open .snifffr-nav-toggle-bar:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg);
    }
}

.snifffr-nav-overlay {
    position: fixed;
    inset: 0;
    background: rgba(20, 14, 36, 0.55);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    opacity: 0;
    transition: opacity 280ms ease;
    z-index: 9998;
}
.snifffr-nav-overlay.is-open {
    opacity: 1;
}

.snifffr-nav-drawer {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: min(85vw, 360px);
    background: #fff;
    box-shadow: 12px 0 40px rgba(20, 14, 36, 0.18);
    transform: translateX(-100%);
    transition: transform 280ms cubic-bezier(0.22, 0.61, 0.36, 1);
    z-index: 9999;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.snifffr-nav-drawer.is-open {
    transform: translateX(0);
}

.snifffr-nav-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px;
    border-bottom: 1px solid rgba(78, 60, 110, 0.10);
}
.snifffr-nav-brand img {
    height: 28px;
    width: auto;
    display: block;
}
.snifffr-nav-close {
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 50%;
    background: rgba(78, 60, 110, 0.06);
    color: #4e3c6e;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.snifffr-nav-close:hover,
.snifffr-nav-close:focus-visible {
    background: rgba(78, 60, 110, 0.12);
    outline: none;
}

.snifffr-nav-user {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 20px;
    border-bottom: 1px solid rgba(78, 60, 110, 0.08);
    color: #4e3c6e;
    text-decoration: none;
}
.snifffr-nav-user:hover {
    background: rgba(214, 51, 132, 0.04);
    text-decoration: none;
}
.snifffr-nav-user-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}
.snifffr-nav-user-name {
    flex: 1;
    font-weight: 600;
    font-size: 15px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.snifffr-nav-user-arrow {
    color: rgba(78, 60, 110, 0.4);
    font-size: 22px;
}

.snifffr-nav-list {
    flex: 1;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 8px 0;
}
.snifffr-nav-list ul,
.snifffr-nav-items {
    list-style: none;
    padding: 0;
    margin: 0;
}
.snifffr-nav-items > li > a,
.snifffr-nav-items > li > .nav-link {
    display: flex;
    align-items: center;
    padding: 14px 20px;
    color: #2e2143;
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
    border-bottom: 1px solid rgba(78, 60, 110, 0.05);
    transition: background 150ms ease, color 150ms ease;
}
.snifffr-nav-items > li > a:hover,
.snifffr-nav-items > li > a:focus,
.snifffr-nav-items > li.current-menu-item > a {
    background: rgba(214, 51, 132, 0.06);
    color: #d63384;
    text-decoration: none;
}
.snifffr-nav-items .sub-menu {
    list-style: none;
    padding: 0;
    margin: 0;
    background: rgba(78, 60, 110, 0.04);
    max-height: 0;
    overflow: hidden;
    transition: max-height 280ms ease;
}
.snifffr-nav-items > li.is-open > .sub-menu {
    max-height: 1200px;
}
.snifffr-nav-items .sub-menu > li > a {
    display: block;
    padding: 11px 20px 11px 36px;
    color: #4e3c6e;
    font-size: 14px;
    text-decoration: none;
    border-bottom: 1px solid rgba(78, 60, 110, 0.05);
}
.snifffr-nav-items .sub-menu > li > a:hover {
    background: rgba(214, 51, 132, 0.08);
    color: #d63384;
}

.snifffr-nav-items > li.has-children > a {
    /* Don't space-between — that distributes the icon, text node, and
       caret as 3 flex items and pushes the text into the middle. Keep
       icon+text flowing naturally from the left and let the caret use
       margin-left:auto to claim the right edge. */
    justify-content: flex-start;
}
.snifffr-nav-caret {
    display: inline-block;
    flex-shrink: 0;
    margin-left: auto;
    font-size: 22px;
    line-height: 1;
    color: rgba(78, 60, 110, 0.5);
    transform: rotate(90deg);
    transition: transform 200ms ease, color 200ms ease;
}
.snifffr-nav-items > li.is-open > a .snifffr-nav-caret {
    transform: rotate(-90deg);
    color: #d63384;
}

.snifffr-nav-empty {
    padding: 20px;
    color: rgba(78, 60, 110, 0.6);
    font-size: 13px;
    text-align: center;
}

.snifffr-nav-foot {
    padding: 16px 20px 20px;
    border-top: 1px solid rgba(78, 60, 110, 0.08);
}
.snifffr-nav-logout {
    display: block;
    text-align: center;
    padding: 12px 16px;
    color: #4e3c6e;
    font-weight: 600;
    font-size: 14px;
    border: 1px solid rgba(78, 60, 110, 0.18);
    border-radius: 999px;
    text-decoration: none;
}
.snifffr-nav-logout:hover {
    background: rgba(78, 60, 110, 0.06);
    color: #4e3c6e;
    text-decoration: none;
}
.snifffr-nav-foot--cta {
    display: flex;
    gap: 10px;
}
.snifffr-nav-cta-row {
    display: flex;
    gap: 10px;
    padding: 0 20px 16px;
    border-bottom: 1px solid rgba(78, 60, 110, 0.08);
    margin-bottom: 4px;
}
.snifffr-nav-head--minimal {
    justify-content: flex-end;
    border-bottom: 0;
    padding-bottom: 6px;
}
.snifffr-nav-foot--brand {
    display: flex;
    justify-content: center;
    padding: 14px 20px 18px;
}
.snifffr-nav-brand--bottom img {
    height: 24px;
    opacity: 0.7;
}
.snifffr-nav-cta {
    flex: 1;
    text-align: center;
    padding: 12px 16px;
    border-radius: 999px;
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
}
.snifffr-nav-cta--secondary {
    color: #4e3c6e;
    border: 1px solid rgba(78, 60, 110, 0.20);
    background: #fff;
}
.snifffr-nav-cta--secondary:hover {
    background: rgba(78, 60, 110, 0.06);
    color: #4e3c6e;
    text-decoration: none;
}
.snifffr-nav-cta--primary {
    background: #d63384;
    color: #fff;
    border: 1px solid #d63384;
}
.snifffr-nav-cta--primary:hover {
    background: #b91d6e;
    border-color: #b91d6e;
    color: #fff;
    text-decoration: none;
}

@media (min-width: 992px) {
    .snifffr-nav-drawer,
    .snifffr-nav-overlay {
        display: none !important;
    }
}

/* ── Activity feed inline comment composer ────────────────────────
   BP's stock .ac-form renders with a default 1px black textarea
   border + a bare submit + a plain anchor for Cancel — looks like a
   browser dialog dropped into the card. Restyle for the mobile feed:
   soft lavender wrapper, rounded textarea with focus ring, pink pill
   for Post, ghost lavender pill for Cancel, tighter avatar block. */
@media (max-width: 991.98px) {
    body.activity .activity-comments {
        margin-top: 12px;
    }
    /* Chrome rules apply whether the form is hidden or shown — they're
       inert until BP's reply button click toggles visibility.        */
    body.activity .activity-comments .ac-form {
        margin-top: 10px !important;
        padding: 12px !important;
        background: #FAF8FD !important;
        border: 1px solid rgba(78, 60, 110, 0.10) !important;
        border-radius: 14px !important;
        gap: 10px !important;
        align-items: flex-start !important;
    }
    /* BP renders the form with style="display: none" via
       bp_activity_comment_form_nojs_display() and jQuery toggles it to
       display: block when the .acomment-reply button is clicked. Only
       apply our flex layout when the form is in the shown state — that
       way the form stays hidden until the user clicks Reply.          */
    body.activity .activity-comments .ac-form[style*="display: block"],
    body.activity .activity-comments .ac-form[style*="display:block"] {
        display: flex !important;
    }
    body.activity .activity-comments .ac-form .ac-reply-avatar {
        flex: 0 0 auto !important;
        margin: 0 !important;
    }
    body.activity .activity-comments .ac-form .ac-reply-avatar img {
        width: 32px !important;
        height: 32px !important;
        border-radius: 50% !important;
        display: block !important;
    }
    body.activity .activity-comments .ac-form .ac-reply-content {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        margin: 0 !important;
    }
    body.activity .activity-comments .ac-form .ac-textarea {
        background: transparent !important;
        border: 0 !important;
        padding: 0 !important;
        margin-bottom: 10px !important;
    }
    body.activity .activity-comments .ac-form textarea.ac-input {
        width: 100% !important;
        min-height: 64px !important;
        padding: 10px 12px !important;
        background: #fff !important;
        border: 1px solid rgba(78, 60, 110, 0.15) !important;
        border-radius: 10px !important;
        font-size: 14px !important;
        line-height: 1.4 !important;
        color: #423E59 !important;
        box-shadow: none !important;
        outline: none !important;
        resize: vertical !important;
        font-family: inherit !important;
    }
    body.activity .activity-comments .ac-form textarea.ac-input::placeholder {
        color: rgba(78, 60, 110, 0.45) !important;
    }
    body.activity .activity-comments .ac-form textarea.ac-input:focus {
        border-color: #E65C95 !important;
        background: #fff !important;
    }
    body.activity .activity-comments .ac-form input[type="submit"][name="ac_form_submit"],
    body.activity .activity-comments .ac-form input[type="submit"][name="ac_form_submit"]:hover,
    body.activity .activity-comments .ac-form input[type="submit"][name="ac_form_submit"]:focus,
    body.activity .activity-comments .ac-form input[type="submit"][name="ac_form_submit"]:active {
        display: inline-block !important;
        padding: 8px 18px !important;
        border: 0 !important;
        border-radius: 999px !important;
        background: #E65C95 !important;
        color: #fff !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        line-height: 1.2 !important;
        text-transform: none !important;
        letter-spacing: 0 !important;
        box-shadow: none !important;
        outline: none !important;
        cursor: pointer !important;
    }
    body.activity .activity-comments .ac-form .ac-reply-cancel,
    body.activity .activity-comments .ac-form .ac-reply-cancel:hover,
    body.activity .activity-comments .ac-form .ac-reply-cancel:focus,
    body.activity .activity-comments .ac-form .ac-reply-cancel:active {
        display: inline-block !important;
        margin-left: 8px !important;
        padding: 8px 14px !important;
        border-radius: 999px !important;
        background: #ECEAF2 !important;
        color: #423E59 !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        line-height: 1.2 !important;
        text-decoration: none !important;
    }
    /* Existing replies (rendered by buddypress/activity/comment.php) — softer
       chrome than BP's default flat list. The actual items are
       <li id="acomment-{id}">, NOT a `.activity-comment` class (BP doesn't
       emit that), so target by the id prefix. Layout is flex: avatar on the
       left column, meta + content + options stacked in the right column.   */
    body.activity .activity-comments > ul,
    body.activity .activity-comments ul.activity-list {
        list-style: none !important;
        padding: 0 !important;
        margin: 8px 0 0 !important;
    }
    body.activity .activity-comments li[id^="acomment-"] {
        margin: 8px 0 !important;
        padding: 10px 12px !important;
        background: #fff !important;
        border: 1px solid rgba(78, 60, 110, 0.08) !important;
        border-radius: 12px !important;
        display: grid !important;
        grid-template-columns: 32px 1fr !important;
        grid-template-areas:
            "avatar meta"
            "avatar content"
            "avatar options" !important;
        column-gap: 10px !important;
        row-gap: 4px !important;
        text-align: left !important;
        list-style: none !important;
    }
    body.activity .activity-comments li[id^="acomment-"] .acomment-avatar {
        grid-area: avatar !important;
        margin: 0 !important;
        padding: 0 !important;
        float: none !important;
        width: 32px !important;
        height: 32px !important;
        display: block !important;
    }
    body.activity .activity-comments li[id^="acomment-"] .acomment-avatar a {
        display: block !important;
        width: 32px !important;
        height: 32px !important;
    }
    body.activity .activity-comments li[id^="acomment-"] .acomment-avatar img {
        width: 32px !important;
        height: 32px !important;
        border-radius: 50% !important;
        border: 0 !important;
        object-fit: cover !important;
        display: block !important;
    }
    body.activity .activity-comments li[id^="acomment-"] .acomment-meta {
        grid-area: meta !important;
        margin: 0 !important;
        padding: 0 !important;
        font-size: 12px !important;
        line-height: 1.35 !important;
        color: rgba(78, 60, 110, 0.65) !important;
        text-align: left !important;
    }
    body.activity .activity-comments li[id^="acomment-"] .acomment-meta a {
        color: #E65C95 !important;
        font-weight: 600 !important;
        text-decoration: none !important;
    }
    body.activity .activity-comments li[id^="acomment-"] .acomment-meta .activity-time-since,
    body.activity .activity-comments li[id^="acomment-"] .acomment-meta .time-since {
        color: rgba(78, 60, 110, 0.55) !important;
        font-weight: 400 !important;
    }
    body.activity .activity-comments li[id^="acomment-"] .acomment-content {
        grid-area: content !important;
        margin: 0 !important;
        padding: 0 !important;
        font-size: 14px !important;
        line-height: 1.4 !important;
        color: #423E59 !important;
        text-align: left !important;
        word-break: break-word !important;
    }
    body.activity .activity-comments li[id^="acomment-"] .acomment-content p {
        margin: 0 !important;
    }
    body.activity .activity-comments li[id^="acomment-"] .acomment-options {
        grid-area: options !important;
        margin: 0 !important;
        padding: 0 !important;
        text-align: left !important;
    }
    body.activity .activity-comments li[id^="acomment-"] .acomment-options a {
        display: inline-block !important;
        font-size: 12px !important;
        font-weight: 600 !important;
        color: #E65C95 !important;
        text-decoration: none !important;
        margin-right: 12px !important;
    }
}

/* ── /activity/ page polish — applies to all roles (subscriber seller,
   premium seller, buyer) so the landing screen looks consistent.       */
@media (max-width: 991.98px) {
    /* 1) VIEW ALL pill: was dark navy via .btn.purple — flip to brand
       pink so it matches POST UPDATE and the rest of the page chrome. */
    body.activity a.btn.btn-primary.purple.wide,
    body.activity a.btn.btn-primary.purple.wide:hover,
    body.activity a.btn.btn-primary.purple.wide:focus,
    body.activity a.btn.btn-primary.purple.wide:active {
        background: #E65C95 !important;
        background-color: #E65C95 !important;
        border-color: #E65C95 !important;
        color: #fff !important;
        text-decoration: none !important;
    }

    /* 2) Tab toggle for Recently Active + Featured Sellers. Wraps both
       widgets so only one is visible at a time — JS toggles `is-active`
       on tab + pane and the hidden attribute on the inactive pane.    */
    body.activity .snifffr-feed-discover {
        margin: 14px 0 18px;
    }
    body.activity .snifffr-feed-tabs {
        display: flex;
        gap: 6px;
        padding: 4px;
        margin-bottom: 12px;
        background: #ECEAF2;
        border-radius: 999px;
    }
    body.activity .snifffr-feed-tab,
    body.activity .snifffr-feed-tab:hover,
    body.activity .snifffr-feed-tab:focus,
    body.activity .snifffr-feed-tab:active {
        flex: 1 1 0;
        padding: 8px 12px;
        background: transparent;
        border: 0;
        border-radius: 999px;
        font-size: 13px;
        font-weight: 600;
        color: rgba(78, 60, 110, 0.65);
        line-height: 1.2;
        cursor: pointer;
        outline: none;
        box-shadow: none;
        transition: background 0.15s, color 0.15s, box-shadow 0.15s;
    }
    body.activity .snifffr-feed-tab.is-active {
        background: #fff;
        color: #423E59;
        box-shadow: 0 1px 3px rgba(66, 62, 89, 0.10);
    }
    body.activity .snifffr-feed-pane[hidden] {
        display: none !important;
    }
    body.activity .snifffr-feed-pane-hint {
        margin: 0 0 8px;
        font-size: 12px;
        text-align: center;
        color: rgba(78, 60, 110, 0.65);
    }
    /* The wrapper supplies the outer chrome — drop the per-widget cards
       so we don't get double-stacked boxes. Wrap-level shadow / radius
       comes from the existing .buyers_widget_mobile / _feat rules; we
       only zero out the duplicated outer chrome inside the pane.      */
    body.activity .snifffr-feed-pane .buyers_widget_mobile,
    body.activity .snifffr-feed-pane .buyers_feat_widget_mobile {
        margin-top: 0 !important;
        margin-bottom: 12px !important;
    }
    /* Top featured-sellers card header is redundant with the tab name. */
    body.activity .snifffr-feed-pane .buyers_feat_widget_mobile > h4 {
        display: none !important;
    }
    /* VIEW ALL pill sits inside the Active pane — give it a top margin
       so it floats away from the avatar row.                          */
    body.activity .snifffr-feed-pane a.btn.btn-primary.purple.wide {
        margin-top: 8px;
    }

    /* 3) Composer collapsed behind a "+ Share an update" toggle so the
       /activity/ landing leads with discovery, not a text field that
       most buyers (and many sellers) ignore. The toggle expands the
       BP whats-new form in place; once expanded it doesn't re-collapse
       (matches the BP convention for the inline composer).            */
    body.activity .snifffr-act-composer {
        margin: 14px 0;
    }
    body.activity .snifffr-act-composer.is-collapsed #whats-new-form {
        display: none !important;
    }
    body.activity .snifffr-act-composer.is-expanded .snifffr-act-composer-toggle {
        display: none;
    }
    body.activity .snifffr-act-composer-toggle,
    body.activity .snifffr-act-composer-toggle:hover,
    body.activity .snifffr-act-composer-toggle:focus,
    body.activity .snifffr-act-composer-toggle:active {
        display: block;
        width: 100%;
        padding: 12px 14px;
        background: #FAF8FD;
        border: 1px solid rgba(78, 60, 110, 0.10);
        border-radius: 12px;
        color: rgba(78, 60, 110, 0.70);
        font-size: 14px;
        font-weight: 500;
        line-height: 1.2;
        text-align: left;
        cursor: pointer;
        outline: none;
        box-shadow: none;
        transition: background 0.15s;
    }
    body.activity .snifffr-act-composer-toggle:hover {
        background: #F3EFFA;
    }
}

/* Desktop: the "+ Share an update" toggle is only meaningful on the
   mobile redesign where the composer is collapsed by default. On
   desktop the composer is always visible, so the toggle button is
   dead UI — hide it. The mobile @media rule above flips it back to
   `display: block` at <= 991.98px.                                  */
.snifffr-act-composer-toggle {
    display: none;
}

/* ── Tokens hub — single deal view (/escrow/view/{id}/) ────────────
   The snifffr-escrow plugin renders this page with raw Bootstrap
   .form-group / .row / .col-md markup; the field values come through
   as `<input disabled class="form-control">` or `<textarea disabled>`
   which inherit Bootstrap's grey input chrome and look like editable
   form fields instead of an order summary. Restyle each row as a
   labelled receipt line, strip the disabled-input chrome, and pull
   it all together inside an outer soft card. Scoped to
   body.snifffr-mp-tokens (only set on /escrow/* paths via
   snifffr_mobile_body_classes) so this can't bleed into other forms
   that share the same Bootstrap classes. */
@media (max-width: 991.98px) {
    body.snifffr-mp-tokens .escrow-update,
    body.snifffr-mp-tokens form[action*="update_escrow_request"] {
        display: block;
        margin: 14px 0 18px;
    }
    body.snifffr-mp-tokens .form-group {
        display: block;
        margin: 0 0 10px;
        padding: 12px 14px;
        background: #fff;
        border: 1px solid rgba(78, 60, 110, 0.10);
        border-radius: 12px;
        box-shadow: 0 1px 2px rgba(66, 62, 89, 0.04);
    }
    body.snifffr-mp-tokens .form-group .row {
        display: flex !important;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        margin: 0;
        flex-wrap: nowrap;
    }
    body.snifffr-mp-tokens .form-group .col-md {
        flex: 1 1 auto;
        min-width: 0;
        padding: 0;
        width: auto;
        max-width: none;
    }
    body.snifffr-mp-tokens .form-group .col-md:first-child {
        flex: 0 0 auto;
        max-width: 50%;
    }
    body.snifffr-mp-tokens .form-group .col-md:last-child {
        text-align: right;
    }
    body.snifffr-mp-tokens .form-group label {
        display: block;
        margin: 0;
        font-size: 11px;
        font-weight: 600;
        color: rgba(78, 60, 110, 0.65);
        text-transform: uppercase;
        letter-spacing: 0.04em;
        line-height: 1.3;
    }
    /* Plain-text values in common-deal-view.php — wrap and right-align
       the text inside the second .col-md without needing markup
       changes.                                                       */
    body.snifffr-mp-tokens .form-group .col-md:last-child {
        font-size: 14px;
        font-weight: 600;
        color: #423E59;
        line-height: 1.35;
        word-break: break-word;
    }
    /* Strip the grey form-control chrome from the buyer-edit-form
       disabled inputs / textareas so they render as text values. The
       opacity:1 override is critical — browsers dim disabled inputs
       to 0.5–0.7 by default. Inputs from a date-picker, the order
       details textarea, and the agree checkboxes all flow through
       here.                                                           */
    body.snifffr-mp-tokens .form-group .form-control[disabled],
    body.snifffr-mp-tokens .form-group input[type="text"][disabled],
    body.snifffr-mp-tokens .form-group textarea[disabled] {
        width: 100% !important;
        min-height: 0 !important;
        height: auto !important;
        padding: 0 !important;
        margin: 0 !important;
        background: transparent !important;
        background-color: transparent !important;
        border: 0 !important;
        font-size: 14px !important;
        font-weight: 600 !important;
        line-height: 1.35 !important;
        color: #423E59 !important;
        text-align: right !important;
        box-shadow: none !important;
        outline: none !important;
        resize: none !important;
        cursor: default !important;
        opacity: 1 !important;
        -webkit-text-fill-color: #423E59 !important;
    }
    body.snifffr-mp-tokens .form-group textarea[disabled] {
        white-space: normal !important;
        overflow-wrap: anywhere !important;
        text-align: right !important;
    }
    /* Agree / TnC rows — checkboxes & radios keep their native look
       but pin to the right so labels read like the value rows above. */
    body.snifffr-mp-tokens .form-group .wbd_order_radio,
    body.snifffr-mp-tokens .form-group input[type="checkbox"][disabled],
    body.snifffr-mp-tokens .form-group input[type="radio"][disabled] {
        accent-color: #E65C95;
        margin: 0;
        cursor: default;
        opacity: 1 !important;
    }
    /* Section error spans should sit under the value, not inline with
       it. Keep them small and pink-tinted so they read as warnings.   */
    body.snifffr-mp-tokens .form-group .error {
        display: block;
        margin-top: 4px;
        font-size: 12px;
        color: #E65C95;
        font-weight: 500;
        text-align: right;
    }
}

/* ── MediaPress lightbox activity / comment area ───────────────────
   The gallery lightbox loads BP's post-form.php (top composer) and
   activity/entry.php (per-comment thread) into #mpp-media-activity-list.
   Scope here is the wrapper id — body class doesn't help because the
   lightbox is an AJAX overlay on whatever page launched it.        */
@media (max-width: 991.98px) {
    #mpp-media-activity-list {
        padding: 4px 0 12px;
    }
    /* Top composer (#whats-new-form) — strip BP's flat input look and
       match the inline .ac-form chrome we use elsewhere.            */
    #mpp-media-activity-list #whats-new-form {
        margin: 0 0 12px !important;
        padding: 12px !important;
        background: #FAF8FD !important;
        border: 1px solid rgba(78, 60, 110, 0.10) !important;
        border-radius: 14px !important;
        display: flex !important;
        gap: 10px !important;
        align-items: flex-start !important;
        box-shadow: none !important;
    }
    #mpp-media-activity-list #whats-new-avatar {
        flex: 0 0 auto !important;
        margin: 0 !important;
        float: none !important;
    }
    #mpp-media-activity-list #whats-new-avatar img {
        width: 32px !important;
        height: 32px !important;
        border-radius: 50% !important;
        display: block !important;
    }
    #mpp-media-activity-list #whats-new-content {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        margin: 0 !important;
    }
    #mpp-media-activity-list #whats-new-textarea {
        background: transparent !important;
        border: 0 !important;
        padding: 0 !important;
    }
    #mpp-media-activity-list textarea#whats-new {
        width: 100% !important;
        min-height: 64px !important;
        padding: 10px 12px !important;
        background: #fff !important;
        border: 1px solid rgba(78, 60, 110, 0.15) !important;
        border-radius: 10px !important;
        font-size: 14px !important;
        line-height: 1.4 !important;
        color: #423E59 !important;
        box-shadow: none !important;
        outline: none !important;
        font-family: inherit !important;
    }
    #mpp-media-activity-list textarea#whats-new:focus {
        border-color: #E65C95 !important;
    }
    #mpp-media-activity-list #whats-new-options {
        margin-top: 8px !important;
        padding: 0 !important;
    }
    #mpp-media-activity-list #whats-new-submit input[type="submit"],
    #mpp-media-activity-list #aw-whats-new-submit {
        display: inline-block !important;
        padding: 8px 18px !important;
        background: #E65C95 !important;
        color: #fff !important;
        border: 0 !important;
        border-radius: 999px !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        line-height: 1.2 !important;
        cursor: pointer !important;
        box-shadow: none !important;
    }
    /* Activity list inside the lightbox — each comment item gets a
       soft white card chrome. Avatars trimmed, name pink, body in
       purple, timestamp small grey. Mirrors the .activity-comments
       restyle for the regular feed.                                 */
    #mpp-media-activity-list .mpp-activity-list,
    #mpp-media-activity-list ul.mpp-activity-list {
        list-style: none !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    #mpp-media-activity-list .mpp-activity-list > li,
    #mpp-media-activity-list .activity-item {
        margin: 8px 0 !important;
        padding: 12px !important;
        background: #fff !important;
        border: 1px solid rgba(78, 60, 110, 0.10) !important;
        border-radius: 12px !important;
    }
    #mpp-media-activity-list .activity-header,
    #mpp-media-activity-list .activity-avatar {
        margin-bottom: 6px !important;
    }
    #mpp-media-activity-list .activity-avatar img {
        width: 32px !important;
        height: 32px !important;
        border-radius: 50% !important;
    }
    #mpp-media-activity-list .activity-header a {
        color: #E65C95 !important;
        font-weight: 600 !important;
        text-decoration: none !important;
    }
    #mpp-media-activity-list .activity-header .time-since,
    #mpp-media-activity-list .activity-header .activity-time-since {
        display: block;
        font-size: 12px !important;
        color: rgba(78, 60, 110, 0.65) !important;
    }
    #mpp-media-activity-list .activity-content .activity-inner {
        font-size: 14px;
        color: #423E59;
        line-height: 1.4;
    }
    /* Comment reply thread inside each activity item — match the
       inline .ac-form/.activity-comments restyle.                    */
    #mpp-media-activity-list .activity-comments {
        margin-top: 10px;
    }
    #mpp-media-activity-list .activity-comment {
        margin: 6px 0 !important;
        padding: 10px 12px !important;
        background: #FAF8FD !important;
        border: 1px solid rgba(78, 60, 110, 0.08) !important;
        border-radius: 10px !important;
    }
    #mpp-media-activity-list .activity-comment .acomment-avatar img {
        width: 26px !important;
        height: 26px !important;
        border-radius: 50% !important;
    }
    #mpp-media-activity-list .activity-comment .acomment-meta a {
        color: #E65C95 !important;
        font-weight: 600 !important;
        text-decoration: none !important;
    }
    #mpp-media-activity-list .activity-comment .acomment-meta {
        font-size: 12px !important;
        color: rgba(78, 60, 110, 0.65) !important;
    }
    #mpp-media-activity-list .activity-comment .acomment-content {
        font-size: 14px !important;
        color: #423E59 !important;
        margin-top: 4px !important;
    }
    #mpp-media-activity-list .activity-comment .acomment-options a {
        font-size: 12px !important;
        color: #E65C95 !important;
        margin-right: 10px !important;
        text-decoration: none !important;
    }
}