/* =========================================
   PART 1 — GLOBAL DESIGN SYSTEM
========================================= */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

:root{

    /* Brand */

    --primary:#16a34a;
    --primary-light:#22c55e;

    --accent:#2563eb;

    /* Surfaces */

  background: linear-gradient(
    135deg,
    #1E2C3E 0%,
    #123D4C 45%,
    #0B5B66 100%
);
    --card:#ffffff;

    /* Text */

    --text:#111827;
    --text-soft:#6b7280;

    /* Radius */

    --radius-sm:14px;
    --radius-md:20px;
    --radius-lg:28px;

    /* Shadows */

    --shadow-sm:
        0 4px 12px rgba(0,0,0,.05);

    --shadow-md:
        0 10px 30px rgba(0,0,0,.08);

    --shadow-lg:
        0 18px 45px rgba(0,0,0,.10);
}

html{
    scroll-behavior:smooth;
}

body{

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

    background:var(--bg);

    color:var(--text);

    overflow-x:hidden;

    min-height:100vh;

    padding-bottom:140px;

    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
}

a{
    text-decoration:none;
    color:inherit;
}

img{
    display:block;
    max-width:100%;
}

button{
    border:none;
    background:none;
    font-family:inherit;
}
/* =========================================
   MOBILE
========================================= */

@media(max-width:380px){

    .cat-card{

        min-width:100px;
        width:100px;

        height:125px;
    }

    .cat-card span{

        width:56px;
        height:56px;

        font-size:28px;
    }

    .cat-card small{

        font-size:13px;
    }
}

/* =========================================
   SMALL DEVICES
========================================= */

@media (max-width:380px){

    .cat-card{

        min-width:88px;
        width:88px;

        height:108px;
    }

    .cat-card span{

        font-size:30px;
    }

    .cat-card small{

        font-size:12px;
    }
}
/* =========================================
   LOADING CARD
========================================= */

.loading-card{

    min-width:190px;

    background:#ffffff;

    border-radius:24px;

    padding:24px 18px;

    text-align:center;

    color:#6b7280;

    font-size:14px;

    font-weight:600;

    box-shadow:
        0 8px 24px rgba(15,23,42,.06);
}


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

#supportBtn{

    position:fixed;

    left:16px;
    bottom:120px;

    width:58px;
    height:58px;

    border-radius:50%;

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

    background:linear-gradient(
        135deg,
        #16a34a,
        #22c55e
    );

    color:#fff;

    font-size:24px;

    cursor:pointer;

    box-shadow:
        0 12px 28px rgba(34,197,94,.30);

    z-index:9998;

    transition:.25s ease;
}

#supportBtn:hover{

    transform:translateY(-3px);
}

.bnpl-card{
background:#38bdf8;
margin-top:-20px;
}

.bluebridge-modal{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,.75);
display:none;
justify-content:center;
align-items:center;
z-index:99999;
padding:20px;
}

.bluebridge-box{
background:white;
width:100%;
max-width:420px;
padding:30px;
border-radius:24px;
box-shadow:0 25px 60px rgba(0,0,0,.25);
animation:pop .3s ease;
}

.bluebridge-box h2{
font-size:24px;
margin-bottom:15px;
color:#0f172a;
}

.bluebridge-box p{
line-height:1.7;
margin-bottom:15px;
color:#475569;
}

.bluebridge-actions{
display:flex;
flex-direction:column;
gap:12px;
margin-top:20px;
}

#continueBlueBridge{
background:linear-gradient(
135deg,
#2563eb,
#38bdf8
);
color:white;
border:none;
padding:15px;
border-radius:14px;
font-weight:700;
font-size:15px;
}

#closeBlueBridge{
background:#f1f5f9;
border:none;
padding:15px;
border-radius:14px;
font-weight:600;
}

@keyframes pop{

from{
opacity:0;
transform:scale(.9);
}

to{
opacity:1;
transform:scale(1);
}

}
.message-pill{
position:relative;
}


/* ==========================
SPIN & WIN CASINO SECTION
========================== */

.spin-section{

position:relative;

padding:30px 18px;

margin:25px 12px;

border-radius:32px;

overflow:hidden;

background:
linear-gradient(
135deg,
#050505,
#161616,
#0d0d0d
);

box-shadow:
0 20px 50px rgba(0,0,0,.35);

}

.spin-section::before{

content:"";

position:absolute;

inset:0;

background:

radial-gradient(
circle at top right,
rgba(255,215,0,.15),
transparent 40%
),

radial-gradient(
circle at bottom left,
rgba(255,140,0,.15),
transparent 40%
);

pointer-events:none;

}

.spin-title{

display:flex;

justify-content:space-between;

align-items:center;

margin-bottom:20px;

}

.spin-title h2{

margin:0;

font-size:28px;

font-weight:800;

color:#FFD700;

letter-spacing:.5px;

}

.spin-title a{

color:#FFD700;

text-decoration:none;

font-weight:700;

}

/* LIVE WINNER TICKER */

.winner-ticker{

background:
linear-gradient(
90deg,
#FFD700,
#FFA500
);

color:black;

padding:14px;

border-radius:18px;

overflow:hidden;

margin-bottom:25px;

font-weight:800;

white-space:nowrap;

}

.ticker-track{

display:inline-block;

animation:
tickerMove 18s linear infinite;

}

@keyframes tickerMove{

0%{
transform:
translateX(100%);
}

100%{
transform:
translateX(-100%);
}

}

/* FEATURED SPIN */

.featured-spin{

position:relative;

background:
linear-gradient(
135deg,
#1b1b1b,
#111111
);

border-radius:28px;

padding:22px;

border:1px solid
rgba(255,215,0,.2);

margin-bottom:18px;

overflow:hidden;

}

.featured-spin::before{

content:"";

position:absolute;

top:-50%;

left:-50%;

width:200%;

height:200%;

background:
conic-gradient(
transparent,
rgba(255,215,0,.08),
transparent
);

animation:
spinGlow 10s linear infinite;

}

@keyframes spinGlow{

from{
transform:
rotate(0deg);
}

to{
transform:
rotate(360deg);
}

}

.spin-content{

position:relative;

z-index:2;

}

.spin-seller{

font-size:18px;

font-weight:800;

color:#FFD700;

margin-bottom:12px;

}

.spin-jackpot{

font-size:32px;

font-weight:900;

color:white;

margin-bottom:15px;

}

.prize-list{

display:flex;

flex-wrap:wrap;

gap:12px;

margin-bottom:20px;

justify-content:flex-start;

overflow:visible;

}
.prize-pill{

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

padding:12px 18px;

min-height:48px;

border-radius:999px;

background:linear-gradient(
135deg,
rgba(255,215,0,.18),
rgba(255,140,0,.08)
);

border:1px solid rgba(255,215,0,.25);

color:#fff;

font-weight:700;

font-size:15px;

white-space:normal;

text-align:center;

flex:1 1 auto;

}

.spin-stats{

display:flex;
justify-content:space-between;
gap:10px;

margin-bottom:22px;

}

.spin-stats span{

flex:1;

padding:12px;

text-align:center;

border-radius:14px;

background:
rgba(255,255,255,.05);

border:
1px solid rgba(255,215,0,.15);

color:#ffffff;

font-weight:700;

backdrop-filter:blur(10px);

}

.spin-now-btn{

display:block;

text-align:center;

padding:20px;

border-radius:18px;

text-decoration:none;

font-weight:800;

font-size:18px;

color:#000;

background:
linear-gradient(
90deg,
#FFD700,
#FFB300
);

box-shadow:
0 0 30px rgba(255,215,0,.45);

transition:.3s;

}

.spin-now-btn:hover{

transform:translateY(-2px);

box-shadow:
0 0 40px rgba(255,215,0,.65);

}

box-shadow:
0 0 35px
rgba(255,215,0,.4);

animation:
pulseSpin 1.8s infinite;

}

@keyframes pulseSpin{

0%{
transform:scale(1);
}

50%{
transform:scale(1.04);
}

100%{
transform:scale(1);
}

}
.spin-disclaimer{

margin:20px 0;

padding:18px;

border-radius:18px;

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

backdrop-filter:
blur(12px);

border:
1px solid
rgba(255,215,0,.2);

color:
rgba(255,255,255,.9);

font-size:14px;

line-height:1.7;

}
.seller-link{
cursor:pointer;
font-weight:700;
}

.seller-menu{
display:none;
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,.7);
z-index:9999;
}

.seller-menu-box{
position:absolute;
bottom:0;
left:0;
right:0;
background:#fff;
padding:25px;
border-radius:25px 25px 0 0;
}

.seller-menu-box a{
display:block;
padding:16px;
text-decoration:none;
color:#000;
font-weight:600;
}

.seller-menu-box button{
width:100%;
padding:15px;
margin-top:10px;
}
/* =========================
   NEW CHATGPT STYLE HEADER
========================= */

.top-header{
position:sticky;
top:0;
z-index:1000;

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

padding:16px 18px;

background:#fff;

box-shadow:0 8px 30px rgba(0,0,0,.05);
}

.logo{
height:48px;
object-fit:contain;
}

.header-icon{
width:52px;
height:52px;

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

border:none;
outline:none;

background:#f5f5f5;

border-radius:50%;

font-size:24px;

text-decoration:none;
color:#111;

cursor:pointer;

transition:.25s;
}

.header-icon:hover{
background:#ececec;
transform:scale(1.05);
}

.header-icon .badge{
position:absolute;
margin-top:-18px;
margin-left:18px;
}


/* ==========================
   TRUST & SUPPORT MODAL
========================== */

.support-modal{
position:fixed;
inset:0;
display:none;
justify-content:center;
align-items:flex-end;
background:rgba(0,0,0,.45);
backdrop-filter:blur(8px);
z-index:9999;
padding:18px;
}

.support-box{
width:100%;
max-width:430px;
max-height:82vh;
overflow-y:auto;
background:#fff;
border-radius:28px 28px 0 0;
padding:22px;
animation:supportUp .28s ease;
box-shadow:0 -12px 40px rgba(0,0,0,.18);
}

@keyframes supportUp{

from{
transform:translateY(60px);
opacity:0;
}

to{
transform:translateY(0);
opacity:1;
}

}

#closeSupport{
position:absolute;
top:18px;
right:18px;
width:42px;
height:42px;
display:flex;
align-items:center;
justify-content:center;
border-radius:50%;
background:#f4f6fb;
font-size:22px;
font-weight:700;
cursor:pointer;
}

.support-icon{
width:62px;
height:62px;
margin:0 auto 14px;
border-radius:18px;
display:flex;
align-items:center;
justify-content:center;
background:linear-gradient(135deg,#e8fff0,#dff7ff);
font-size:28px;
color:#14b866;
}

.support-box h3{
margin:0;
text-align:center;
font-size:26px;
font-weight:800;
color:#101828;
}

.support-subtitle{
text-align:center;
color:#667085;
font-size:14px;
margin:8px 0 22px;
}

.support-actions{
display:grid;
gap:12px;
margin-bottom:18px;
}

.support-action{
display:flex;
align-items:center;
gap:14px;
padding:16px 18px;
border-radius:18px;
background:#f8f9fc;
text-decoration:none;
color:#111827;
font-weight:700;
transition:.25s;
}

.support-action:hover{
background:#eef4ff;
transform:translateY(-2px);
}

.support-action i{
font-size:22px;
width:26px;
color:#2563eb;
}

.support-section{
margin-top:18px;
padding-top:18px;
border-top:1px solid #ececec;
}

.support-section h4{
display:flex;
align-items:center;
gap:10px;
margin:0 0 12px;
font-size:18px;
font-weight:700;
color:#111827;
}

.support-section p{
margin:0;
font-size:14px;
line-height:1.6;
color:#667085;
}

.support-link{
display:flex;
justify-content:space-between;
align-items:center;
padding:15px 18px;
margin-top:10px;
border-radius:16px;
background:#f8f9fc;
text-decoration:none;
font-weight:600;
color:#111827;
transition:.25s;
}

.support-link:hover{
background:#eef4ff;
}

.contact-info p{
margin:8px 0;
font-size:15px;
}

.support-footer{
margin-top:18px;
padding-top:18px;
border-top:1px solid #ececec;
text-align:center;
font-size:13px;
color:#98a2b3;
}

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

.listing-row{

    display:grid;

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

    gap:18px;

}

.product-card{

    background:#fff;

    border-radius:26px;

    overflow:hidden;

    text-decoration:none;

    box-shadow:

    0 18px 45px rgba(93,73,27,.12);

    transition:.35s;

}

.product-card:active{

    transform:scale(.98);

}

.product-image{

    width:100%;

    aspect-ratio:1;

    object-fit:cover;

}

.product-info{

    padding:16px;

}

.product-info h4{

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

    font-size:1.12rem;

    font-weight:700;

    color:#2d2d2d;

    line-height:1.35;

    margin:0 0 12px;

}

/* ===========================
   PREMIUM LISTINGS
=========================== */

.premium-section{
    padding:12px 16px 24px;
}

.premium-grid{

display:grid;

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

gap:18px;

}

.premium-card{
    background:#fff;
    border-radius:16px;
    overflow:hidden;
    box-shadow:0 5px 16px rgba(0,0,0,.08);
    transition:.25s;
}

.premium-card:active{
    transform:scale(.97);
}

.premium-image{
    width:100%;
    aspect-ratio:1;
    object-fit:cover;
    display:block;
}

.premium-details{
    padding:6px;
}

.premium-name{
    font-size:11px;
    font-weight:700;
    line-height:1.2;

    height:28px;

    overflow:hidden;

    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
}

.premium-price{
    margin-top:4px;
    font-size:13px;
    font-weight:800;
    color:#16a34a;
}

.premium-location{
    margin-top:2px;
    font-size:10px;
    color:#888;
}

.premium-badge{
    margin:6px;
    padding:5px 0;

    text-align:center;

    border-radius:999px;

    font-size:9px;

    font-weight:700;

    color:#fff;

    background:linear-gradient(
        135deg,
        #D4AF37,
        #F6D365
    );
}

@media (max-width:380px){

    .premium-grid{
        gap:6px;
    }

    .premium-name{
        font-size:10px;
    }

    .premium-price{
        font-size:12px;
    }
}
.rail-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:18px;
}

.rail-header h2{
    margin:0;
    font-family:'Outfit',sans-serif;
    font-size:1.5rem;
    font-weight:700;
    color:#8B5E34;
}

.rail-header a{
    font-family:'Outfit',sans-serif;
    font-size:.95rem;
    font-weight:700;
    color:#C79A3B;
    text-decoration:none;
}
/* PREMIUM SKELETON */

.skeleton-card{
pointer-events:none;
animation:pulsePremium 1.2s infinite;
}

.skeleton-image{
height:120px;
background:#ececec;
}

.skeleton-line{
height:14px;
border-radius:8px;
background:#ececec;
margin-bottom:10px;
}

.skeleton-line.short{
width:60%;
}

.skeleton-badge{
width:90px;
height:24px;
border-radius:999px;
background:#ececec;
margin-top:10px;
}

@keyframes pulsePremium{

0%{
opacity:.55;
}

50%{
opacity:1;
}

100%{
opacity:.55;
}

}
/* ===========================
   NEXORA HEADER WORDMARK
=========================== */

.header-brand{

    margin:0;

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

    font-size:2.3rem;

    font-weight:900;

    letter-spacing:8px;

    text-transform:uppercase;

    line-height:1;

    cursor:pointer;

    user-select:none;

    position:relative;

    background:
    linear-gradient(
    135deg,
    #ffffff 0%,
    #b9f2ff 18%,
    #47c8ff 40%,
    #0d7cff 60%,
    #28d96b 82%,
    #b6ff47 100%);

    background-size:250% auto;

    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    background-clip:text;

    filter:
    drop-shadow(0 0 8px rgba(0,170,255,.25))
    drop-shadow(0 0 18px rgba(0,170,255,.18));

    animation:
    nexoraGradient 6s linear infinite,
    nexoraFloat 4s ease-in-out infinite;

}

/* Light Sweep */

.header-brand::after{

    content:"";

    position:absolute;

    top:-10%;

    left:-35%;

    width:30%;

    height:120%;

    background:

    linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,.95),
    transparent);

    transform:skewX(-25deg);

    filter:blur(3px);

    animation:nexoraSweep 5s ease-in-out infinite;

}

/* Gradient Animation */

@keyframes nexoraGradient{

    0%{

        background-position:0%;

    }

    100%{

        background-position:250%;

    }

}

/* Floating Effect */

@keyframes nexoraFloat{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-2px);

    }

}

/* Shine Sweep */

@keyframes nexoraSweep{

    0%{

        left:-40%;
        opacity:0;

    }

    10%{

        opacity:1;

    }

    50%{

        left:130%;
        opacity:.9;

    }

    100%{

        left:130%;
        opacity:0;

    }

}

/* Mobile */

@media(max-width:768px){

    .header-brand{

        font-size:2rem;

        letter-spacing:5px;

    }

}
.notification-btn{

position:relative;

display:flex;

align-items:center;

justify-content:center;

text-decoration:none;

color:#333;

font-size:22px;

}

.notification-badge{

position:absolute;

top:-6px;

right:-8px;

min-width:20px;

height:20px;

padding:0 6px;

border-radius:50px;

background:#ff2d55;

color:#fff;

font-size:11px;

font-weight:700;

display:none;

align-items:center;

justify-content:center;

box-shadow:0 4px 10px rgba(255,45,85,.35);

}
.rail-section{
    padding:12px 16px 24px;
}
.install-app-btn{
    position:fixed;
    bottom:90px;
    left:50%;
    transform:translateX(-50%);
    z-index:9999;

    background:linear-gradient(135deg,#0A84FF,#00D66B);
    color:#fff;

    border:none;
    border-radius:50px;

    padding:14px 26px;

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

    box-shadow:0 12px 35px rgba(0,0,0,.25);

    cursor:pointer;

    transition:.3s;
}

.install-app-btn:hover{
    transform:translateX(-50%) scale(1.05);
}
/* =========================================
   NEXORA FEATURED PRODUCT CARD v2
========================================= */

.nx-card{

position:relative;

display:flex;
flex-direction:column;

width:100%;

max-width:none;

margin:0 auto;

background:rgba(255,255,255,.94);

backdrop-filter:blur(24px);

border:1px solid rgba(255,255,255,.20);

border-radius:34px;

overflow:hidden;

text-decoration:none;

transition:.35s ease;

box-shadow:
0 18px 45px rgba(0,0,0,.12);

}

.nx-card:hover,
.nx-card:active{

transform:translateY(-4px);

box-shadow:
0 30px 70px rgba(0,0,0,.18);

}

.nx-image-wrap{

position:relative;

width:100%;

height:340px;

overflow:hidden;

}

.nx-image{

width:100%;
height:100%;

object-fit:cover;

transition:.45s ease;

}

.nx-card:hover .nx-image,
.nx-card:active .nx-image{

transform:scale(1.05);

}

.nx-gradient{

position:absolute;

left:0;
right:0;
bottom:0;

height:60%;

background:linear-gradient(
to top,
rgba(0,0,0,.90),
rgba(0,0,0,.50),
transparent
);

}

.nx-title{

position:absolute;

left:24px;
right:24px;
bottom:22px;

color:#fff;

font-size:30px;

font-weight:800;

line-height:1.15;

display:-webkit-box;

-webkit-line-clamp:2;

-webkit-box-orient:vertical;

overflow:hidden;

z-index:4;

text-shadow:0 3px 12px rgba(0,0,0,.35);

}

.nx-bottom{

padding:22px 24px;

background:#fff;

}

.nx-price{

font-size:44px;

font-weight:900;

color:#12a64a;

line-height:1;

letter-spacing:-1px;

}

.nx-badge{

position:absolute;

top:18px;
left:18px;

padding:10px 16px;

border-radius:999px;

background:rgba(255,255,255,.92);

backdrop-filter:blur(14px);

font-size:13px;

font-weight:800;

color:#111;

z-index:5;

box-shadow:0 10px 24px rgba(0,0,0,.15);

}

.nx-location{

position:absolute;

top:18px;
right:18px;

padding:10px 16px;

border-radius:999px;

background:rgba(0,0,0,.55);

backdrop-filter:blur(12px);

color:#fff;

font-size:13px;

font-weight:700;

z-index:5;

}

/* Premium section fills width */

.premium-grid{

display:block;

width:100%;

padding:0;

margin:0;

}

.premium-grid .nx-card{

width:100%;

}

/* Mobile */

@media(max-width:768px){

.nx-card{

border-radius:30px;

}

.nx-image-wrap{

height:280px;

}

.nx-title{

font-size:24px;

left:18px;
right:18px;
bottom:18px;

}

.nx-bottom{

padding:18px;

}

.nx-price{

font-size:36px;

}

.nx-badge,
.nx-location{

font-size:12px;

padding:8px 14px;

}

}
/*=========================================
NEXORA FUTURISTIC CATEGORIES
=========================================*/

.categories-row{

display:flex;

gap:18px;

overflow-x:auto;

padding:10px 16px 24px;

scroll-behavior:smooth;

scrollbar-width:none;

-webkit-overflow-scrolling:touch;

}

.categories-row::-webkit-scrollbar{

display:none;

}

/* CARD */

.category-card{

position:relative;

min-width:145px;

height:165px;

padding:18px;

border-radius:30px;

display:flex;

flex-direction:column;

justify-content:space-between;

overflow:hidden;

flex-shrink:0;

text-decoration:none;

transition:.35s;

box-shadow:

0 18px 45px rgba(0,0,0,.18);

}

.category-card:active{

transform:scale(.96);

}

.category-card::before{

content:"";

position:absolute;

width:170px;

height:170px;

border-radius:50%;

background:rgba(255,255,255,.12);

top:-60px;

right:-60px;

}

.category-card::after{

content:"";

position:absolute;

width:90px;

height:90px;

border-radius:50%;

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

bottom:-30px;

left:-30px;

}

/* ICON */

.category-icon{

position:relative;

z-index:2;

width:70px;

height:70px;

border-radius:22px;

display:flex;

align-items:center;

justify-content:center;

font-size:36px;

background:rgba(255,255,255,.18);

backdrop-filter:blur(15px);

box-shadow:

0 10px 25px rgba(0,0,0,.15);

}

/* NAME */

.category-card span{

position:relative;

z-index:2;

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

font-size:20px;

font-weight:800;

line-height:1.15;

color:#fff;

}

/* HOVER */

.category-card:hover{

transform:translateY(-6px);

}

/*=========================================
CATEGORY COLORS
=========================================*/

/* Phones */

.category-card:nth-child(1){

background:linear-gradient(

135deg,

#2563EB,

#38BDF8

);

}

/* Electronics */

.category-card:nth-child(2){

background:linear-gradient(

135deg,

#1D4ED8,

#60A5FA

);

}

/* Fashion */

.category-card:nth-child(3){

background:linear-gradient(

135deg,

#C026D3,

#F472B6

);

}

/* Vehicles */

.category-card:nth-child(4){

background:linear-gradient(

135deg,

#EA580C,

#FBBF24

);

}

/* Property */

.category-card:nth-child(5){

background:linear-gradient(

135deg,

#15803D,

#4ADE80

);

}

/* Services */

.category-card:nth-child(6){

background:linear-gradient(

135deg,

#0F766E,

#2DD4BF

);

}

/* Jobs */

.category-card:nth-child(7){

background:linear-gradient(

135deg,

#4F46E5,

#818CF8

);

}

/* Agriculture */

.category-card:nth-child(8){

background:linear-gradient(

135deg,

#3F6212,

#84CC16

);

}

/*=========================================
RESPONSIVE
=========================================*/

@media(max-width:380px){

.category-card{

min-width:125px;

height:150px;

}

.category-icon{

width:62px;

height:62px;

font-size:32px;

}

.category-card span{

font-size:18px;

}

}
/*=========================================
GLASS SECTION HEADER
=========================================*/

.glass-header{

display:flex;

justify-content:space-between;

align-items:center;

margin:0 16px 18px;

padding:14px 18px;

border-radius:22px;

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

backdrop-filter:blur(18px);

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

border:1px solid rgba(255,255,255,.12);

box-shadow:

0 8px 30px rgba(0,0,0,.18);

}

.glass-title{

display:flex;

align-items:center;

gap:12px;

}

.glass-dot{

width:12px;

height:12px;

border-radius:50%;

background:#36F28B;

box-shadow:

0 0 8px #36F28B,

0 0 18px #36F28B;

}

.glass-text{

margin:0;

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

font-size:20px;

font-weight:800;

color:#fff;

letter-spacing:.3px;

}

.glass-link{

display:flex;

align-items:center;

gap:6px;

font-size:15px;

font-weight:700;

color:#7DD3FC;

text-decoration:none;

transition:.25s;

}

.glass-link:hover{

transform:translateX(4px);

color:#BAE6FD;

}
#sideMenu{
    position: fixed;
    top: 0;
    left: -320px;
    width: 310px;
    max-width: 88%;
    height: 100vh;
    overflow-y: auto;
    padding: 20px 20px 110px; /* extra space at bottom */
}
#sideMenu a{

