/* ==========================================================
   NEXORA PROFILE / MY ACCOUNT
   PREMIUM POLISHED RESPONSIVE LAYOUT
   NO COLOUR CHANGES
   ========================================================== */


/* ==========================================================
   GLOBAL
   ========================================================== */

html{
    scroll-behavior:smooth;
}

body{
    min-height:100vh;
    overflow-x:hidden;

    padding-bottom:104px !important;
}

img{
    max-width:100%;
}


/* ==========================================================
   COVER ADVERTISEMENT
   KEEP ORIGINAL AD ARTWORK COMPLETE
   ========================================================== */

body #coverBanner.cover-banner{
    position:relative !important;

    width:100% !important;
    height:auto !important;

    aspect-ratio:14 / 5 !important;

    margin:0 !important;
    padding:0 !important;

    overflow:hidden !important;

    border-radius:
        0
        0
        20px
        20px !important;

    box-shadow:none !important;
}

body #coverBannerImage{
    position:absolute !important;

    inset:0 !important;

    width:100% !important;
    height:100% !important;

    object-fit:contain !important;
    object-position:center !important;

    display:block !important;

    transform:none !important;
}

body #coverBanner .cover-overlay{
    display:none !important;
}

body #coverBanner .cover-content{
    position:absolute !important;

    inset:0 !important;

    z-index:5;

    pointer-events:none;
}

body #coverBanner #coverButton{
    position:absolute;

    right:16px;
    bottom:14px;

    width:auto !important;

    min-height:38px !important;

    display:inline-flex !important;

    align-items:center;
    justify-content:center;

    margin:0 !important;

    padding:
        0
        13px !important;

    border-radius:10px !important;

    font-size:10px !important;

    line-height:1 !important;

    white-space:nowrap;

    pointer-events:auto !important;

    box-shadow:none !important;
}


/* ==========================================================
   PROFILE WRAPPER
   ========================================================== */

body .profile-wrapper{
    position:relative;

    width:min(calc(100% - 28px),980px) !important;

    margin:
        -44px
        auto
        0 !important;

    padding:0 !important;

    z-index:10;
}


/* ==========================================================
   PROFILE CARD
   ========================================================== */

body .profile-card{
    position:relative;

    width:100%;

    padding:
        28px
        24px
        24px !important;

    border-radius:20px !important;

    overflow:visible !important;

    text-align:center;

    box-shadow:none !important;
}


/* ==========================================================
   AVATAR
   ========================================================== */

body .profile-card .avatar{
    position:relative !important;

    width:116px !important;
    height:116px !important;

    margin:
        -70px
        auto
        0 !important;

    display:flex;

    align-items:center;
    justify-content:center;

    overflow:hidden !important;

    border-radius:50% !important;

    z-index:5;
}

body .profile-card .avatar img{
    width:100% !important;
    height:100% !important;

    object-fit:cover !important;

    border-radius:50% !important;

    display:block;
}


/* ==========================================================
   PROFILE CONTROLS
   ========================================================== */

body .profile-actions{
    width:100%;

    display:flex !important;

    flex-wrap:wrap;

    align-items:center;
    justify-content:center;

    gap:8px !important;

    margin:
        18px
        0
        18px !important;
}

body .profile-actions button{
    flex:
        0
        1
        auto !important;

    width:auto !important;
    max-width:none !important;

    min-height:40px !important;
    height:auto !important;

    margin:0 !important;

    padding:
        0
        13px !important;

    border-radius:10px !important;

    font-size:10px !important;
    font-weight:700;

    line-height:1.2 !important;

    white-space:nowrap;

    box-shadow:none !important;

    transition:
        transform .18s ease,
        opacity .18s ease;
}

body .profile-actions button:active{
    transform:scale(.97);
}


/* ==========================================================
   PROFILE NAME
   ========================================================== */

body .user-name{
    max-width:720px;

    margin:
        4px
        auto
        0 !important;

    font-size:
        clamp(30px,5vw,46px) !important;

    line-height:1 !important;

    letter-spacing:-1.3px;

    overflow-wrap:anywhere;
}


