/* ==========================================================
   NEXORA MARKETPLACE HOMEPAGE
   PREMIUM LAYOUT REFINEMENT

   Background:
   #261b2c → #211827 → #1c1622

   PURPOSE:
   - Plum gradient page canvas
   - Premium rounded geometry
   - Better spacing
   - Cleaner section hierarchy
   - Responsive phone/tablet/desktop treatment
   - Preserve existing NEXORA colours inside components
   ========================================================== */


/* ==========================================================
   GLOBAL PAGE CANVAS
   ========================================================== */

html{
    min-height:100%;
    background:#1c1622;
}

body{
    min-height:100vh;

    background:
        linear-gradient(
            180deg,
            #261b2c 0%,
            #211827 48%,
            #1c1622 100%
        ) !important;

    background-repeat:no-repeat !important;
    background-size:100% 100% !important;
    background-attachment:fixed !important;

    overflow-x:hidden;
}


/* ==========================================================
   GLOBAL BOX MODEL
   ========================================================== */

*,
*::before,
*::after{
    box-sizing:border-box;
}


/* ==========================================================
   HOMEPAGE WIDTH SYSTEM
   ========================================================== */

.category-section,
#premiumSection,
#categorySections,
#categoryPosters,
#newListings,
#spinSection,
#escrowWrapper{
    width:min(calc(100% - 28px),1180px) !important;

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


/* ==========================================================
   MAIN HEADER
   ========================================================== */

.nx-commerce-header,
.nx-sticky-header{
    border-radius:
        0
        0
        18px
        18px !important;

    overflow:hidden;

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


/* ==========================================================
   HEADER ACTION ICONS
   ========================================================== */

.nx-commerce-action,
.sticky-icon,
.hero-menu-btn{
    border-radius:50% !important;

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

.nx-commerce-action:active,
.sticky-icon:active,
.hero-menu-btn:active{
    transform:scale(.94);
}


/* ==========================================================
   APP / SECTION TABS
   ========================================================== */

.nx-app-tabs,
.nx-app-tabs-inner{
    overflow-x:auto;

    scrollbar-width:none;
}

.nx-app-tabs::-webkit-scrollbar,
.nx-app-tabs-inner::-webkit-scrollbar{
    display:none;
}


/* ==========================================================
   PREMIUM MERCHANDISING AREA
   ========================================================== */

#premiumSection.premium-section{
    margin-top:18px !important;
    margin-bottom:16px !important;

    border-radius:18px !important;

    overflow:hidden;
}

#premiumGrid{
    border-radius:18px !important;

    overflow:hidden;
}


/* ==========================================================
   CATEGORY SECTION
   ========================================================== */

.category-section{
    margin-top:14px !important;
    margin-bottom:18px !important;

    padding:0 !important;
}


/* ==========================================================
   CATEGORY SCROLLER
   ========================================================== */

.category-scroll{
    display:flex;

    align-items:center;

    gap:8px !important;

    overflow-x:auto !important;
    overflow-y:hidden !important;

    padding:
        5px
        2px
        9px !important;

    scroll-snap-type:x proximity;

    scrollbar-width:none;
}

.category-scroll::-webkit-scrollbar{
    display:none;
}


/* ==========================================================
   CATEGORY CHIPS
   ========================================================== */

.category-chip{
    flex:0 0 auto;

    min-height:42px !important;

    display:inline-flex;

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

    padding:
        0
        14px !important;

    border-radius:999px !important;

    white-space:nowrap;

    font-size:11px !important;

    transition:
        transform .16s ease,
        box-shadow .16s ease,
        border-color .16s ease;
}

.category-chip:active{
    transform:scale(.97);
}


/* ==========================================================
   ESCROW / PAYMENT REGION
   ========================================================== */

#escrowWrapper,
.escrow-wrapper{
    position:relative !important;

    padding:
        0 !important;

    margin-top:14px !important;
    margin-bottom:18px !important;

    overflow:visible !important;
}


/* ==========================================================
   ESCROW NOTICE
   ========================================================== */

#escrowNotice,
.escrow-notice{
    width:100% !important;

    padding:
        18px
        18px !important;

    margin:
        0
        0
        14px !important;

    border-radius:16px !important;

    overflow:hidden;
}

#escrowNotice h3,
.escrow-notice h3{
    margin:
        0
        0
        7px !important;

    font-size:18px;

    line-height:1.2;
}

#escrowNotice p,
.escrow-notice p{
    margin:0;

    font-size:12px;

    line-height:1.65;
}


/* ==========================================================
   ESCROW ACTIONS
   ========================================================== */

.escrow-actions{
    display:flex;

    flex-wrap:wrap;

    gap:8px !important;

    margin-top:14px !important;
}

.escrow-dismiss,
.escrow-learn{
    min-height:42px !important;

    display:inline-flex;

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

    padding:
        0
        14px !important;

    border-radius:10px !important;

    font-size:10px !important;

    transition:transform .16s ease;
}

.escrow-dismiss:active,
.escrow-learn:active{
    transform:scale(.97);
}


/* ==========================================================
   HOMEPAGE SPONSORED BANNER
   ========================================================== */

#homeSponsorBanner{
    width:100% !important;

    margin:
        14px
        0
        18px !important;

    border-radius:14px !important;

    overflow:hidden !important;
}

#homeSponsorBanner img,
#homeSponsorImage{
    width:100% !important;

    display:block !important;

    border-radius:14px !important;
}


/* ==========================================================
   DYNAMIC CATEGORY MERCHANDISING
   ========================================================== */

#categorySections{
    display:flex;

    flex-direction:column;

    gap:18px !important;

    margin-top:0 !important;
}


/* ==========================================================
   MERCHANDISING SECTION SHELLS
   ========================================================== */

.home-category-section,
.home-merch-section,
.merch-section,
.category-merch-section,
.storefront-section{
    border-radius:18px !important;

    overflow:hidden;

    margin-bottom:18px !important;
}


/* ==========================================================
   SECTION HEADERS
   ========================================================== */

.home-category-header,
.merch-section-header,
.section-heading,
.storefront-heading{
    display:flex;

    align-items:flex-end;
    justify-content:space-between;

    gap:12px;

    padding:
        0
        2px;

    margin-bottom:12px;
}

.home-category-header h2,
.merch-section-header h2,
.section-heading h2,
.storefront-heading h2{
    margin:0;

    font-size:
        clamp(20px,3vw,28px);

    line-height:1.1;

    letter-spacing:-.4px;
}

.home-category-header p,
.merch-section-header p,
.section-heading p,
.storefront-heading p{
    margin-top:5px;

    font-size:11px;

    line-height:1.5;
}


/* ==========================================================
   SECTION SEE ALL LINKS
   ========================================================== */

.home-category-header a,
.merch-section-header a,
.section-heading a,
.storefront-heading a{
    flex:0 0 auto;

    min-height:36px;

    display:inline-flex;

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

    padding:
        0
        10px;

    border-radius:9px;

    font-size:9px;

    text-decoration:none;
}


/* ==========================================================
   CAROUSEL / MERCHANDISING TRACKS
   ========================================================== */

.product-scroll,
.product-carousel,
.merch-carousel,
.merch-track,
.home-product-row,
.listing-row{
    gap:10px !important;

    scroll-padding-left:2px;

    scrollbar-width:none;
}

.product-scroll::-webkit-scrollbar,
.product-carousel::-webkit-scrollbar,
.merch-carousel::-webkit-scrollbar,
.merch-track::-webkit-scrollbar,
.home-product-row::-webkit-scrollbar,
.listing-row::-webkit-scrollbar{
    display:none;
}


/* ==========================================================
   CATEGORY POSTERS
   ========================================================== */

#categoryPosters,
.category-posters{
    margin-top:18px !important;
    margin-bottom:18px !important;

    gap:14px !important;

    border-radius:18px;
}


/* ==========================================================
   NEW LISTINGS
   ========================================================== */

#newListings{
    margin-top:18px !important;
    margin-bottom:20px !important;

    gap:10px !important;
}


/* ==========================================================
   SPONSORED FEED AREA
   Keep cards floating on page canvas
   ========================================================== */

.sponsored-feed-section,
.sponsored-feed-viewport,
.sponsored-feed-track{
    background:transparent !important;

    border:none !important;

    box-shadow:none !important;
}

.sponsored-feed-section{
    margin:
        20px
        0 !important;
}


/* ==========================================================
   SPONSORED FEED HEADING
   ========================================================== */

.sponsored-feed-header,
.sponsored-feed-title{
    margin-bottom:12px !important;
}

.sponsored-feed-header h2,
.sponsored-feed-title h2{
    font-size:
        clamp(20px,3vw,26px);

    line-height:1.15;
}


/* ==========================================================
   SPIN & WIN
   ========================================================== */

#spinSection,
.spin-section{
    margin-top:22px !important;
    margin-bottom:34px !important;

    padding:
        22px
        20px !important;

    border-radius:18px !important;

    overflow:hidden;
}


/* ==========================================================
   SPIN HEADER
   ========================================================== */

.spin-title{
    display:flex;

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

    gap:12px;

    margin-bottom:14px !important;
}

.spin-title h2{
    margin:0;

    font-size:
        clamp(21px,4vw,29px);

    line-height:1.1;
}

.spin-title a{
    min-height:36px;

    display:inline-flex;

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

    padding:
        0
        10px;

    border-radius:9px !important;

    font-size:9px;

    text-decoration:none;
}


/* ==========================================================
   SPIN DISCLAIMER
   ========================================================== */

.spin-disclaimer{
    margin-bottom:14px !important;

    padding:
        14px
        15px !important;

    border-radius:12px !important;

    font-size:11px !important;

    line-height:1.65 !important;
}


/* ==========================================================
   WINNER TICKER
   ========================================================== */

.winner-ticker{
    margin-bottom:14px !important;

    border-radius:11px !important;

    overflow:hidden;
}

.ticker-track{
    min-height:42px;

    display:flex;

    align-items:center;
}


/* ==========================================================
   FEATURED SPIN
   ========================================================== */

.featured-spin{
    min-height:120px;

    margin-bottom:14px !important;

    border-radius:14px !important;

    overflow:hidden;
}


/* ==========================================================
   SPIN CTA
   ========================================================== */

.spin-now-btn{
    min-height:50px;

    display:flex;

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

    padding:
        0
        16px;

    border-radius:11px !important;

    font-size:10px;

    text-decoration:none;
}


/* ==========================================================
   DISCOVERY FLOATING TOOLS
   ========================================================== */

.nx-discovery-buttons{
    gap:7px !important;
}

.nx-discovery-trigger{
    min-height:48px !important;
    min-width:148px !important;

    display:flex;

    align-items:center;

    gap:9px !important;

    padding:
        0
        14px !important;

    border-radius:999px !important;

    font-size:10px !important;

    transition:
        transform .16s ease,
        box-shadow .16s ease;
}

.nx-discovery-trigger:active{
    transform:scale(.96);
}