display:flex;
align-items:center;
gap:16px;

padding:18px;

margin-bottom:14px;

border-radius:22px;

background:rgba(248,250,252,.75);

backdrop-filter:blur(18px);

border:1px solid rgba(15,23,42,.06);

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

color:#111827;

transition:.28s;

box-shadow:
0 10px 25px rgba(15,23,42,.05);

}
#sideMenu a:hover,
#sideMenu a:active{

transform:translateX(8px);

background:linear-gradient(
135deg,
#ffffff,
#eef6ff
);

border-color:#3b82f6;

box-shadow:
0 18px 35px rgba(59,130,246,.18);

}
/*=========================================
NEXORA FUTURISTIC MENU
=========================================*/

.menu-group-title{

margin:28px 8px 14px;

font-size:11px;

font-weight:800;

letter-spacing:2px;

text-transform:uppercase;

color:#94a3b8;

}

/* MENU ITEM */

.menu-item{

display:flex;

align-items:center;

gap:16px;

padding:14px 16px;

margin-bottom:10px;

border-radius:20px;

background:rgba(255,255,255,.65);

backdrop-filter:blur(20px);

border:1px solid rgba(15,23,42,.05);

transition:.28s ease;

box-shadow:
0 8px 24px rgba(15,23,42,.05);

}

/* HOVER */

.menu-item:hover,
.menu-item:active{

transform:translateX(8px);

background:linear-gradient(
135deg,
#ffffff,
#eef6ff
);

border-color:#60a5fa;

box-shadow:
0 14px 30px rgba(59,130,246,.15);

}

/* ICON */

.menu-icon{

width:48px;

height:48px;

flex-shrink:0;

display:flex;

align-items:center;

justify-content:center;

border-radius:16px;

font-size:22px;

background:linear-gradient(
135deg,
#ffffff,
#edf4ff
);

border:1px solid rgba(59,130,246,.08);

box-shadow:
0 10px 22px rgba(59,130,246,.10);

transition:.3s;

}

/* ICON ANIMATION */

.menu-item:hover .menu-icon{

transform:scale(1.08) rotate(-5deg);

box-shadow:
0 14px 30px rgba(59,130,246,.22);

}

/* TEXT */

.menu-text{

font-size:16px;

font-weight:700;

color:#0f172a;

letter-spacing:.2px;

}

/* ACTIVE INDICATOR */

.menu-item::after{

content:"›";

margin-left:auto;

font-size:20px;

font-weight:700;

color:#cbd5e1;

transition:.3s;

}

.menu-item:hover::after{

transform:translateX(5px);

color:#3b82f6;

}

.hero-brand{

display:flex;

flex-direction:column;

align-items:center;

justify-content:center;

text-align:center;

flex:1;

}

.hero-brand h1{

font-size:20px;

font-weight:900;

letter-spacing:2px;

margin:0;

color:#0f172a;

}

.hero-tagline{

margin-top:2px;

font-size:11px;

font-weight:600;

color:#64748b;

letter-spacing:1px;

text-transform:uppercase;

}

#typewriter{

margin-top:8px;

min-height:20px;

font-size:14px;

font-weight:700;

color:#2563eb;

letter-spacing:.5px;

}
/* ==========================================
REVERSE MARKETPLACE REPLY BADGE
========================================== */

.menu-text-group{

display:flex;

flex-direction:column;

gap:3px;

flex:1;

}

.reply-count{

display:inline-block;

margin-top:2px;

font-size:12px;

font-weight:700;

color:#e53935;

line-height:1.3;

animation:replyPulse 1.8s infinite;

}

@keyframes replyPulse{

0%{

opacity:.65;

}

50%{

opacity:1;

}

100%{

opacity:.65;

}

}

/* ==========================================
SUPPLIER RESPONSES MODAL
========================================== */

.reverse-modal{

position:fixed;

inset:0;

display:none;

justify-content:flex-end;

align-items:flex-end;

background:rgba(0,0,0,.45);

backdrop-filter:blur(6px);

z-index:99999;

padding:16px;

}

.reverse-modal-box{

width:100%;

max-width:520px;

max-height:80vh;

overflow-y:auto;

background:#fff;

border-radius:28px 28px 0 0;

padding:22px;

animation:reverseUp .25s ease;

box-shadow:0 -15px 45px rgba(0,0,0,.18);

}

@keyframes reverseUp{

from{

opacity:0;

transform:translateY(60px);

}

to{

opacity:1;

transform:translateY(0);

}

}

.reverse-modal-header{

display:flex;

justify-content:space-between;

align-items:center;

margin-bottom:18px;

}

.reverse-modal-header h2{

margin:0;

font-size:22px;

font-weight:800;

color:#111827;

}

#closeReverseModal{

width:42px;

height:42px;

border:none;

border-radius:50%;

background:#f2f4f8;

font-size:22px;

cursor:pointer;

}

/* ==========================================
REQUEST CARDS
========================================== */

.reverse-response-item{

padding:18px;

margin-bottom:14px;

background:#f8faff;

border:1px solid #e5edff;

border-radius:18px;

cursor:pointer;

transition:.25s;

}

.reverse-response-item:hover{

background:#eef5ff;

transform:translateY(-2px);

}

.reverse-response-item h3{

margin:0 0 8px;

font-size:17px;

font-weight:700;

color:#111827;

}

.reverse-response-item p{

margin:0;

font-size:15px;

font-weight:600;

color:#2563eb;

}

.reverse-response-item small{

display:block;

margin-top:8px;

font-size:13px;

color:#6b7280;

}

/* ==========================================
OPEN MARKETPLACE BUTTON
========================================== */

.reverse-open-all{

width:100%;

margin-top:12px;

padding:16px;

border:none;

border-radius:18px;

background:linear-gradient(135deg,#0b6dff,#0057d9);

color:#fff;

font-size:16px;

font-weight:700;

cursor:pointer;

transition:.25s;

}

.reverse-open-all:hover{

transform:translateY(-2px);

box-shadow:0 10px 25px rgba(11,109,255,.28);

}
.menu-header{
    position:relative;
    padding:30px 20px 24px;
    text-align:center;
}

#closeMenu{
    position:absolute;
    top:18px;
    right:18px;
}

.menu-brand{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
}

.menu-logo{
    width:64px;
    height:64px;
    object-fit:contain;
    margin-bottom:12px;
}

.menu-brand h2{
    margin:0;
    font-size:24px;
    font-weight:800;
}

.menu-brand p{
    margin-top:4px;
    font-size:12px;
    letter-spacing:2px;
    opacity:.7;
}
.menu-header{
    position:relative;
    display:flex;
    justify-content:center;
    align-items:center;
    padding:28px 20px;
}

.menu-logo{
    width:220px;      /* Increase or decrease to fit */
    max-width:85%;
    height:auto;
    object-fit:contain;
}

#closeMenu{
    position:absolute;
    top:18px;
    right:18px;
}
/* ===== NEXORA OFFICIAL MENU ===== */

#sideMenu{
    background:#fff;
    border-radius:0 30px 30px 0;
    box-shadow:0 25px 70px rgba(0,0,0,.18);
}

.menu-header{
    position:relative;
    display:flex;
    justify-content:center;
    align-items:center;
    padding:28px 20px;
}

.menu-logo{
    width:180px;
    height:auto;
    object-fit:contain;
}

#closeMenu{
    position:absolute;
    top:18px;
    left:18px;
    width:48px;
    height:48px;
    border:none;
    border-radius:50%;
    background:#f1f5f9;
    color:#0f172a;
    font-size:24px;
    transition:.3s;
}

#closeMenu:hover,
#closeMenu:active{
    background:#06b6d4;
    color:#fff;
    transform:rotate(90deg);
}

.menu-group-title{
    color:#94a3b8;
    font-size:11px;
    font-weight:800;
    letter-spacing:2px;
    margin:22px 10px 10px;
}

.menu-item{
    display:flex;
    align-items:center;
    gap:16px;
    margin-bottom:12px;
    padding:16px;
    border-radius:18px;
    background:#fff;
    border:1px solid #edf2f7;
    box-shadow:0 8px 22px rgba(15,23,42,.06);
    transition:.25s;
}

.menu-item:hover,
.menu-item:active{
    background:#06b6d4;
    color:#fff;
    transform:translateX(6px);
    box-shadow:0 12px 28px rgba(6,182,212,.35);
}

.menu-item:hover .menu-text,
.menu-item:active .menu-text{
    color:#fff;
}

.menu-icon{
    width:48px;
    height:48px;
    border-radius:14px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#eef9fc;
    font-size:22px;
}

.menu-item:hover .menu-icon,
.menu-item:active .menu-icon{
    background:#fff;
}
.prize-list{

display:flex;

flex-wrap:wrap;

gap:12px;

margin-bottom:20px;

justify-content:flex-start;

overflow:visible;

}
/* ==========================
HERO
========================== */

.spin-hero{

position:relative;

padding:24px 20px;

border-radius:28px;

text-align:center;

background:
linear-gradient(
135deg,
rgba(255,215,0,.08),
rgba(255,255,255,.03)
);

border:1px solid rgba(255,215,0,.15);

overflow:hidden;

margin-bottom:20px;

}

.hero-glow{

position:absolute;

top:-180px;

left:50%;

transform:translateX(-50%);

width:420px;

height:420px;

background:
radial-gradient(
circle,
rgba(255,215,0,.18),
transparent 72%
);

pointer-events:none;

}

/* TITLE */

.spin-hero h1{

font-size:44px;

font-weight:900;

color:#FFD700;

margin-bottom:4px;

text-shadow:
0 0 18px rgba(255,215,0,.45);

line-height:1;

}

.hero-subtitle{

font-size:18px;

opacity:.9;

margin-bottom:18px;

}

/* STORE ROW */

.hero-store-row{

display:flex;

justify-content:center;

align-items:center;

gap:12px;

flex-wrap:wrap;

margin-bottom:18px;

}

.seller-badge{

padding:10px 18px;

border-radius:999px;

background:rgba(255,215,0,.12);

border:1px solid rgba(255,215,0,.18);

font-weight:700;

font-size:15px;

margin:0;

}

.view-store-btn{

padding:10px 20px;

border:none;

border-radius:999px;

background:
linear-gradient(
135deg,
#FFD700,
#FFB300
);

color:#111;

font-weight:800;

font-size:15px;

cursor:pointer;

box-shadow:
0 8px 18px rgba(255,215,0,.30);

transition:.25s;

}

.view-store-btn:hover{

transform:translateY(-2px);

}

/* STATS */

.spin-stats{

display:grid;

grid-template-columns:
repeat(3,1fr);

gap:10px;

margin-top:4px;

}

.stat-pill{

display:flex;

justify-content:center;

align-items:center;

gap:6px;

padding:12px;

border-radius:18px;

background:
rgba(255,255,255,.05);

border:
1px solid rgba(255,215,0,.12);

font-size:15px;

font-weight:700;

}

.live-pill{

background:
linear-gradient(
135deg,
rgba(255,215,0,.18),
rgba(255,165,0,.12)
);

}
#sideMenu{
    position:fixed;
    top:0;
    left:-100%;
    width:100%;
    height:100vh;

    background:#fff;

    overflow-y:auto;
    -webkit-overflow-scrolling:touch;

    padding:20px 20px 110px;

    transition:left .35s ease;

    z-index:9999;

    border-radius:0;
    box-shadow:none;
}

#sideMenu.show{
    left:0;
}
#menuOverlay{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.45);
    backdrop-filter:blur(4px);
    display:none;
    z-index:9998;
}

#menuOverlay.show{
    display:block;
}
#sideMenu{
    position:fixed !important;
    top:0 !important;
    left:-100% !important;
    width:100vw !important;
    max-width:100vw !important;
    height:100vh !important;

    margin:0 !important;
    padding:20px 20px 110px !important;

    background:#fff !important;
    border-radius:0 !important;
    box-shadow:none !important;

    overflow-y:auto;
    transition:left .35s ease;
    z-index:9999;
}

#sideMenu.show{
    left:0 !important;
}
/*====================================================
NEXORA CYBERPUNK SIDE MENU v1
Paste at the very bottom of style.css
====================================================*/

/* MENU */

#sideMenu{

position:fixed;
top:0;
left:-100%;

width:100%;
height:100vh;

padding:20px 20px 120px;

overflow-y:auto;

background:
radial-gradient(circle at top right,
rgba(0,255,255,.10),
transparent 30%),

radial-gradient(circle at bottom left,
rgba(0,255,120,.08),
transparent 35%),

linear-gradient(
135deg,
#02040b,
#071322,
#081726,
#02060d
);

transition:left .35s ease;

z-index:99999;

}

#sideMenu.show{

left:0;

}

/* Animated Grid */

#sideMenu::before{

content:"";

position:absolute;

inset:0;

pointer-events:none;

background:

linear-gradient(
rgba(0,255,255,.04) 1px,
transparent 1px),

linear-gradient(
90deg,
rgba(0,255,255,.04) 1px,
transparent 1px);

background-size:40px 40px;

animation:gridMove 18s linear infinite;

opacity:.25;

}

/* Ambient Glow */

#sideMenu::after{

content:"";

position:absolute;

inset:0;

pointer-events:none;

background:

radial-gradient(circle at 15% 15%,
rgba(0,255,255,.16),
transparent 25%),

radial-gradient(circle at 80% 75%,
rgba(0,255,120,.12),
transparent 30%),

radial-gradient(circle at 60% 30%,
rgba(140,0,255,.10),
transparent 22%);

filter:blur(45px);

animation:ambientGlow 10s ease-in-out infinite alternate;

}

/* HEADER */

.menu-header{

display:flex;

justify-content:center;

align-items:center;

padding:28px 0 36px;

position:relative;

z-index:3;

}

/* LOGO */

.menu-logo{

width:190px;

height:auto;

filter:

drop-shadow(0 0 10px #00ffff)

drop-shadow(0 0 22px #00ffff)

drop-shadow(0 0 50px rgba(0,255,255,.25));

animation:logoFloat 5s ease-in-out infinite;

}

/* CLOSE BUTTON */

#closeMenu{

position:absolute;

left:0;

top:10px;

width:52px;

height:52px;

border:none;

background:rgba(255,255,255,.05);

border:1px solid rgba(0,255,255,.25);

color:#00ffff;

font-size:24px;

backdrop-filter:blur(18px);

transition:.3s;

}

#closeMenu:hover{

background:#00ffff;

color:#04111d;

transform:rotate(90deg);

}

/* SECTION TITLES */

.menu-group-title{

margin:35px 0 18px;

font-size:12px;

font-weight:900;

letter-spacing:4px;

text-transform:uppercase;

color:#00ffff;

text-shadow:

0 0 12px rgba(0,255,255,.5);

position:relative;

z-index:2;

}

/* MENU CARD */

.menu-item{

position:relative;

display:flex;

align-items:center;

gap:18px;

margin-bottom:18px;

padding:22px 24px;

overflow:hidden;

text-decoration:none;

background:

rgba(10,18,32,.55);

backdrop-filter:blur(18px);

border:1px solid rgba(0,255,255,.16);

clip-path:polygon(
18px 0,
100% 0,
100% calc(100% - 18px),
calc(100% - 18px) 100%,
0 100%,
0 18px
);

box-shadow:

0 0 0 1px rgba(0,255,255,.05),

0 0 20px rgba(0,255,255,.06),

inset 0 0 20px rgba(0,255,255,.03);

transition:.35s;

z-index:3;

}

/* Moving Scan Line */

.menu-item::before{

content:"";

position:absolute;

top:0;

left:-140%;

width:60%;

height:100%;

background:

linear-gradient(
90deg,
transparent,
rgba(0,255,255,.22),
transparent);

transform:skewX(-25deg);

animation:scan 4.5s linear infinite;

}

/* Hover */

.menu-item:hover,
.menu-item:active{

transform:translateX(8px);

box-shadow:

0 0 30px rgba(0,255,255,.20),

0 0 60px rgba(0,255,255,.08);

}

/* ICON */

.menu-icon{

width:60px;

height:60px;

display:flex;

align-items:center;

justify-content:center;

background:none;

font-size:30px;

color:#00ffff;

text-shadow:

0 0 10px #00ffff,

0 0 25px #00ffff;

flex-shrink:0;

}

/* TEXT */

.menu-text{

font-size:18px;

font-weight:800;

letter-spacing:1px;

color:#fff;

text-transform:uppercase;

}

.menu-text-group{

display:flex;

flex-direction:column;

gap:5px;

}

.menu-text-group small{

font-size:12px;

color:#87b8c9;

}

/* Arrow */

.menu-item::after{

content:"➜";

margin-left:auto;

font-size:22px;

font-weight:900;

color:#00ffff;

text-shadow:

0 0 12px #00ffff;

}

/* Different section colours */

.menu-group-title:nth-of-type(1){

color:#00ffff;

}

.menu-group-title:nth-of-type(2){

color:#ff8c00;

text-shadow:0 0 12px rgba(255,140,0,.5);

}

.menu-group-title:nth-of-type(3){

color:#00ff88;

text-shadow:0 0 12px rgba(0,255,136,.5);

}

.menu-group-title:nth-of-type(4){

color:#b26dff;

text-shadow:0 0 12px rgba(178,109,255,.5);

}

/* Scrollbar */

#sideMenu::-webkit-scrollbar{

width:5px;

}

#sideMenu::-webkit-scrollbar-thumb{

background:#00ffff;

border-radius:20px;

}

/* Animations */

@keyframes scan{

0%{

left:-120%;

}

100%{

left:150%;

}

}

@keyframes ambientGlow{

0%{

opacity:.45;

}

100%{

opacity:1;

}

}

@keyframes logoFloat{

0%,100%{

transform:translateY(0);

}

50%{

transform:translateY(-6px);

}

}

@keyframes gridMove{

from{

transform:translateY(0);

}

to{

transform:translateY(40px);

}

}
/*==================================================
      NEXORA PREMIUM SIDE MENU 2026
      Replace your entire side menu CSS with this
==================================================*/

/* Overlay */

#menuOverlay{
    position:fixed;
    inset:0;
    background:rgba(15,23,42,.45);
    backdrop-filter:blur(8px);
    display:none;
    opacity:0;
    transition:.3s;
    z-index:9998;
}

#menuOverlay.show{
    display:block;
    opacity:1;
}


/* Side Menu */

#sideMenu{

    position:fixed;

    top:0;
    left:-100%;

    width:100%;
    height:100vh;

    overflow-y:auto;
    -webkit-overflow-scrolling:touch;

    padding:22px 18px 120px;

    background:
    linear-gradient(
        180deg,
        #f8fbff 0%,
        #f2f7fb 100%
    );

    transition:left .35s ease;

    z-index:9999;
}

#sideMenu.show{

    left:0;

}


/* Scrollbar */

#sideMenu::-webkit-scrollbar{

    width:5px;

}

#sideMenu::-webkit-scrollbar-thumb{

    background:#d1d5db;

    border-radius:20px;

}


/* Header */

.menu-header{

    position:relative;

    display:flex;

    justify-content:center;

    align-items:center;

    padding:10px 0 28px;

    margin-bottom:10px;

}


/* Close Button */

#closeMenu{

    position:absolute;

    left:0;

    top:8px;

    width:48px;

    height:48px;

    border:none;

    border-radius:50%;

    background:#ffffff;

    color:#111827;

    font-size:22px;

    cursor:pointer;

    box-shadow:

    0 8px 20px rgba(15,23,42,.08);

    transition:.25s;

}

#closeMenu:hover{

    transform:rotate(90deg);

}

#closeMenu:active{

    transform:scale(.95);

}


/* Logo */

.menu-logo{

    width:170px;

    height:auto;

    object-fit:contain;

}


/* Group Title */

.menu-group-title{

    margin:28px 8px 12px;

    font-size:12px;

    font-weight:800;

    letter-spacing:2px;

    text-transform:uppercase;

    color:#64748b;

}


/* Menu Cards */

.menu-item{

    position:relative;

    display:flex;

    align-items:center;

    gap:16px;

    padding:16px;

    margin-bottom:14px;

    border-radius:22px;

    background:#ffffff;

    border:1px solid #edf2f7;

    box-shadow:

    0 10px 25px rgba(15,23,42,.05);

    transition:.25s ease;

}