/* ==========================================================
   VERIFICATION
   ========================================================== */

body .verification-badge{
    margin-top:9px !important;

    font-size:11px !important;

    line-height:1.5;
}


/* ==========================================================
   SELLER LEVEL
   ========================================================== */

body .seller-level{
    min-height:30px;

    display:inline-flex !important;

    align-items:center;
    justify-content:center;

    margin-top:12px !important;

    padding:
        0
        11px !important;

    border-radius:999px !important;

    font-size:9px !important;

    letter-spacing:.4px;
}


/* ==========================================================
   SELLER RATING
   ========================================================== */

body .seller-rating{
    margin-top:10px !important;

    font-size:15px !important;

    line-height:1.25;
}


/* ==========================================================
   BIO CARD
   ========================================================== */

body .bio-card{
    width:100%;

    margin-top:16px !important;

    padding:
        15px
        16px !important;

    border-radius:14px !important;

    text-align:left;

    box-shadow:none !important;

    transition:
        transform .18s ease,
        border-color .18s ease;
}

body .bio-card:hover{
    transform:translateY(-1px);
}

body #bioText{
    min-height:0 !important;

    font-size:12px !important;

    line-height:1.7 !important;
}


/* ==========================================================
   PRIMARY STATS
   ========================================================== */

body .primary-stats{
    width:min(calc(100% - 28px),980px) !important;

    display:grid !important;

    grid-template-columns:
        repeat(2,minmax(0,1fr)) !important;

    gap:10px !important;

    margin:
        14px
        auto
        0 !important;

    padding:0 !important;
}

body .stat-card{
    min-width:0;

    min-height:90px;

    display:flex;

    flex-direction:column;

    align-items:center;
    justify-content:center;

    padding:
        14px
        12px !important;

    border-radius:14px !important;

    box-shadow:none !important;

    transition:
        transform .18s ease,
        border-color .18s ease;
}

body .stat-card:hover{
    transform:translateY(-2px);
}

body .stat-number{
    font-size:
        clamp(22px,4vw,28px) !important;

    line-height:1.05;
}

body .stat-label{
    margin-top:5px !important;

    font-size:9px !important;

    line-height:1.35;
}

body .wallet-link{
    width:100%;

    display:block;

    text-align:center;

    text-decoration:none;
}


/* ==========================================================
   SOCIAL STATS
   ========================================================== */

body .social-stats{
    width:min(calc(100% - 28px),980px) !important;

    display:grid !important;

    grid-template-columns:
        repeat(2,minmax(0,1fr)) !important;

    gap:10px !important;

    margin:
        10px
        auto
        0 !important;

    padding:0 !important;
}

body .social-card{
    min-width:0;

    min-height:88px;

    display:flex;

    flex-direction:column;

    align-items:center;
    justify-content:center;

    padding:
        13px
        11px !important;

    border-radius:14px !important;

    box-shadow:none !important;
}

body .social-card-number{
    font-size:22px !important;

    line-height:1.05;
}

body .social-card-label{
    margin-top:5px !important;

    font-size:9px !important;
}


/* ==========================================================
   ANALYTICS
   ========================================================== */

body .analytics-section{
    width:min(calc(100% - 28px),980px) !important;

    margin:
        10px
        auto
        0 !important;

    padding:0 !important;
}

body .analytics-grid{
    display:grid !important;

    grid-template-columns:
        repeat(2,minmax(0,1fr)) !important;

    gap:10px !important;
}

body .analytics-card{
    min-width:0;

    min-height:88px;

    display:flex;

    flex-direction:column;
    justify-content:center;

    padding:
        13px
        12px !important;

    border-radius:14px !important;

    box-shadow:none !important;
}

body .analytics-value{
    font-size:21px !important;

    line-height:1.1;
}

body .analytics-label{
    margin-top:5px !important;

    font-size:9px !important;

    line-height:1.4;
}


/* ==========================================================
   SECTION TITLES
   ========================================================== */