/* ==========================================================
   DISCOVERY PANEL
   ========================================================== */

.nx-discovery-panel-inner{
    padding:
        20px !important;

    border-radius:20px !important;

    overflow:hidden;
}

.nx-discovery-header{
    display:flex;

    align-items:flex-start;
    justify-content:space-between;

    gap:12px;

    margin-bottom:16px;
}

.nx-discovery-eyebrow{
    font-size:8px !important;

    letter-spacing:1.3px !important;
}

.nx-discovery-header h2{
    margin:
        3px
        0
        5px;

    font-size:
        clamp(22px,5vw,32px);

    line-height:1.05;
}

.nx-discovery-header p{
    margin:0;

    font-size:11px;

    line-height:1.5;
}


/* ==========================================================
   DISCOVERY CLOSE
   ========================================================== */

.nx-discovery-close{
    width:38px !important;
    height:38px !important;

    flex:0 0 38px;

    display:grid;

    place-items:center;

    border-radius:50% !important;
}


/* ==========================================================
   DISCOVERY LOCATION CHOICES
   ========================================================== */

.nx-location-choices{
    display:flex;

    flex-wrap:wrap;

    gap:7px !important;

    margin-bottom:14px;
}

.nx-location-choices button,
.nx-location-choice{
    min-height:38px;

    padding:
        0
        11px;

    border-radius:999px !important;

    font-size:9px;
}


/* ==========================================================
   TOP SEARCH OVERLAY
   ========================================================== */

.nx-search-panel{
    border-radius:
        0
        0
        20px
        20px !important;

    overflow:hidden;
}

.nx-search-panel-top{
    min-height:62px !important;

    padding:
        8px
        14px !important;
}


/* ==========================================================
   SEARCH ICON BUTTONS
   ========================================================== */

.nx-sheet-icon{
    width:40px !important;
    height:40px !important;

    display:grid;

    place-items:center;

    border-radius:50% !important;
}


/* ==========================================================
   SEARCH WRAPPER
   ========================================================== */

.nx-overlay-search{
    padding:
        16px
        16px
        26px !important;
}

.nx-overlay-search .search-wrapper,
.global-search .search-wrapper{
    min-height:52px !important;

    display:flex;

    align-items:center;

    padding:
        0
        14px !important;

    border-radius:999px !important;

    overflow:hidden !important;
}


/* ==========================================================
   GLOBAL SEARCH FIELD
   ========================================================== */

#globalSearch{
    min-height:50px;

    border-radius:999px !important;

    font-size:14px !important;
}


/* ==========================================================
   CLEAR SEARCH
   ========================================================== */

#clearSearch{
    width:36px !important;
    height:36px !important;

    border-radius:50% !important;
}


/* ==========================================================
   SEARCH SUGGESTIONS
   ========================================================== */

#searchSuggestions,
.search-suggestions{
    margin-top:10px !important;

    padding:
        4px !important;

    border-radius:14px !important;

    overflow:hidden;
}

#searchSuggestions .search-item{
    min-height:52px;

    display:flex;

    align-items:center;

    gap:10px;

    padding:
        10px
        12px !important;

    margin:
        3px
        0;

    border-radius:10px !important;
}


/* ==========================================================
   WISHLIST SHEET
   ========================================================== */

.nx-wishlist-sheet{
    border-radius:
        20px
        20px
        0
        0 !important;

    overflow:hidden;
}

.nx-wishlist-head{
    padding:
        14px
        16px !important;
}

.nx-wishlist-head h2{
    font-size:24px !important;
}


/* ==========================================================
   WISHLIST ITEMS
   ========================================================== */

.nx-wishlist-card{
    min-height:96px;

    gap:10px !important;

    padding:
        10px
        0 !important;
}

.nx-wishlist-card img{
    width:76px !important;
    height:76px !important;

    object-fit:cover;

    border-radius:11px !important;
}


/* ==========================================================
   BLUEBRIDGE MODAL
   ========================================================== */

.bluebridge-box{
    width:min(calc(100% - 28px),520px);

    padding:
        22px
        20px !important;

    border-radius:18px !important;

    overflow:hidden;
}

.bluebridge-box h2{
    margin-bottom:12px;

    font-size:
        clamp(22px,5vw,30px);

    line-height:1.1;
}

.bluebridge-box p{
    font-size:12px;

    line-height:1.65;
}

.bluebridge-actions{
    display:grid;

    grid-template-columns:1fr;

    gap:8px !important;

    margin-top:18px;
}

.bluebridge-actions button{
    min-height:48px;

    border-radius:10px !important;

    font-size:10px;
}


/* ==========================================================
   SURPRISE PANEL
   ========================================================== */

.nx-surprise-card{
    width:min(calc(100% - 28px),760px);

    border-radius:20px !important;

    overflow:hidden;
}

.nx-surprise-topbar{
    padding:
        18px !important;
}

.nx-surprise-close{
    width:38px !important;
    height:38px !important;

    border-radius:50% !important;
}

.nx-surprise-summary{
    border-radius:14px !important;
}

.nx-surprise-apply,
.nx-surprise-shuffle{
    min-height:46px;

    border-radius:10px !important;
}


/* ==========================================================
   SURPRISE INFO
   ========================================================== */

.nx-surprise-info-box{
    width:min(calc(100% - 28px),460px);

    padding:
        22px
        18px !important;

    border-radius:18px !important;
}

#nxSurpriseInfoClose{
    min-height:46px;

    border-radius:10px !important;
}

/* ==========================================================
   SELLER QUICK MENU
   ========================================================== */

.seller-menu-box{
    width:min(calc(100% - 28px),420px);

    padding:
        18px !important;

    border-radius:18px !important;

    overflow:hidden;
}

.seller-menu-box a,
#closeSellerMenu{
    min-height:44px;

    display:flex;

    align-items:center;

    padding:
        0
        12px;

    margin-top:7px;

    border-radius:10px !important;
}


/* ==========================================================
   GENERIC HOMEPAGE EMPTY STATES
   ========================================================== */

.rail-empty,
.home-storefront-loading,
.empty-state,
.no-products,
.no-results{
    padding:
        28px
        18px !important;

    border-radius:14px !important;

    text-align:center;

    line-height:1.6;
}


/* ==========================================================
   GENERIC HOMEPAGE PANEL POLISH
   ========================================================== */

.nx-panel,
.home-panel,
.home-card,
.marketplace-panel{
    border-radius:16px !important;

    overflow:hidden;
}


/* ==========================================================
   BUTTON POLISH
   Only common homepage utility controls
   ========================================================== */

.view-all-btn,
.see-all-btn,
.home-cta,
.home-action-btn{
    min-height:42px;

    display:inline-flex;

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

    padding:
        0
        12px;

    border-radius:10px !important;

    font-size:10px;
}


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

@media(max-width:900px){

    .category-section,
    #premiumSection,
    #categorySections,
    #categoryPosters,
    #newListings,
    #spinSection,
    #escrowWrapper{
        width:min(calc(100% - 24px),900px) !important;
    }

    #spinSection,
    .spin-section{
        padding:
            20px
            18px !important;
    }

}


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

@media(max-width:620px){

    body{
        background:
            linear-gradient(
                180deg,
                #261b2c 0%,
                #211827 50%,
                #1c1622 100%
            ) !important;

        background-attachment:scroll !important;
    }


    /* HEADER */

    .nx-commerce-header,
    .nx-sticky-header{
        border-radius:
            0
            0
            14px
            14px !important;
    }


    /* MAIN WIDTHS */

    .category-section,
    #premiumSection,
    #categorySections,
    #categoryPosters,
    #newListings,
    #escrowWrapper{
        width:100% !important;
    }


    /* PREMIUM */

    #premiumSection.premium-section{
        margin-top:12px !important;
        margin-bottom:14px !important;

        border-radius:0 !important;
    }

    #premiumGrid{
        border-radius:0 !important;
    }


    /* CATEGORIES */

    .category-section{
        margin:
            10px
            0
            14px !important;

        padding:
            0
            10px !important;
    }

    .category-scroll{
        gap:6px !important;

        padding-bottom:7px !important;
    }

    .category-chip{
        min-height:38px !important;

        padding:
            0
            11px !important;

        font-size:9px !important;
    }


    /* ESCROW */

    #escrowWrapper{
        padding:
            0
            10px !important;

        margin-bottom:14px !important;
    }

    #escrowNotice,
    .escrow-notice{
        padding:
            15px
            14px !important;

        border-radius:13px !important;
    }

    #escrowNotice h3{
        font-size:16px;
    }

    #escrowNotice p{
        font-size:11px;
    }

    .escrow-dismiss,
    .escrow-learn{
        min-height:38px !important;

        border-radius:9px !important;

        font-size:9px !important;
    }


    /* SPONSOR */

    #homeSponsorBanner{
        margin:
            10px
            0
            14px !important;

        border-radius:10px !important;
    }

    #homeSponsorImage,
    #homeSponsorBanner img{
        border-radius:10px !important;
    }


    /* CATEGORY MERCHANDISING */

    #categorySections{
        padding:
            0
            10px !important;

        gap:14px !important;
    }

    .home-category-section,
    .home-merch-section,
    .merch-section,
    .category-merch-section,
    .storefront-section{
        border-radius:14px !important;
    }


    /* POSTERS */

    #categoryPosters,
    .category-posters{
        padding:
            0
            10px !important;

        margin:
            14px
            0 !important;

        gap:10px !important;
    }


    /* NEW LISTINGS */

    #newListings{
        padding:
            0
            10px;

        margin:
            14px
            0
            18px !important;
    }


    /* SPIN */

    #spinSection,
    .spin-section{
        width:calc(100% - 20px) !important;

        margin:
            18px
            10px
            28px !important;

        padding:
            18px
            14px !important;

        border-radius:14px !important;
    }

    .spin-title h2{
        font-size:19px;
    }

    .spin-title a{
        min-height:34px;

        font-size:9px;
    }

    .spin-disclaimer{
        padding:
            12px
            13px !important;

        border-radius:10px !important;

        font-size:10px !important;
    }

    .spin-now-btn{
        min-height:46px;

        border-radius:10px !important;

        font-size:10px;
    }


    /* DISCOVERY */

    .nx-discovery-buttons{
        gap:6px !important;
    }

    .nx-discovery-trigger{
        min-width:132px !important;
        min-height:42px !important;

        padding:
            0
            11px !important;

        border-radius:999px !important;

        font-size:9px !important;
    }

    .nx-discovery-panel-inner{
        padding:
            16px
            13px !important;

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


    /* SEARCH */

    .nx-search-panel{
        border-radius:
            0
            0
            16px
            16px !important;
    }

    .nx-overlay-search{
        padding:
            14px
            12px
            22px !important;
    }

    .nx-overlay-search .search-wrapper,
    .global-search .search-wrapper{
        min-height:50px !important;

        border-radius:999px !important;
    }


    /* WISHLIST */

    .nx-wishlist-sheet{
        border-radius:
            18px
            18px
            0
            0 !important;
    }

    .nx-wishlist-card img{
        width:68px !important;
        height:68px !important;
    }


    /* MODALS */

    .bluebridge-box,
    .nx-surprise-card,
    .nx-surprise-info-box,
    .seller-menu-box{
        border-radius:16px !important;
    }

}


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