.menu-item:hover{

    transform:translateY(-2px);

    box-shadow:

    0 18px 40px rgba(37,99,235,.12);

}

.menu-item:active{

    transform:scale(.98);

}


/* Left Accent Bar */

.menu-item::before{

    content:"";

    position:absolute;

    left:0;

    top:18%;

    width:5px;

    height:64%;

    border-radius:10px;

    background:#06b6d4;

}


/* Arrow */

.menu-item::after{

    content:"›";

    margin-left:auto;

    font-size:24px;

    font-weight:700;

    color:#94a3b8;

}


/* Icon */

.menu-icon{

    width:56px;

    height:56px;

    flex-shrink:0;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:18px;

    font-size:24px;

    background:linear-gradient(

        135deg,

        #eff8ff,

        #dff8ff

    );

    box-shadow:

    0 8px 18px rgba(6,182,212,.12);

}


/* Text */

.menu-text-group{

    display:flex;

    flex-direction:column;

    flex:1;

}

.menu-text{

    font-size:16px;

    font-weight:700;

    color:#111827;

}


/* Notification */

.reply-count{

    margin-top:4px;

    font-size:12px;

    font-weight:700;

    color:#ef4444;

}


/* Marketplace */

.menu-group-title:nth-of-type(1){

    color:#ea580c;

}

.menu-group-title:nth-of-type(1)+.menu-item .menu-icon,
.menu-group-title:nth-of-type(1)~.menu-item .menu-icon{

    background:linear-gradient(

        135deg,

        #fff7ed,

        #ffedd5

    );

}


/* Community */

.menu-group-title:nth-of-type(2){

    color:#16a34a;

}

.menu-group-title:nth-of-type(2)~.menu-item .menu-icon{

    background:linear-gradient(

        135deg,

        #ecfdf5,

        #d1fae5

    );

}


/* Live */

.menu-group-title:nth-of-type(3){

    color:#2563eb;

}

.menu-group-title:nth-of-type(3)~.menu-item .menu-icon{

    background:linear-gradient(

        135deg,

        #eff6ff,

        #dbeafe

    );

}


/* Account */

.menu-group-title:nth-of-type(4){

    color:#7c3aed;

}

.menu-group-title:nth-of-type(4)~.menu-item .menu-icon{

    background:linear-gradient(

        135deg,

        #f5f3ff,

        #ede9fe

    );

}


/* Hover */

.menu-item:hover .menu-icon{

    transform:scale(1.08);

    transition:.25s;

}


/* Install Button */

#installAppBtn{

    margin-top:30px;

    background:

    linear-gradient(

        135deg,

        #0f172a,

        #1e293b

    );

    color:white;

    border:none;

    box-shadow:

    0 20px 40px rgba(15,23,42,.25);

}

#installAppBtn .menu-text{

    color:white;

}

#installAppBtn .menu-icon{

    background:

    rgba(255,255,255,.15);

}

#installAppBtn::before{

    background:#22c55e;

}

#installAppBtn::after{

    color:white;

}
/*==================================================
        NEXORA SIDE MENU 2026
        Neo-Minimal UI
==================================================*/

#sideMenu{
    position:fixed;
    top:0;
    left:-100%;
    width:100%;
    height:100vh;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    background:#f4f7fb;
    transition:left .35s ease;
    padding:24px 18px 100px;
    z-index:99999;
}

#sideMenu.show{
    left:0;
}

/* Scrollbar */

#sideMenu::-webkit-scrollbar{
    width:4px;
}

#sideMenu::-webkit-scrollbar-thumb{
    background:#cbd5e1;
    border-radius:20px;
}

/* Logo */

#sideMenu img:first-of-type{
    width:170px;
    display:block;
    margin:0 auto 24px;
}

/* Close Button */

#closeMenu{

    width:52px;
    height:52px;

    border:none;
    border-radius:50%;

    background:#fff;

    color:#111827;

    font-size:24px;

    box-shadow:

    0 8px 25px rgba(0,0,0,.08);

    transition:.25s;
}

#closeMenu:active{

    transform:scale(.92);

}

/* Section Titles */

.section-title{

    font-size:13px;

    text-transform:uppercase;

    letter-spacing:2px;

    font-weight:800;

    color:#64748b;

    margin:28px 8px 14px;

}

/* Menu Item */

.menu-item{

    display:flex;

    align-items:center;

    gap:16px;

    background:#fff;

    border-radius:18px;

    padding:14px 16px;

    margin-bottom:12px;

    border:none;

    box-shadow:

    0 5px 15px rgba(15,23,42,.06);

    transition:.25s;

}

.menu-item:hover{

    transform:translateY(-3px);

    box-shadow:

    0 15px 35px rgba(0,0,0,.08);

}

.menu-item:active{

    transform:scale(.98);

}

/* Icon */

.menu-item img{

    width:54px;

    height:54px;

    border-radius:16px;

    padding:12px;

    background:#f1f5f9;

    object-fit:contain;

}

/* Text */

.menu-item span,

.menu-item h3,

.menu-item p,

.menu-item div{

    color:#111827;

    font-size:16px;

    font-weight:700;

}

/* Arrow */

.menu-item::after{

    content:"➜";

    margin-left:auto;

    font-size:18px;

    color:#94a3b8;

}

/* Notification */

.reply-count{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    min-width:20px;

    height:20px;

    border-radius:10px;

    background:#ef4444;

    color:white;

    font-size:11px;

    font-weight:bold;

    padding:0 6px;

}

/* Marketplace */

.marketplace .menu-item img{

    background:#fff7ed;

}

/* Community */

.community .menu-item img{

    background:#ecfdf5;

}

/* Services */

.services .menu-item img{

    background:#eff6ff;

}

/* Account */

.account .menu-item img{

    background:#f5f3ff;

}

/* Install Button */

#installAppBtn{

    margin-top:28px;

    border-radius:22px;

    background:

    linear-gradient(

    135deg,

    #111827,

    #1e293b

    );

    color:white;

    box-shadow:

    0 15px 40px rgba(0,0,0,.25);

}

#installAppBtn img{

    background:rgba(255,255,255,.15);

}

#installAppBtn::after{

    color:white;

}

#installAppBtn *{

    color:white !important;

}

/* Overlay */

#menuOverlay{

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.35);

    backdrop-filter:blur(6px);

    display:none;

    z-index:99998;

}

#menuOverlay.show{

    display:block;

}
@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@600;700;800&display=swap');

/* ==================================================
   NEXORA SIDE MENU — PURE WHITE / PLAYFUL / MODERN
   Override the existing side menu styles with this
================================================== */

/* Overlay */
#menuOverlay{
    position:fixed;
    inset:0;
    display:none;
    background:rgba(15,23,42,.38);
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
    z-index:9998;
    opacity:0;
    transition:.25s ease;
}

#menuOverlay.show{
    display:block;
    opacity:1;
}

/* Side Menu Container */
#sideMenu{
    position:fixed;
    top:0;
    left:-100%;
    width:100%;
    height:100vh;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    background:#ffffff;
    padding:22px 18px 120px;
    transition:left .35s ease;
    z-index:9999;
    box-shadow:none;
    border-radius:0;
}

#sideMenu.show{
    left:0;
}

/* Scrollbar */
#sideMenu::-webkit-scrollbar{
    width:4px;
}

#sideMenu::-webkit-scrollbar-thumb{
    background:#d7dde6;
    border-radius:999px;
}

/* Header */
.menu-header{
    position:relative;
    display:flex;
    justify-content:center;
    align-items:center;
    padding:12px 0 24px;
    margin-bottom:10px;
}

/* Close Button */
#closeMenu{
    position:absolute;
    left:0;
    top:6px;
    width:50px;
    height:50px;
    border:none;
    border-radius:50%;
    background:#ffffff;
    color:#111827;
    font-size:24px;
    cursor:pointer;
    box-shadow:0 8px 24px rgba(15,23,42,.08);
    transition:.22s ease;
}

#closeMenu:hover{
    transform:rotate(90deg);
}

#closeMenu:active{
    transform:scale(.95);
}

/* Logo */
.menu-logo{
    width:170px;
    height:auto;
    object-fit:contain;
    display:block;
    filter:none;
}

/* Section Titles */
.menu-group-title{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:14px;
    margin:28px 0 16px;
    text-align:center;
    font-family:'Baloo 2', cursive;
    font-size:20px;
    font-weight:800;
    letter-spacing:.6px;
    color:#0ea5e9;
    line-height:1;
}

.menu-group-title::before,
.menu-group-title::after{
    content:"";
    flex:1;
    height:2px;
    background:linear-gradient(90deg, transparent, #e5e7eb, transparent);
    border-radius:999px;
}

/* Optional section color accents */
.menu-group-title:nth-of-type(2){ color:#f97316; } /* Marketplace */
.menu-group-title:nth-of-type(3){ color:#22c55e; } /* Community */
.menu-group-title:nth-of-type(4){ color:#2563eb; } /* Live & Services */
.menu-group-title:nth-of-type(5){ color:#7c3aed; } /* Account */

.menu-group-title:nth-of-type(2)::before,
.menu-group-title:nth-of-type(2)::after{
    background:linear-gradient(90deg, transparent, rgba(249,115,22,.18), transparent);
}

.menu-group-title:nth-of-type(3)::before,
.menu-group-title:nth-of-type(3)::after{
    background:linear-gradient(90deg, transparent, rgba(34,197,94,.18), transparent);
}

.menu-group-title:nth-of-type(4)::before,
.menu-group-title:nth-of-type(4)::after{
    background:linear-gradient(90deg, transparent, rgba(37,99,235,.18), transparent);
}

.menu-group-title:nth-of-type(5)::before,
.menu-group-title:nth-of-type(5)::after{
    background:linear-gradient(90deg, transparent, rgba(124,58,237,.18), transparent);
}
/* ===============================
   FULL WIDTH PREMIUM HERO
=============================== */

.premium-section{

    width:100vw;

    margin:0;

    padding:0;

}

.premium-grid{

    display:block;

    width:100%;

    margin:0;

    padding:0;

}

.nx-card{

    width:100vw;

    margin:0;

    border-radius:0;

    box-shadow:none;

}

.nx-image-wrap{

    width:100%;

    height:50vh;

}

.nx-image{

    width:100%;

    height:100%;

    object-fit:cover;

}

.nx-bottom{

    padding:22px 24px;

}
/* Menu button */
#menuBtn{
    position:absolute;
    top:18px;
    left:18px;
    z-index:30;
}

/* Premium badge */
.nx-badge{
    position:absolute;
    top:18px;
    right:18px;
    left:auto;

    z-index:20;
}

/* Kenya badge */
.nx-location{
    position:absolute;
    top:74px;
    right:18px;
    left:auto;

    z-index:20;
}
.nx-badge{

    position:absolute;

    top:18px;

    right:18px;

    display:flex;

    align-items:center;

    justify-content:center;

    padding:8px 18px;

    min-width:110px;

    height:42px;

    background:#17365d;

    border:2px solid #c9a33d;

    border-radius:14px;

    color:#fff;

    font-family:"Poppins",sans-serif;

    font-size:.9rem;

    font-weight:700;

    letter-spacing:.5px;

    box-shadow:0 6px 18px rgba(0,0,0,.18);

    z-index:20;

}

.nx-badge i{

    margin-right:8px;

    color:#7fd8ff;

    font-size:1rem;

}
/* ==========================================
   PREMIUM SECTION HEADERS
========================================== */

.glass-header{

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

    width:calc(100% - 32px);
    margin:18px auto 24px;
    padding:14px 20px;

    background:#18365A;

    border:3px solid #C7A23A;

    border-radius:22px;

    box-shadow:
        0 10px 24px rgba(0,0,0,.22),
        inset 0 1px 0 rgba(255,255,255,.08);

    box-sizing:border-box;

}

.glass-title{

    display:flex;
    align-items:center;
    gap:14px;

}

.glass-dot{

    width:16px;
    height:16px;

    border-radius:50%;

    background:#33F27C;

    box-shadow:
        0 0 8px #33F27C,
        0 0 18px #33F27C;

    flex-shrink:0;

}

.glass-text{

    margin:0;

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

    font-size:2rem;

    font-weight:800;

    color:#ffffff;

    letter-spacing:.3px;

    line-height:1;

}

.glass-link{

    text-decoration:none;

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

    font-size:1.2rem;

    font-weight:700;

    color:#8ED1FF;

    white-space:nowrap;

    transition:.25s;

}

.glass-link:hover{

    color:#ffffff;

}

/* Mobile */

@media (max-width:768px){

    .glass-header{

        padding:12px 18px;

        border-radius:20px;

        margin:16px auto 22px;

    }

    .glass-text{

        font-size:1.85rem;

    }

    .glass-link{

        font-size:1.05rem;

    }

    .glass-dot{

        width:15px;
        height:15px;

    }

}
/* ==========================================
   BROWSE CATEGORIES + NEW LISTINGS HEADERS
========================================== */

.glass-header{

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

    width:100%;
    margin:18px 0 24px;
    padding:14px 20px;

    box-sizing:border-box;

    background:#18365A;

    border:3px solid #C7A23A;

    border-radius:22px;

    box-shadow:
        0 10px 24px rgba(0,0,0,.22),
        inset 0 1px 0 rgba(255,255,255,.08);

}
.glass-header{
    height:50px;          /* Reduce thickness only */

    /* Leave width, margin and padding exactly as they are */

    border-radius:18px;
}

.glass-dot{
    width:12px;
    height:12px;
}

.glass-text{
    font-size:1rem;
    line-height:1;
}

.glass-link{
    font-size:.85rem;
}
/* ==========================================
   NEW LISTINGS CARD
========================================== */

.listing-card{

    position:relative;

    display:flex;
    flex-direction:column;

    width:100%;

    background:#fff;

    border-radius:18px;

    overflow:hidden;

    text-decoration:none;

    box-shadow:0 8px 20px rgba(0,0,0,.12);

    transition:.3s;

}

.listing-card:active{

    transform:scale(.98);

}

.listing-card .nx-image-wrap{

    position:relative;

    width:100%;

    height:220px;   /* Smaller than Premium */

    overflow:hidden;

}

.listing-card .nx-image{

    width:100%;
    height:100%;

    object-fit:cover;

}

.listing-card .nx-gradient{

    position:absolute;

    left:0;
    right:0;
    bottom:0;

    height:55%;

    background:linear-gradient(
        to top,
        rgba(0,0,0,.9),
        transparent
    );

}

.listing-card .nx-title{

    position:absolute;

    left:16px;
    right:16px;
    bottom:16px;

    color:#fff;

    font-size:18px;

    font-weight:800;

    line-height:1.2;

}

.listing-card .nx-bottom{

    padding:16px;

    background:#fff;

}

.listing-card .nx-price{

    font-size:24px;

    font-weight:900;

    color:#16a34a;

}
body{
    background:#FCFCFC;
}
/* ==========================
PREMIUM SLIDER TRACK
========================== */

.premium-grid{

    overflow:hidden;
    position:relative;

}

.premium-track{

    display:flex;

    width:100%;

    transition:transform .7s ease;

    will-change:transform;

}

.premium-track .nx-card{

    min-width:100%;
    flex-shrink:0;

}
/* Premium Carousel Track */

#premiumGrid{
    overflow:hidden;
    position:relative;
}

.premium-track{
    display:flex;
    gap:20px;
    width:max-content;

    transition:transform .7s ease;
    will-change:transform;
}
.premium-track .nx-card{
    flex:0 0 100%;
}

/* =====================================
   NEXORA STICKY HEADER
===================================== */

.nx-sticky-header{

    position:fixed;
    top:0;
    left:0;

    width:100%;
    height:72px;

    padding:0 18px;

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

    background:#ffffff;

    box-shadow:0 10px 35px rgba(0,0,0,.08);

    transform:translateY(-100%);
    opacity:0;

    transition:.35s ease;

    z-index:9999;

}

.nx-sticky-header.show{

    transform:translateY(0);

    opacity:1;

}

.nx-sticky-header h2{

    margin:0;

    font-size:22px;

    font-weight:800;

    color:#0f172a;

}

.sticky-icon{

    width:48px;
    height:48px;

    border-radius:50%;

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

    font-size:22px;

    background:#f3f4f6;

    cursor:pointer;

}
.nx-sticky-header h2{

    margin:0;

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

    font-size:22px;

    font-weight:900;

    letter-spacing:-0.8px;

    color:#17304f;   /* Same premium navy blue */

    line-height:1;

}

.nx-sticky-header h2 span{

    font-size:18px;

    font-weight:700;

}
/* ==========================================
   NEXORA STICKY HEADER
========================================== */

.nx-sticky-header{

    position:fixed;

    top:0;
    left:0;

    width:100%;
    height:78px;

    background:#fff;

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

    padding:0 28px;

    box-shadow:0 8px 28px rgba(0,0,0,.08);

    z-index:9999;

}

/* ==========================================
   MENU BUTTON
   (EXACT SAME STYLE AS HERO BUTTON)
========================================== */

#stickyMenuBtn{

    width:64px;
    height:64px;

    background:#1f3b67;

    border:3px solid #c9a227;

    border-radius:18px;

    color:#fff;

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

    font-size:34px;

    box-shadow:
    0 10px 24px rgba(0,0,0,.28);

    padding:0;

    cursor:pointer;

    flex-shrink:0;

}

/* remove browser button styling */

#stickyMenuBtn{

    appearance:none;

    outline:none;

}

/* ==========================================
   TITLE
========================================== */

.nx-sticky-header h2{

    margin:0;

    flex:1;

    text-align:center;

    color:#17304f;

    font-size:22px;

    font-weight:900;

    letter-spacing:-.5px;

}

.nx-sticky-header h2 span{

    font-weight:700;

}

/* ==========================================
   GIFT BUTTON
   (FLOATS ON HEADER - NO WHITE BOX)
========================================== */

#giftBtn{

    background:transparent;

    border:none;

    box-shadow:none;

    padding:0;

    margin:0;

    width:auto;

    height:auto;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:34px;

    cursor:pointer;

    flex-shrink:0;

    appearance:none;

    outline:none;

}
#stickyMenuBtn{

    width:50px;
    height:50px;

    background:#1f3b67;

    border:3px solid #c9a227;

    border-radius:15px;

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

    color:#fff;

    font-size:26px;

    box-shadow:
    0 8px 18px rgba(0,0,0,.28);

    padding:0;

    cursor:pointer;

    flex-shrink:0;

    appearance:none;
    outline:none;

}
.sticky-logo{

    height:42px;

    width:auto;

    display:block;

    object-fit:contain;

    user-select:none;

}
.sticky-logo{

    height:63px;

    width:auto;

    display:block;

    object-fit:contain;

    user-select:none;

}
.sticky-brand,
.sticky-logo-wrap{

    height:90px !important;

    display:flex;

    align-items:center;

}

.sticky-logo{

    height:90px !important;

    width:auto !important;

    max-height:none !important;

    max-width:none !important;

}
/* ==========================
   CATEGORY SCROLL BAR
========================== */

.category-scroll-header{

    padding:0 18px;

    overflow:hidden;

}

.category-scroll{

    display:flex;

    align-items:center;

    gap:26px;

    overflow-x:auto;

    scrollbar-width:none;

    -ms-overflow-style:none;

    width:100%;

    height:70px;

    white-space:nowrap;

}

.category-scroll::-webkit-scrollbar{

    display:none;

}

.category-chip{

    flex:0 0 auto;

    background:none;

    border:none;

    color:#ffffff;

    font-size:18px;

    font-weight:800;

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

    cursor:pointer;

    padding:0;

}

.category-chip.active{

    color:#d4af37;

}
/* ==========================================
   CATEGORY BAR
========================================== */

.category-section{

    margin:22px 28px;

}

.category-scroll{

    display:flex;

    gap:14px;

    overflow-x:auto;

    overflow-y:hidden;

    white-space:nowrap;

    scrollbar-width:none;

    -ms-overflow-style:none;

    -webkit-overflow-scrolling:touch;

}

.category-scroll::-webkit-scrollbar{

    display:none;

}

/* ==========================================
   CATEGORY PILL
========================================== */

.category-chip{

    flex:0 0 auto;

    height:52px;

    padding:0 22px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#1f3b67;

    border:2px solid #c8a23a;

    border-radius:999px;

    color:#ffffff;

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

    font-size:16px;

    font-weight:800;

    white-space:nowrap;

    cursor:pointer;

    transition:.25s;

    box-shadow:0 8px 20px rgba(0,0,0,.18);

}

.category-chip.active{

    background:#d4af37;

    color:#1f3b67;

}

.category-chip:hover{

    transform:translateY(-2px);

}
.category-chip.active{

    border-color:#ffd84d;

    box-shadow:
        0 0 12px rgba(212,175,55,.45),
        0 8px 20px rgba(0,0,0,.18);

    color:#ffffff;

    background:#1f3b67;

}
.category-chip:focus{
    outline:none;
}

.category-chip{
    -webkit-tap-highlight-color:transparent;
}
.listing-row{

    display:grid;

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

    gap:18px;

    padding:0 18px 24px;

    width:100%;

    box-sizing:border-box;

}
.category-section{

    margin:22px 0;

}
.category-scroll{

    display:flex;

    gap:14px;

    overflow-x:auto;

    overflow-y:hidden;

    white-space:nowrap;

    scrollbar-width:none;

    -ms-overflow-style:none;

    -webkit-overflow-scrolling:touch;

    padding:0;

}
.support-modal{

    position:fixed;
    inset:0;

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

    background:rgba(0,0,0,.35);

    z-index:99999;

}

.support-modal.show{

    display:flex;

}

.support-box{

    position:relative;

    width:min(94%,420px);

    background:#fff;

    border:3px solid #c8a23a;

    border-radius:28px;

    padding:28px;

    margin:18px;

    box-shadow:0 30px 70px rgba(0,0,0,.28);

    animation:supportUp .35s ease;

}

@keyframes supportUp{

    from{

        transform:translateY(80px);
        opacity:0;

    }

    to{

        transform:translateY(0);
        opacity:1;

    }

}

#closeSupport{

    position:absolute;

    right:16px;

    top:16px;

    width:42px;

    height:42px;

    border-radius:50%;

    background:#f5f5f5;

    display:flex;

    align-items:center;

    justify-content:center;

    cursor:pointer;

    font-size:28px;

}

.support-icon{

    width:74px;

    height:74px;

    border-radius:50%;

    background:#1f3b67;

    color:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:34px;

    margin-bottom:18px;

}

.support-box h3{

    font-size:36px;

    color:#163457;

    margin-bottom:10px;

}