body .section-title{
    width:min(calc(100% - 28px),980px);

    margin:
        22px
        auto
        12px !important;

    padding:0 !important;

    font-size:
        clamp(20px,3vw,25px) !important;

    line-height:1.2;

    letter-spacing:-.3px;
}


/* ==========================================================
   DASHBOARD MENU
   ========================================================== */

body .menu{
    width:min(calc(100% - 28px),980px) !important;

    display:grid !important;

    grid-template-columns:1fr;

    gap:9px !important;

    margin:
        18px
        auto
        0 !important;

    padding:0 !important;
}


/* ==========================================================
   MENU CARDS
   ========================================================== */

body .menu .menu-item{
    width:100%;

    min-width:0;

    min-height:76px;

    display:flex !important;

    align-items:center !important;
    justify-content:space-between !important;

    gap:12px;

    margin:0 !important;

    padding:
        12px
        14px !important;

    border-radius:14px !important;

    overflow:hidden;

    box-shadow:none !important;

    text-decoration:none;

    transition:
        transform .18s ease,
        border-color .18s ease;
}

body .menu .menu-item:hover{
    transform:translateY(-2px);
}


/* ==========================================================
   MENU LEFT
   ========================================================== */

body .menu-left{
    min-width:0;

    display:flex !important;

    align-items:center !important;

    gap:11px !important;
}


/* ==========================================================
   MENU ICON
   ========================================================== */

body .menu-icon{
    width:42px !important;
    height:42px !important;

    flex:
        0
        0
        42px;

    display:flex !important;

    align-items:center;
    justify-content:center;

    border-radius:10px !important;

    font-size:17px !important;
}


/* ==========================================================
   MENU TEXT
   ========================================================== */

body .menu-left > div:last-child{
    min-width:0;
}

body .menu-title{
    font-size:12px !important;

    line-height:1.3 !important;

    overflow-wrap:anywhere;
}

body .menu-subtitle{
    margin-top:3px !important;

    font-size:9px !important;

    line-height:1.45 !important;

    overflow-wrap:anywhere;
}


/* ==========================================================
   MENU ARROW
   ========================================================== */

body .menu-arrow{
    width:30px !important;
    height:30px !important;

    flex:
        0
        0
        30px;

    display:flex !important;

    align-items:center;
    justify-content:center;

    border-radius:8px !important;

    font-size:13px !important;

    box-shadow:none !important;

    transition:transform .18s ease;
}

body .menu-item:hover .menu-arrow{
    transform:translateX(2px);
}


/* ==========================================================
   SPECIAL MENU CARDS
   ========================================================== */

body .menu .verify-card,
body .menu .special-card,
body .menu .future-card,
body .menu .bulletin-card{
    border-radius:14px !important;

    overflow:hidden !important;

    box-shadow:none !important;
}


/* ==========================================================
   PREMIUM PRODUCTS SECTION
   ========================================================== */

body .products-section{
    width:min(calc(100% - 28px),980px) !important;

    margin:
        22px
        auto
        0 !important;

    padding:
        0
        0
        24px !important;
}


/* ==========================================================
   PRODUCT SECTION HEADER
   ========================================================== */

body .section-header{
    display:flex !important;

    align-items:center;
    justify-content:space-between;

    gap:12px;

    margin-bottom:12px !important;
}

body .section-header h2{
    font-size:
        clamp(20px,3vw,24px) !important;

    line-height:1.2;
}

body .section-header a{
    flex:0 0 auto;

    font-size:10px !important;

    text-decoration:none;
}


/* ==========================================================
   FEATURED PREMIUM PRODUCT
   ========================================================== */

body .premium-section{
    width:100%;

    margin-bottom:12px !important;

    border-radius:16px !important;

    overflow:hidden !important;

    box-shadow:none !important;
}

body #premiumLink{
    display:block;

    text-decoration:none !important;
}

body .premium-section img,
body #premiumImage{
    width:100% !important;

    height:auto !important;

    aspect-ratio:16 / 9 !important;

    object-fit:cover !important;

    display:block;

    border-radius:
        16px
        16px
        0
        0 !important;
}