@media(max-width:380px){

    .category-section,
    #categorySections,
    #categoryPosters,
    #newListings{
        padding-left:8px !important;
        padding-right:8px !important;
    }

    #escrowWrapper{
        padding-left:8px !important;
        padding-right:8px !important;
    }

    #spinSection,
    .spin-section{
        width:calc(100% - 16px) !important;

        margin-left:8px !important;
        margin-right:8px !important;

        padding:
            16px
            12px !important;
    }

    .nx-discovery-trigger{
        min-width:122px !important;

        padding:
            0
            9px !important;

        font-size:8.5px !important;
    }

}
/* ==========================================================
   NEXORA HOMEPAGE
   FORCE FINAL PLUM BACKGROUND + PREMIUM CATEGORY CHIPS
   ========================================================== */


/* ==========================================================
   PAGE BACKGROUND
   ========================================================== */

html{
    min-height:100% !important;

    background:#1c1622 !important;
}

html body{
    min-height:100vh !important;

    background:
        linear-gradient(
            180deg,
            #261b2c 0%,
            #211827 48%,
            #1c1622 100%
        ) !important;

    background-color:#211827 !important;

    background-repeat:no-repeat !important;
    background-size:cover !important;
    background-position:center top !important;

    overflow-x:hidden;
}


/* ==========================================================
   CATEGORY AREA
   ========================================================== */

html body .category-section{
    background:transparent !important;

    border:none !important;
    box-shadow:none !important;

    padding:
        8px
        14px
        10px !important;

    margin-top:12px !important;
    margin-bottom:16px !important;
}


/* ==========================================================
   CATEGORY SCROLLER
   ========================================================== */

html body .category-section .category-scroll,
html body #categoryScroll{
    display:flex !important;

    align-items:center !important;

    gap:8px !important;

    overflow-x:auto !important;
    overflow-y:hidden !important;

    padding:
        4px
        2px
        8px !important;

    background:transparent !important;

    border:none !important;

    box-shadow:none !important;

    scrollbar-width:none;
}

html body #categoryScroll::-webkit-scrollbar{
    display:none;
}


/* ==========================================================
   CATEGORY CHIPS
   ========================================================== */

html body .category-section .category-chip,
html body #categoryScroll .category-chip{
    flex:
        0
        0
        auto !important;

    width:auto !important;

    min-width:max-content !important;

    min-height:42px !important;
    height:42px !important;

    display:inline-flex !important;

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

    margin:0 !important;

    padding:
        0
        15px !important;

    border-radius:999px !important;

    font-family:'Outfit',sans-serif !important;

    font-size:11px !important;

    font-weight:600 !important;

    line-height:1 !important;

    white-space:nowrap !important;

    box-shadow:
        0 5px 16px rgba(0,0,0,.12) !important;

    transition:
        transform .16s ease,
        box-shadow .16s ease,
        border-color .16s ease !important;
}


/* ==========================================================
   ACTIVE CATEGORY CHIP
   Keep existing active colours
   ========================================================== */

html body .category-section .category-chip.active,
html body #categoryScroll .category-chip.active{
    border-radius:999px !important;

    transform:none !important;

    box-shadow:
        0 7px 20px rgba(0,0,0,.16) !important;
}


/* ==========================================================
   CHIP PRESS
   ========================================================== */

html body .category-section .category-chip:active{
    transform:scale(.96) !important;
}


/* ==========================================================
   HOMEPAGE CONTENT SHOULD REVEAL PLUM CANVAS
   Do not affect individual cards
   ========================================================== */

html body #categorySections,
html body #categoryPosters,
html body #newListings,
html body .sponsored-feed-section,
html body .sponsored-feed-viewport,
html body .sponsored-feed-track{
    background:transparent !important;
    background-image:none !important;
}


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

@media(max-width:620px){

    html body{
        background:
            linear-gradient(
                180deg,
                #261b2c 0%,
                #211827 50%,
                #1c1622 100%
            ) !important;

        background-attachment:scroll !important;
    }

    html body .category-section{
        padding:
            7px
            10px
            9px !important;
    }

    html body .category-section .category-scroll,
    html body #categoryScroll{
        gap:7px !important;
    }

    html body .category-section .category-chip,
    html body #categoryScroll .category-chip{
        min-height:38px !important;
        height:38px !important;

        padding:
            0
            12px !important;

        border-radius:999px !important;

        font-size:9.5px !important;
    }

}


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

@media(max-width:380px){

    html body .category-section{
        padding-left:8px !important;
        padding-right:8px !important;
    }

    html body .category-section .category-chip,
    html body #categoryScroll .category-chip{
        min-height:36px !important;
        height:36px !important;

        padding:
            0
            11px !important;

        font-size:9px !important;
    }

}
/* ==========================================================
   NEXORA HOMEPAGE — REAL SECTION SPACING FIX
   Based on current index.html + home.js
   ========================================================== */


/* ==========================================================
   CATEGORY CHIPS
   ========================================================== */

html body .category-section{
    margin:0 !important;

    padding:
        10px
        14px
        8px !important;

    background:transparent !important;
}

html body #categoryScroll{
    margin:0 !important;

    padding:
        3px
        0
        3px !important;
}


/* ==========================================================
   EMPTY CATEGORY SPONSOR HOLDER
   Do not let an empty div create dead space
   ========================================================== */

html body #categorySponsor:empty{
    display:none !important;

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

    min-height:0 !important;
    height:0 !important;
}


/* ==========================================================
   ESCROW / HOME BANNER WRAPPER
   ========================================================== */

html body #escrowWrapper,
html body .escrow-wrapper{
    margin:
        4px
        0
        0 !important;

    padding-left:12px !important;
    padding-right:12px !important;

    min-height:0 !important;
}


/* ==========================================================
   HOME SPONSOR BANNER
   Existing inline CSS currently gives it:
   margin:16px 0 20px
   Reduce that heavily
   ========================================================== */

html body #homeSponsorBanner{
    margin:
        4px
        0
        6px !important;
}


/* ==========================================================
   CATEGORY SECTIONS
   ========================================================== */

html body #categorySections{
    margin:
        0
        0
        6px !important;

    padding:0 !important;
}


/* ==========================================================
   CATEGORY POSTERS CONTAINER
   This contains BOTH category posters and sponsored strips
   ========================================================== */

html body #categoryPosters{
    margin:
        0 !important;

    padding:
        4px
        12px
        6px !important;

    row-gap:10px !important;
    column-gap:10px !important;
}


/* ==========================================================
   CATEGORY POSTERS
   No external vertical margins
   ========================================================== */

html body #categoryPosters > .homepage-category-poster{
    margin:0 !important;
}


/* ==========================================================
   SPONSORED STRIP INSIDE CATEGORY POSTERS
   home.js inserts this after category 2, 8, 14...
   ========================================================== */

html body #categoryPosters > .sponsored-feed-section{
    margin:
        4px
        0 !important;

    padding:
        4px
        0 !important;

    min-height:0 !important;
}


/* ==========================================================
   SPONSORED HEADING
   ========================================================== */

html body #categoryPosters .sponsored-feed-heading{
    margin:
        0
        0
        6px !important;

    padding:0 !important;
}


/* ==========================================================
   SPONSORED VIEWPORT / TRACK
   ========================================================== */

html body #categoryPosters .sponsored-feed-viewport{
    margin:0 !important;
    padding:0 !important;
}

html body #categoryPosters .sponsored-feed-track{
    margin:0 !important;
}


/* ==========================================================
   NEW LISTINGS
   ========================================================== */

html body #newListings{
    margin:
        6px
        0
        8px !important;

    padding-left:12px !important;
    padding-right:12px !important;
}


/* ==========================================================
   SPIN SECTION
   ========================================================== */

html body #spinSection{
    margin:
        8px
        12px
        20px !important;
}


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

@media(max-width:620px){

    html body .category-section{
        padding:
            8px
            10px
            5px !important;
    }

    html body #categoryScroll{
        padding-bottom:2px !important;
    }

    html body #escrowWrapper,
    html body .escrow-wrapper{
        margin-top:2px !important;

        padding-left:10px !important;
        padding-right:10px !important;
    }

    html body #homeSponsorBanner{
        margin:
            3px
            0
            5px !important;
    }

    html body #categorySections{
        margin-bottom:4px !important;
    }

    html body #categoryPosters{
        padding:
            3px
            10px
            5px !important;

        row-gap:8px !important;
        column-gap:8px !important;
    }

    html body #categoryPosters > .sponsored-feed-section{
        margin:
            3px
            0 !important;

        padding:
            3px
            0 !important;
    }

    html body #newListings{
        margin:
            4px
            0
            6px !important;

        padding-left:10px !important;
        padding-right:10px !important;
    }

    html body #spinSection{
        margin:
            6px
            10px
            18px !important;
    }

}
/* ==========================================================
   NEXORA DISCOVERY BUTTONS
   POSITION ONLY — DO NOT CHANGE BUTTON SIZES OR STYLING
   ========================================================== */

html body .nx-discovery-buttons{
    position:fixed !important;

    top:auto !important;
    bottom:6px !important;

    /* keep the existing right-side placement */
    left:auto !important;

    z-index:99999 !important;

    margin:0 !important;

    transform:none !important;
}


/* Reset only positioning inherited by individual buttons.
   Their existing widths, heights, padding and styling remain untouched. */

html body #nxTrendingBtn,
html body #nxLocationBtn,
html body #nxSurpriseBtn,
html body #nxBudgetBtn{
    position:relative !important;

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

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

    /* DO NOT set width, height, min-width or padding here */
}


/* keep the existing vertical spacing between them */

html body .nx-discovery-buttons{
    display:flex !important;
    flex-direction:column !important;
    align-items:flex-end !important;

    gap:8px !important;
}


/* phone: budget button sits almost at the base */

@media(max-width:620px){

    html body .nx-discovery-buttons{
        top:auto !important;
        bottom:4px !important;
    }

}
/* ==========================================================
   NEXORA DISCOVERY STACK
   MOVE ONLY — PRESERVE EXISTING BUTTON SIZES/STYLES
   ========================================================== */

html body #nxDiscoveryButtons{
    position:fixed !important;

    inset:auto 12px 0 auto !important;

    top:auto !important;
    left:auto !important;

    margin:0 !important;

    transform:none !important;

    z-index:999999 !important;
}
/* ==========================================================
   DISCOVERY BUTTONS — FINAL VERTICAL POSITION
   ========================================================== */

html body #nxDiscoveryButtons{
    transform:translateY(95px) !important;
}
/* ==========================================================
   HOMEPAGE CATEGORY CHIPS — REAL SPACING FIX
   Actual selectors from current index.html
   ========================================================== */