.support-subtitle{

    color:#666;

    line-height:1.6;

    margin-bottom:26px;

}

.support-action{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:12px;

    width:100%;

    height:60px;

    margin-bottom:14px;

    background:#1f3b67;

    color:#fff;

    border-radius:14px;

    text-decoration:none;

    font-weight:700;

}

.support-link{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:14px 0;

    text-decoration:none;

    color:#163457;

    font-weight:700;

}

.support-section{

    margin-top:24px;

    padding-top:22px;

    border-top:1px solid #ececec;

}

.support-footer{

    margin-top:26px;

    text-align:center;

    color:#777;

    font-size:13px;

}
.premium-section{
    padding-top: 22px;
}
/* ==========================================
MARKETING TICKER
========================================== */

#marketingTicker{

height:34px;

background:#FF7A00;

display:flex;

align-items:center;

justify-content:center;

overflow:hidden;

position:relative;

box-shadow:0 2px 10px rgba(255,122,0,.35);

z-index:99999;

}

#tickerText{

position:absolute;

font-size:13px;

font-weight:800;

letter-spacing:.8px;

color:#fff;

text-transform:uppercase;

white-space:nowrap;

animation:tickerFade .6s ease;

}

@keyframes tickerFade{

from{

opacity:0;

transform:translateY(18px);

}

to{

opacity:1;

transform:translateY(0);

}

}
/* Sticky header logo */
.top-header .logo{
    height:72px !important;   /* 48px → 72px (50% larger) */
    width:auto !important;
    object-fit:contain;
}
.logo{
    height:72px;
    object-fit:contain;
}
.sticky-logo{
    height:80px;
    width:auto;
}
.sticky-logo{
    height:80px !important;
    width:auto;
}
/* ==========================================
   RESERVE SPACE FOR NEW LISTINGS
========================================== */

#newListings{

    min-height:900px;   /* Keeps space before products load */

    display:grid;

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

    gap:18px;

    padding:18px;

    align-content:start;

}

/* Mobile */

@media(max-width:768px){

    #newListings{

        min-height:900px;

    }

}

/* Tablet */

@media(min-width:769px){

    #newListings{

        min-height:700px;

    }

}
.sticky-logo{

    height:176px !important;

    width:auto !important;

    max-height:none !important;

    max-width:none !important;

}
.category-section{
    margin-top:0;
    padding-top:0;
}

.category-scroll{
    margin-top:0;
    padding-top:0;
}
/* ==========================================
   CATEGORY PILLS — UNIFORM SIZE & COLOUR
   ========================================== */

.category-chip {
    width: 130px !important;
    min-width: 130px !important;
    max-width: 130px !important;

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

    padding: 0 12px !important;

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

    box-sizing: border-box !important;

    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;

    background: #f1f5f9 !important;
    color: #111827 !important;

    border: 1px solid #e2e8f0 !important;
    border-radius: 999px !important;

    font-size: 13px !important;
    font-weight: 600 !important;
}

/* Phones / active category — SAME appearance */
.category-chip.active {
    width: 130px !important;
    min-width: 130px !important;
    max-width: 130px !important;

    height: 44px !important;

    background: #f1f5f9 !important;
    color: #111827 !important;

    border: 1px solid #e2e8f0 !important;
    box-shadow: none !important;
}

/* Optional: subtle press effect */
.category-chip:active {
    transform: scale(0.97);
}
.category-chip {
    width: 130px !important;
    min-width: 130px !important;
    max-width: 130px !important;

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

    padding: 0 12px !important;

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

    box-sizing: border-box !important;

    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;

    /* More visible */
    background: #e2e8f0 !important;
    color: #1e293b !important;

    border: 1px solid #cbd5e1 !important;
    border-radius: 999px !important;

    font-size: 13px !important;
    font-weight: 600 !important;
}

/* Phones / active category — same exact appearance */
.category-chip.active {
    background: #e2e8f0 !important;
    color: #1e293b !important;
    border: 1px solid #cbd5e1 !important;
    box-shadow: none !important;
}
/* CATEGORY PILLS — SOFT BLUE */

.category-chip {
    width: 130px !important;
    min-width: 130px !important;
    max-width: 130px !important;

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

    padding: 0 12px !important;

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

    box-sizing: border-box !important;

    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;

    background: #F0F6FF !important;
    color: #2563EB !important;

    border: 1px solid #D6E6FF !important;
    border-radius: 999px !important;

    font-size: 13px !important;
    font-weight: 600 !important;
}

/* All pills, including Phones, identical */
.category-chip.active {
    background: #F0F6FF !important;
    color: #2563EB !important;
    border: 1px solid #D6E6FF !important;
    box-shadow: none !important;
}
/* HERO MENU BUTTON — MATCH CATEGORY PILLS */

.hero-menu-btn {
    background: #F0F6FF !important;
    color: #2563EB !important;
    border: 1px solid #D6E6FF !important;
    box-shadow: none !important;
}
/* FORCE PHONES TO MATCH ALL CATEGORY PILLS */

.category-chip,
.category-chip.active,
.category-chip[data-category="Phones"] {
    background: #F0F6FF !important;
    color: #2563EB !important;
    border: 1px solid #D6E6FF !important;
    box-shadow: none !important;
}
/* ==========================================
   FLOATING HERO MENU BUTTON
   ========================================== */

#menuBtn.hero-menu-btn {
    position: fixed !important;

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

    right: 20px !important;
    bottom: 20px !important;

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

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

    z-index: 99999 !important;

    background: #F0F6FF !important;
    color: #2563EB !important;

    border: 1px solid #D6E6FF !important;
    border-radius: 50% !important;

    box-shadow: 0 6px 20px rgba(37, 99, 235, 0.18) !important;

    cursor: pointer !important;
}
/* MENU CLOSED */
#menuPanel {
    display: none;
}

/* MENU OPEN */
#menuPanel.open {
    display: block;
}
/* ==========================================
   SPONSORED PRODUCTS INSIDE FEED
========================================== */

.sponsored-feed-section {

    width: 100%;

    margin: 24px 0;

    padding: 0;

    overflow: hidden;

}


/* TITLE */

.sponsored-feed-heading {

    padding: 0 16px 10px;

    font-size: 16px;

    font-weight: 800;

    color: #111827;

}


/* VIEWPORT */

.sponsored-feed-viewport {

    width: 100%;

    overflow: hidden;

}


/* MOVING TRACK */

.sponsored-feed-track {

    display: flex;

    width: max-content;

    gap: 12px;

    padding-left: 16px;

}


/* CARD */

.sponsored-feed-card {

    position: relative;

    display: block;

    flex: 0 0 180px;

    width: 180px;

    background: #fff;

    border-radius: 18px;

    overflow: hidden;

    text-decoration: none;

    color: inherit;

    box-shadow:
        0 4px 14px rgba(0,0,0,.08);

}


/* IMAGE */

.sponsored-feed-image {

    position: relative;

    width: 100%;

    height: 150px;

    overflow: hidden;

}


.sponsored-feed-image img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    display: block;

}


/* SPONSORED TAG */

.sponsored-feed-tag {

    position: absolute;

    top: 8px;

    left: 8px;

    padding: 5px 9px;

    border-radius: 999px;

    background: #2563eb;

    color: #fff;

    font-size: 10px;

    font-weight: 700;

}


/* INFO */

.sponsored-feed-info {

    padding: 10px;

}


/* TITLE */

.sponsored-feed-title {

    font-size: 14px;

    font-weight: 700;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;

}


/* PRICE */

.sponsored-feed-price {

    margin-top: 5px;

    font-size: 16px;

    font-weight: 800;

    color: #159447;

}


/* ==========================================
   MOVEMENT
========================================== */

@keyframes sponsoredFeedMove {

    from {

        transform:
            translateX(0);

    }

    to {

        transform:
            translateX(
                calc(-50% - 6px)
            );

    }

}
/* =========================================================
   SPONSORED PRODUCTS — FULL WIDTH MOVING STRIP
   ========================================================= */

/* The sponsored section must break out of the 2-column
   normal product grid and occupy the entire row */
.sponsored-feed-section {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 24px 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

/* Sponsored heading */
.sponsored-feed-heading {
    display: block !important;
    width: 100% !important;
    padding: 0 16px 10px !important;
    margin: 0 !important;
    box-sizing: border-box !important;

    font-size: 16px !important;
    font-weight: 800 !important;
    color: #111827 !important;
}

/* The visible window */
.sponsored-feed-viewport {
    display: block !important;
    position: relative !important;

    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    overflow: hidden !important;
    box-sizing: border-box !important;
}

/* Moving row */
.sponsored-feed-track {
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;

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

    gap: 12px !important;
    padding: 0 16px !important;
    margin: 0 !important;

    box-sizing: border-box !important;

    animation:
        sponsoredFeedMove
        25s
        linear
        infinite !important;
}

/* Individual sponsored card */
.sponsored-feed-card {
    position: relative !important;

    display: block !important;

    flex: 0 0 180px !important;
    width: 180px !important;
    min-width: 180px !important;
    max-width: 180px !important;

    background: #ffffff !important;

    border-radius: 18px !important;

    overflow: hidden !important;

    text-decoration: none !important;
    color: inherit !important;

    box-sizing: border-box !important;

    box-shadow:
        0 4px 14px rgba(0, 0, 0, 0.08) !important;
}

/* Sponsored product image area */
.sponsored-feed-image {
    position: relative !important;

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

    overflow: hidden !important;

    background: #f5f5f5 !important;
}

/* Sponsored product image */
.sponsored-feed-image img {
    display: block !important;

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

    object-fit: cover !important;

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

/* Sponsored label */
.sponsored-feed-tag {
    position: absolute !important;

    top: 8px !important;
    left: 8px !important;

    z-index: 5 !important;

    display: inline-flex !important;
    align-items: center !important;

    padding: 5px 9px !important;

    border-radius: 999px !important;

    background: #2563eb !important;
    color: #ffffff !important;

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

    white-space: nowrap !important;
}

/* Sponsored information */
.sponsored-feed-info {
    display: block !important;

    width: 100% !important;

    padding: 10px !important;

    box-sizing: border-box !important;
}

/* Sponsored title */
.sponsored-feed-title {
    width: 100% !important;

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

    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* Sponsored price */
.sponsored-feed-price {
    margin-top: 5px !important;

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

    color: #159447 !important;
}

/* =========================================================
   RIGHT → LEFT MOVEMENT
   ========================================================= */

@keyframes sponsoredFeedMove {

    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(calc(-50% - 6px));
    }

}

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

@media (max-width: 600px) {

    .sponsored-feed-section {
        grid-column: 1 / -1 !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow: hidden !important;
    }

    .sponsored-feed-heading {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    .sponsored-feed-viewport {
        width: 100% !important;
        max-width: 100% !important;
        overflow: hidden !important;
    }

    .sponsored-feed-track {
        gap: 12px !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    .sponsored-feed-card {
        flex: 0 0 180px !important;
        width: 180px !important;
        min-width: 180px !important;
        max-width: 180px !important;
    }

}
/* =========================================================
   SPONSORED CAROUSEL — DISTINCT CARD DESIGN
   ========================================================= */

.sponsored-feed-section {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 26px 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

/* Sponsored heading */
.sponsored-feed-heading {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;

    padding: 0 16px 12px !important;
    margin: 0 !important;

    font-size: 16px !important;
    font-weight: 800 !important;
    color: #172033 !important;
}

/* Small gold dot beside Sponsored */
.sponsored-feed-heading::before {
    content: "" !important;

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

    border-radius: 50% !important;

    background: #d4a72c !important;
}


/* =========================================================
   CAROUSEL VIEWPORT
   ========================================================= */

.sponsored-feed-viewport {
    width: 100% !important;
    max-width: 100% !important;

    overflow: hidden !important;

    box-sizing: border-box !important;
}


/* =========================================================
   MOVING TRACK
   ========================================================= */

.sponsored-feed-track {
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;

    width: max-content !important;

    gap: 14px !important;

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

    animation:
        sponsoredFeedMove
        25s
        linear
        infinite !important;
}


/* =========================================================
   SPONSORED CARD
   ========================================================= */

.sponsored-feed-card {
    position: relative !important;

    display: block !important;

    flex: 0 0 165px !important;
    width: 165px !important;
    min-width: 165px !important;
    max-width: 165px !important;

    background: #ffffff !important;

    border: 1px solid #e5e7eb !important;

    border-radius: 14px !important;

    overflow: hidden !important;

    text-decoration: none !important;
    color: inherit !important;

    box-sizing: border-box !important;

    box-shadow:
        0 3px 10px rgba(0, 0, 0, 0.06) !important;
}


/* =========================================================
   IMAGE
   ========================================================= */

.sponsored-feed-image {
    position: relative !important;

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

    overflow: hidden !important;

    background: #f4f5f7 !important;
}

.sponsored-feed-image img {
    display: block !important;

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

    object-fit: cover !important;

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


/* =========================================================
   SPONSORED BADGE
   ========================================================= */

.sponsored-feed-tag {
    position: absolute !important;

    top: 8px !important;
    left: 8px !important;

    z-index: 5 !important;

    padding: 4px 8px !important;

    border-radius: 6px !important;

    background: rgba(17, 24, 39, 0.82) !important;

    color: #ffffff !important;

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

    letter-spacing: 0.3px !important;

    text-transform: uppercase !important;

    white-space: nowrap !important;
}


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

.sponsored-feed-info {
    display: block !important;

    padding: 9px 10px 11px !important;

    background: #ffffff !important;

    box-sizing: border-box !important;
}


/* TITLE */

.sponsored-feed-title {
    width: 100% !important;

    font-size: 13px !important;

    font-weight: 600 !important;

    color: #1f2937 !important;

    line-height: 1.3 !important;

    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;

    overflow: hidden !important;
}


/* PRICE */

.sponsored-feed-price {
    margin-top: 6px !important;

    font-size: 15px !important;

    font-weight: 800 !important;

    color: #159447 !important;
}


/* =========================================================
   RIGHT → LEFT ANIMATION
   ========================================================= */

@keyframes sponsoredFeedMove {

    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(calc(-50% - 7px));
    }

}


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

@media (max-width: 600px) {

    .sponsored-feed-section {
        grid-column: 1 / -1 !important;

        width: 100% !important;

        margin: 24px 0 !important;

        overflow: hidden !important;
    }

    .sponsored-feed-card {
        flex: 0 0 165px !important;

        width: 165px !important;

        min-width: 165px !important;

        max-width: 165px !important;
    }

    .sponsored-feed-image {
        height: 135px !important;
    }

    .sponsored-feed-track {
        gap: 14px !important;
    }

}
/* =========================================================
   SPONSORED CARD — NAME & PRICE SECTION
   ========================================================= */

.sponsored-feed-card .sponsored-feed-info {
    background: #f1f5f9 !important;
    padding: 10px 12px 12px !important;
    border-top: 1px solid #e2e8f0 !important;
}

/* Product name */
.sponsored-feed-card .sponsored-feed-title {
    color: #1f2937 !important;
    background: transparent !important;
}

/* Product price */
.sponsored-feed-card .sponsored-feed-price {
    color: #159447 !important;
    background: transparent !important;
}
.sponsored-feed-card .sponsored-feed-info {
    background: #fff8e7 !important;
    padding: 10px 12px 12px !important;
    border-top: 1px solid #f1dfad !important;
}

.sponsored-feed-card .sponsored-feed-title {
    color: #1f2937 !important;
    background: transparent !important;
}

.sponsored-feed-card .sponsored-feed-price {
    color: #159447 !important;
    background: transparent !important;
}
.sponsored-feed-track {
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;

    width: max-content !important;

    gap: 14px !important;

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

    animation:
        sponsoredFeedMove
        35s
        linear
        infinite !important;

    animation-play-state: running !important;

    touch-action: pan-y !important;
}

/* Pause while the user is touching the sponsored strip */
.sponsored-feed-track.is-touching {
    animation-play-state: paused !important;
}
.sponsored-feed-heading {
    color: #2563eb !important;
}

.sponsored-feed-heading::before {
    background: #2563eb !important;
}
/* ==========================================
   HOMEPAGE CATEGORY POSTERS
========================================== */

.category-posters {

    display: grid;

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

    gap: 14px;

    width: 100%;

    padding: 0 12px;

    box-sizing: border-box;

}


/* ==========================================
   CATEGORY CARD
========================================== */

.homepage-category-poster {

    display: block;

    width: 100%;

    text-decoration: none;

    color: #111827;

    background: #ffffff;

    border-radius: 10px;

    overflow: hidden;

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;

}


/* ==========================================
   IMAGE AREA
========================================== */

.homepage-category-image {

    position: relative;

    width: 100%;

    aspect-ratio: 1 / 1;

    overflow: hidden;

    background: #f3f4f6;

}


.homepage-category-image img {

    display: block;

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition:
        transform 0.3s ease;

}


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

.homepage-category-name {

    padding:

        7px
        0
        12px;

    font-size: 16px;

    font-weight: 500;

    line-height: 1.3;

    color: #111827;

}


/* ==========================================
   HOVER
========================================== */

.homepage-category-poster:hover {

    transform:
        translateY(-2px);

}


.homepage-category-poster:hover
.homepage-category-image img {

    transform:
        scale(1.03);

}


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

@media (max-width: 600px) {

    .category-posters {

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

        gap: 12px;

        padding:
            0 12px;

    }

    .homepage-category-name {

        font-size: 15px;

        padding:
            6px
            0
            10px;

    }

}
/* =========================================================
   SPONSORED FEED
========================================================= */

.sponsored-feed-section {
    width: 100%;
    margin: 24px 0;
    overflow: hidden;
}


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

.sponsored-feed-heading {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 12px;
}


/* ==========================
   VIEWPORT
========================== */

.sponsored-feed-viewport {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;

    /*
    IMPORTANT:
    Allows the user to swipe
    horizontally with finger.
    */

    touch-action: pan-x;

    /*
    Smooth native mobile scrolling.
    */

    -webkit-overflow-scrolling: touch;

    /*
    Hide scrollbar.
    */

    scrollbar-width: none;

    cursor: grab;
}

.sponsored-feed-viewport::-webkit-scrollbar {
    display: none;
}


/*
When user is actively touching
or dragging the strip.
*/

.sponsored-feed-viewport:active {
    cursor: grabbing;
}


/* ==========================
   TRACK
========================== */

.sponsored-feed-track {
    display: flex;
    flex-direction: row;

    width: max-content;

    gap: 12px;

    /*
    IMPORTANT:
    Do NOT put CSS animation here.

    JavaScript controls
    the automatic scrolling.
    */

    animation: none !important;

    transform: none !important;
}


/* ==========================
   SPONSORED CARD
========================== */

.sponsored-feed-card {
    flex: 0 0 auto;

    width: 220px;

    text-decoration: none;

    color: inherit;

    display: block;
}


/* ==========================
   IMAGE
========================== */

.sponsored-feed-image {
    position: relative;

    width: 100%;

    aspect-ratio: 1 / 1;

    overflow: hidden;

    border-radius: 12px;
}


.sponsored-feed-image img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    display: block;

    pointer-events: none;

    user-select: none;
}


/* ==========================
   SPONSORED LABEL
========================== */

.sponsored-feed-tag {
    position: absolute;

    top: 8px;
    left: 8px;

    padding: 4px 8px;

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

    border-radius: 6px;

    background: rgba(0, 0, 0, 0.7);

    color: #fff;
}


/* ==========================
   PRODUCT INFO
========================== */

.sponsored-feed-info {
    padding: 8px 2px;
}


.sponsored-feed-title {
    font-size: 14px;
    font-weight: 600;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;
}


.sponsored-feed-price {
    margin-top: 4px;

    font-size: 14px;
    font-weight: 700;
}


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

@media (max-width: 600px) {

    .sponsored-feed-card {
        width: 180px;
    }

    .sponsored-feed-track {
        gap: 10px;
    }

}
.sponsored-feed-track{
    display:flex;
    width:max-content;
}


.sponsored-feed-viewport{
    overflow:hidden;
}
/* ==========================================
NEXORA ESCROW NOTICE
========================================== */

.escrow-wrapper{

max-height:0;

opacity:0;

overflow:hidden;

transition:
max-height .8s cubic-bezier(.22,1,.36,1),
opacity .35s ease;

}

.escrow-wrapper.show{

max-height:300px;

opacity:1;

}

.escrow-notice{

margin:16px;

padding:18px 22px;

background:#37475A;

color:#FFFFFF;

border-radius:14px;

display:flex;

justify-content:space-between;

align-items:center;

gap:20px;

box-shadow:
0 8px 24px rgba(0,0,0,.18);

}

.escrow-text{

flex:1;

}

.escrow-text h3{

margin:0 0 8px;

font-size:18px;

font-weight:700;

}

.escrow-text p{

margin:0;

font-size:14px;

line-height:1.6;

color:#E5E7EB;

}

.escrow-actions{

display:flex;

align-items:center;

gap:12px;

flex-shrink:0;

}

.escrow-dismiss{

padding:10px 18px;

border:none;

border-radius:999px;

background:#FFFFFF;

color:#37475A;

font-weight:700;

cursor:pointer;

transition:.25s;

}

.escrow-dismiss:hover{

transform:translateY(-1px);

}

.escrow-learn{

padding:10px 18px;

border:none;

border-radius:999px;

background:#FF9900;

color:#FFFFFF;

font-weight:700;

cursor:pointer;

transition:.25s;

}

.escrow-learn:hover{

transform:translateY(-1px);

}

@media(max-width:768px){

.escrow-notice{

flex-direction:column;

align-items:flex-start;

}

.escrow-actions{

width:100%;

justify-content:flex-end;

}

}
.escrow-wrapper{

width:100vw;

margin:0;

padding:0;

position:relative;

left:50%;

right:50%;

margin-left:-50vw;

margin-right:-50vw;

}
.escrow-notice{

width:100%;

margin:0;

border-radius:0;

box-sizing:border-box;

}
/* =====================================
   ESCROW NOTICE ANIMATION
===================================== */

.escrow-wrapper{

    max-height:0;
    overflow:hidden;

    opacity:0;

    transform:translateY(-15px);

    transition:
        max-height .5s ease,
        opacity .4s ease,
        transform .4s ease;

}


/* Show */

.escrow-wrapper.show{

    max-height:250px;

    opacity:1;

    transform:translateY(0);

}


/* Hide */

.escrow-wrapper.hide{

    max-height:0;

    opacity:0;

    transform:translateY(-15px);

}
/* ===== Sticky header hitbox fix ===== */

/* Keep the header at its intended height */
#stickyHeader,
.nx-sticky-header {
    height: 78px !important;
    overflow: hidden !important;
}

/* Prevent the logo from extending below the header */
#nexoraLogo,
.sticky-logo {
    display: block;
    height: 42px !important;
    max-height: 42px !important;
    width: auto !important;
    object-fit: contain;
}

/* Keep the logo wrapper within the header */
.sticky-logo-wrap,
.sticky-brand {
    height: 78px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden !important;
}
/* ===== Increase sticky logo by ~80% only ===== */

#nexoraLogo,
.sticky-logo {
    height: 180% !important;
    max-height: none !important;
    width: auto !important;
    object-fit: contain;
}
.sponsored-feed-viewport {
    touch-action: pan-y !important;
    overflow-x: auto;
    overscroll-behavior-x: contain;
}

/* ==========================================
   FIX GLOBAL SEARCH POSITIONING
   Override
========================================== */

.global-search{

    width:100% !important;

    position:relative !important;

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

    margin:5px 0 15px !important;

    padding:0 18px !important;

    z-index:20 !important;

}


.search-wrapper{

    position:relative !important;

    width:100% !important;

    height:55px !important;

    display:flex !important;

    align-items:center !important;

    background:#ffffff !important;

    border-radius:18px !important;

    padding:0 18px !important;

    box-shadow:0 6px 18px rgba(0,0,0,.08) !important;

}


.global-search input{

    position:static !important;

    flex:1 !important;

    width:auto !important;

}


.search-suggestions{

    position:absolute !important;

    top:62px !important;

    left:18px !important;

    right:18px !important;

    z-index:9999 !important;

}


.category-section{

    margin-bottom:0 !important;

}


.category-scroll{

    padding-bottom:5px !important;

}


/* Prevent search from covering category cards */

#categorySections,
.category-posters,
#categoryPosters{

    position:relative !important;

    z-index:1 !important;

}
/* ==========================================
   SEARCH INPUT SOFT BACKGROUND
========================================== */

.search-wrapper{

    background:#F8FAFC !important;

    border:1px solid #E5E7EB !important;

}


.search-wrapper input{

    background:transparent !important;

    color:#16385D !important;

}


.search-wrapper input::placeholder{

    color:#94A3B8 !important;

}

.service-listing-card{
    display:flex;
    gap:14px;
    padding:12px;
    background:#fff;
    border-radius:16px;
    align-items:flex-start;
    text-decoration:none;
    color:inherit;
    margin-bottom:12px;
}

.service-image{
    width:88px;
    height:88px;
    border-radius:14px;
    object-fit:cover;
    flex-shrink:0;
}

.service-info{
    flex:1;
}

.service-info h3{
    margin:0 0 6px;
    font-size:17px;
    font-weight:700;
}

.service-description{
    color:#666;
    font-size:14px;
    line-height:1.4;
    margin-bottom:8px;

    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
}

.service-price{
    color:#0B6DFF;
    font-weight:700;
}
/* ==========================================
   NEXORA SERVICES CARD
========================================== */

.service-card{
    display:flex;
    align-items:flex-start;
    gap:14px;
    background:#fff;
    border-radius:18px;
    padding:14px;
    margin:14px 0;
    text-decoration:none;
    color:inherit;
    box-shadow:0 4px 14px rgba(0,0,0,.08);
    transition:.25s ease;
}

.service-card:hover{
    transform:translateY(-2px);
    box-shadow:0 10px 25px rgba(0,0,0,.12);
}

.service-thumb{
    width:110px;
    min-width:110px;
    height:110px;
    object-fit:cover;
    border-radius:14px;
    background:#f2f2f2;
}

.service-content{
    flex:1;
    min-width:0;
    display:flex;
    flex-direction:column;
}

.service-title{
    font-size:18px;
    font-weight:700;
    color:#111827;
    margin-bottom:8px;
    line-height:1.3;
}

.service-meta{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-bottom:8px;
}

.service-tag{
    display:inline-flex;
    align-items:center;
    padding:5px 10px;
    background:#eef4ff;
    color:#2563eb;
    font-size:12px;
    font-weight:600;
    border-radius:50px;
}

.service-description{
    font-size:14px;
    color:#6b7280;
    line-height:1.5;
    margin-bottom:10px;

    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;
    overflow:hidden;
    text-overflow:ellipsis;
}

.service-price{
    margin-top:auto;
    font-size:20px;
    font-weight:800;
    color:#2563eb;
}

@media (max-width:600px){

    .service-card{
        gap:12px;
        padding:12px;
    }

    .service-thumb{
        width:95px;
        min-width:95px;
        height:95px;
    }

    .service-title{
        font-size:16px;
    }

    .service-description{
        font-size:13px;
    }

    .service-price{
        font-size:18px;
    }

}
/* ==========================================
   SERVICE CARD - HORIZONTAL LAYOUT
========================================== */

.listing-card.service-card{
    display:flex !important;
    flex-direction:row !important;
    align-items:flex-start;
    gap:14px;

    width:100%;
    background:#fff;
    border-radius:16px;
    padding:14px;
    margin-bottom:14px;

    text-decoration:none;
    color:inherit;
    overflow:hidden;
}

.listing-card.service-card .service-thumb{
    flex:0 0 110px;

    width:110px;
    height:110px;

    border-radius:14px;
    object-fit:cover;
    display:block;
}

.listing-card.service-card .service-content{
    flex:1;
    min-width:0;

    display:flex;
    flex-direction:column;
}

.listing-card.service-card .service-title{
    font-size:18px;
    font-weight:700;
    color:#111;
    margin-bottom:8px;
}

.listing-card.service-card .service-meta{
    display:flex;
    flex-wrap:wrap;
    gap:6px;
    margin-bottom:8px;
}

.listing-card.service-card .service-tag{
    padding:4px 10px;
    border-radius:30px;
    background:#eef3ff;
    color:#2563eb;
    font-size:12px;
    font-weight:600;
}

.listing-card.service-card .service-description{
    color:#666;
    font-size:14px;
    line-height:1.5;

    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;

    overflow:hidden;
    text-overflow:ellipsis;

    margin-bottom:10px;
}

.listing-card.service-card .service-price{
    margin-top:auto;
    font-size:20px;
    font-weight:700;
    color:#2563eb;
}

@media (max-width:600px){

    .listing-card.service-card{
        flex-direction:row !important;
    }

    .listing-card.service-card .service-thumb{
        width:90px;
        height:90px;
        flex:0 0 90px;
    }

}
/* Services heading */

.homepage-section-header{
    margin:0 16px 16px;
}

.homepage-section-header h2{
    font-size:22px;
    font-weight:700;
    color:#111827;
}

/* View More */

.services-view-more{
    display:flex;
    justify-content:center;
    margin:18px 16px 8px;
}

.services-view-more-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    padding:12px 24px;

    background:#2563eb;
    color:#fff;
    text-decoration:none;

    border-radius:30px;

    font-size:15px;
    font-weight:600;

    transition:.2s;
}

.services-view-more-btn:hover{
    background:#1d4ed8;
}
.services-view-more{
    display:flex;
    justify-content:flex-start;
    margin:20px 16px 8px;
}

.services-view-more-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    padding:12px 22px;

    background:#2563eb;
    color:#fff;

    border-radius:30px;

    text-decoration:none;

    font-size:15px;
    font-weight:700;
}
.services-view-more{
    display:flex;
    justify-content:flex-start;
    padding-bottom:40px;
}
/* ==========================================================
   HOMEPAGE NORMAL PRODUCT CARD
========================================================== */

.listing-card:not(.service-card){
    display:flex;
    flex-direction:column;
    background:#fff;
    border-radius:18px;
    overflow:hidden;
    text-decoration:none;
    color:inherit;
    box-shadow:0 3px 10px rgba(0,0,0,.08);
    transition:.25s;
}

.listing-card:not(.service-card):hover{
    transform:translateY(-2px);
    box-shadow:0 8px 20px rgba(0,0,0,.12);
}

/* Image */

.nx-image-wrap{
    position:relative;
    width:100%;
    aspect-ratio:1/1;
    overflow:hidden;
    background:#f4f4f4;
}

.nx-image{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

/* Remove old overlay */

.nx-gradient,
.nx-title{
    display:none !important;
}

/* Description Area */

.nx-bottom{
    display:flex;
    flex-direction:column;
    gap:8px;
    padding:12px;
    background:#fff;
}

/* Product title */

.nx-product-title{
    font-size:15px;
    font-weight:700;
    color:#111;
    line-height:1.4;

    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;

    overflow:hidden;
    text-overflow:ellipsis;

    min-height:42px;
}

/* Price */

.nx-price{
    font-size:18px;
    font-weight:800;
    color:#0f9d58;
}
/* ==========================================
   PREMIUM NOTIFICATION BADGE
========================================== */

.nxm-counter{

    display:inline-flex;

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

    min-width:24px;
    height:24px;

    padding:0 8px;

    margin-left:10px;

    border-radius:999px;

    background:
    linear-gradient(
    135deg,
    #D4AF37,
    #F5E8B5,
    #C89B1D
    );

    color:#0B1F3A;

    font-size:.72rem;

    font-weight:800;

    border:1px solid rgba(255,255,255,.85);

    box-shadow:
    0 6px 18px rgba(212,175,55,.35),
    inset 0 1px 2px rgba(255,255,255,.65);

    animation:nxmCounterPulse 2.5s infinite;

}

/* Soft glow */

.nxm-counter::before{

    content:"";

    position:absolute;

    inset:-2px;

    border-radius:999px;

    background:
    radial-gradient(
    rgba(212,175,55,.35),
    transparent 70%
    );

    z-index:-1;

}

/* Gentle premium pulse */

@keyframes nxmCounterPulse{

    0%,100%{

        transform:scale(1);

        box-shadow:
        0 6px 18px rgba(212,175,55,.35);

    }

    50%{

        transform:scale(1.08);

        box-shadow:
        0 10px 28px rgba(212,175,55,.55);

    }

}
.services-view-more{
display:flex;
justify-content:center;
margin:20px 0 30px;
}

.services-view-more-btn{
display:inline-flex;
align-items:center;
justify-content:center;

width:180px;
height:46px;

border-radius:12px;
text-decoration:none;

background:rgba(16,42,86,.75);
backdrop-filter:blur(14px);
-webkit-backdrop-filter:blur(14px);

border:1px solid rgba(255,255,255,.18);
box-shadow:
0 8px 24px rgba(16,42,86,.25),
inset 0 1px 0 rgba(255,255,255,.15);

color:#fff;
font-size:15px;
font-weight:600;
letter-spacing:.2px;

transition:.25s ease;
}

.services-view-more-btn:hover{
background:rgba(16,42,86,.9);
transform:translateY(-2px);
box-shadow:
0 12px 30px rgba(16,42,86,.35);
}

.services-view-more-btn:active{
transform:scale(.98);
}
.services-view-more{
display:flex;
justify-content:flex-start;
margin:16px 0 24px;
padding-left:20px;
}

.services-view-more-btn{
display:inline-flex;
align-items:center;
justify-content:center;

width:145px;
height:38px;

background:rgba(16,42,86,.78);
backdrop-filter:blur(14px);
-webkit-backdrop-filter:blur(14px);

border:1px solid rgba(255,255,255,.15);
border-radius:10px;

color:#fff;
text-decoration:none;
font-size:14px;
font-weight:600;

box-shadow:
0 8px 20px rgba(16,42,86,.25);

transition:.25s;
}

.services-view-more-btn:hover{
background:#102A56;
transform:translateY(-2px);
}
#homepageHeroRow{

    transition:.4s;

}

#homepageHeroRow.hero-fade{

    opacity:0;
    transform:scale(.98);

}
/* ==============================
   HOME SPONSOR BANNER
============================== */