body .premium-info{
    padding:
        14px !important;
}

body #premiumTitle{
    margin:
        0
        0
        5px !important;

    font-size:
        clamp(16px,3vw,20px) !important;

    line-height:1.35 !important;
}

body #premiumPrice{
    margin:0 !important;

    font-size:
        clamp(19px,4vw,24px) !important;

    line-height:1.1;
}


/* ==========================================================
   PREMIUM PRODUCT GRID
   ========================================================== */

body .premium-products-grid{
    display:grid !important;

    grid-template-columns:
        repeat(2,minmax(0,1fr)) !important;

    gap:9px !important;

    margin-top:10px !important;
}

body .premium-card{
    min-width:0;

    display:block;

    border-radius:13px !important;

    overflow:hidden !important;

    box-shadow:none !important;

    text-decoration:none;

    transition:
        transform .18s ease,
        border-color .18s ease;
}

body .premium-card:hover{
    transform:translateY(-2px);
}

body .premium-card-image{
    width:100% !important;

    height:auto !important;

    aspect-ratio:1 / 1 !important;

    object-fit:cover !important;

    display:block;
}

body .premium-card h4{
    min-height:43px;

    margin:0;

    padding:
        9px
        9px
        3px !important;

    font-size:10px !important;

    line-height:1.4 !important;
}

body .premium-card p{
    margin:0;

    padding:
        0
        9px
        10px !important;

    font-size:13px !important;
}


/* ==========================================================
   BIO MODAL
   ========================================================== */

body .bio-modal{
    padding:0;
}

body .bio-modal-content{
    width:min(100%,560px) !important;

    padding:
        22px
        18px
        calc(20px + env(safe-area-inset-bottom))
        !important;

    border-radius:
        18px
        18px
        0
        0 !important;

    overflow:hidden;
}

body .bio-modal-content h2{
    margin-bottom:13px !important;

    font-size:20px !important;
}

body #bioInput{
    width:100%;

    min-height:145px !important;

    padding:
        13px !important;

    border-radius:11px !important;

    font-size:12px !important;

    line-height:1.6;
}


/* ==========================================================
   BIO BUTTONS
   ========================================================== */

body .bio-buttons{
    display:grid !important;

    gap:7px !important;
}

body .bio-buttons button{
    min-height:46px !important;
    height:auto !important;

    border-radius:10px !important;

    font-size:10px !important;
}


/* ==========================================================
   USERNAME MODAL
   ========================================================== */

body .username-modal{
    padding:14px !important;
}

body .username-modal-content{
    width:min(100%,440px) !important;

    padding:
        22px
        18px !important;

    border-radius:17px !important;

    overflow:hidden;
}

body .username-icon{
    width:56px !important;
    height:56px !important;

    margin:
        0
        auto
        12px !important;

    border-radius:50% !important;

    font-size:23px !important;
}

body .username-modal-content h2{
    margin-bottom:7px !important;

    font-size:20px !important;
}

body .username-modal-content p{
    margin-bottom:14px !important;

    font-size:11px !important;

    line-height:1.55 !important;
}

body #usernameInput{
    width:100%;

    min-height:50px;

    padding:
        0
        13px !important;

    border-radius:10px !important;

    font-size:12px !important;
}


/* ==========================================================
   USERNAME BUTTONS
   ========================================================== */

body .username-buttons{
    display:grid !important;

    grid-template-columns:
        repeat(2,minmax(0,1fr));

    gap:7px !important;

    margin-top:14px !important;
}

body .username-buttons button{
    min-height:46px !important;
    height:auto !important;

    border-radius:10px !important;

    font-size:10px !important;
}


/* ==========================================================
   SPIN MODAL
   ========================================================== */

body .spin-modal-content{
    width:min(calc(100% - 24px),500px) !important;

    padding:
        18px !important;

    border-radius:17px !important;
}


/* ==========================================================
   SUPPORT BUTTON
   ========================================================== */