/* CATEGORY SECTION ITSELF */
html body section.category-section{
    width:100% !important;

    margin:0 !important;

    padding:
        4px
        14px
        4px !important;

    min-height:0 !important;

    height:auto !important;

    background:transparent !important;

    box-sizing:border-box !important;
}


/* ACTUAL HORIZONTAL CHIP ROW */
html body section.category-section #categoryScroll,
html body section.category-section .category-scroll{
    margin:0 !important;

    padding:
        2px
        0
        2px !important;

    min-height:0 !important;

    height:auto !important;

    display:flex !important;

    align-items:center !important;

    gap:8px !important;

    overflow-x:auto !important;
    overflow-y:hidden !important;

    background:transparent !important;

    box-sizing:border-box !important;
}


/* KEEP CHIP APPEARANCE — DO NOT SHRINK THEM */
html body section.category-section .category-chip{
    margin-top:0 !important;
    margin-bottom:0 !important;

    flex-shrink:0 !important;
}


/* IMPORTANT:
   categorySponsor is immediately after the chip section.
   When empty it must take ZERO space.
*/
html body #categorySponsor:empty{
    display:none !important;

    height:0 !important;
    min-height:0 !important;

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


/* ==========================================================
   MOBILE
   ========================================================== */

@media(max-width:620px){

    html body section.category-section{
        margin:0 !important;

        padding:
            2px
            10px
            2px !important;
    }

    html body section.category-section #categoryScroll,
    html body section.category-section .category-scroll{
        margin:0 !important;

        padding:
            1px
            0
            1px !important;
    }

}
/* ==========================================================
   CATEGORY CHIPS — FINAL OVERRIDE
   SAME WIDTH + SAME HEIGHT + SQUARE EDGES
   ========================================================== */

html body section.category-section #categoryScroll.category-scroll .category-chip,
html body section.category-section #categoryScroll.category-scroll .category-chip.active{
    flex: 0 0 140px !important;

    width: 140px !important;
    min-width: 140px !important;
    max-width: 140px !important;

    height: 48px !important;
    min-height: 48px !important;
    max-height: 48px !important;

    padding: 0 8px !important;
    margin: 0 !important;

    border-radius: 0 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    box-sizing: border-box !important;

    white-space: normal !important;
    text-align: center !important;

    line-height: 1.1 !important;

    flex-grow: 0 !important;
    flex-shrink: 0 !important;
}

/* KEEP HORIZONTAL SCROLLING */
html body section.category-section #categoryScroll.category-scroll{
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;

    overflow-x: auto !important;
    overflow-y: hidden !important;

    gap: 8px !important;

    scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch;
}

html body section.category-section #categoryScroll.category-scroll::-webkit-scrollbar{
    display: none !important;
}
/* ==========================================================
   NEXORA HOMEPAGE — FINAL HERO / CATEGORY SPACING
   Equal 8px gaps + square hero banner
   ========================================================== */


/* ----------------------------------------------------------
   1. CATEGORY CHIP SECTION
   Remove bottom space generated by the section itself
   ---------------------------------------------------------- */

html body section.category-section{
    margin-bottom:0 !important;
    padding-bottom:0 !important;
}

html body section.category-section #categoryScroll{
    margin-bottom:0 !important;
    padding-bottom:0 !important;
}


/* ----------------------------------------------------------
   2. HERO WRAPPER
   This wrapper starts exactly 8px below category chips
   ---------------------------------------------------------- */

html body #escrowWrapper,
html body .escrow-wrapper{
    margin:
        8px
        0
        0 !important;

    padding-top:0 !important;
    padding-bottom:0 !important;

    min-height:0 !important;
}


/* ----------------------------------------------------------
   3. HERO BANNER
   No internal/external margins.
   Wrapper controls the upper gap.
   ---------------------------------------------------------- */

html body #homeSponsorBanner{
    display:block !important;

    width:100% !important;

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

    border-radius:0 !important;

    overflow:hidden !important;
}


/* HERO IMAGE — SQUARE CORNERS */

html body #homeSponsorBanner #homeSponsorImage,
html body #homeSponsorBanner img,
html body #homeSponsorImage{
    display:block !important;

    width:100% !important;

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

    border-radius:0 !important;
}


/* ----------------------------------------------------------
   4. REMOVE EMPTY INTERMEDIATE SECTION SPACE
   HTML places categorySections between hero and merchandise.
   ---------------------------------------------------------- */

html body #categorySections:empty{
    display:none !important;

    width:0 !important;
    height:0 !important;
    min-height:0 !important;

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


/* ----------------------------------------------------------
   5. MERCHANDISE
   Exactly 8px below hero
   ---------------------------------------------------------- */

html body #categoryPosters{
    margin:
        8px
        0
        0 !important;

    padding:
        0
        10px
        5px !important;
}


/* ----------------------------------------------------------
   6. MOBILE — DO NOT ALLOW OLD MOBILE RULES
   TO REINTRODUCE DIFFERENT SPACING
   ---------------------------------------------------------- */

@media(max-width:620px){

    html body section.category-section{
        margin-bottom:0 !important;
        padding-bottom:0 !important;
    }

    html body section.category-section #categoryScroll{
        margin-bottom:0 !important;
        padding-bottom:0 !important;
    }

    html body #escrowWrapper,
    html body .escrow-wrapper{
        margin:
            8px
            0
            0 !important;

        padding-top:0 !important;
        padding-bottom:0 !important;
    }

    html body #homeSponsorBanner{
        margin:0 !important;
        border-radius:0 !important;
    }

    html body #homeSponsorBanner #homeSponsorImage,
    html body #homeSponsorBanner img,
    html body #homeSponsorImage{
        border-radius:0 !important;
    }

    html body #categorySections:empty{
        display:none !important;
        margin:0 !important;
        padding:0 !important;
        height:0 !important;
    }

    html body #categoryPosters{
        margin:
            8px
            0
            0 !important;

        padding:
            0
            10px
            5px !important;
    }
}
/* ==========================================================
   NEXORA HOMEPAGE — EXACT MATCHED VERTICAL GAP

   Existing chip → hero gap on mobile = 11px

   Make hero → merchandise gap exactly 11px too.
   DO NOT alter chip → hero spacing.
   ========================================================== */

@media(max-width:620px){

    /* ------------------------------------------------------
       HERO
       Keep its TOP spacing exactly as it already is.

       Only remove its BOTTOM margin because we'll control
       the entire lower gap from one place.
       ------------------------------------------------------ */

    html body #homeSponsorBanner{
        margin-top:3px !important;
        margin-right:0 !important;
        margin-bottom:0 !important;
        margin-left:0 !important;

        border-radius:0 !important;
    }

    html body #homeSponsorBanner img,
    html body #homeSponsorImage{
        border-radius:0 !important;
    }


    /* ------------------------------------------------------
       EMPTY INTERMEDIATE HOLDER

       It currently adds 4px below the hero despite containing
       no visible merchandise.
       Remove it completely when empty.
       ------------------------------------------------------ */

    html body #categorySections:empty{
        display:none !important;

        height:0 !important;
        min-height:0 !important;

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


    /* ------------------------------------------------------
       MERCHANDISE CONTAINER

       Remove its existing 3px top padding.
       Use ONE explicit 11px margin instead.

       Result:
       hero bottom → merchandise top = EXACTLY 11px
       ------------------------------------------------------ */

    html body #categoryPosters{
        margin-top:11px !important;

        padding-top:0 !important;

        padding-right:10px !important;
        padding-bottom:5px !important;
        padding-left:10px !important;
    }

}
/* ==========================================================
   CATEGORY CHIPS — COMPACT SECTION HEIGHT
   MATCH THE ORIGINAL WHITE HOMEPAGE SPACING
   ========================================================== */

/*
   The CATEGORY SECTION itself must collapse around the chips.
   Do not let it reserve unnecessary vertical space.
*/
.category-section{
    height:auto !important;
    min-height:0 !important;

    padding-top:12px !important;
    padding-bottom:12px !important;

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


/*
   The horizontal scrolling row must also have no extra
   vertical height/padding of its own.
*/
.category-scroll{
    height:auto !important;
    min-height:0 !important;

    margin:0 !important;
    padding-top:0 !important;
    padding-bottom:0 !important;

    align-items:center !important;
}


/*
   SAME RECTANGLE SIZE FOR EVERY CATEGORY.
   Text length must NOT determine chip dimensions.
*/
.category-chip{
    flex:0 0 220px !important;

    width:220px !important;
    min-width:220px !important;
    max-width:220px !important;

    height:80px !important;
    min-height:80px !important;
    max-height:80px !important;

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

    padding:0 12px !important;

    border-radius:0 !important;

    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    text-align:center !important;
    white-space:normal !important;
    line-height:1.2 !important;

    box-sizing:border-box !important;
}


/* ==========================================================
   REMOVE EXTRA GAP FROM THE SECTION AFTER THE CHIPS
   ========================================================== */

#homeSponsorBanner{
    margin-top:0 !important;
}


/* ==========================================================
   MOBILE
   ========================================================== */

@media(max-width:620px){

    .category-section{
        height:auto !important;
        min-height:0 !important;

        /*
           Equal compact breathing room above and below.
        */
        padding-top:12px !important;
        padding-bottom:12px !important;

        margin:0 !important;
    }

    .category-scroll{
        height:auto !important;
        min-height:0 !important;

        padding-top:0 !important;
        padding-bottom:0 !important;

        margin:0 !important;

        align-items:center !important;
    }

    .category-chip{
        /*
           Every rectangle remains IDENTICAL.
        */
        flex:0 0 220px !important;

        width:220px !important;
        min-width:220px !important;
        max-width:220px !important;

        height:80px !important;
        min-height:80px !important;
        max-height:80px !important;

        margin:0 !important;

        border-radius:0 !important;
    }

    #homeSponsorBanner{
        margin-top:0 !important;
    }
}
.category-section{
    margin-top:22px;
    margin-right:0;
    margin-bottom:0 !important;
    margin-left:0;
}

.category-scroll{
    padding-top:0;
    padding-right:0;
    padding-bottom:5px !important;
    padding-left:0;

    gap:14px;
}
/* ==========================================================
   CATEGORY CHIPS — PLUM CANVAS
   MATCH WHITE-LAYOUT SPACING
   ========================================================== */

.category-section{
    margin-top:22px !important;
    margin-right:0 !important;
    margin-bottom:0 !important;
    margin-left:0 !important;
}

.category-scroll{
    gap:14px !important;

    padding-top:0 !important;
    padding-right:0 !important;
    padding-bottom:5px !important;
    padding-left:0 !important;
}
/* ==========================================================
   NEXORA HOMEPAGE — HEADER + MERCHANDISE RESTYLE
   ONLY THESE ELEMENTS
   ========================================================== */


/* ==========================================================
   1. MAIN COMMERCE HEADER
   Deep plum glass — blends into homepage canvas
   ========================================================== */