#homeSponsorBanner{
    display:none;
    width:100%;
    border-radius:18px;
    overflow:hidden;
    text-decoration:none;
    cursor:pointer;
    animation:fadeIn .35s ease;
}

#homeSponsorBanner img{
    display:block;
    width:100%;
    height:auto;
    border-radius:18px;
    object-fit:cover;
}

@keyframes fadeIn{

    from{
        opacity:0;
        transform:translateY(10px);
    }

    to{
        opacity:1;
        transform:translateY(0);
    }

}
#escrowNotice,
#homeSponsorBanner{
    transition:opacity .3s ease;
}
/* ==========================================
   HOME SPONSOR BANNER
========================================== */

#homeSponsorBanner{
    display:none;
    width:100%;
    text-decoration:none;
    border-radius:18px;
    overflow:hidden;
    background:#fff;
    box-shadow:0 8px 25px rgba(0,0,0,.08);
    transition:opacity .3s ease;
}

#homeSponsorBanner.show{
    display:block;
}

#homeSponsorImage{
    display:block;
    width:100%;
    height:auto;
    min-height:160px;
    object-fit:cover;
    border-radius:18px;
}

@media (max-width:768px){

    #homeSponsorImage{
        min-height:120px;
    }

}
/* ==========================================
   HOME SPONSOR BANNER
========================================== */

#homeSponsorBanner{
    display:none;
    width:100%;
    overflow:hidden;
    border-radius:16px;
    margin-top:12px;
    text-decoration:none;
    background:#fff;
    box-shadow:0 6px 18px rgba(0,0,0,.08);
}

#homeSponsorBanner.show{
    display:block;
}

#homeSponsorImage{
    display:block;
    width:100%;
    height:auto;
    border-radius:16px;
}
/* ==========================================
   NEXORA ESCROW + SPONSOR WRAPPER
========================================== */

.escrow-wrapper{
    width:100vw;
    position:relative;
    left:50%;
    right:50%;
    margin-left:-50vw;
    margin-right:-50vw;

    overflow:hidden;

    max-height:0;

    opacity:0;

    transform:translateY(-15px);

    transition:
        max-height .5s ease,
        opacity .4s ease,
        transform .4s ease;
}

.escrow-wrapper.show{
    max-height:1000px;   /* Plenty of room for sponsor banner */
    opacity:1;
    transform:translateY(0);
}

.escrow-wrapper.hide{
    max-height:0;
    opacity:0;
    transform:translateY(-15px);
}
#homeSponsorBanner{
    display:none;
    width:100%;
    text-decoration:none;
}

#homeSponsorBanner.show{
    display:block;
}

#homeSponsorImage{
    display:block;
    width:100%;
    height:auto;
}
.nxm-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
}

.nxm-brand{
    flex:1;
    text-align:center;
}

.nx-profile-shortcut{
    width:44px;
    height:44px;

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

    border-radius:50%;
    text-decoration:none;

    background:rgba(255,255,255,.12);
    border:1px solid rgba(255,255,255,.2);

    color:#fff;
    font-size:24px;

    transition:.25s;
    flex-shrink:0;
}

.nx-profile-shortcut:hover{
    background:#2563eb;
    transform:scale(1.08);
}

.nx-profile-shortcut img{
    width:100%;
    height:100%;
    border-radius:50%;
    object-fit:cover;
}
/* ==========================================
   GLOBAL SEARCH
========================================== */

.global-search{

    padding:18px 18px 14px;

    position:sticky;

    top:118px;

    z-index:98;

    background:transparent;

}

.search-wrapper{

    display:flex;

    align-items:center;

    height:62px;

    padding:0 22px;

    background:rgba(255,255,255,.95);

    backdrop-filter:blur(18px);

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

    border:1px solid rgba(11,31,58,.08);

    border-radius:22px;

    box-shadow:
        0 12px 30px rgba(11,31,58,.08);

    transition:.25s ease;

}

.search-wrapper:focus-within{

    border-color:rgba(212,175,55,.45);

    box-shadow:
        0 16px 36px rgba(11,31,58,.12),
        0 0 0 4px rgba(212,175,55,.12);

}

.search-wrapper i{

    color:#72809A;

    font-size:20px;

}

.search-wrapper input{

    flex:1;

    border:none;

    outline:none;

    background:transparent;

    padding:0 16px;

    font-family:"Poppins",sans-serif;

    font-size:16px;

    color:#1D2A3A;

}

.search-wrapper input::placeholder{

    color:#8A97AB;

}

#clearSearch{

    width:34px;

    height:34px;

    border:none;

    border-radius:10px;

    background:transparent;

    color:#72809A;

    font-size:16px;

    cursor:pointer;

    display:none;

    transition:.2s;

}

#clearSearch:hover{

    background:#F3F6FA;

}

.search-suggestions{

    display:none;

    margin-top:12px;

    background:#fff;

    border:1px solid rgba(11,31,58,.08);

    border-radius:22px;

    overflow:hidden;

    box-shadow:
        0 16px 40px rgba(11,31,58,.10);

}

.search-item{

    display:flex;

    align-items:center;

    gap:14px;

    padding:16px 20px;

    cursor:pointer;

    transition:.2s;

    border-bottom:1px solid #EEF2F7;

}

.search-item:last-child{

    border-bottom:none;

}

.search-item:hover{

    background:#F8FAFD;

}

.search-item i{

    color:#D4AF37;

    width:22px;

    font-size:17px;

}

.search-title{

    font-size:15px;

    font-weight:600;

    color:#0B1F3A;

}

.search-type{

    margin-top:2px;

    font-size:12px;

    color:#72809A;

}

/* ==========================================================
   NEXORA HOME — CYBERMUSE-INSPIRED FINAL VISUAL LAYER
   Append-only override. Existing functionality is preserved.
========================================================== */

:root{
    --cm-bg:#08070c;
    --cm-dark:#141118;
    --cm-panel:rgba(255,255,255,.045);
    --cm-panel-strong:rgba(255,255,255,.07);
    --cm-white:#ffffff;
    --cm-champagne:#eadfcf;
    --cm-gold:#d4af37;
    --cm-muted:rgba(255,255,255,.62);
    --cm-line:rgba(255,255,255,.11);
}

html,
body{
    background:
        radial-gradient(circle at 12% 7%,rgba(141,118,255,.12),transparent 28%),
        radial-gradient(circle at 90% 72%,rgba(212,175,55,.08),transparent 30%),
        linear-gradient(135deg,#08070c,#17121c 60%,#29221f) !important;
    color:#fff !important;
}

body{
    color:#fff !important;
}

/* HEADER */
.top-header,
.main-header,
.header{
    background:rgba(8,7,12,.94) !important;
    border-bottom:1px solid var(--cm-line) !important;
    box-shadow:none !important;
    backdrop-filter:blur(18px) !important;
    -webkit-backdrop-filter:blur(18px) !important;
}

.header-icon,
.notification-btn{
    background:rgba(255,255,255,.055) !important;
    color:#fff !important;
    border:1px solid var(--cm-line) !important;
    box-shadow:none !important;
}

.header-icon:hover{
    background:rgba(255,255,255,.09) !important;
    transform:none !important;
}

.header-brand{
    background:none !important;
    -webkit-background-clip:initial !important;
    -webkit-text-fill-color:initial !important;
    background-clip:initial !important;
    color:#fff !important;
    filter:none !important;
    animation:none !important;
    letter-spacing:5px !important;
    font-size:1.45rem !important;
}

.header-brand::after{
    display:none !important;
}

/* GLOBAL SECTION RHYTHM */
section,
.rail-section,
.premium-section{
    color:#fff;
}

.rail-header h2,
.section-title,
.category-title,
.featured-title{
    color:#fff !important;
    text-transform:uppercase !important;
    letter-spacing:-.5px !important;
}

.rail-header a,
.section-link,
.view-all{
    color:var(--cm-champagne) !important;
}

/* PRODUCT / LISTING CARDS */
.product-card,
.premium-card,
.nx-card,
.featured-card,
.listing-card,
.loading-card{
    border:1px solid var(--cm-line) !important;
    border-radius:0 !important;
    background:rgba(255,255,255,.045) !important;
    color:#fff !important;
    box-shadow:none !important;
    backdrop-filter:blur(14px) !important;
    transform:none !important;
}

.product-card:active,
.premium-card:active,
.nx-card:hover,
.nx-card:active,
.listing-card:hover{
    transform:none !important;
    box-shadow:none !important;
}

.product-image,
.premium-image,
.nx-image{
    background:#050505 !important;
}

.product-info,
.premium-details,
.nx-bottom{
    color:#fff !important;
}

.product-info h4,
.premium-name,
.nx-title{
    color:#fff !important;
}

.premium-price,
.product-price,
.nx-price{
    color:var(--cm-champagne) !important;
}

.premium-location,
.product-location,
.nx-location{
    color:var(--cm-muted) !important;
}

.premium-badge,
.featured-badge,
.badge-premium{
    border-radius:0 !important;
    background:var(--cm-champagne) !important;
    color:#111 !important;
    box-shadow:none !important;
    text-transform:uppercase !important;
    letter-spacing:.8px !important;
}

/* CATEGORY CARDS / CHIPS */
.cat-card,
.category-card,
.category-chip,
.chip,
.filter-chip{
    border:1px solid var(--cm-line) !important;
    border-radius:0 !important;
    background:rgba(255,255,255,.035) !important;
    color:#fff !important;
    box-shadow:none !important;
}

.cat-card small,
.category-card small,
.category-chip span{
    color:rgba(255,255,255,.76) !important;
}

/* MODALS */
.bluebridge-modal,
.support-modal,
.reverse-modal,
.seller-menu{
    background:rgba(0,0,0,.84) !important;
    backdrop-filter:blur(16px) !important;
}

.bluebridge-box,
.support-box,
.reverse-modal-box,
.seller-menu-box{
    border:1px solid var(--cm-line) !important;
    border-radius:0 !important;
    background:#141118 !important;
    color:#fff !important;
    box-shadow:0 30px 100px rgba(0,0,0,.55) !important;
}

.bluebridge-box h2,
.support-box h3,
.support-section h4,
.reverse-modal-header h2,
#reverseResponsesList h3{
    color:#fff !important;
}

.bluebridge-box p,
.support-subtitle,
.support-section p,
.support-footer,
#reverseResponsesList .location{
    color:var(--cm-muted) !important;
}

.support-action,
.support-link,
#reverseResponsesList,
#reverseResponsesList .response-card{
    border:1px solid var(--cm-line) !important;
    border-radius:0 !important;
    background:rgba(255,255,255,.035) !important;
    color:#fff !important;
}

.support-action i,
.reverse-modal-header h2 i{
    color:var(--cm-champagne) !important;
}

#continueBlueBridge,
#reverseResponsesList .open-btn,
#reverseResponsesList .chat-btn,
.reverse-modal .chat-btn{
    border:0 !important;
    border-radius:0 !important;
    background:#fff !important;
    color:#111 !important;
    box-shadow:none !important;
}

#closeBlueBridge,
#closeReverseModal,
#closeSupport{
    border:1px solid var(--cm-line) !important;
    background:rgba(255,255,255,.055) !important;
    color:#fff !important;
}