body .support-fab{
    width:48px !important;
    height:48px !important;

    right:12px !important;
    bottom:78px !important;

    display:flex;

    align-items:center;
    justify-content:center;

    border-radius:50% !important;

    font-size:20px !important;
}


/* ==========================================================
   BOTTOM NAVIGATION
   ========================================================== */

body .bottom-nav{
    position:fixed;

    left:50% !important;
    right:auto !important;

    bottom:8px !important;

    width:min(calc(100% - 18px),560px) !important;

    height:60px !important;

    display:flex;

    align-items:center;
    justify-content:space-around;

    transform:translateX(-50%);

    padding:
        4px
        7px;

    border-radius:15px !important;

    overflow:hidden;
}

/* ==========================================================
   BOTTOM NAVIGATION
   ========================================================== */

body .bottom-nav{
    position:fixed;

    left:50% !important;
    right:auto !important;

    bottom:8px !important;

    width:min(calc(100% - 18px),560px) !important;

    height:60px !important;

    display:flex;

    align-items:center;
    justify-content:space-around;

    transform:translateX(-50%);

    padding:
        4px
        7px;

    border-radius:15px !important;

    overflow:hidden;
}

body .bottom-nav .nav-item{
    flex:1;

    min-width:0;

    min-height:48px;

    display:flex;

    align-items:center;
    justify-content:center;

    gap:3px;

    padding:
        4px
        6px;

    border-radius:10px !important;

    font-size:14px !important;
}

body .bottom-nav .nav-item span{
    font-size:8px !important;
}


/* ==========================================================
   PROFILE SKELETON
   ========================================================== */

body #profileSkeleton .skeleton-avatar{
    border-radius:50% !important;
}

body #profileSkeleton .sk-line{
    border-radius:999px !important;
}


/* ==========================================================
   TABLET
   ========================================================== */

@media(min-width:768px) and (max-width:1199px){

    body .profile-wrapper,
    body .primary-stats,
    body .social-stats,
    body .analytics-section,
    body .menu,
    body .products-section{
        width:min(calc(100% - 36px),920px) !important;
    }

    body .profile-card{
        padding:
            34px
            30px
            28px !important;
    }

    body .primary-stats,
    body .social-stats,
    body .analytics-grid{
        grid-template-columns:
            repeat(4,minmax(0,1fr)) !important;
    }

    body .menu{
        grid-template-columns:
            repeat(2,minmax(0,1fr)) !important;

        gap:11px !important;
    }

    body .premium-products-grid{
        grid-template-columns:
            repeat(3,minmax(0,1fr)) !important;
    }

}


/* ==========================================================
   DESKTOP
   ========================================================== */

@media(min-width:1200px){

    body .profile-wrapper,
    body .primary-stats,
    body .social-stats,
    body .analytics-section,
    body .menu,
    body .products-section{
        width:min(calc(100% - 48px),1180px) !important;
        max-width:1180px !important;
    }

    body .profile-card{
        padding:
            40px
            40px
            34px !important;
    }

    body .profile-card .avatar{
        width:132px !important;
        height:132px !important;
    }

    body .primary-stats,
    body .social-stats,
    body .analytics-grid{
        grid-template-columns:
            repeat(4,minmax(0,1fr)) !important;
    }

    body .menu{
        grid-template-columns:
            repeat(3,minmax(0,1fr)) !important;

        gap:13px !important;
    }

    body .menu .menu-item{
        min-height:88px;
    }

    body .premium-products-grid{
        grid-template-columns:
            repeat(4,minmax(0,1fr)) !important;
    }

}


/* ==========================================================
   PHONE
   ========================================================== */