html body .nx-commerce-header{
    background:
        linear-gradient(
            135deg,
            rgba(54,38,63,.97) 0%,
            rgba(38,27,44,.97) 52%,
            rgba(28,22,34,.98) 100%
        ) !important;

    border-bottom:
        1px solid rgba(255,255,255,.10) !important;

    box-shadow:
        0 10px 30px rgba(8,5,12,.22),
        inset 0 -1px 0 rgba(255,255,255,.025) !important;

    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
}


/* ==========================================================
   HEADER ICONS
   ========================================================== */

html body .nx-commerce-header .nx-commerce-action{
    color:#ffffff !important;

    background:
        rgba(255,255,255,.055) !important;

    border:
        1px solid rgba(255,255,255,.09) !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.05) !important;
}


html body .nx-commerce-header .nx-commerce-action:active{
    background:
        rgba(255,255,255,.13) !important;

    transform:scale(.96);
}


/* profile image ring */

html body .nx-commerce-header .nx-profile-action img{
    border:
        1px solid rgba(255,255,255,.28) !important;
}


/* notification counter */

html body .nx-commerce-header .nx-header-count{
    border-color:#261b2c !important;
}



/* ==========================================================
   2. MERCHANDISE BUTTON / TAB
   Warm champagne glass accent
   ========================================================== */

/*
   Covers the common Merchandise button/tab forms without
   changing category chips or product cards.
*/

html body .merchandise-btn,
html body .merchandise-button,
html body #merchandiseBtn,
html body [data-tab="merchandise"],
html body [data-section="merchandise"]{

    min-height:42px;

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

    padding:0 18px !important;

    background:
        linear-gradient(
            135deg,
            rgba(255,248,232,.96),
            rgba(235,220,195,.92)
        ) !important;

    color:#261b2c !important;

    border:
        1px solid rgba(255,255,255,.52) !important;

    border-radius:10px !important;

    box-shadow:
        0 6px 18px rgba(8,5,12,.16),
        inset 0 1px 0 rgba(255,255,255,.75) !important;

    font-family:'Outfit',sans-serif;

    font-size:11px !important;
    font-weight:800 !important;

    letter-spacing:.25px;

    text-decoration:none !important;

    transition:
        transform .16s ease,
        box-shadow .16s ease,
        background .16s ease;
}


html body .merchandise-btn:active,
html body .merchandise-button:active,
html body #merchandiseBtn:active,
html body [data-tab="merchandise"]:active,
html body [data-section="merchandise"]:active{

    transform:scale(.97);

    box-shadow:
        0 3px 10px rgba(8,5,12,.14) !important;
}



/* ==========================================================
   MOBILE
   ========================================================== */

@media(max-width:620px){

    html body .nx-commerce-header{
        min-height:70px;

        padding-left:14px;
        padding-right:14px;
    }

    html body .nx-commerce-header .nx-commerce-action{
        width:42px;
        height:42px;
    }

}
/* NEXORA HEADER WORDMARK — WHITE */
.nx-commerce-header .nx-commerce-wordmark{
    color:#ffffff !important;
}
/* Small spacing between header action buttons */
.nx-commerce-header .nx-commerce-actions{
    gap:6px !important;
}
/* ==========================================================
   APP TABS — WARM TONE
   ========================================================== */

.nx-app-tabs{
    background:#F4EBDD;
    border-top-color:rgba(255,255,255,.06);
    border-bottom-color:rgba(38,24,43,.14);
}
/* ==========================================================
   NEXORA — MINIMAL CATEGORY DIRECTORY
   26 STATIC HTML CATEGORY TILES
   PLUM + IVORY
   ========================================================== */


/* ==========================================================
   CATEGORY GRID
   ========================================================== */

.nx-category-grid{
    width:min(calc(100% - 28px),1180px);
    margin:14px auto;
    padding:0;

    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:10px;

    box-sizing:border-box;
}


/* ==========================================================
   CATEGORY TILE
   ========================================================== */

.nx-category-grid .nx-category-tile{
    position:relative;

    width:100%;
    height:142px;
    min-width:0;

    padding:16px 17px;

    display:flex;
    flex-direction:column;
    justify-content:space-between;

    box-sizing:border-box;

    background:#F4EBDD;

    border:1px solid rgba(38,27,44,.14);
    border-radius:4px;

    color:#261B2C;
    text-decoration:none;

    overflow:hidden;

    -webkit-tap-highlight-color:transparent;

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


/* ==========================================================
   CATEGORY NUMBER
   ========================================================== */

.nx-category-grid .nx-category-number{
    display:block;

    margin:0;
    padding:0;

    font-size:10px;
    line-height:1;
    font-weight:700;

    letter-spacing:.14em;

    color:rgba(38,27,44,.46);
}


/* ==========================================================
   LOWER CONTENT
   ========================================================== */

.nx-category-grid .nx-category-content{
    width:100%;
    min-width:0;

    display:flex;
    align-items:flex-end;
    justify-content:space-between;

    gap:12px;
}


/* ==========================================================
   CATEGORY NAME
   ========================================================== */

.nx-category-grid .nx-category-content h3{
    min-width:0;
    max-width:72%;

    margin:0;
    padding:0;

    font-size:17px;
    line-height:1.12;
    font-weight:700;

    letter-spacing:-.25px;

    color:#261B2C;

    overflow-wrap:break-word;
}


/* ==========================================================
   EXPLORE LINK
   ========================================================== */

.nx-category-grid .nx-category-link{
    flex:0 0 auto;

    margin:0;
    padding:0 0 1px;

    white-space:nowrap;

    font-size:9px;
    line-height:1;
    font-weight:800;

    letter-spacing:.06em;
    text-transform:uppercase;

    color:rgba(38,27,44,.58);
}


/* ==========================================================
   VERY SUBTLE INTERACTION
   ========================================================== */

@media(hover:hover){

    .nx-category-grid .nx-category-tile:hover{
        transform:translateY(-2px);

        background:#F8F0E5;

        border-color:rgba(38,27,44,.24);
    }

}


.nx-category-grid .nx-category-tile:active{
    transform:scale(.985);
}


/* ==========================================================
   KEYBOARD ACCESSIBILITY
   ========================================================== */

.nx-category-grid .nx-category-tile:focus-visible{
    outline:2px solid #F4EBDD;
    outline-offset:3px;
}


/* ==========================================================
   FIRST TILE — PLUM FEATURE TILE
   ========================================================== */

.nx-category-grid .nx-category-tile:first-child{
    background:#261B2C;

    border-color:rgba(244,235,221,.20);

    color:#F4EBDD;
}


.nx-category-grid .nx-category-tile:first-child
.nx-category-number{
    color:rgba(244,235,221,.52);
}


.nx-category-grid .nx-category-tile:first-child
.nx-category-content h3{
    color:#F4EBDD;
}


.nx-category-grid .nx-category-tile:first-child
.nx-category-link{
    color:rgba(244,235,221,.70);
}


@media(hover:hover){

    .nx-category-grid .nx-category-tile:first-child:hover{
        background:#211827;

        border-color:rgba(244,235,221,.32);
    }

}


/* ==========================================================
   TABLET / SMALL LAPTOP
   4 → 2 COLUMNS
   ========================================================== */

@media(max-width:900px){

    .nx-category-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));

        gap:10px;
    }

    .nx-category-grid .nx-category-tile{
        height:132px;
    }

}


/* ==========================================================
   PHONE
   KEEP TWO COLUMNS
   ========================================================== */

@media(max-width:620px){

    .nx-category-grid{
        width:calc(100% - 28px);

        margin:10px auto;

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

        gap:8px;
    }


    .nx-category-grid .nx-category-tile{
        height:116px;

        padding:13px 12px;

        border-radius:3px;
    }


    .nx-category-grid .nx-category-number{
        font-size:9px;
    }


    .nx-category-grid .nx-category-content{
        gap:6px;
    }


    .nx-category-grid .nx-category-content h3{
        max-width:100%;

        font-size:14px;
        line-height:1.12;

        letter-spacing:-.15px;
    }


    .nx-category-grid .nx-category-link{
        font-size:8px;

        letter-spacing:.03em;
    }

}


/* ==========================================================
   VERY SMALL PHONE
   2 → 1 COLUMN
   ========================================================== */

@media(max-width:380px){

    .nx-category-grid{
        grid-template-columns:1fr;

        gap:7px;
    }


    .nx-category-grid .nx-category-tile{
        height:96px;

        padding:13px 14px;
    }


    .nx-category-grid .nx-category-content h3{
        max-width:75%;

        font-size:15px;
    }


    .nx-category-grid .nx-category-link{
        font-size:8px;
    }

}
/* ==========================================================
   FIRESTORE CATEGORY PRODUCTS
   MATCH HERO BANNER LEFT / RIGHT EDGES
   ========================================================== */

html body #categorySections{
    width:100% !important;
    max-width:100% !important;

    padding-left:12px !important;
    padding-right:12px !important;

    box-sizing:border-box !important;
}

/* Prevent each generated category section adding a second inset */
html body #categorySections > .nx-home-category-section{
    width:100% !important;

    margin-left:0 !important;
    margin-right:0 !important;

    padding-left:0 !important;
    padding-right:0 !important;

    box-sizing:border-box !important;
}
/* ==========================================================
   FIRESTORE CATEGORY PRODUCTS
   EXACTLY ALIGN WITH HERO BANNER
   ========================================================== */

/* Normal mobile:
   categoryPosters = 10px
   + section = 2px
   = hero's 12px
*/
@media (min-width:381px) and (max-width:480px){

    html body #categoryPosters > .nx-home-category-section{
        padding-left:2px !important;
        padding-right:2px !important;
    }

}


/* Small phones:
   categoryPosters = 8px
   + section = 4px
   = hero's 12px
*/
@media (max-width:380px){

    html body #categoryPosters > .nx-home-category-section{
        padding-left:4px !important;
        padding-right:4px !important;
    }

}
/* ==========================================================
   NEXORA HOMEPAGE SKELETON — CLEAN PREMIUM VERSION
   Exact classes used by current home.js
   ========================================================== */

@keyframes nxSkeletonShimmer {
    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: -200% 0;
    }
}


/* ----------------------------------------------------------
   SHARED SKELETON SURFACE
   ---------------------------------------------------------- */

html body .skeleton-box,
html body .skeleton-line {
    background:
        linear-gradient(
            90deg,
            rgba(244,235,221,.07) 0%,
            rgba(244,235,221,.13) 45%,
            rgba(244,235,221,.20) 50%,
            rgba(244,235,221,.13) 55%,
            rgba(244,235,221,.07) 100%
        ) !important;

    background-size: 220% 100% !important;

    animation:
        nxSkeletonShimmer 1.6s ease-in-out infinite !important;

    border: 0 !important;
    box-shadow: none !important;
}


/* ==========================================================
   CATEGORY SKELETONS
   ========================================================== */