/* SUPPORT BUTTON */
#supportBtn{
    border:1px solid rgba(255,255,255,.15) !important;
    background:rgba(8,7,12,.88) !important;
    color:var(--cm-champagne) !important;
    box-shadow:none !important;
}

/* INSTALL BUTTON */
.install-app-btn{
    border:1px solid var(--cm-line) !important;
    border-radius:0 !important;
    background:#fff !important;
    color:#111 !important;
    box-shadow:none !important;
}

/* SPIN SECTION — KEEP FEATURE UNIQUE, DARKEN TO MATCH */
.spin-section{
    border:1px solid var(--cm-line) !important;
    border-radius:0 !important;
    background:
        radial-gradient(circle at top right,rgba(212,175,55,.12),transparent 35%),
        linear-gradient(135deg,#0a090d,#151218) !important;
    box-shadow:none !important;
}

.featured-spin{
    border-radius:0 !important;
    border-color:var(--cm-line) !important;
    background:rgba(255,255,255,.035) !important;
}

.winner-ticker,
.spin-now-btn{
    border-radius:0 !important;
}

.prize-pill,
.spin-stats span,
.spin-disclaimer{
    border-radius:0 !important;
}

/* SKELETONS */
.skeleton-image,
.skeleton-line,
.skeleton-badge{
    background:rgba(255,255,255,.06) !important;
    border-radius:0 !important;
}

/* SELLER MENU */
.seller-menu-box a{
    color:#fff !important;
    border-bottom:1px solid var(--cm-line) !important;
}

/* MOBILE */
@media(max-width:700px){
    .top-header{
        padding:12px 14px !important;
    }

    .header-brand{
        font-size:1.15rem !important;
        letter-spacing:4px !important;
    }

    .product-card,
    .premium-card,
    .nx-card,
    .listing-card{
        border-left:0 !important;
        border-right:0 !important;
    }

    .rail-section,
    .premium-section{
        padding-left:0 !important;
        padding-right:0 !important;
    }

    .rail-header{
        padding-left:14px !important;
        padding-right:14px !important;
    }
}
/* ==========================================================
   HOMEPAGE CATEGORY POSTERS
   PREMIUM CYBERMUSE-INSPIRED STYLE
   SAME SIZE • SQUARE EDGES
========================================================== */

.category-posters{

    display:grid !important;

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

    gap:12px !important;

    width:100% !important;

    padding:
    0 12px !important;

    box-sizing:border-box !important;

}


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

.homepage-category-poster{

    position:relative !important;

    display:block !important;

    width:100% !important;

    overflow:hidden !important;

    text-decoration:none !important;

    color:#fff !important;

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

    border-radius:0 !important;

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

    box-shadow:
    none !important;

    backdrop-filter:
    blur(14px) !important;

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

    transition:
    border-color .25s ease,
    background .25s ease,
    transform .25s ease !important;

}


/* subtle premium top highlight */

.homepage-category-poster::before{

    content:"";

    position:absolute;

    top:0;
    left:0;
    right:0;

    height:1px;

    z-index:5;

    background:
    linear-gradient(
        90deg,
        transparent,
        rgba(234,223,207,.7),
        transparent
    );

    pointer-events:none;

}


/* ==========================================================
   IMAGE
========================================================== */

.homepage-category-image{

    position:relative !important;

    width:100% !important;

    aspect-ratio:
    1 / 1 !important;

    overflow:hidden !important;

    border-radius:
    0 !important;

    background:
    #050505 !important;

}


/* dark editorial gradient */

.homepage-category-image::after{

    content:"";

    position:absolute;

    inset:0;

    pointer-events:none;

    background:

    linear-gradient(
        to bottom,
        transparent 55%,
        rgba(0,0,0,.18) 100%
    );

}


.homepage-category-image img{

    display:block !important;

    width:100% !important;

    height:100% !important;

    object-fit:cover !important;

    border-radius:
    0 !important;

    filter:
    contrast(1.03)
    saturate(.94);

    transition:

    transform .35s ease,
    filter .35s ease !important;

}


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

.homepage-category-name{

    position:relative !important;

    min-height:50px !important;

    display:flex !important;

    align-items:center !important;

    justify-content:
    space-between !important;

    padding:
    11px 12px !important;

    border-top:

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

    background:

    linear-gradient(
        135deg,
        rgba(255,255,255,.045),
        rgba(255,255,255,.018)
    ) !important;

    color:#fff !important;

    font-size:
    .78rem !important;

    font-weight:
    700 !important;

    line-height:
    1.25 !important;

    letter-spacing:
    .15px !important;

}


/* small directional arrow */

.homepage-category-name::after{

    content:"→";

    flex-shrink:0;

    margin-left:8px;

    color:
    #eadfcf;

    font-size:
    .9rem;

    font-weight:
    400;

    opacity:.85;

    transition:
    transform .25s ease;

}


/* ==========================================================
   INTERACTION
========================================================== */

.homepage-category-poster:hover{

    transform:
    translateY(-2px) !important;

    border-color:
    rgba(234,223,207,.35) !important;

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

}


.homepage-category-poster:hover
.homepage-category-image img{

    transform:
    scale(1.035) !important;

    filter:
    contrast(1.05)
    saturate(1) !important;

}


.homepage-category-poster:hover
.homepage-category-name::after{

    transform:
    translateX(3px);

}


.homepage-category-poster:active{

    transform:
    scale(.985) !important;

}


/* ==========================================================
   SKELETON CATEGORY
========================================================== */

.homepage-category-poster.skeleton-category{

    pointer-events:none !important;

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

}


.homepage-category-poster.skeleton-category
.homepage-category-image{

    background:

    linear-gradient(
        90deg,
        rgba(255,255,255,.035) 25%,
        rgba(255,255,255,.08) 50%,
        rgba(255,255,255,.035) 75%
    ) !important;

    background-size:
    220% 100% !important;

    animation:
    nxCategoryShimmer
    1.2s linear infinite;

}


.homepage-category-poster.skeleton-category
.homepage-category-name{

    width:65% !important;

    min-height:13px !important;

    height:13px !important;

    margin:12px !important;

    padding:0 !important;

    border:0 !important;

    background:

    rgba(255,255,255,.07) !important;

}


.homepage-category-poster.skeleton-category
.homepage-category-name::after{

    display:none;

}


@keyframes nxCategoryShimmer{

    from{

        background-position:
        200% 0;

    }

    to{

        background-position:
        -200% 0;

    }

}


/* ==========================================================
   MOBILE
   RETAIN ORIGINAL CARD SIZE / 2 COLUMN LAYOUT
========================================================== */

@media(max-width:600px){

    .category-posters{

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

        gap:
        10px !important;

        padding:
        0 10px !important;

    }


    .homepage-category-name{

        min-height:
        46px !important;

        padding:
        9px 10px !important;

        font-size:
        .72rem !important;

    }


    .homepage-category-name::after{

        font-size:
        .8rem;

    }

}


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

@media(max-width:360px){

    .category-posters{

        gap:
        7px !important;

        padding:
        0 7px !important;

    }


    .homepage-category-name{

        min-height:
        43px !important;

        padding:
        8px !important;

        font-size:
        .67rem !important;

    }

}
/* ==========================================================
   NEXORA HOMEPAGE SPONSORED CAROUSEL
   HIGH-VISIBILITY PREMIUM STYLE
   SQUARE EDGES ONLY
========================================================== */

.sponsored-feed-section{

    position:relative !important;

    width:100% !important;

    margin:28px 0 !important;

    padding:14px 0 16px !important;

    overflow:hidden !important;

    border-radius:0 !important;

    border-top:
    1px solid rgba(234,223,207,.45) !important;

    border-bottom:
    1px solid rgba(234,223,207,.25) !important;

    background:
    radial-gradient(
        circle at 10% 20%,
        rgba(212,175,55,.14),
        transparent 32%
    ),
    linear-gradient(
        135deg,
        #0b0908 0%,
        #1b1610 45%,
        #0a090c 100%
    ) !important;

    box-shadow:
    0 14px 40px rgba(0,0,0,.22) !important;

}


/* ==========================================
   CATEGORY CHIPS — SAFE HORIZONTAL SCROLL
========================================== */

.category-scroll{
    overflow-x:auto;
    overflow-y:hidden;

    touch-action:pan-x;

    overscroll-behavior-x:contain;

    -webkit-overflow-scrolling:touch;

    scrollbar-width:none;
}

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

.category-chip{
    flex-shrink:0;

    user-select:none;
    -webkit-user-select:none;

    touch-action:manipulation;
}


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

.sponsored-feed-heading{

    position:relative !important;

    display:flex !important;

    align-items:center !important;

    gap:8px !important;

    width:max-content !important;

    margin:
    0 14px 12px !important;

    padding:
    6px 10px !important;

    border-radius:0 !important;

    border:
    1px solid rgba(212,175,55,.55) !important;

    background:
    rgba(212,175,55,.12) !important;

    color:
    #f4df99 !important;

    font-size:
    .64rem !important;

    font-weight:
    800 !important;

    letter-spacing:
    2.2px !important;

    text-transform:
    uppercase !important;

}


/* advertising indicator */

.sponsored-feed-heading::before{

    content:"";

    width:6px;
    height:6px;

    flex-shrink:0;

    background:
    #d4af37;

    box-shadow:
    0 0 10px rgba(212,175,55,.9);

    animation:
    sponsorDot 1.4s ease-in-out infinite;

}


@keyframes sponsorDot{

    0%,
    100%{
        opacity:.45;
    }

    50%{
        opacity:1;
    }

}


/* add label */

.sponsored-feed-heading::after{

    content:"PROMOTED";

    margin-left:
    4px;

    padding-left:
    9px;

    border-left:
    1px solid rgba(212,175,55,.3);

    color:
    rgba(255,255,255,.42);

    font-size:
    .5rem;

    font-weight:
    600;

    letter-spacing:
    1.5px;

}


/* ==========================================================
   CAROUSEL VIEWPORT
========================================================== */

.sponsored-feed-viewport{

    width:100% !important;

    overflow-x:auto !important;

    overflow-y:hidden !important;

    scrollbar-width:none !important;

    -webkit-overflow-scrolling:
    touch !important;

    padding:
    0 14px 4px !important;

}


.sponsored-feed-viewport::-webkit-scrollbar{

    display:none !important;

}


/* ==========================================================
   TRACK
========================================================== */

.sponsored-feed-track{

    display:flex !important;

    align-items:stretch !important;

    gap:10px !important;

    width:max-content !important;

}


/* ==========================================================
   SPONSORED CARD
========================================================== */

.sponsored-feed-card{

    position:relative !important;

    flex:
    0 0 148px !important;

    width:
    148px !important;

    overflow:hidden !important;

    text-decoration:none !important;

    border-radius:
    0 !important;

    border:
    1px solid rgba(212,175,55,.32) !important;

    background:
    #11100f !important;

    color:
    #fff !important;

    box-shadow:
    0 8px 22px rgba(0,0,0,.28) !important;

    transition:
    transform .22s ease,
    border-color .22s ease,
    background .22s ease !important;

}


/* subtle champagne edge */

.sponsored-feed-card::after{

    content:"";

    position:absolute;

    left:0;
    bottom:0;

    width:100%;
    height:2px;

    background:

    linear-gradient(
        90deg,
        #8c6b16,
        #d4af37,
        #f5df93
    );

}


/* ==========================================================
   IMAGE
========================================================== */

.sponsored-feed-image{

    position:relative !important;

    width:100% !important;

    aspect-ratio:
    1 / 1 !important;

    overflow:hidden !important;

    border-radius:
    0 !important;

    background:
    #050505 !important;

}


.sponsored-feed-image img{

    display:block !important;

    width:100% !important;

    height:100% !important;

    object-fit:cover !important;

    border-radius:
    0 !important;

    transition:
    transform .35s ease,
    filter .35s ease !important;

}


/* image shade */

.sponsored-feed-image::after{

    content:"";

    position:absolute;

    inset:0;

    pointer-events:none;

    background:

    linear-gradient(
        to bottom,
        transparent 55%,
        rgba(0,0,0,.45)
    );

}


/* ==========================================================
   SPONSORED BADGE
========================================================== */

.sponsored-feed-tag{

    position:absolute !important;

    top:7px !important;
    left:7px !important;

    z-index:4 !important;

    padding:
    5px 7px !important;

    border-radius:
    0 !important;

    background:
    #d4af37 !important;

    color:
    #090909 !important;

    font-size:
    .52rem !important;

    font-weight:
    900 !important;

    line-height:
    1 !important;

    letter-spacing:
    .8px !important;

    text-transform:
    uppercase !important;

    box-shadow:
    none !important;

}


/* ==========================================================
   INFORMATION AREA
========================================================== */

.sponsored-feed-info{

    position:relative !important;

    padding:
    10px 9px 12px !important;

    border-radius:
    0 !important;

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

    background:

    linear-gradient(
        135deg,
        rgba(255,255,255,.055),
        rgba(255,255,255,.015)
    ) !important;

}


/* ==========================================================
   TITLE
========================================================== */

.sponsored-feed-title{

    display:
    -webkit-box !important;

    overflow:
    hidden !important;

    -webkit-box-orient:
    vertical !important;

    -webkit-line-clamp:
    2 !important;

    min-height:
    32px !important;

    color:
    #fff !important;

    font-size:
    .72rem !important;

    font-weight:
    700 !important;

    line-height:
    1.35 !important;

}


/* ==========================================================
   PRICE
========================================================== */

.sponsored-feed-price{

    margin-top:
    7px !important;

    color:
    #f1d77d !important;

    font-size:
    .72rem !important;

    font-weight:
    800 !important;

    letter-spacing:
    .15px !important;

}


/* ==========================================================
   INTERACTION
========================================================== */

.sponsored-feed-card:hover{

    transform:
    translateY(-3px) !important;

    border-color:
    rgba(212,175,55,.75) !important;

    background:
    #181510 !important;

}


.sponsored-feed-card:hover
.sponsored-feed-image img{

    transform:
    scale(1.045) !important;

    filter:
    brightness(1.04)
    contrast(1.03);

}


.sponsored-feed-card:active{

    transform:
    scale(.97) !important;

}


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

@media(max-width:600px){

    .sponsored-feed-section{

        margin:
        22px 0 !important;

        padding:
        12px 0 14px !important;

    }


    .sponsored-feed-heading{

        margin:
        0 10px 10px !important;

    }


    .sponsored-feed-viewport{

        padding:
        0 10px 3px !important;

    }


    .sponsored-feed-track{

        gap:
        8px !important;

    }


    .sponsored-feed-card{

        flex:
        0 0 138px !important;

        width:
        138px !important;

    }

}


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

@media(max-width:360px){

    .sponsored-feed-card{

        flex:
        0 0 128px !important;

        width:
        128px !important;

    }


    .sponsored-feed-title{

        font-size:
        .68rem !important;

    }


    .sponsored-feed-price{

        font-size:
        .68rem !important;

    }

}
/* ==========================================================
   NEXORA HOMEPAGE STICKY HEADER
   FINAL CYBERMUSE STYLE
========================================================== */

#stickyHeader.nx-sticky-header{

    position:fixed !important;

    top:0 !important;
    left:0 !important;
    right:0 !important;

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

    padding:0 14px !important;

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

    overflow:hidden !important;

    border:0 !important;
    border-bottom:
    1px solid rgba(234,223,207,.20) !important;

    border-radius:0 !important;

    background:
    linear-gradient(
        135deg,
        rgba(8,7,12,.97),
        rgba(24,18,28,.95)
    ) !important;

    box-shadow:
    0 12px 35px rgba(0,0,0,.30) !important;

    backdrop-filter:
    blur(22px) saturate(140%) !important;

    -webkit-backdrop-filter:
    blur(22px) saturate(140%) !important;

    transform:translateY(-100%) !important;

    opacity:0 !important;

    transition:
    transform .3s ease,
    opacity .3s ease !important;

    z-index:99999 !important;

}


/* WHEN JS ADDS .show */

#stickyHeader.nx-sticky-header.show{

    transform:
    translateY(0) !important;

    opacity:
    1 !important;

}


/* champagne bottom line */

#stickyHeader.nx-sticky-header::after{

    content:"";

    position:absolute;

    left:0;
    right:0;
    bottom:0;

    height:1px;

    background:

    linear-gradient(
        90deg,
        transparent,
        rgba(212,175,55,.40),
        #eadfcf,
        rgba(212,175,55,.40),
        transparent
    );

    pointer-events:none;

}


/* ==========================================================
   LEFT MENU + RIGHT GIFT
========================================================== */

#stickyHeader .sticky-icon{

    position:relative !important;

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

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

    padding:0 !important;

    display:flex !important;

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

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

    border-radius:
    0 !important;

    outline:none !important;

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

    color:#eadfcf !important;

    box-shadow:none !important;

    font-size:18px !important;

    cursor:pointer !important;

    flex-shrink:0 !important;

}


/* MENU ICON */

#stickyMenuBtn i{

    color:#eadfcf !important;

    font-size:17px !important;

}


/* GIFT BUTTON */

#giftBtn{

    background:
    rgba(212,175,55,.10) !important;

    border-color:
    rgba(212,175,55,.30) !important;

    color:#fff !important;

    font-size:18px !important;

}


/* remove any old floating positioning */

#stickyHeader #giftBtn,
#stickyHeader #stickyMenuBtn{

    position:relative !important;

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

    margin:0 !important;

    transform:none !important;

}


/* ==========================================================
   NEXORA LOGO
========================================================== */

#stickyHeader #nexoraLogo,
#stickyHeader .sticky-logo{

    position:absolute !important;

    left:50% !important;
    top:50% !important;

    transform:
    translate(-50%,-50%) !important;

    display:block !important;

    width:auto !important;

    height:50px !important;

    max-height:50px !important;

    max-width:160px !important;

    object-fit:contain !important;

    margin:0 !important;

    padding:0 !important;

    border:0 !important;

    filter:
    drop-shadow(
        0 3px 10px
        rgba(0,0,0,.25)
    );

    z-index:1 !important;

}


/* ==========================================================
   INTERACTION
========================================================== */

#stickyHeader .sticky-icon:hover{

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

    border-color:
    rgba(234,223,207,.38) !important;

    color:#fff !important;

}


#stickyHeader .sticky-icon:active{

    transform:
    scale(.94) !important;

}


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

@media(max-width:600px){

    #stickyHeader.nx-sticky-header{

        height:
        62px !important;

        padding:
        0 10px !important;

    }


    #stickyHeader .sticky-icon{

        width:
        39px !important;

        height:
        39px !important;

        min-width:
        39px !important;

        min-height:
        39px !important;

    }


    #stickyHeader #nexoraLogo,
    #stickyHeader .sticky-logo{

        height:
        44px !important;

        max-height:
        44px !important;

        max-width:
        145px !important;

    }

}
/* ==========================================
   STICKY HEADER LOGO
   200% LARGER
========================================== */

#stickyHeader #nexoraLogo,
#stickyHeader .sticky-logo{

    height:100px !important;
    max-height:none !important;

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

    object-fit:contain !important;

}


/* MOBILE */

@media(max-width:600px){

    #stickyHeader #nexoraLogo,
    #stickyHeader .sticky-logo{

        height:88px !important;
        max-height:none !important;

    }

}


/* ==========================================================
   NEXORA FINAL RESPONSIVE STANDARDIZATION
   Mobile • Tablet • Laptop/Desktop
   App-wide compatibility layer
========================================================== */

:root{
    --nx-r-bg:#08070c;
    --nx-r-bg2:#17121c;
    --nx-r-panel:rgba(255,255,255,.045);
    --nx-r-panel2:rgba(255,255,255,.075);
    --nx-r-line:rgba(255,255,255,.11);
    --nx-r-line-gold:rgba(234,223,207,.27);
    --nx-r-text:#fff;
    --nx-r-muted:rgba(255,255,255,.62);
    --nx-r-muted2:rgba(255,255,255,.78);
    --nx-r-champagne:#eadfcf;
    --nx-r-gold:#d4af37;
}

html{
    max-width:100%;
    overflow-x:hidden;
}

body{
    max-width:100%;
    overflow-x:hidden;
}

img,
video,
canvas,
svg{
    max-width:100%;
}

input,
select,
textarea,
button{
    max-width:100%;
}

/* prevent long text / urls from breaking layouts */
p,
h1,h2,h3,h4,h5,h6,
span,
a,
button,
input,
textarea,
select{
    overflow-wrap:anywhere;
}

/* generic centered desktop shell where present */
.page,
.container,
.content,
.main-content,
.page-container{
    box-sizing:border-box;
}


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

@media (max-width:767px){

    html{
        font-size:15px;
    }

    body{
        width:100%;
    }

    .container,
    .page,
    .content,
    .main-content,
    .page-container{
        width:100%;
        max-width:100%;
    }

    /* touch targets */
    button,
    .btn,
    a.button,
    input,
    select{
        min-height:44px;
    }

    /* prevent modal overflow */
    .modal-content,
    .modal-box,
    .business-modal-content,
    .reverse-modal-box,
    .support-box,
    .bluebridge-box{
        max-width:100% !important;
    }

}


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

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

    html{
        font-size:15.5px;
    }

    .container,
    .page,
    .content,
    .main-content,
    .page-container{
        width:min(100%,920px);
        margin-left:auto;
        margin-right:auto;
    }

}


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

@media (min-width:1200px){

    html{
        font-size:16px;
    }

    .container,
    .page,
    .content,
    .main-content,
    .page-container{
        width:min(100%,1180px);
        margin-left:auto;
        margin-right:auto;
    }

}


/* ==========================================================
   style.css — HOMEPAGE FINAL RESPONSIVE LAYER
========================================================== */