@media(max-width:767px){

    body{
        padding-bottom:78px !important;
    }


    /* COVER */

    body #coverBanner.cover-banner{
        border-radius:
            0
            0
            14px
            14px !important;
    }

    body #coverBanner #coverButton{
        right:9px;
        bottom:8px;

        min-height:32px !important;

        padding:
            0
            9px !important;

        border-radius:8px !important;

        font-size:8px !important;
    }


    /* PROFILE */

    body .profile-wrapper{
        width:100% !important;

        margin-top:-28px !important;

        padding:
            0
            10px !important;
    }

    body .profile-card{
        padding:
            20px
            13px
            16px !important;

        border-radius:16px !important;
    }

    body .profile-card .avatar{
        width:94px !important;
        height:94px !important;

        margin-top:-50px !important;
    }

    body .profile-actions{
        gap:5px !important;

        margin:
            13px
            0
            15px !important;
    }

    body .profile-actions button{
        min-height:35px !important;

        padding:
            0
            8px !important;

        border-radius:8px !important;

        font-size:8px !important;
    }

    body .user-name{
        font-size:
            clamp(26px,8vw,35px) !important;
    }

    body .verification-badge{
        font-size:9.5px !important;
    }

    body .seller-level{
        min-height:28px;

        font-size:7.8px !important;
    }

    body .seller-rating{
        font-size:13px !important;
    }

    body .bio-card{
        margin-top:13px !important;

        padding:
            12px
            13px !important;

        border-radius:11px !important;
    }

    body #bioText{
        font-size:10.5px !important;
    }


    /* DATA CARDS */

    body .primary-stats,
    body .social-stats,
    body .analytics-section{
        width:100% !important;

        padding:
            0
            10px !important;
    }

    body .primary-stats,
    body .social-stats,
    body .analytics-grid{
        grid-template-columns:
            repeat(2,minmax(0,1fr)) !important;

        gap:7px !important;
    }

    body .stat-card,
    body .social-card,
    body .analytics-card{
        min-height:76px;

        padding:
            10px
            8px !important;

        border-radius:11px !important;
    }

    body .stat-number,
    body .social-card-number,
    body .analytics-value{
        font-size:19px !important;
    }

    body .stat-label,
    body .social-card-label,
    body .analytics-label{
        font-size:8px !important;
    }


    /* MENU */

    body .menu{
        width:100% !important;

        padding:
            0
            10px !important;

        gap:7px !important;
    }

    body .menu .menu-item{
        min-height:70px;

        padding:
            11px
            12px !important;

        border-radius:11px !important;
    }

    body .menu-left{
        gap:9px !important;
    }

    body .menu-icon{
        width:38px !important;
        height:38px !important;

        flex-basis:38px;

        border-radius:9px !important;

        font-size:16px !important;
    }

    body .menu-title{
        font-size:11px !important;
    }

    body .menu-subtitle{
        font-size:8px !important;
    }

    body .menu-arrow{
        width:28px !important;
        height:28px !important;

        flex-basis:28px;

        border-radius:7px !important;

        font-size:12px !important;
    }


    /* PRODUCTS */

    body .products-section{
        width:100% !important;

        padding:
            0
            10px
            20px !important;
    }

    body .section-header h2{
        font-size:19px !important;
    }

    body .premium-section{
        border-radius:13px !important;
    }

    body .premium-section img,
    body #premiumImage{
        border-radius:
            13px
            13px
            0
            0 !important;
    }

    body .premium-info{
        padding:
            12px !important;
    }

    body #premiumTitle{
        font-size:15px !important;
    }

    body #premiumPrice{
        font-size:18px !important;
    }

    body .premium-products-grid{
        grid-template-columns:
            repeat(2,minmax(0,1fr)) !important;

        gap:7px !important;
    }

    body .premium-card{
        border-radius:11px !important;
    }


    /* MODALS */

    body .bio-modal-content{
        width:100% !important;
    }

    body .username-modal{
        padding:10px !important;
    }

}


/* ==========================================================
   VERY SMALL PHONES
   ========================================================== */

@media(max-width:380px){

    body .profile-wrapper{
        padding-left:7px !important;
        padding-right:7px !important;
    }

    body .profile-card{
        padding-left:11px !important;
        padding-right:11px !important;
    }

    body .profile-actions{
        gap:4px !important;
    }

    body .profile-actions button{
        padding:
            0
            6px !important;

        font-size:7.5px !important;
    }

    body .primary-stats,
    body .social-stats,
    body .analytics-section,
    body .menu,
    body .products-section{
        padding-left:7px !important;
        padding-right:7px !important;
    }

    body .menu .menu-item{
        padding:
            10px
            9px !important;
    }

}
/* ==========================================================
   PROFILE COVER — BETTER BREATHING ROOM
   ========================================================== */