html body #categoryPosters > .skeleton-category {
    width: 100% !important;

    min-height: 94px !important;

    margin: 0 !important;

    padding: 14px 16px !important;

    box-sizing: border-box !important;

    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;

    background:
        rgba(244,235,221,.035) !important;

    border:
        1px solid rgba(244,235,221,.09) !important;

    border-radius: 2px !important;

    overflow: hidden !important;
}


/* small category number placeholder */

html body .skeleton-category > .nx-category-number.skeleton-line {
    display: block !important;

    width: 22px !important;
    height: 7px !important;

    min-height: 7px !important;

    border-radius: 2px !important;
}


/* lower content area */

html body .skeleton-category .nx-category-content {
    display: flex !important;
    align-items: flex-end !important;
    justify-content: space-between !important;

    gap: 14px !important;

    width: 100% !important;
}


/* category-name placeholder */

html body .skeleton-category .nx-category-content h3.skeleton-line {
    width: 44% !important;
    height: 13px !important;

    min-height: 13px !important;

    margin: 0 !important;

    border-radius: 2px !important;
}


/* explore placeholder */

html body .skeleton-category .nx-category-link.skeleton-line {
    display: block !important;

    width: 52px !important;
    height: 8px !important;

    min-height: 8px !important;

    border-radius: 2px !important;
}


/* ==========================================================
   NEW LISTINGS PRODUCT SKELETONS
   ========================================================== */

html body #newListings .skeleton-card {
    background:
        rgba(244,235,221,.045) !important;

    border:
        1px solid rgba(244,235,221,.08) !important;

    box-shadow: none !important;

    border-radius: 2px !important;

    overflow: hidden !important;
}


/* image placeholder */

html body #newListings .skeleton-card .nx-image-wrap.skeleton-box {
    width: 100% !important;

    aspect-ratio: 1 / 1 !important;

    height: auto !important;

    min-height: 0 !important;

    border-radius: 0 !important;
}

/* ==========================================================
   NEXORA MENU — PREMIUM LAYOUT REFINEMENT
   NO COLOUR CHANGES
   ========================================================== */

/* ----------------------------------------------------------
   MENU SHELL
   ---------------------------------------------------------- */

#nxmSideMenu{
    width:min(92vw,430px) !important;

    padding:0 !important;

    overflow-y:auto !important;
    overflow-x:hidden !important;

    overscroll-behavior:contain;

    scrollbar-width:none;

    box-sizing:border-box !important;
}

#nxmSideMenu::-webkit-scrollbar{
    display:none;
}


/* ----------------------------------------------------------
   HEADER
   ---------------------------------------------------------- */

#nxmSideMenu .nxm-header{
    min-height:96px;

    padding:20px 22px;

    display:grid;
    grid-template-columns:48px minmax(0,1fr) 48px;
    align-items:center;

    gap:14px;

    box-sizing:border-box;
}


/* ----------------------------------------------------------
   CLOSE BUTTON
   ---------------------------------------------------------- */

#nxmSideMenu .nxm-close-btn{
    width:46px;
    height:46px;

    display:grid;
    place-items:center;

    padding:0;

    border-radius:14px;

    font-size:20px;

    flex:0 0 auto;

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

#nxmSideMenu .nxm-close-btn:active{
    transform:scale(.95);
}


/* ----------------------------------------------------------
   BRAND
   ---------------------------------------------------------- */

#nxmSideMenu .nxm-brand{
    min-width:0;

    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;

    gap:5px;

    text-align:center;
}

#nxmSideMenu .nxm-brand h1{
    margin:0;

    font-size:26px;
    line-height:1;

    font-weight:800;

    letter-spacing:4px;
}

#nxmSideMenu .nxm-brand span{
    font-size:10px;
    line-height:1;

    font-weight:600;

    letter-spacing:1.4px;
}


/* ----------------------------------------------------------
   PROFILE SHORTCUT
   ---------------------------------------------------------- */

#nxmSideMenu .nx-profile-shortcut{
    width:46px;
    height:46px;

    display:grid;
    place-items:center;

    border-radius:14px;

    font-size:23px;

    text-decoration:none;

    flex:0 0 auto;

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

#nxmSideMenu .nx-profile-shortcut:active{
    transform:scale(.95);
}


/* ----------------------------------------------------------
   DIVIDER
   ---------------------------------------------------------- */

#nxmSideMenu .nxm-divider{
    width:calc(100% - 44px);

    margin:0 22px;

    height:1px;
}


/* ----------------------------------------------------------
   MAIN NAVIGATION
   ---------------------------------------------------------- */

#nxmSideMenu .nxm-navigation{
    padding:
        10px
        22px
        34px !important;

    box-sizing:border-box;
}


/* ----------------------------------------------------------
   SECTION TITLES
   ---------------------------------------------------------- */

#nxmSideMenu .nxm-section-title{
    margin:
        26px
        0
        12px;

    padding:0;

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

    gap:8px;

    font-size:10px;
    line-height:1.2;

    font-weight:800;

    letter-spacing:1.5px;
}


/* first section should not start too far down */
#nxmSideMenu .nxm-navigation > .nxm-section-title:first-child{
    margin-top:14px;
}


/* ----------------------------------------------------------
   MAIN LINKS
   ---------------------------------------------------------- */

#nxmSideMenu .nxm-link{
    position:relative;

    width:100%;

    min-height:52px;

    display:flex;
    align-items:center;

    gap:10px;

    padding:
        14px
        14px;

    margin:0;

    box-sizing:border-box;

    border-radius:12px;

    font-size:15px;
    line-height:1.25;

    font-weight:700;

    text-decoration:none;

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

#nxmSideMenu .nxm-link:active{
    transform:scale(.985);
}


/* ----------------------------------------------------------
   DESCRIPTION TEXT
   ---------------------------------------------------------- */

#nxmSideMenu .nxm-text{
    margin:
        5px
        12px
        14px;

    max-width:340px;

    font-size:11px;
    line-height:1.55;

    font-weight:400;
}


/* ----------------------------------------------------------
   COUNTERS / BADGES
   ---------------------------------------------------------- */

#nxmSideMenu .nxm-counter,
#nxmSideMenu .nxm-activity-counter,
#nxmSideMenu .nxm-premium-badge{
    flex:0 0 auto;

    margin-left:auto;

    min-height:20px;

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

    padding:
        4px
        7px;

    border-radius:999px;

    font-size:8px;
    line-height:1;

    font-weight:800;

    letter-spacing:.5px;
}


/* ----------------------------------------------------------
   SOCIAL LINKS
   ---------------------------------------------------------- */

#nxmSideMenu .nxm-social-links{
    display:grid;
    grid-template-columns:
        repeat(3,minmax(0,1fr));

    gap:10px;

    padding:
        4px
        22px
        34px;
}

#nxmSideMenu .nxm-social-links a{
    min-height:46px;

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

    padding:10px 8px;

    border-radius:12px;

    font-size:11px;
    font-weight:700;

    text-align:center;
    text-decoration:none;

    box-sizing:border-box;

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

#nxmSideMenu .nxm-social-links a:active{
    transform:scale(.96);
}


/* ----------------------------------------------------------
   QUICK FLOATING NAV
   Keep existing behaviour — refine sizing only
   ---------------------------------------------------------- */

#nxmSideMenu .nxm-quick-nav{
    gap:8px;
}

#nxmSideMenu .nxm-quick-nav-btn{
    min-height:40px !important;

    padding:
        8px
        12px !important;

    font-size:10px !important;

    line-height:1.2;

    border-radius:999px !important;
}


/* ==========================================================
   TABLET / SMALL DESKTOP
   ========================================================== */

@media(max-width:900px){

    #nxmSideMenu{
        width:min(94vw,410px) !important;
    }

    #nxmSideMenu .nxm-header{
        padding:
            18px
            20px;
    }

    #nxmSideMenu .nxm-navigation{
        padding-left:20px !important;
        padding-right:20px !important;
    }

}


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

@media(max-width:620px){

    #nxmSideMenu{
        width:100% !important;
        max-width:100% !important;
    }


    #nxmSideMenu .nxm-header{
        min-height:82px;

        padding:
            14px
            14px;

        grid-template-columns:
            44px
            minmax(0,1fr)
            44px;

        gap:10px;
    }


    #nxmSideMenu .nxm-close-btn,
    #nxmSideMenu .nx-profile-shortcut{
        width:42px;
        height:42px;

        border-radius:12px;
    }


    #nxmSideMenu .nxm-brand h1{
        font-size:22px;

        letter-spacing:3px;
    }


    #nxmSideMenu .nxm-brand span{
        font-size:9px;
    }


    #nxmSideMenu .nxm-divider{
        width:calc(100% - 28px);

        margin-left:14px;
        margin-right:14px;
    }


    #nxmSideMenu .nxm-navigation{
        padding:
            6px
            14px
            28px !important;
    }


    #nxmSideMenu .nxm-section-title{
        margin-top:22px;
        margin-bottom:9px;

        font-size:9px;
    }


    #nxmSideMenu .nxm-link{
        min-height:50px;

        padding:
            13px
            12px;

        border-radius:10px;

        font-size:14px;
    }


    #nxmSideMenu .nxm-text{
        margin:
            4px
            10px
            12px;

        font-size:10.5px;
        line-height:1.5;
    }


    #nxmSideMenu .nxm-social-links{
        padding:
            2px
            14px
            28px;

        gap:8px;
    }


    #nxmSideMenu .nxm-social-links a{
        min-height:44px;

        border-radius:10px;

        font-size:10px;
    }

}


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

@media(max-width:380px){

    #nxmSideMenu .nxm-header{
        padding-left:10px;
        padding-right:10px;
    }


    #nxmSideMenu .nxm-navigation{
        padding-left:10px !important;
        padding-right:10px !important;
    }


    #nxmSideMenu .nxm-link{
        min-height:48px;

        padding:
            12px
            10px;

        font-size:13px;
    }


    #nxmSideMenu .nxm-text{
        margin-left:8px;
        margin-right:8px;
    }


    #nxmSideMenu .nxm-social-links{
        padding-left:10px;
        padding-right:10px;

        gap:6px;
    }

}
/* ==========================================================
   FINAL HOMEPAGE SPONSORED PRODUCT CARD
   FORCE PURE WHITE
========================================================== */

html body #categoryPosters
.sponsored-feed-section
.sponsored-feed-card{
    background:#ffffff !important;
    background-color:#ffffff !important;
    background-image:none !important;
}

html body #categoryPosters
.sponsored-feed-section
.sponsored-feed-card
.sponsored-feed-image{
    background:#ffffff !important;
    background-color:#ffffff !important;
    background-image:none !important;
}

html body #categoryPosters
.sponsored-feed-section
.sponsored-feed-card
.sponsored-feed-info{
    background:#ffffff !important;
    background-color:#ffffff !important;
    background-image:none !important;
}

html body #categoryPosters
.sponsored-feed-section
.sponsored-feed-card::before,

html body #categoryPosters
.sponsored-feed-section
.sponsored-feed-card::after,