/* MOBILE */
@media (max-width:767px){

    .top-header,
    .main-header,
    .header{
        padding-left:10px !important;
        padding-right:10px !important;
    }

    .header-brand{
        font-size:1rem !important;
        letter-spacing:3px !important;
    }

    .header-icon,
    .notification-btn{
        width:40px !important;
        height:40px !important;
        min-width:40px !important;
    }

    .category-posters{
        grid-template-columns:repeat(2,minmax(0,1fr)) !important;
        gap:8px !important;
        padding-left:8px !important;
        padding-right:8px !important;
    }

    .homepage-category-poster{
        min-width:0 !important;
    }

    .homepage-category-image{
        aspect-ratio:1/1 !important;
    }

    .homepage-category-name{
        min-height:44px !important;
        font-size:.7rem !important;
        padding:8px !important;
    }

    .sponsored-feed-card{
        flex:0 0 136px !important;
        width:136px !important;
    }

    .rail-section,
    .premium-section{
        margin-left:0 !important;
        margin-right:0 !important;
    }

    .products-grid,
    .premium-grid,
    .rail-track{
        max-width:100% !important;
    }

    .spin-section{
        margin-left:0 !important;
        margin-right:0 !important;
        border-left:0 !important;
        border-right:0 !important;
    }

    #supportBtn{
        left:12px !important;
        bottom:96px !important;
    }

    .bottom-nav{
        height:68px !important;
    }
}

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

    .top-header,
    .main-header,
    .header{
        padding-left:22px !important;
        padding-right:22px !important;
    }

    .category-posters{
        grid-template-columns:repeat(4,minmax(0,1fr)) !important;
        gap:12px !important;
        max-width:920px !important;
        margin-left:auto !important;
        margin-right:auto !important;
    }

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

    .rail-section,
    .premium-section,
    .spin-section{
        width:min(100%,920px) !important;
        margin-left:auto !important;
        margin-right:auto !important;
    }

    .sponsored-feed-section{
        width:min(100%,920px) !important;
        margin-left:auto !important;
        margin-right:auto !important;
    }
}

/* DESKTOP */
@media (min-width:1200px){

    .top-header,
    .main-header,
    .header{
        padding-left:max(24px,calc((100vw - 1180px)/2)) !important;
        padding-right:max(24px,calc((100vw - 1180px)/2)) !important;
    }

    .category-posters{
        grid-template-columns:repeat(6,minmax(0,1fr)) !important;
        gap:14px !important;
        max-width:1180px !important;
        margin-left:auto !important;
        margin-right:auto !important;
    }

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

    .rail-section,
    .premium-section,
    .spin-section,
    .sponsored-feed-section{
        width:min(100%,1180px) !important;
        margin-left:auto !important;
        margin-right:auto !important;
    }

    .sponsored-feed-card{
        flex-basis:170px !important;
        width:170px !important;
    }

    #supportBtn{
        left:max(20px,calc((100vw - 1180px)/2)) !important;
    }
}
/* =========================================
   REMOVE PREMIUM GOLD FLASH / SHINE ONLY
   Keeps carousel movement and other styling
========================================= */

.premium-card::before,
.premium-card::after,
.premium-item::before,
.premium-item::after{
    animation: none !important;
}

/* Remove only animated shine layers */
.premium-card::before,
.premium-item::before{
    content: none !important;
}
/* =========================================
   GLOBAL SEARCH — RECTANGULAR / SQUARE EDGES
========================================= */

.global-search .search-wrapper{
    border-radius: 0 !important;
}

.global-search .search-wrapper input,
.global-search #globalSearch,
.global-search #clearSearch{
    border-radius: 0 !important;
}
#newListings .nx-price,
.listing-card .nx-price{
    color:#B89120 !important;
    font-weight:900 !important;
    opacity:1 !important;
}
/* ==========================================================
   NEXORA HOMEPAGE SERVICES
   CYBERMUSE / NEW EDITORIAL STYLE
========================================================== */


/* ==========================================
   SERVICES SECTION HEADING
========================================== */

.homepage-section-header{

    width:100% !important;

    margin:0 !important;

    padding:28px 26px 18px !important;

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

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

    background:transparent !important;

}


.homepage-section-header h2{

    margin:0 !important;

    color:#ffffff !important;

    font-size:1.45rem !important;

    font-weight:800 !important;

    line-height:1.2 !important;

    letter-spacing:-.4px !important;

}


.homepage-section-header h2::after{

    content:"";

    display:block;

    width:72px;

    height:3px;

    margin-top:10px;

    background:#D4AF37;

}


/* ==========================================
   SERVICES LIST
========================================== */

#servicesContainer,
.services-container,
.services-list{

    width:100% !important;

    margin:0 !important;

    padding:0 !important;

    display:flex !important;

    flex-direction:column !important;

    gap:0 !important;

}


/* ==========================================
   SERVICE CARD
========================================== */

.service-card,
.listing-card.service-card{

    position:relative !important;

    display:grid !important;

    grid-template-columns:
    150px minmax(0,1fr) !important;

    align-items:stretch !important;

    gap:0 !important;

    width:100% !important;

    max-width:100% !important;

    min-height:170px !important;

    margin:0 !important;

    padding:0 !important;

    overflow:hidden !important;

    border:0 !important;

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

    border-radius:0 !important;

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

    box-shadow:none !important;

    backdrop-filter:none !important;

    color:#ffffff !important;

    text-decoration:none !important;

    transform:none !important;

}


.service-card:hover,
.listing-card.service-card:hover{

    transform:none !important;

    box-shadow:none !important;

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

}


/* ==========================================
   SERVICE IMAGE
========================================== */

.service-card .service-thumb,
.listing-card.service-card .service-thumb{

    display:block !important;

    width:150px !important;

    min-width:150px !important;

    height:100% !important;

    min-height:170px !important;

    aspect-ratio:auto !important;

    margin:0 !important;

    padding:0 !important;

    object-fit:cover !important;

    border:0 !important;

    border-radius:0 !important;

    background:#08070a !important;

}


/* ==========================================
   SERVICE INFORMATION
========================================== */

.service-card .service-content,
.listing-card.service-card .service-content{

    min-width:0 !important;

    width:100% !important;

    display:flex !important;

    flex-direction:column !important;

    align-items:flex-start !important;

    justify-content:center !important;

    gap:0 !important;

    padding:20px 22px !important;

    background:transparent !important;

}


/* ==========================================
   SERVICE NAME
========================================== */

.service-card .service-title,
.listing-card.service-card .service-title{

    width:100% !important;

    margin:0 0 7px !important;

    color:#ffffff !important;

    font-size:1.05rem !important;

    font-weight:800 !important;

    line-height:1.35 !important;

    letter-spacing:-.2px !important;

    white-space:normal !important;

    overflow:visible !important;

}


/* ==========================================
   META / TAGS
========================================== */

.service-card .service-meta,
.listing-card.service-card .service-meta{

    display:flex !important;

    flex-wrap:wrap !important;

    align-items:center !important;

    gap:6px !important;

    margin:0 0 8px !important;

}


.service-card .service-tag,
.listing-card.service-card .service-tag{

    display:inline-flex !important;

    align-items:center !important;

    width:auto !important;

    min-height:24px !important;

    padding:3px 7px !important;

    border:
    1px solid
    rgba(234,223,207,.24) !important;

    border-radius:0 !important;

    background:
    rgba(234,223,207,.07) !important;

    color:#EADFCF !important;

    font-size:.58rem !important;

    font-weight:700 !important;

    letter-spacing:.4px !important;

    text-transform:uppercase !important;

}


/* ==========================================
   DESCRIPTION
========================================== */

.service-card .service-description,
.listing-card.service-card .service-description{

    width:100% !important;

    margin:0 0 11px !important;

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

    font-size:.78rem !important;

    font-weight:400 !important;

    line-height:1.55 !important;

    display:-webkit-box !important;

    -webkit-box-orient:vertical !important;

    -webkit-line-clamp:2 !important;

    overflow:hidden !important;

    text-overflow:ellipsis !important;

}


/* ==========================================
   PRICE
========================================== */

.service-card .service-price,
.listing-card.service-card .service-price{

    width:100% !important;

    margin:auto 0 0 !important;

    color:#EADFCF !important;

    font-size:1.1rem !important;

    font-weight:800 !important;

    line-height:1.2 !important;

}


/* ==========================================
   VIEW MORE SERVICES
========================================== */

.services-view-more{

    width:100% !important;

    display:flex !important;

    justify-content:flex-start !important;

    margin:0 !important;

    padding:18px 26px 32px !important;

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

}


.services-view-more-btn{

    display:inline-flex !important;

    align-items:center !important;

    justify-content:center !important;

    width:auto !important;

    min-width:150px !important;

    min-height:44px !important;

    padding:0 16px !important;

    border:
    1px solid
    rgba(234,223,207,.55) !important;

    border-radius:0 !important;

    background:
    transparent !important;

    color:#EADFCF !important;

    box-shadow:none !important;

    font-size:.68rem !important;

    font-weight:800 !important;

    letter-spacing:.7px !important;

    text-decoration:none !important;

    text-transform:uppercase !important;

}


.services-view-more-btn:hover,
.services-view-more-btn:active{

    background:#EADFCF !important;

    color:#111111 !important;

}


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

@media(max-width:700px){

    .homepage-section-header{

        padding:
        24px 20px 15px !important;

    }


    .homepage-section-header h2{

        font-size:1.25rem !important;

    }


    .service-card,
    .listing-card.service-card{

        grid-template-columns:
        118px minmax(0,1fr) !important;

        min-height:145px !important;

    }


    .service-card .service-thumb,
    .listing-card.service-card .service-thumb{

        width:118px !important;

        min-width:118px !important;

        height:100% !important;

        min-height:145px !important;

    }


    .service-card .service-content,
    .listing-card.service-card .service-content{

        padding:
        16px 16px !important;

    }


    .service-card .service-title,
    .listing-card.service-card .service-title{

        font-size:.98rem !important;

    }


    .service-card .service-description,
    .listing-card.service-card .service-description{

        font-size:.72rem !important;

        line-height:1.5 !important;

    }


    .service-card .service-price,
    .listing-card.service-card .service-price{

        font-size:1rem !important;

    }


    .services-view-more{

        padding:
        16px 20px 28px !important;

    }

}


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

@media(
    min-width:701px
)
and
(
    max-width:1100px
){

    .service-card,
    .listing-card.service-card{

        grid-template-columns:
        165px minmax(0,1fr) !important;

    }


    .service-card .service-thumb,
    .listing-card.service-card .service-thumb{

        width:165px !important;

        min-width:165px !important;

    }

}


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

@media(min-width:1101px){

    .homepage-section-header,
    #servicesContainer,
    .services-container,
    .services-list,
    .services-view-more{

        width:min(100%,1180px) !important;

        margin-left:auto !important;

        margin-right:auto !important;

    }


    .service-card,
    .listing-card.service-card{

        grid-template-columns:
        190px minmax(0,1fr) !important;

        min-height:190px !important;

    }


    .service-card .service-thumb,
    .listing-card.service-card .service-thumb{

        width:190px !important;

        min-width:190px !important;

        min-height:190px !important;

    }


    .service-card .service-title,
    .listing-card.service-card .service-title{

        font-size:1.12rem !important;

    }

}
/* ==========================================================
   NEXORA HOMEPAGE BANNER
   FIXED 1536 × 218 ASPECT CONTAINER
========================================================== */

#homeSponsorBanner{

    display:none;

    position:relative;

    width:calc(100% - 24px);
    max-width:1536px;

    /* 1536 × 218 */
    aspect-ratio:1536 / 218;

    margin:24px auto 34px;

    padding:0;

    overflow:hidden;

    box-sizing:border-box;

    border:1px solid rgba(255,255,255,.12);
    border-radius:0;

    background:#09080c;

    text-decoration:none;
}


/* SHOW ACTIVE BANNER */

#homeSponsorBanner.show{
    display:block;
}


/* ==========================================================
   FINAL FIX — HOMEPAGE SPONSOR BANNER
   REMOVE OLD FULL-VIEWPORT SHIFT
========================================================== */

/* FIX THE PARENT THAT IS CAUSING THE SIDEWAYS SHIFT */
#escrowWrapper,
.escrow-wrapper{

    width:100% !important;
    max-width:100% !important;

    left:auto !important;
    right:auto !important;

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

    padding:0 !important;

    position:relative !important;

    transform:none !important;

    overflow:hidden !important;

    box-sizing:border-box !important;
}


/* When visible, only give enough height for the banner */
#escrowWrapper.show,
.escrow-wrapper.show{

    max-height:500px !important;

    opacity:1 !important;

    transform:none !important;
}


/* ==========================================================
   BANNER CONTAINER
   1536 × 218 RATIO
========================================================== */

#homeSponsorBanner{

    width:calc(100% - 20px) !important;
    max-width:1536px !important;

    aspect-ratio:1536 / 218 !important;

    margin:5px auto !important;

    padding:0 !important;

    position:relative !important;

    left:auto !important;
    right:auto !important;

    transform:none !important;

    overflow:hidden !important;

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

    background:transparent !important;

    box-shadow:none !important;

    box-sizing:border-box !important;
}


#homeSponsorBanner.show{

    display:block !important;

}


/* ==========================================================
   BANNER IMAGE
   SHOW THE ENTIRE IMAGE
========================================================== */

#homeSponsorImage,
#homeSponsorBanner img{

    display:block !important;

    position:static !important;

    width:100% !important;
    max-width:100% !important;

    height:100% !important;
    min-height:0 !important;
    max-height:none !important;

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

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

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

    transform:none !important;

}


/* ==========================================================
   VERY THIN GAP BEFORE CATEGORY CARDS
========================================================== */

#categorySections{

    margin-top:3px !important;

}

#categoryPosters{

    margin-top:3px !important;

}


/* MOBILE */

@media(max-width:700px){

    #homeSponsorBanner{

        width:calc(100% - 20px) !important;

        margin:
        4px auto
        5px !important;

    }

}
/* =========================================
   NEXORA MENU — VISIBLE DECORATIVE ARTWORK
========================================= */

#nxmSideMenu{
    position: fixed;
    overflow: hidden;
    isolation: isolate;
}

/* Decorative artwork layer */
#nxmSideMenu .nxm-decor-wrap{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;

    pointer-events: none;

    z-index: 0;
}

/* All subtle images */
#nxmSideMenu .nxm-decor{
    position: absolute;

    display: block !important;

    width: 190px;
    height: auto;

    opacity: 0.28 !important;

    visibility: visible !important;

    filter: none !important;

    pointer-events: none;

    object-fit: contain;
}

/* Individual positioning */

#nxmSideMenu .nxm-decor-1{
    top: 7%;
    right: -45px;
    transform: rotate(8deg);
}

#nxmSideMenu .nxm-decor-2{
    top: 23%;
    left: -55px;
    transform: rotate(-10deg);
}

#nxmSideMenu .nxm-decor-3{
    top: 40%;
    right: -55px;
    transform: rotate(12deg);
}

#nxmSideMenu .nxm-decor-4{
    top: 57%;
    left: -50px;
    transform: rotate(-8deg);
}

#nxmSideMenu .nxm-decor-5{
    top: 73%;
    right: -45px;
    transform: rotate(10deg);
}

#nxmSideMenu .nxm-decor-6{
    top: 88%;
    left: -45px;
    transform: rotate(-7deg);
}


/* =========================================
   KEEP MENU CONTENT ABOVE ARTWORK
========================================= */

#nxmSideMenu .nxm-header,
#nxmSideMenu .nxm-divider,
#nxmSideMenu .nxm-navigation,
#nxmSideMenu .nxm-follow-title,
#nxmSideMenu .nxm-social-links{
    position: relative;
    z-index: 2;
}
/* ==========================================================
   NEXORA HOMEPAGE DISCOVERY
   TRENDING + SHOP BY LOCATION
========================================================== */


/* ==========================================================
   RIGHT-SIDE FLOATING BUTTONS
========================================================== */

.nx-discovery-buttons{

    position:fixed;

    right:10px;
    top:48%;

    z-index:9200;

    display:flex;
    flex-direction:column;

    gap:9px;

    opacity:0;

    pointer-events:none;

    transform:
    translateX(120px);

    transition:
    opacity .45s ease,
    transform .55s
    cubic-bezier(.22,1,.36,1);

}


/* after 3 seconds */

.nx-discovery-buttons.show{

    opacity:1;

    pointer-events:auto;

    transform:
    translateX(0);

}


/* individual glass button */

.nx-discovery-trigger{

    min-height:48px;

    display:flex;

    align-items:center;

    gap:9px;

    padding:
    0 14px;

    border:
    1px solid
    rgba(255,255,255,.68);

    border-radius:0;

    background:
    rgba(255,255,255,.88);

    backdrop-filter:
    blur(20px);

    -webkit-backdrop-filter:
    blur(20px);

    color:#151515;

    box-shadow:
    0 10px 32px
    rgba(0,0,0,.20);

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

    font-size:12px;

    font-weight:800;

    cursor:pointer;

    white-space:nowrap;

    transition:
    transform .22s ease,
    background .22s ease;

}


.nx-discovery-trigger i{

    width:18px;

    text-align:center;

    font-size:16px;

}


.nx-discovery-trigger:hover{

    background:#ffffff;

    transform:
    translateX(-4px);

}


.nx-discovery-trigger:active{

    transform:
    scale(.96);

}


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

.nx-discovery-panel{

    position:fixed;

    inset:0;

    z-index:9800;

    display:flex;

    justify-content:flex-end;

    align-items:flex-end;

    pointer-events:none;

    visibility:hidden;

    background:
    rgba(5,5,8,0);

    transition:
    background .35s ease,
    visibility .35s ease;

}


.nx-discovery-panel.show{

    visibility:visible;

    pointer-events:auto;

    background:
    rgba(5,5,8,.52);

}


/* actual floating sheet */

.nx-discovery-panel-inner{

    width:min(
        100%,
        760px
    );

    max-height:82vh;

    display:flex;

    flex-direction:column;

    overflow:hidden;

    border:
    1px solid
    rgba(255,255,255,.13);

    border-radius:0;

    background:
    linear-gradient(
        145deg,
        rgba(24,21,28,.98),
        rgba(10,9,13,.99)
    );

    box-shadow:
    0 -25px 80px
    rgba(0,0,0,.50);

    transform:
    translateY(110%);

    opacity:0;

    transition:
    transform .55s
    cubic-bezier(.22,1,.36,1),
    opacity .35s ease;

}


.nx-discovery-panel.show
.nx-discovery-panel-inner{

    transform:
    translateY(0);

    opacity:1;

}


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

.nx-discovery-header{

    flex:0 0 auto;

    display:flex;

    align-items:flex-start;

    justify-content:
    space-between;

    gap:16px;

    padding:
    20px 18px 16px;

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

}


.nx-discovery-eyebrow{

    margin-bottom:5px;

    color:#D4AF37;

    font-size:10px;

    font-weight:800;

    letter-spacing:2px;

}


.nx-discovery-header h2{

    margin:0;

    color:#ffffff;

    font-size:21px;

    font-weight:800;

    line-height:1.2;

}


.nx-discovery-header p{

    margin:
    5px 0 0;

    color:
    rgba(255,255,255,.52);

    font-size:12px;

}


.nx-discovery-close{

    flex:0 0 42px;

    width:42px;
    height:42px;

    display:flex;

    align-items:center;

    justify-content:center;

    border:
    1px solid
    rgba(255,255,255,.16);

    border-radius:0;

    background:
    rgba(255,255,255,.05);

    color:#ffffff;

    font-size:25px;

    cursor:pointer;

}


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

.nx-location-choices{

    display:none;

    flex:0 0 auto;

    max-height:230px;

    overflow-y:auto;

    padding:8px 0;

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

}


.nx-location-choices.show{

    display:block;

}


.nx-location-item{

    width:100%;

    display:flex;

    align-items:center;

    justify-content:
    space-between;

    gap:15px;

    padding:
    14px 18px;

    border:0;

    border-bottom:
    1px solid
    rgba(255,255,255,.055);

    border-radius:0;

    background:
    transparent;

    color:#ffffff;

    text-align:left;

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

    cursor:pointer;

}


.nx-location-name{

    font-size:13px;

    font-weight:700;

}


.nx-location-count{

    flex-shrink:0;

    color:
    rgba(255,255,255,.42);

    font-size:10px;

    font-weight:600;

}


.nx-location-item:hover{

    background:
    rgba(255,255,255,.05);

}


/* ==========================================================
   PRODUCT RESULTS
========================================================== */

.nx-discovery-products{

    flex:1;

    min-height:0;

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

    display:grid;

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

    gap:1px;

    background:
    rgba(255,255,255,.07);

}


/* product */

.nx-floating-product{

    position:relative;

    display:block;

    min-width:0;

    overflow:hidden;

    background:#111015;

    color:#ffffff;

    text-decoration:none;

    opacity:0;

    transform:
    translateY(30px)
    scale(.97);

    animation:
    nxFloatProductIn
    .55s
    cubic-bezier(.22,1,.36,1)
    forwards;

}


@keyframes nxFloatProductIn{

    to{

        opacity:1;

        transform:
        translateY(0)
        scale(1);

    }

}


/* image */

.nx-floating-product-image{

    position:relative;

    width:100%;

    aspect-ratio:1 / 1;

    overflow:hidden;

    background:#080808;

}


.nx-floating-product-image img{

    width:100%;
    height:100%;

    display:block;

    object-fit:cover;

}


/* ranking */

.nx-floating-rank{

    position:absolute;

    top:8px;
    left:8px;

    min-width:28px;
    height:28px;

    display:flex;

    align-items:center;

    justify-content:center;

    padding:0 6px;

    background:
    rgba(255,255,255,.90);

    backdrop-filter:
    blur(12px);

    color:#111;

    font-size:10px;

    font-weight:900;

}


/* information */

.nx-floating-product-info{

    padding:
    13px 12px 15px;

}


.nx-floating-product-title{

    color:#ffffff;

    font-size:13px;

    font-weight:800;

    line-height:1.35;

    display:-webkit-box;

    -webkit-box-orient:
    vertical;

    -webkit-line-clamp:2;

    overflow:hidden;

}


.nx-floating-product-price{

    margin-top:8px;

    color:#D4AF37;

    font-size:14px;

    font-weight:900;

}


.nx-floating-product-location{

    margin-top:6px;

    color:
    rgba(255,255,255,.48);

    font-size:10px;

    white-space:nowrap;

    overflow:hidden;

    text-overflow:
    ellipsis;

}


/* trending views */

.nx-floating-product-views{

    margin-top:5px;

    color:
    rgba(255,255,255,.42);

    font-size:9px;

}


/* ==========================================================
   LOADING / EMPTY
========================================================== */

.nx-discovery-message{

    grid-column:1 / -1;

    min-height:200px;

    display:flex;

    align-items:center;

    justify-content:center;

    padding:30px;

    background:#111015;

    color:
    rgba(255,255,255,.55);

    text-align:center;

    font-size:13px;

}


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

@media(max-width:700px){

    .nx-discovery-buttons{

        right:7px;

        top:49%;

    }


    .nx-discovery-trigger{

        width:46px;
        min-width:46px;
        height:46px;
        min-height:46px;

        justify-content:center;

        padding:0;

    }


    .nx-discovery-trigger span{

        display:none;

    }


    .nx-discovery-panel-inner{

        width:100%;

        max-height:84vh;

    }


    .nx-discovery-products{

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

    }

}


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