/* keep the full advertising banner visible */
body #coverBanner.cover-banner{
    margin-bottom:44px !important;
}

/* pull the profile card down instead of overlapping too much */
body .profile-wrapper{
    margin-top:-18px !important;
}

/* slightly reduce avatar overlap */
body .profile-card .avatar{
    margin-top:-48px !important;
}


/* ==========================================================
   PHONE
   ========================================================== */

@media(max-width:767px){

    body #coverBanner.cover-banner{
        margin-bottom:38px !important;
    }

    body .profile-wrapper{
        margin-top:-12px !important;
    }

    body .profile-card .avatar{
        margin-top:-42px !important;
    }

}


/* ==========================================================
   VERY SMALL PHONES
   ========================================================== */

@media(max-width:380px){

    body #coverBanner.cover-banner{
        margin-bottom:34px !important;
    }

    body .profile-wrapper{
        margin-top:-10px !important;
    }

}
/* ==========================================================
   NEXORA PROFILE — CENTER AVATAR INSIDE PROFILE CARD
   REMOVE COVER / CTA OVERLAP
   ========================================================== */

/* Give the cover its own complete area */
body #coverBanner.cover-banner{
    margin-bottom:24px !important;
}

/* Profile area must NOT climb into the cover */
body .profile-wrapper{
    margin-top:0 !important;
    position:relative;
}

/* Profile card begins completely below the cover */
body .profile-card{
    position:relative;
    margin-top:0 !important;

    padding-top:34px !important;

    overflow:visible;
}

/* ==========================================================
   PROFILE PHOTO
   ========================================================== */

/* Kill the old overlapping-avatar positioning */
body .profile-card .avatar,
body .profile-card .profile-avatar,
body .profile-card .profile-photo,
body .profile-card .avatar-wrap,
body .profile-card .profile-image{
    position:relative !important;

    top:auto !important;
    right:auto !important;
    bottom:auto !important;
    left:auto !important;

    transform:none !important;

    margin-left:auto !important;
    margin-right:auto !important;
}

/* Actual avatar */
body .profile-card .avatar{
    display:block !important;

    width:150px !important;
    height:150px !important;

    margin-top:0 !important;
    margin-bottom:24px !important;

    border-radius:50% !important;

    object-fit:cover;
}


/* ==========================================================
   PROFILE ACTION BUTTONS
   ========================================================== */

body .profile-card .profile-actions{
    margin-top:0 !important;
    margin-bottom:24px !important;

    display:flex;
    justify-content:center;
    align-items:center;
    flex-wrap:wrap;

    gap:10px;
}


/* ==========================================================
   PROFILE IDENTITY
   ========================================================== */

body .profile-card .profile-info,
body .profile-card .profile-details{
    text-align:center;
}


/* ==========================================================
   PHONE
   ========================================================== */

@media(max-width:767px){

    body #coverBanner.cover-banner{
        margin-bottom:18px !important;
    }

    body .profile-wrapper{
        margin-top:0 !important;
    }

    body .profile-card{
        margin-top:0 !important;

        padding-top:30px !important;
    }

    body .profile-card .avatar{
        width:142px !important;
        height:142px !important;

        margin-top:0 !important;
        margin-bottom:22px !important;
    }

    body .profile-card .profile-actions{
        margin-top:0 !important;
        margin-bottom:24px !important;

        gap:8px;
    }
}


/* ==========================================================
   VERY SMALL PHONES
   ========================================================== */

@media(max-width:380px){

    body #coverBanner.cover-banner{
        margin-bottom:16px !important;
    }

    body .profile-card{
        padding-top:26px !important;
    }

    body .profile-card .avatar{
        width:130px !important;
        height:130px !important;

        margin-bottom:20px !important;
    }

}