.hero{
padding:60px 0 50px;
text-align:center;
position:relative;
overflow:hidden;

}


.hero-bg{

position:absolute;

top:50%;

left:50%;

transform:translate(-50%,-50%);

pointer-events:none;

}

.hero-bg-logo{

width:420px;

opacity:0.2;

}

.hero-title{
font-size:48px;
font-weight:700;
letter-spacing:-1px;
color:var(--text-dark);
}

.hero-subtitle{

margin-top:16px;
font-size:18px;
color:var(--text-gray);

}

.hero-actions{
margin-top:28px;
display:flex;
justify-content:center;
gap:14px;
flex-wrap:wrap;
}

.listings-section{
padding:20px 0 10px;
}

.section-title{

font-size:24px;
margin-bottom:12px;
}



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

.categories{

padding-top:40px;
margin-top:-10px;
}


/* MOBILE SCROLL */

@media (max-width:768px){



.category{

white-space:nowrap;

}

}


.category-arrow:hover{

background:#f3f4f6;

}


/* LISTING GRID RESPONSIVE */

.listing-grid{

margin-top:10px;

}

@media (max-width:1024px){

.grid-4{

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

}

}

@media (max-width:600px){

.grid-4{

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

gap:16px;

}

.listing-image{

height:100%;

}

}

@media (max-width:768px){

.listing-overlay{

opacity:0;

}

.listing-image-wrap:active .listing-overlay{

opacity:1;

}

}


/* SEARCH */

.browse-search{

position:relative;

max-width:600px;

margin-bottom:20px;

}

.browse-search-input{

width:100%;

}

/* SEARCH SUGGESTIONS */

.search-suggestions{

max-height: 320px; 

overflow-y: auto;

    
position:absolute;

top:70px;

left:0;

width:100%;

background:white;

border:1px solid var(--border);

box-shadow: 0 12px 30px rgba(0,0,0,0.12);
border-radius:12px;

margin-top:6px;

overflow:hidden;

display:none;

z-index:1001;

}

.suggestion-item{

padding:10px 14px;

cursor:pointer;

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

width:100%;
border:none;
background:transparent;
text-align:left;

}

.suggestion-item:hover{

background:#f3f4f6;

}

.suggestion-item small{
font-size:11px;
color:#64748b;
}

.suggestion-title{
padding:12px 14px 8px;
font-size:12px;
font-weight:700;
letter-spacing:.02em;
text-transform:uppercase;
color:#64748b;
}

.suggestion-empty{
padding:14px;
font-size:13px;
color:#64748b;
}

/* FILTERS */

.browse-filters{

display:flex;

gap:12px;

margin-bottom:30px;

flex-wrap:wrap;

}

.filter-select{

padding:10px 14px;

border-radius:10px;

border:1px solid var(--border);

background:white;

cursor:pointer;

}


@media (max-width:600px){
.skeleton-wrapper{
grid-template-columns: repeat(2,1fr);
}
}

.skeleton-card{
width:100%;
aspect-ratio:1/1;
border-radius:14px;
background:linear-gradient(90deg,#eee,#f5f5f5,#eee);
background-size:400% 100%;
animation:shimmer 1.2s infinite;
}

@keyframes shimmer{
0%{background-position:-200px 0;}
100%{background-position:200px 0;}
}

.top-sellers{
padding:10px 0 6px;
}

.seller-scroll{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(70px,1fr));
gap:14px;
}

.seller-item{
text-align:center;
}

/* IMAGE */
.seller-item img{
width:58px;
height:58px;

border-radius:50%;

border:2px solid #2563eb;

box-shadow:0 4px 10px rgba(0,0,0,0.1);

transition:0.2s ease;
}

/* NAME */
.seller-item span{
font-size:11px;
margin-top:4px;
display:block;
}

/* HOVER */
.seller-item:hover img{
transform:scale(1.08);
}



/* ===============================
   CATEGORY GRID (NO SCROLL)
================================ */

.categories-view{
display:grid;
grid-template-columns:repeat(auto-fit, minmax(95px,1fr));
gap:18px;

margin-top:20px;
}

/* CARD */
.category-card{
width:100%;
height:100px;

border-radius:20px;

background:linear-gradient(145deg,#ffffff,#eef1f6);

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

text-decoration:none;

box-shadow:
0 6px 18px rgba(0,0,0,0.08),
inset 0 1px 0 rgba(255,255,255,0.7);

transition:all 0.25s ease;
}

/* ICON */
.cat-icon{
width:42px;
height:42px;

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

border-radius:12px;

/* default gradient */
background:linear-gradient(135deg,#4f8cff,#6dd5fa);

box-shadow:
inset 0 2px 6px rgba(255,255,255,0.4),
0 4px 10px rgba(0,0,0,0.15);

margin-bottom:6px;
}

/* SVG */
.cat-icon svg{
width:22px;
height:22px;
fill:white;
stroke:white;
stroke-width:1.5;
}

/* TEXT */
.category-card span{
font-size:12px;
font-weight:500;
color:#374151;
}

/* HOVER */
.category-card:hover{
transform:translateY(-6px);

box-shadow:
0 14px 30px rgba(0,0,0,0.12),
0 4px 10px rgba(0,0,0,0.06);
}

/* PRESS */
.category-card:active{
transform:scale(0.96);
}

/* DIFFERENT COLORS PER CATEGORY */
.category-card:nth-child(1) .cat-icon{ background:linear-gradient(135deg,#4f8cff,#6dd5fa); }
.category-card:nth-child(2) .cat-icon{ background:linear-gradient(135deg,#7c3aed,#c084fc); }
.category-card:nth-child(3) .cat-icon{ background:linear-gradient(135deg,#10b981,#34d399); }
.category-card:nth-child(4) .cat-icon{ background:linear-gradient(135deg,#f59e0b,#fbbf24); }
.category-card:nth-child(5) .cat-icon{ background:linear-gradient(135deg,#ef4444,#f87171); }
.category-card:nth-child(6) .cat-icon{ background:linear-gradient(135deg,#14b8a6,#2dd4bf); }
.category-card:nth-child(7) .cat-icon{ background:linear-gradient(135deg,#6366f1,#818cf8); }
.category-card:nth-child(8) .cat-icon{ background:linear-gradient(135deg,#f97316,#fb923c); }



/* ===============================
   GLOBAL SCROLLBAR (WEBKIT)
================================ */

/* base (hidden look) */
::-webkit-scrollbar{
width:6px;
height:6px;
}

/* track */
::-webkit-scrollbar-track{
background:transparent;
}

/* thumb (hidden by default) */
::-webkit-scrollbar-thumb{
background:transparent;
border-radius:10px;
transition:background 0.2s ease;
}

/* 🔥 SHOW ONLY ON HOVER */
*:hover::-webkit-scrollbar-thumb{
background:rgba(0,0,0,0.25);
}

/* hover stronger */
*:hover::-webkit-scrollbar-thumb:hover{
background:rgba(0,0,0,0.45);
}

html, body{
margin:0;
padding:0;
width:100%;
height:100%;
overflow-x:hidden;
background:#fff; /* or your app color */
}

body{
padding-bottom: calc(80px + env(safe-area-inset-bottom));
}

.page-loader,
.search-overlay{
inset:0; /* replaces top/left/width/height cleaner */
}