@media(
    min-width:701px
)
and
(
    max-width:1100px
){

    .nx-discovery-products{

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

    }

}


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

@media(min-width:1101px){

    .nx-discovery-buttons{

        right:20px;

    }


    .nx-discovery-panel{

        align-items:center;

        padding:24px;

    }


    .nx-discovery-panel-inner{

        width:820px;

        max-height:86vh;

    }


    .nx-discovery-products{

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

    }

}
/* ==========================================================
   HOMEPAGE DISCOVERY BUTTONS — FINAL STYLE
========================================================== */

.nx-discovery-buttons{

    right:10px !important;

    gap:12px !important;
}


/* BIGGER BUTTONS */

.nx-discovery-trigger{

    min-width:170px !important;
    min-height:58px !important;

    padding:0 18px !important;

    justify-content:flex-start !important;

    gap:12px !important;

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

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

    border-radius:0 !important;

    box-shadow:
    0 12px 32px
    rgba(0,0,0,.22) !important;

    color:#151515 !important;

    font-size:14px !important;
    font-weight:800 !important;
}


/* KEEP TEXT VISIBLE ON MOBILE */

.nx-discovery-trigger span{

    display:inline !important;

    color:#151515 !important;

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

    white-space:nowrap !important;
}


/* ICON SIZE */

.nx-discovery-trigger i{

    width:24px !important;

    font-size:22px !important;

    text-align:center !important;
}


/* TRENDING — RED */

#nxTrendingBtn i{

    color:#FF2D2D !important;
}


/* LOCATION — PINK */

#nxLocationBtn i{

    color:#FF3F86 !important;
}


/* MOBILE */

@media(max-width:700px){

    .nx-discovery-buttons{

        right:8px !important;

        top:49% !important;
    }


    .nx-discovery-trigger{

        width:auto !important;
        min-width:165px !important;

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

        padding:
        0 16px !important;

        justify-content:flex-start !important;
    }


    .nx-discovery-trigger span{

        display:inline !important;

        font-size:13px !important;
    }

}
/* =====================================================
   NEXORA ACCENT
   WARM PEACH / GOLD
===================================================== */

/* ACTIVE CATEGORY CHIP */

.category-chip.active{
    background: #FFC16B !important;
    color: #111111 !important;

    border-color: #FFC16B !important;

    box-shadow:
        0 6px 20px rgba(255,193,107,.25) !important;
}


/* ==========================================
   FLOATING HAMBURGER MENU
========================================== */

#menuBtn.hero-menu-btn{
    background: #FFC16B !important;

    border: 1px solid #FFC16B !important;

    box-shadow:
        0 10px 30px rgba(0,0,0,.22),
        0 0 18px rgba(255,193,107,.25) !important;
}


/* REMOVE OLD GREEN DOT */

#menuBtn.hero-menu-btn::after{
    content: none !important;
    display: none !important;
}


/* HAMBURGER STRIPS */

#menuBtn.hero-menu-btn i{
    color: #111111 !important;

    text-shadow: none !important;
    filter: none !important;
}


/* TOUCH EFFECT */

#menuBtn.hero-menu-btn:active{
    background: #FFB957 !important;
    transform: scale(.94) !important;
}


/* KEEP ICON BLACK */

#menuBtn.hero-menu-btn:active i{
    color: #111111 !important;
}

/* ==========================================================
   NEXORA DISCOVERY — SURPRISE + BUDGET
========================================================== */

#nxSurpriseBtn i{
    color:#7C5CFF !important;
}

#nxBudgetBtn i{
    color:#18C97A !important;
}


/* ==========================================================
   BUDGET CHOICES
========================================================== */

.nx-budget-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
    padding:14px;
}

.nx-budget-option{
    min-height:50px;
    padding:10px 12px;
    border:1px solid rgba(255,255,255,.12);
    border-radius:12px;
    background:rgba(255,255,255,.06);
    color:#ffffff;
    font-family:"Outfit",sans-serif;
    font-size:12px;
    font-weight:800;
    cursor:pointer;
    transition:transform .18s ease,background .18s ease,border-color .18s ease;
}

.nx-budget-option:hover{
    background:rgba(255,193,107,.13);
    border-color:rgba(255,193,107,.55);
}

.nx-budget-option:active{
    transform:scale(.97);
}


/* ==========================================================
   SURPRISE BUNDLE OVERLAY
========================================================== */

.nx-surprise-overlay{
    position:fixed;
    inset:0;
    z-index:12000;
    display:flex;
    align-items:flex-end;
    justify-content:center;
    padding:0;
    background:rgba(3,4,8,.72);
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:opacity .25s ease,visibility .25s ease;
}

.nx-surprise-overlay.show{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
}

.nx-surprise-card{
    width:min(100%,720px);
    max-height:92vh;
    overflow-y:auto;
    padding:18px;
    border:1px solid rgba(255,255,255,.12);
    border-radius:24px 24px 0 0;
    background:linear-gradient(145deg,#171522,#0d0c13);
    box-shadow:0 -24px 80px rgba(0,0,0,.48);
    transform:translateY(100%);
    transition:transform .38s cubic-bezier(.22,1,.36,1);
}

.nx-surprise-overlay.show .nx-surprise-card{
    transform:translateY(0);
}

.nx-surprise-topbar{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:16px;
    margin-bottom:16px;
}

.nx-surprise-kicker{
    margin-bottom:5px;
    color:#FFC16B;
    font-size:10px;
    font-weight:900;
    letter-spacing:1.7px;
}

.nx-surprise-topbar h2{
    margin:0;
    color:#ffffff;
    font-size:22px;
    font-weight:900;
}

.nx-surprise-topbar p{
    margin:5px 0 0;
    color:rgba(255,255,255,.55);
    font-size:12px;
}

.nx-surprise-close{
    flex:0 0 38px;
    width:38px;
    height:38px;
    border:1px solid rgba(255,255,255,.12);
    border-radius:50%;
    background:rgba(255,255,255,.06);
    color:#fff;
    font-size:22px;
    cursor:pointer;
}

.nx-surprise-products{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:10px;
}

.nx-surprise-product{
    min-width:0;
    overflow:hidden;
    border:1px solid rgba(255,255,255,.09);
    border-radius:14px;
    background:rgba(255,255,255,.05);
    color:#ffffff;
    text-decoration:none;
}

.nx-surprise-product-image{
    width:100%;
    aspect-ratio:1/1;
    overflow:hidden;
    background:#07070a;
}

.nx-surprise-product-image img{
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
}

.nx-surprise-product-title{
    min-height:48px;
    padding:10px 10px 3px;
    color:#fff;
    font-size:11px;
    font-weight:800;
    line-height:1.3;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
}

.nx-surprise-product-price{
    padding:0 10px 11px;
    color:#FFC16B;
    font-size:12px;
    font-weight:900;
}

.nx-surprise-loading{
    grid-column:1/-1;
    min-height:180px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:12px;
    color:rgba(255,255,255,.62);
    font-size:13px;
    text-align:center;
}

.nx-surprise-loading i{
    color:#FFC16B;
    font-size:32px;
}

.nx-surprise-summary{
    margin-top:16px;
    overflow:hidden;
    border:1px solid rgba(255,255,255,.10);
    border-radius:16px;
    background:rgba(255,255,255,.045);
}

.nx-surprise-summary-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    padding:13px 14px;
    color:rgba(255,255,255,.68);
    font-size:12px;
}

.nx-surprise-summary-row + .nx-surprise-summary-row{
    border-top:1px solid rgba(255,255,255,.07);
}

.nx-surprise-summary-row strong{
    color:#ffffff;
    font-size:14px;
    font-weight:900;
}

.nx-surprise-discount-row{
    background:rgba(24,201,122,.08);
}

.nx-surprise-discount-row strong{
    color:#35e69a;
    font-size:18px;
}

.nx-surprise-save-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:14px;
    border-top:1px solid rgba(255,255,255,.07);
}

.nx-surprise-save-row small{
    display:block;
    margin-bottom:2px;
    color:rgba(255,255,255,.45);
    font-size:10px;
    text-transform:uppercase;
    letter-spacing:.8px;
}

.nx-surprise-save-row strong{
    color:#FFC16B;
    font-size:18px;
    font-weight:900;
}

.nx-surprise-apply{
    min-height:44px;
    padding:0 14px;
    border:0;
    border-radius:12px;
    background:#FFC16B;
    color:#111111;
    font-family:"Outfit",sans-serif;
    font-size:11px;
    font-weight:900;
    cursor:pointer;
}

.nx-surprise-shuffle{
    width:100%;
    min-height:48px;
    margin-top:12px;
    border:1px solid rgba(255,255,255,.12);
    border-radius:13px;
    background:rgba(255,255,255,.06);
    color:#ffffff;
    font-family:"Outfit",sans-serif;
    font-size:12px;
    font-weight:800;
    cursor:pointer;
}

.nx-surprise-shuffle i{
    margin-right:7px;
    color:#FFC16B;
}


/* ==========================================================
   SURPRISE ELIGIBILITY INFORMATION POPUP
========================================================== */

.nx-surprise-info{
    position:fixed;
    inset:0;
    z-index:13000;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:20px;
    background:rgba(3,4,8,.76);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:opacity .2s ease,visibility .2s ease;
}

.nx-surprise-info.show{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
}

.nx-surprise-info-box{
    width:min(100%,390px);
    padding:24px;
    border:1px solid rgba(255,255,255,.12);
    border-radius:18px;
    background:#15131c;
    box-shadow:0 20px 70px rgba(0,0,0,.45);
    text-align:center;
}

.nx-surprise-info-icon{
    width:44px;
    height:44px;
    margin:0 auto 12px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:#FFC16B;
    color:#111;
    font-size:20px;
    font-weight:900;
}

.nx-surprise-info-box h3{
    margin:0;
    color:#ffffff;
    font-size:18px;
    font-weight:900;
}

.nx-surprise-info-box p{
    margin:10px 0 18px;
    color:rgba(255,255,255,.66);
    font-size:13px;
    line-height:1.6;
}

.nx-surprise-info-box button{
    width:100%;
    min-height:46px;
    border:0;
    border-radius:12px;
    background:#FFC16B;
    color:#111111;
    font-family:"Outfit",sans-serif;
    font-size:13px;
    font-weight:900;
    cursor:pointer;
}


@media(max-width:700px){

    .nx-surprise-card{
        padding:16px 12px 18px;
    }

    .nx-surprise-products{
        gap:7px;
    }

    .nx-surprise-product-title{
        padding-left:8px;
        padding-right:8px;
        font-size:10px;
    }

    .nx-surprise-product-price{
        padding-left:8px;
        padding-right:8px;
        font-size:11px;
    }

    .nx-surprise-save-row{
        align-items:flex-end;
    }

    .nx-surprise-apply{
        max-width:180px;
    }

}
/* =====================================================
   NEXORA HOMEPAGE DISCOVERY BUTTONS
===================================================== */

#nxDiscoveryButtons.nx-discovery-buttons {

    position: fixed !important;

    right: 18px !important;
    bottom: 105px !important;

    width: auto !important;
    height: auto !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;

    gap: 8px !important;

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

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

    z-index: 9999 !important;
}


/* =====================================================
   ALL FOUR BUTTONS
===================================================== */

#nxTrendingBtn,
#nxLocationBtn,
#nxSurpriseBtn,
#nxBudgetBtn {

    position: relative !important;

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

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

    display: flex !important;

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

    gap: 9px !important;

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

    /* SAME DARK PREMIUM COLOUR */
    background: rgba(16, 17, 27, 0.94) !important;

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

    border-radius: 23px !important;

    box-shadow:
        0 6px 20px rgba(0,0,0,.28) !important;

    color: #ffffff !important;

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

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

    line-height: 1 !important;

    text-align: left !important;

    overflow: hidden !important;

    appearance: none !important;
    -webkit-appearance: none !important;

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

    transition:
        transform .18s ease,
        background .18s ease,
        box-shadow .18s ease !important;
}


/* =====================================================
   INDIVIDUAL WIDTHS
===================================================== */

#nxTrendingBtn {
    width: 126px !important;
}

#nxLocationBtn {
    width: 170px !important;
}

#nxSurpriseBtn {
    width: 145px !important;
}

#nxBudgetBtn {
    width: 175px !important;
}


/* =====================================================
   ALL ICONS
===================================================== */

#nxTrendingBtn i,
#nxLocationBtn i,
#nxSurpriseBtn i,
#nxBudgetBtn i {

    position: static !important;

    width: 25px !important;
    height: 25px !important;

    display: flex !important;

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

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

    background: transparent !important;

    font-size: 17px !important;

    flex: 0 0 25px !important;
}


/* =====================================================
   ICON COLOURS
===================================================== */

#nxTrendingBtn i {
    color: #ff3b4d !important;
}

#nxLocationBtn i {
    color: #ff3f91 !important;
}

#nxSurpriseBtn i {
    color: #f5b942 !important;
}

#nxBudgetBtn i {
    color: #35d07f !important;
}


/* =====================================================
   ALL BUTTON TEXT
===================================================== */

#nxTrendingBtn span,
#nxLocationBtn span,
#nxSurpriseBtn span,
#nxBudgetBtn span {

    display: block !important;

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

    color: #ffffff !important;

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

    white-space: nowrap !important;

    line-height: 1 !important;
}


/* =====================================================
   PRESS EFFECT
===================================================== */

#nxTrendingBtn:active,
#nxLocationBtn:active,
#nxSurpriseBtn:active,
#nxBudgetBtn:active {

    transform: scale(.96) !important;

    background:
        rgba(28, 29, 44, .98) !important;
}
#nxDiscoveryButtons.nx-discovery-buttons {

    transition:
        opacity .08s ease,
        visibility .08s ease !important;
}


/* ==========================================================
   NEXORA HOMEPAGE — LARGE SCREEN MULTI-COLUMN LAYOUT
   FINAL DESKTOP OVERRIDE
========================================================== */

/*
   Phones keep the existing compact/mobile layout.
   Tablets become 3-column where appropriate.
   Large desktop screens use 4–6 columns depending on width.
*/


/* ==========================================================
   TABLETS
========================================================== */

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

    /* New / standard listings */
    .listing-row{
        display:grid !important;
        grid-template-columns:repeat(3,minmax(0,1fr)) !important;
        gap:14px !important;
    }

    /* Premium listings */
    .premium-grid{
        display:grid !important;
        grid-template-columns:repeat(3,minmax(0,1fr)) !important;
        gap:14px !important;
    }

    /* Any generic marketplace card grids */
    .products-grid,
    .product-grid,
    .marketplace-grid,
    .listing-grid{
        grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    }

    /* Category row becomes an actual grid */
    .categories-row{
        display:grid !important;
        grid-template-columns:repeat(4,minmax(0,1fr)) !important;
        gap:14px !important;
        overflow:visible !important;
        padding-left:20px !important;
        padding-right:20px !important;
    }

    .category-card{
        width:100% !important;
        min-width:0 !important;
        max-width:none !important;
    }

    /* Discovery products */
    .nx-discovery-products{
        grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    }

}


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

@media (min-width:1200px){

    /*
       Give homepage sections breathing room.
       Sections no longer stretch endlessly from edge to edge.
    */
    .premium-section,
    .rail-section,
    .spin-section,
    .categories-section,
    .listings-section,
    .marketplace-section,
    .featured-section{
        width:min(calc(100% - 56px),1540px) !important;
        max-width:1540px !important;
        margin-left:auto !important;
        margin-right:auto !important;
    }


    /* ------------------------------------------------------
       NEW LISTINGS
    ------------------------------------------------------ */

    .listing-row{
        display:grid !important;
        grid-template-columns:repeat(4,minmax(0,1fr)) !important;
        gap:16px !important;
        width:100% !important;
    }


    /* ------------------------------------------------------
       PREMIUM LISTINGS
    ------------------------------------------------------ */

    .premium-grid{
        display:grid !important;
        grid-template-columns:repeat(4,minmax(0,1fr)) !important;
        gap:16px !important;
        width:100% !important;
    }

    /*
       Your CSS previously overrides .premium-grid to display:block.
       Force the desktop version back into a real grid.
    */
    .premium-grid .nx-card,
    .listing-row .nx-card,
    .listing-row .product-card,
    .premium-grid .premium-card{
        width:100% !important;
        min-width:0 !important;
        max-width:none !important;
        margin:0 !important;
    }


    /* ------------------------------------------------------
       CATEGORY SECTION
       Stop horizontal mobile carousel on desktop.
    ------------------------------------------------------ */

    .categories-row{
        display:grid !important;
        grid-template-columns:repeat(6,minmax(0,1fr)) !important;
        gap:14px !important;

        width:min(calc(100% - 56px),1540px) !important;
        max-width:1540px !important;

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

        padding:12px 0 28px !important;

        overflow:visible !important;
    }

    .category-card{
        width:100% !important;
        min-width:0 !important;
        max-width:none !important;
        height:155px !important;
        flex:none !important;
    }


    /* ------------------------------------------------------
       GENERIC PRODUCT GRIDS
       Covers homepage grids created dynamically by JS.
    ------------------------------------------------------ */

    .products-grid,
    .product-grid,
    .marketplace-grid,
    .listing-grid,
    .products-container,
    #productsContainer{
        display:grid !important;
        grid-template-columns:
            repeat(auto-fill,minmax(210px,1fr)) !important;
        gap:16px !important;

        width:min(calc(100% - 56px),1540px) !important;
        max-width:1540px !important;

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


    /* ------------------------------------------------------
       HOMEPAGE DISCOVERY
    ------------------------------------------------------ */

    .nx-discovery-products{
        grid-template-columns:repeat(4,minmax(0,1fr)) !important;
        gap:14px !important;
    }


    /* ------------------------------------------------------
       PRODUCT CARD SCALE
       Prevent giant single cards on large monitors.
    ------------------------------------------------------ */

    .listing-row .product-image,
    .premium-grid .premium-image,
    .premium-grid .nx-image,
    .premium-grid .nx-image-wrap,
    .listing-row .nx-image,
    .listing-row .nx-image-wrap{
        width:100% !important;
        height:auto !important;
        aspect-ratio:1 / 1 !important;
        object-fit:cover !important;
    }

    .listing-row .nx-title,
    .premium-grid .nx-title{
        font-size:18px !important;
        left:14px !important;
        right:14px !important;
        bottom:14px !important;
    }

    .listing-row .nx-price,
    .premium-grid .nx-price{
        font-size:24px !important;
    }

    .listing-row .nx-bottom,
    .premium-grid .nx-bottom{
        padding:14px !important;
    }


    /* ------------------------------------------------------
       HEADERS
    ------------------------------------------------------ */

    .rail-header,
    .glass-header{
        width:min(calc(100% - 56px),1540px) !important;
        max-width:1540px !important;
        margin-left:auto !important;
        margin-right:auto !important;
    }

}


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

@media (min-width:1600px){

    .listing-row{
        grid-template-columns:repeat(5,minmax(0,1fr)) !important;
        gap:18px !important;
    }

    .premium-grid{
        grid-template-columns:repeat(5,minmax(0,1fr)) !important;
        gap:18px !important;
    }

    .categories-row{
        grid-template-columns:repeat(7,minmax(0,1fr)) !important;
        gap:16px !important;
    }

    .products-grid,
    .product-grid,
    .marketplace-grid,
    .listing-grid,
    .products-container,
    #productsContainer{
        grid-template-columns:
            repeat(auto-fill,minmax(220px,1fr)) !important;
        gap:18px !important;
    }

    .nx-discovery-products{
        grid-template-columns:repeat(5,minmax(0,1fr)) !important;
    }

}


/* ==========================================================
   ULTRAWIDE
========================================================== */

@media (min-width:2000px){

    .premium-section,
    .rail-section,
    .spin-section,
    .categories-section,
    .listings-section,
    .marketplace-section,
    .featured-section,
    .categories-row,
    .products-grid,
    .product-grid,
    .marketplace-grid,
    .listing-grid,
    .products-container,
    #productsContainer,
    .rail-header,
    .glass-header{
        max-width:1760px !important;
    }

    .listing-row,
    .premium-grid{
        grid-template-columns:repeat(6,minmax(0,1fr)) !important;
    }

    .categories-row{
        grid-template-columns:repeat(8,minmax(0,1fr)) !important;
    }

}

/* ==========================================
   SPONSORED CAROUSEL — FLOAT ON PAGE BACKGROUND
========================================== */

.sponsored-feed-section{
    background:transparent !important;
    background-image:none !important;

    border:none !important;

    box-shadow:none !important;

    padding-top:14px !important;
    padding-bottom:14px !important;
}


/* Remove any separate background from carousel area */
.sponsored-feed-viewport,
.sponsored-feed-track{
    background:transparent !important;
}


/* Keep heading floating too */
.sponsored-feed-heading{
    background:transparent !important;
    box-shadow:none !important;
}
/* ==========================================
   NEXORA SEARCH
   ICON + TEXT + SINGLE LINE ONLY
========================================== */

.global-search{
    width:100%;
    padding:12px 18px;
    background:transparent !important;
    border:none !important;
    box-shadow:none !important;
}

.global-search .search-wrapper{
    width:100%;
    display:flex;
    align-items:center;
    gap:10px;

    padding:8px 2px 9px;

    background:transparent !important;

    /* ONLY VISIBLE LINE */
    border:none !important;
    border-bottom:1px solid rgba(17,17,17,.35) !important;

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

/* LENS */

.global-search .search-wrapper > i{
    flex:0 0 auto;

    font-size:15px;
    color:#555;

    background:none !important;
    border:none !important;
}

/* INPUT */

#globalSearch{
    flex:1;
    width:100%;

    padding:0 !important;
    margin:0;

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

    background:transparent !important;
    box-shadow:none !important;

    font-family:'Outfit',sans-serif;
    font-size:15px;
    font-weight:400;

    color:#111;

    border-radius:0 !important;
}

/* PLACEHOLDER */

#globalSearch::placeholder{
    color:#777;
    opacity:1;
}

/* REMOVE BROWSER FOCUS BOX */

#globalSearch:focus{
    border:none !important;
    outline:none !important;
    box-shadow:none !important;
}

/* SLIGHTLY EMPHASIZE LINE WHILE TYPING */

.global-search .search-wrapper:focus-within{
    border-bottom-color:#111 !important;
}

/* CLEAR X — NO BUTTON BOX */

#clearSearch{
    display:none;

    flex:0 0 auto;

    padding:2px 4px !important;

    background:transparent !important;
    border:none !important;
    outline:none !important;
    box-shadow:none !important;

    color:#777;
    font-size:13px;

    cursor:pointer;

    border-radius:0 !important;
}