/* BPP_PROJECTS_MOBILE_PREMIUM_CARD_V3812_START */
@media (max-width: 767.98px) {
    :root {
        --bpp-proj-card-green: var(--primary-color, #079447);
        --bpp-proj-card-deep: #0b3428;
        --bpp-proj-card-muted: #70857b;
        --bpp-proj-card-line: #e3ede8;
        --bpp-proj-card-soft: #f2faf5;
    }

    /* ---------------------------------------------------------
       RESULTS / OUTER SPACING
       --------------------------------------------------------- */
    html body .bppp2 .bppp2-results,
    html body .bppp2 .bppp2-results-inner {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

    html body .bppp2 .bppp2-results-inner {
        padding-top: 8px !important;
        padding-bottom: 8px !important;
    }

    html body .bppp2 .bppp2-results .bppp2-results-inner > .bppp2-grid {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 10px !important;
        row-gap: 10px !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    /* ---------------------------------------------------------
       CARD SHELL
       --------------------------------------------------------- */
    html body .bppp2 .bppp2-grid > .bppp2-card {
        position: relative !important;
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        overflow: hidden !important;
        border: 1px solid #dce9e3 !important;
        border-radius: 18px !important;
        background: #fff !important;
        box-shadow: 0 5px 18px rgba(11, 52, 40, .07) !important;
    }

    /* ---------------------------------------------------------
       MEDIA — SHORTER / PREMIUM
       --------------------------------------------------------- */
    html body .bppp2 .bppp2-card__media {
        position: relative !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        aspect-ratio: 16 / 9 !important;
        overflow: hidden !important;
        border-radius: 0 !important;
        background: #edf3f0 !important;
    }

    html body .bppp2 .bppp2-card__media > img,
    html body .bppp2 .bppp2-card__image,
    html body .bppp2 .bppp2-card__image > img {
        width: 100% !important;
        height: 100% !important;
        min-height: 100% !important;
    }

    html body .bppp2 .bppp2-card__media > img,
    html body .bppp2 .bppp2-card__image > img {
        display: block !important;
        object-fit: cover !important;
        object-position: center !important;
    }

    html body .bppp2 .bppp2-card__image {
        position: absolute !important;
        inset: 0 !important;
        z-index: 1 !important;
    }

    /* Featured badge */
    html body .bppp2 .bppp2-card__badges {
        position: absolute !important;
        z-index: 4 !important;
        top: 12px !important;
        left: 12px !important;
        right: auto !important;
        bottom: auto !important;
        display: flex !important;
        align-items: center !important;
        gap: 6px !important;
        margin: 0 !important;
    }

    html body .bppp2 .bppp2-featured {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-height: 32px !important;
        padding: 7px 13px !important;
        border-radius: 999px !important;
        background: #08a957 !important;
        color: #fff !important;
        font-size: 12px !important;
        line-height: 16px !important;
        font-weight: 800 !important;
        letter-spacing: .01em !important;
        box-shadow: 0 4px 12px rgba(0, 121, 65, .16) !important;
    }

    /* Category badge — quieter than Featured */
    html body .bppp2 .bppp2-category {
        position: absolute !important;
        z-index: 4 !important;
        left: 12px !important;
        bottom: 12px !important;
        top: auto !important;
        right: auto !important;
        display: inline-flex !important;
        align-items: center !important;
        max-width: 50% !important;
        min-height: 27px !important;
        padding: 5px 10px !important;
        border: 1px solid rgba(255,255,255,.68) !important;
        border-radius: 999px !important;
        background: rgba(255,255,255,.90) !important;
        color: #17613e !important;
        font-size: 10px !important;
        line-height: 15px !important;
        font-weight: 800 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        backdrop-filter: blur(8px) !important;
    }

    /* Wishlist */
    html body .bppp2 .bppp2-wishlist {
        position: absolute !important;
        z-index: 5 !important;
        top: 11px !important;
        right: 11px !important;
        left: auto !important;
        bottom: auto !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
        min-height: 38px !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 50% !important;
        background: rgba(255,255,255,.95) !important;
        color: var(--bpp-proj-card-green) !important;
        box-shadow: 0 4px 13px rgba(0,0,0,.12) !important;
        backdrop-filter: blur(8px) !important;
    }

    html body .bppp2 .bppp2-wishlist svg {
        width: 18px !important;
        height: 18px !important;
    }

    /* ---------------------------------------------------------
       BODY — REORDER TO APPROVED MOBILE HIERARCHY
       --------------------------------------------------------- */
    html body .bppp2 .bppp2-card__body {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0 !important;
        min-width: 0 !important;
        padding: 12px 13px 12px !important;
        background: #fff !important;
    }

    /* Completion first */
    html body .bppp2 .bppp2-progress {
        order: 1 !important;
        display: grid !important;
        grid-template-columns: 30px auto minmax(0, 1fr) !important;
        align-items: center !important;
        column-gap: 7px !important;
        min-height: 36px !important;
        margin: 0 0 7px !important;
        padding: 0 0 7px !important;
        border-bottom: 1px solid var(--bpp-proj-card-line) !important;
    }

    html body .bppp2 .bppp2-progress__ring {
        width: 29px !important;
        height: 29px !important;
        min-width: 29px !important;
        min-height: 29px !important;
    }

    html body .bppp2 .bppp2-progress > strong {
        color: var(--bpp-proj-card-green) !important;
        font-size: 13px !important;
        line-height: 16px !important;
        font-weight: 900 !important;
        white-space: nowrap !important;
    }

    html body .bppp2 .bppp2-progress > small {
        color: #71857b !important;
        font-size: 11px !important;
        line-height: 15px !important;
        font-weight: 650 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    /* Title */
    html body .bppp2 .bppp2-card__title {
        order: 2 !important;
        display: -webkit-box !important;
        margin: 0 !important;
        padding: 0 !important;
        color: var(--bpp-proj-card-deep) !important;
        font-size: 19px !important;
        line-height: 1.18 !important;
        font-weight: 850 !important;
        letter-spacing: -.02em !important;
        text-decoration: none !important;
        -webkit-box-orient: vertical !important;
        -webkit-line-clamp: 2 !important;
        overflow: hidden !important;
    }

    /* Location */
    html body .bppp2 .bppp2-card__location {
        order: 3 !important;
        display: flex !important;
        align-items: center !important;
        gap: 6px !important;
        min-width: 0 !important;
        margin: 6px 0 0 !important;
        padding: 0 !important;
        color: var(--bpp-proj-card-muted) !important;
        font-size: 11.5px !important;
        line-height: 16px !important;
    }

    html body .bppp2 .bppp2-card__location svg {
        width: 16px !important;
        height: 16px !important;
        min-width: 16px !important;
        color: #628174 !important;
    }

    html body .bppp2 .bppp2-card__location span {
        min-width: 0 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    /*
     * Footer becomes transparent to flex layout, allowing price and View
     * to be placed independently in the approved hierarchy.
     */
    html body .bppp2 .bppp2-card__footer {
        display: contents !important;
    }

    /* Price directly below location */
    html body .bppp2 .bppp2-price {
        order: 4 !important;
        display: block !important;
        margin: 8px 0 0 !important;
        padding: 8px 0 7px !important;
        border-top: 1px solid var(--bpp-proj-card-line) !important;
        border-bottom: 1px solid var(--bpp-proj-card-line) !important;
        text-align: left !important;
    }

    html body .bppp2 .bppp2-price > small {
        display: none !important;
    }

    html body .bppp2 .bppp2-price > strong {
        display: block !important;
        color: var(--bpp-proj-card-green) !important;
        font-size: 17px !important;
        line-height: 1.22 !important;
        font-weight: 900 !important;
        letter-spacing: -.01em !important;
        overflow-wrap: anywhere !important;
    }

    /* Four project metrics in one compact row */
    html body .bppp2 .bppp2-card__metrics {
        order: 5 !important;
        display: grid !important;
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        align-items: stretch !important;
        gap: 0 !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 8px 0 !important;
        border-bottom: 1px solid var(--bpp-proj-card-line) !important;
    }

    html body .bppp2 .bppp2-card__metrics > div {
        display: grid !important;
        grid-template-columns: 18px minmax(0, 1fr) !important;
        align-items: center !important;
        gap: 4px !important;
        min-width: 0 !important;
        min-height: 38px !important;
        padding: 0 6px !important;
        border-right: 1px solid #e4ece8 !important;
    }

    html body .bppp2 .bppp2-card__metrics > div:first-child {
        padding-left: 0 !important;
    }

    html body .bppp2 .bppp2-card__metrics > div:last-child {
        padding-right: 0 !important;
        border-right: 0 !important;
    }

    html body .bppp2 .bppp2-card__metrics svg {
        width: 17px !important;
        height: 17px !important;
        color: #5e7a6f !important;
    }

    html body .bppp2 .bppp2-card__metrics > div > span {
        display: flex !important;
        flex-direction: column !important;
        min-width: 0 !important;
        gap: 0 !important;
    }

    html body .bppp2 .bppp2-card__metrics strong {
        color: #173b2f !important;
        font-size: 11.5px !important;
        line-height: 14px !important;
        font-weight: 850 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    html body .bppp2 .bppp2-card__metrics small {
        color: #819087 !important;
        font-size: 8.5px !important;
        line-height: 11px !important;
        font-weight: 650 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    /* Developer identity */
    html body .bppp2 .bpp-project-developer-v4685 {
        order: 6 !important;
        display: grid !important;
        grid-template-columns: 42px minmax(0, 1fr) !important;
        align-items: center !important;
        gap: 9px !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 9px 0 8px !important;
        border: 0 !important;
        border-bottom: 1px solid var(--bpp-proj-card-line) !important;
        background: transparent !important;
    }

    html body .bppp2 .bpp-project-developer-v4685__logo {
        display: block !important;
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        overflow: hidden !important;
        border: 1px solid #dbe8e2 !important;
        border-radius: 50% !important;
        background: #f3f8f5 !important;
    }

    html body .bppp2 .bpp-project-developer-v4685__logo img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        border-radius: 50% !important;
    }

    html body .bppp2 .bpp-project-developer-v4685__copy {
        display: flex !important;
        flex-direction: column !important;
        min-width: 0 !important;
        gap: 2px !important;
    }

    html body .bppp2 .bpp-project-developer-v4685__role {
        color: #839188 !important;
        font-size: 8.5px !important;
        line-height: 11px !important;
        font-weight: 800 !important;
        letter-spacing: .06em !important;
        text-transform: uppercase !important;
    }

    html body .bppp2 .bpp-project-developer-v4685__name {
        color: var(--bpp-proj-card-deep) !important;
        font-size: 12.5px !important;
        line-height: 16px !important;
        font-weight: 850 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    /* Primary CTA */
    html body .bppp2 .bppp2-view-project {
        order: 7 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 7px !important;
        width: 100% !important;
        min-height: 42px !important;
        margin: 9px 0 0 !important;
        padding: 9px 12px !important;
        border: 0 !important;
        border-radius: 11px !important;
        background: linear-gradient(135deg, #087a50 0%, #075e46 100%) !important;
        color: #fff !important;
        font-size: 12px !important;
        line-height: 16px !important;
        font-weight: 850 !important;
        text-decoration: none !important;
        box-shadow: 0 6px 15px rgba(5, 94, 70, .14) !important;
    }

    html body .bppp2 .bppp2-view-project svg {
        width: 16px !important;
        height: 16px !important;
    }

    /* Prevent old mobile polish from restoring large spacing. */
    html body .bppp2 .bppp2-card__body > *:first-child {
        margin-top: 0 !important;
    }

    html body .bppp2 .bppp2-card__body > *:last-child {
        margin-bottom: 0 !important;
    }
}

@media (max-width: 420px) {
    html body .bppp2 .bppp2-card__body {
        padding: 11px 11px 10px !important;
    }

    html body .bppp2 .bppp2-card__title {
        font-size: 18px !important;
    }

    html body .bppp2 .bppp2-price > strong {
        font-size: 16px !important;
    }

    html body .bppp2 .bppp2-card__metrics > div {
        grid-template-columns: 16px minmax(0, 1fr) !important;
        gap: 3px !important;
        padding: 0 4px !important;
    }

    html body .bppp2 .bppp2-card__metrics svg {
        width: 15px !important;
        height: 15px !important;
    }

    html body .bppp2 .bppp2-card__metrics strong {
        font-size: 10.5px !important;
    }

    html body .bppp2 .bppp2-card__metrics small {
        font-size: 8px !important;
    }
}
/* BPP_PROJECTS_MOBILE_PREMIUM_CARD_V3812_END */