html body #categoryPosters
.sponsored-feed-section
.sponsored-feed-info::before,

html body #categoryPosters
.sponsored-feed-section
.sponsored-feed-info::after{
    background:none !important;
    background-image:none !important;
}

html body #categoryPosters
.sponsored-feed-title{
    color:#211827 !important;
}

html body #categoryPosters
.sponsored-feed-price{
    color:#159447 !important;
}


/* ==========================================================
   NEXORA HOMEPAGE — LAPTOP / DESKTOP RESPONSIVENESS ONLY

   IMPORTANT:
   - Nothing below applies below 1024px.
   - Existing phone and tablet rules remain untouched.
   - Existing colours, card styling, spacing and mobile layout
     are preserved exactly as defined above.
   ========================================================== */


/* ==========================================================
   LAPTOPS — 1024px+
   ========================================================== */

@media (min-width:1024px){

    /* Keep homepage content centred and prevent awkward stretching */
    html body .category-section,
    html body #premiumSection,
    html body #categorySections,
    html body #categoryPosters,
    html body #newListings,
    html body #spinSection,
    html body #escrowWrapper{
        width:calc(100% - 48px) !important;
        max-width:1280px !important;
        margin-left:auto !important;
        margin-right:auto !important;
        box-sizing:border-box !important;
    }

    /* Category navigation stays horizontal but uses desktop width cleanly */
    html body section.category-section #categoryScroll.category-scroll{
        width:100% !important;
        overflow-x:auto !important;
        overflow-y:hidden !important;
        flex-wrap:nowrap !important;
        -webkit-overflow-scrolling:touch;
        scrollbar-width:none !important;
    }

    html body section.category-section #categoryScroll.category-scroll::-webkit-scrollbar{
        display:none !important;
    }

    /* Homepage category products use a clean laptop grid */
    html body .nx-home-category-products{
        display:grid !important;
        grid-template-columns:repeat(4,minmax(0,1fr)) !important;
        gap:14px !important;
        overflow:visible !important;
    }

    html body .nx-category-product-card,
    html body .nx-category-empty-card{
        width:100% !important;
        min-width:0 !important;
        max-width:none !important;
    }

    /* New listings adapt to available laptop width */
    html body #newListings{
        display:grid !important;
        grid-template-columns:repeat(4,minmax(0,1fr)) !important;
        gap:14px !important;
    }

    html body #newListings > *{
        width:100% !important;
        min-width:0 !important;
        max-width:none !important;
    }
}


/* ==========================================================
   STANDARD DESKTOPS — 1280px+
   ========================================================== */

@media (min-width:1280px){

    html body .category-section,
    html body #premiumSection,
    html body #categorySections,
    html body #categoryPosters,
    html body #newListings,
    html body #spinSection,
    html body #escrowWrapper{
        width:calc(100% - 64px) !important;
        max-width:1440px !important;
    }

    /* Six category products fit naturally across desktop */
    html body .nx-home-category-products{
        grid-template-columns:repeat(6,minmax(0,1fr)) !important;
        gap:16px !important;
    }

    html body #newListings{
        grid-template-columns:repeat(5,minmax(0,1fr)) !important;
        gap:16px !important;
    }
}


/* ==========================================================
   WIDE DESKTOPS — 1600px+
   ========================================================== */

@media (min-width:1600px){

    html body .category-section,
    html body #premiumSection,
    html body #categorySections,
    html body #categoryPosters,
    html body #newListings,
    html body #spinSection,
    html body #escrowWrapper{
        max-width:1500px !important;
    }

    html body #newListings{
        grid-template-columns:repeat(6,minmax(0,1fr)) !important;
    }
}
/* ==========================================================
   NEXORA HEADER WORDMARK
   PRESERVE ORIGINAL PLUM HEADER APPEARANCE
========================================================== */

html body .nx-commerce-header .nx-commerce-wordmark{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    color:#ffffff !important;
    -webkit-text-fill-color:#ffffff !important;

    font-family:'Outfit',sans-serif !important;
    font-size:17px !important;
    font-weight:800 !important;
    letter-spacing:3px !important;

    line-height:1 !important;

    text-transform:uppercase !important;
    text-decoration:none !important;

    white-space:nowrap !important;

    visibility:visible !important;
    opacity:1 !important;

    cursor:pointer !important;

    user-select:none !important;
    -webkit-user-select:none !important;

    -webkit-tap-highlight-color:transparent !important;
}

@media(max-width:520px){

    html body .nx-commerce-header .nx-commerce-wordmark{
        font-size:16px !important;
        letter-spacing:3px !important;
    }

}

@media(max-width:380px){

    html body .nx-commerce-header .nx-commerce-wordmark{
        font-size:15px !important;
        letter-spacing:2.7px !important;
    }

}
/* ==========================================================
   NEXORA WORDMARK — POSITION ONLY
   Shift left to give right-side actions more space
========================================================== */

html body .nx-commerce-header .nx-commerce-wordmark{
    transform:translateX(-18px) !important;
}

@media(max-width:520px){
    html body .nx-commerce-header .nx-commerce-wordmark{
        transform:translateX(-22px) !important;
    }
}

@media(max-width:380px){
    html body .nx-commerce-header .nx-commerce-wordmark{
        transform:translateX(-16px) !important;
    }
}
/* ==========================================================
   NEXORA MENU
   GLOSSY PLUM + CONNECT-STYLE TYPOGRAPHY
   FINAL VISUAL OVERRIDE ONLY
========================================================== */


/* ==========================================================
   1. WHOLE MENU — SAME GLOSSY PLUM FAMILY AS HOME HEADER
========================================================== */

html body #nxmSideMenu{
    background:
        radial-gradient(
            circle at 18% 0%,
            rgba(255,255,255,.055),
            transparent 31%
        ),
        radial-gradient(
            circle at 88% 18%,
            rgba(120,78,132,.10),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            rgba(54,38,63,.985) 0%,
            rgba(38,27,44,.99) 52%,
            rgba(28,22,34,.995) 100%
        ) !important;

    background-color:#261b2c !important;

    color:#ffffff !important;

    border:0 !important;

    box-shadow:
        inset -1px 0 0 rgba(255,255,255,.07),
        16px 0 45px rgba(5,3,8,.34) !important;

    backdrop-filter:blur(20px) saturate(125%) !important;
    -webkit-backdrop-filter:blur(20px) saturate(125%) !important;
}


/* ==========================================================
   2. MENU HEADER
   Keep it part of the same glossy surface
========================================================== */

html body #nxmSideMenu .nxm-header{
    background:
        linear-gradient(
            135deg,
            rgba(60,42,69,.94) 0%,
            rgba(42,29,49,.95) 55%,
            rgba(30,23,36,.97) 100%
        ) !important;

    border-bottom:
        1px solid rgba(255,255,255,.10) !important;

    box-shadow:
        0 10px 28px rgba(7,4,10,.16),
        inset 0 -1px 0 rgba(255,255,255,.025) !important;

    backdrop-filter:blur(20px) saturate(125%) !important;
    -webkit-backdrop-filter:blur(20px) saturate(125%) !important;
}


/* ==========================================================
   3. MENU BRAND
========================================================== */

html body #nxmSideMenu .nxm-brand h1{
    color:#ffffff !important;
    -webkit-text-fill-color:#ffffff !important;

    font-family:'Outfit',sans-serif !important;

    font-weight:800 !important;

    letter-spacing:4px !important;
}


html body #nxmSideMenu .nxm-brand span{
    color:rgba(255,255,255,.58) !important;

    font-family:'Outfit',sans-serif !important;

    font-weight:600 !important;

    letter-spacing:3px !important;
}


/* ==========================================================
   4. PROFILE + CLOSE BUTTON
========================================================== */

html body #nxmSideMenu .nx-profile-shortcut,
html body #nxmSideMenu .nxm-close-btn{
    color:#ffffff !important;
    -webkit-text-fill-color:#ffffff !important;

    background:
        rgba(255,255,255,.055) !important;

    border:
        1px solid rgba(255,255,255,.10) !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.06) !important;

    backdrop-filter:blur(12px) !important;
    -webkit-backdrop-filter:blur(12px) !important;
}


html body #nxmSideMenu .nx-profile-shortcut:active,
html body #nxmSideMenu .nxm-close-btn:active{
    background:
        rgba(255,255,255,.13) !important;
}


/* ==========================================================
   5. NAVIGATION SURFACE
   REMOVE THE CURRENT WHITE BACKGROUND
========================================================== */

html body #nxmSideMenu .nxm-navigation{
    background:transparent !important;
    background-color:transparent !important;
}


/* ==========================================================
   6. MENU LINKS
   INSPIRED BY NEXORA CONNECT:
   condensed-feeling, uppercase, strong, editorial
========================================================== */

html body #nxmSideMenu .nxm-link{
    background:transparent !important;

    color:#ffffff !important;
    -webkit-text-fill-color:#ffffff !important;

    font-family:
        "Arial Narrow",
        "Roboto Condensed",
        "Helvetica Neue Condensed",
        "Arial",
        sans-serif !important;

    font-size:23px !important;

    font-weight:500 !important;

    font-stretch:condensed;

    line-height:1.08 !important;

    letter-spacing:.6px !important;

    text-transform:uppercase !important;

    min-height:62px !important;

    padding:
        16px 58px
        14px 24px !important;

    border:0 !important;

    box-shadow:none !important;
}


/* Connect-style clean press response */

html body #nxmSideMenu .nxm-link:active{
    background:
        rgba(255,255,255,.055) !important;
}


/* ==========================================================
   7. RIGHT CHEVRON
   Keep very understated
========================================================== */

html body #nxmSideMenu .nxm-link::after{
    color:rgba(255,255,255,.44) !important;

    font-size:25px !important;

    font-weight:300 !important;

    opacity:1 !important;
}


/* ==========================================================
   8. DESCRIPTIONS
   Much quieter than main Connect-style headings
========================================================== */

html body #nxmSideMenu .nxm-text{
    color:rgba(255,255,255,.53) !important;
    -webkit-text-fill-color:rgba(255,255,255,.53) !important;

    font-family:'Outfit',sans-serif !important;

    font-size:11px !important;

    font-weight:400 !important;

    line-height:1.55 !important;

    letter-spacing:.15px !important;
}


/* ==========================================================
   9. SECTION TITLES
========================================================== */

html body #nxmSideMenu .nxm-section-title{
    color:rgba(255,255,255,.45) !important;
    -webkit-text-fill-color:rgba(255,255,255,.45) !important;

    border-bottom:
        1px solid rgba(255,255,255,.09) !important;

    font-family:'Outfit',sans-serif !important;

    font-size:9px !important;

    font-weight:800 !important;

    letter-spacing:2.2px !important;
}


/* ==========================================================
   10. DIVIDERS
========================================================== */

html body #nxmSideMenu .nxm-divider{
    border-color:rgba(255,255,255,.09) !important;
}


/* ==========================================================
   11. BADGES / COUNTERS
========================================================== */

html body #nxmSideMenu .nxm-counter,
html body #nxmSideMenu .nxm-activity-counter{
    background:#ffffff !important;

    color:#261b2c !important;
    -webkit-text-fill-color:#261b2c !important;

    box-shadow:
        0 4px 12px rgba(0,0,0,.18) !important;
}


html body #nxmSideMenu .nxm-premium-badge{
    background:
        rgba(255,255,255,.08) !important;

    color:#ffffff !important;
    -webkit-text-fill-color:#ffffff !important;

    border:
        1px solid rgba(255,255,255,.18) !important;
}


/* ==========================================================
   12. SOCIAL FOOTER
========================================================== */

html body #nxmSideMenu .nxm-social-links{
    background:transparent !important;

    border-top:
        1px solid rgba(255,255,255,.09) !important;
}


html body #nxmSideMenu .nxm-social-links a{
    background:transparent !important;

    color:rgba(255,255,255,.57) !important;
    -webkit-text-fill-color:rgba(255,255,255,.57) !important;

    border:0 !important;

    font-family:'Outfit',sans-serif !important;

    letter-spacing:1px !important;
}


/* ==========================================================
   13. INSTALL BUTTON
========================================================== */

html body #nxmSideMenu .nxm-install-btn{
    background:
        rgba(255,255,255,.045) !important;

    color:#ffffff !important;
    -webkit-text-fill-color:#ffffff !important;

    border:
        1px solid rgba(255,255,255,.30) !important;

    border-radius:0 !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.05) !important;

    font-family:
        "Arial Narrow",
        "Roboto Condensed",
        Arial,
        sans-serif !important;

    font-weight:600 !important;

    letter-spacing:1.5px !important;

    text-transform:uppercase !important;
}


/* ==========================================================
   14. PHONE
========================================================== */

@media(max-width:700px){

    html body #nxmSideMenu .nxm-link{
        min-height:58px !important;

        padding:
            14px 54px
            12px 22px !important;

        font-size:21px !important;

        letter-spacing:.45px !important;
    }


    html body #nxmSideMenu .nxm-link::after{
        right:22px !important;

        font-size:24px !important;
    }


    html body #nxmSideMenu .nxm-text{
        margin-left:22px !important;
        margin-right:22px !important;

        color:
            rgba(255,255,255,.50) !important;

        -webkit-text-fill-color:
            rgba(255,255,255,.50) !important;

        font-size:10.5px !important;
    }

}


/* ==========================================================
   15. VERY SMALL PHONES
========================================================== */

@media(max-width:380px){

    html body #nxmSideMenu .nxm-link{
        font-size:19px !important;

        letter-spacing:.35px !important;
    }

}
/* ==========================================================
   NEXORA MENU HEADER ACTIONS
   PROFILE + CLOSE FLOAT DIRECTLY ON PLUM BACKGROUND
========================================================== */

html body #nxmSideMenu .nx-profile-shortcut,
html body #nxmSideMenu .nxm-close-btn{
    background:transparent !important;
    background-color:transparent !important;
    background-image:none !important;

    border:none !important;
    outline:none !important;

    box-shadow:none !important;

    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;

    border-radius:0 !important;
}


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

html body #nxmSideMenu .nx-profile-shortcut{
    overflow:visible !important;
}

html body #nxmSideMenu .nx-profile-shortcut img{
    display:block !important;

    width:42px !important;
    height:42px !important;

    object-fit:cover !important;

    border:none !important;
    outline:none !important;

    box-shadow:none !important;

    border-radius:50% !important;

    background:transparent !important;
}


/* ==========================================================
   CLOSE X
========================================================== */

html body #nxmSideMenu .nxm-close-btn{
    color:#ffffff !important;
    -webkit-text-fill-color:#ffffff !important;

    width:44px !important;
    height:44px !important;

    padding:0 !important;

    font-size:31px !important;
    font-weight:300 !important;

    display:grid !important;
    place-items:center !important;
}


/* PRESS STATE — NO BOX APPEARS */
html body #nxmSideMenu .nx-profile-shortcut:active,
html body #nxmSideMenu .nxm-close-btn:active,
html body #nxmSideMenu .nx-profile-shortcut:hover,
html body #nxmSideMenu .nxm-close-btn:hover{
    background:transparent !important;

    border:none !important;

    box-shadow:none !important;
}
/* ==========================================================
   NEXORA SEARCH + WISHLIST
   DARK PLUM PREMIUM THEME
   Paste AFTER previous modal CSS
   ========================================================== */

html body .nx-search-overlay,
html body .nx-wishlist-overlay{
    background:rgba(8, 5, 12, .68) !important;
    backdrop-filter:blur(7px) !important;
    -webkit-backdrop-filter:blur(7px) !important;
}


/* =========================
   SEARCH PANEL
   ========================= */

html body .nx-search-panel{
    background:
        linear-gradient(
            145deg,
            #29172d 0%,
            #211326 48%,
            #17101e 100%
        ) !important;

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

    border-bottom:1px solid rgba(255,255,255,.08) !important;

    box-shadow:
        0 25px 65px rgba(0,0,0,.45),
        inset 0 -1px 0 rgba(255,255,255,.04) !important;
}


/* search header */

html body .nx-search-panel-top{
    background:transparent !important;

    border-bottom:
        1px solid rgba(255,255,255,.08) !important;

    padding:14px 18px !important;
}


html body .nx-search-panel-top strong{
    color:#ffffff !important;
    font-size:20px !important;
    font-weight:800 !important;
}


/* search back + close buttons */

html body .nx-search-panel .nx-sheet-icon{
    width:46px !important;
    height:46px !important;

    background:
        rgba(255,255,255,.08) !important;

    color:#ffffff !important;

    border:
        1px solid rgba(255,255,255,.10) !important;

    border-radius:50% !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.06) !important;
}


html body .nx-search-panel .nx-sheet-icon:active{
    background:
        rgba(255,255,255,.16) !important;

    transform:scale(.94) !important;
}


/* search body */

html body .nx-overlay-search{
    background:transparent !important;

    padding:
        24px 20px
        30px !important;
}


/* search field */

html body .nx-overlay-search .search-wrapper{
    min-height:62px !important;

    background:
        rgba(255,255,255,.09) !important;

    border:
        1px solid rgba(255,255,255,.15) !important;

    border-radius:20px !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.05),
        0 8px 24px rgba(0,0,0,.12) !important;
}


html body .nx-overlay-search .search-wrapper:focus-within{
    background:
        rgba(255,255,255,.13) !important;

    border-color:
        rgba(215,181,91,.65) !important;

    box-shadow:
        0 0 0 3px rgba(215,181,91,.10),
        0 8px 24px rgba(0,0,0,.16) !important;
}


html body .nx-overlay-search .search-wrapper > i{
    color:#d4c8d7 !important;
}


html body .nx-overlay-search #globalSearch{
    color:#ffffff !important;
    -webkit-text-fill-color:#ffffff !important;

    caret-color:#d8b75c !important;

    background:transparent !important;
}


html body .nx-overlay-search #globalSearch::placeholder{
    color:#b7aabd !important;
    -webkit-text-fill-color:#b7aabd !important;
}


/* search clear button */

html body .nx-overlay-search #clearSearch{
    background:
        rgba(255,255,255,.10) !important;

    color:#ffffff !important;
}


/* search results / suggestions */

html body .nx-overlay-search #searchSuggestions,
html body .nx-overlay-search .search-suggestions{
    background:#24152a !important;

    border:
        1px solid rgba(255,255,255,.09) !important;

    border-radius:16px !important;

    box-shadow:
        0 18px 40px rgba(0,0,0,.30) !important;
}


html body .nx-overlay-search #searchSuggestions .search-item{
    color:#ffffff !important;
}


html body .nx-overlay-search #searchSuggestions .search-item:active{
    background:
        rgba(255,255,255,.08) !important;
}


/* =========================
   WISHLIST
   ========================= */

html body .nx-wishlist-sheet{
    background:
        linear-gradient(
            145deg,
            #29172d 0%,
            #211326 52%,
            #17101e 100%
        ) !important;

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

    border:
        1px solid rgba(255,255,255,.08) !important;

    border-bottom:0 !important;

    box-shadow:
        0 -28px 70px rgba(0,0,0,.42) !important;
}


/* handle */

html body .nx-wishlist-handle{
    background:
        rgba(255,255,255,.32) !important;
}


/* wishlist header */

html body .nx-wishlist-head{
    background:transparent !important;

    border-bottom:
        1px solid rgba(255,255,255,.08) !important;
}


html body .nx-wishlist-head span{
    color:#d8b75c !important;
}


html body .nx-wishlist-head h2{
    color:#ffffff !important;
}


/* wishlist close */

html body .nx-wishlist-head .nx-sheet-icon{
    background:
        rgba(255,255,255,.08) !important;

    color:#ffffff !important;

    border:
        1px solid rgba(255,255,255,.10) !important;

    border-radius:50% !important;
}


html body .nx-wishlist-head .nx-sheet-icon:active{
    background:
        rgba(255,255,255,.15) !important;
}


/* wishlist content */

html body .nx-wishlist-products{
    background:transparent !important;
}


/* empty wishlist */

html body .nx-wishlist-state{
    color:#b7aabd !important;
}


html body .nx-wishlist-state i{
    color:#d8b75c !important;
}


html body .nx-wishlist-state strong{
    color:#ffffff !important;
}


html body .nx-wishlist-state p{
    color:#b7aabd !important;
}


/* wishlist CTA */

html body .nx-wishlist-state a{
    background:#d8b75c !important;

    color:#211326 !important;

    box-shadow:
        0 8px 24px rgba(0,0,0,.20) !important;
}


/* =========================
   SAVED PRODUCT CARDS
   ========================= */

html body .nx-wishlist-card{
    border-bottom:
        1px solid rgba(255,255,255,.08) !important;

    color:#ffffff !important;
}


html body .nx-wishlist-card img{
    background:
        rgba(255,255,255,.08) !important;

    border:
        1px solid rgba(255,255,255,.08) !important;

    border-radius:14px !important;
}


html body .nx-wishlist-card h3{
    color:#ffffff !important;
}


html body .nx-wishlist-card .nx-wish-price{
    color:#e2c66f !important;
}


html body .nx-wishlist-card .nx-wish-meta{
    color:#a99eae !important;
}


html body .nx-wishlist-remove{
    background:
        rgba(255,255,255,.08) !important;

    color:#ff8c8c !important;

    border:
        1px solid rgba(255,255,255,.08) !important;
}


/* =========================
   MOBILE
   ========================= */

@media(max-width:520px){

    html body .nx-search-panel{
        border-radius:
            0 0
            24px 24px !important;
    }

    html body .nx-wishlist-sheet{
        border-radius:
            26px 26px
            0 0 !important;
    }

    html body .nx-search-panel-top{
        padding:
            11px 15px !important;
    }

    html body .nx-overlay-search{
        padding:
            20px 18px
            26px !important;
    }

}