/* ======================
RESET
====================== */

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

html,
body{

width:100%;

overflow-x:hidden;

background:#f6f7fb;

font-family:
Arial,sans-serif;

}


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

.customer-main{

padding:12px;

padding-bottom:90px;

min-height:100vh;

}



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

.top-search-row{

display:flex;

gap:10px;

margin-bottom:16px;

}


.search-box{

flex:1;

height:48px;

background:#fff;

border-radius:16px;

display:flex;

align-items:center;

gap:10px;

padding:0 15px;

border:
1px solid #ececec;

}


.search-box input{

border:none;

outline:none;

width:100%;

background:none;

font-size:14px;

}


.cart-btn{

width:48px;

height:48px;

background:#fff;

border-radius:16px;

display:flex;

justify-content:center;

align-items:center;

text-decoration:none;

color:#111;

border:
1px solid #ececec;

}



/* ======================
BANNER
====================== */

.banner-slider{

display:flex;

overflow-x:auto;

gap:10px;

margin-bottom:18px;

scrollbar-width:none;

}

.banner-slider::-webkit-scrollbar{

display:none;

}


.banner-item{

min-width:100%;

}


.banner-item img{

width:100%;

height:auto;

object-fit:cover;

border-radius:18px;

display:block;

}



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

.category-slider{

display:flex;

gap:14px;

overflow-x:auto;

margin-bottom:18px;

scrollbar-width:none;

}

.category-slider::-webkit-scrollbar{

display:none;

}


.category-item{

min-width:72px;

text-align:center;

text-decoration:none;

color:#111;

}


.category-item img{

width:65px;

height:65px;

border-radius:50%;

object-fit:cover;

border:
2px solid #fff;

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

}


.category-item span{

display:block;

margin-top:5px;

font-size:12px;

font-weight:600;

}

/* ======================
DELIVERY
====================== */

.delivery-strip{

background:#e9f9ed;

padding:12px;

border-radius:14px;

font-size:13px;

font-weight:700;

color:#169c46;

margin-bottom:18px;

}

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

.products-grid{

display:grid;

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

gap:10px;

}

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

.product-card{

background:#fff;

border-radius:18px;

padding:10px;

position:relative;

border:
1px solid #ececec;

display:flex;

flex-direction:column;

min-height:260px;

overflow:hidden;

}

/* DISCOUNT */

.discount-badge{

position:absolute;

top:10px;

left:10px;

background:#2563eb;

color:#fff;

padding:
4px 8px;

font-size:10px;

border-radius:8px;

font-weight:700;

}

/* DETAILS */

.details-link{

position:absolute;

top:10px;

right:10px;

width:30px;

height:30px;

background:#f3f4f6;

border-radius:50%;

display:flex;

justify-content:center;

align-items:center;

color:#111;

text-decoration:none;

font-size:12px;

}

/* TIME */

.product-time{

font-size:10px;

color:#666;

display:flex;

gap:5px;

margin-top:28px;

margin-bottom:6px;

}

/* IMAGE */

.product-image{
height:90px;
margin-bottom:8px;
overflow:hidden;
}


.product-image img{

max-height:85px;

max-width:100%;

object-fit:contain;

}

/* NAME */

.product-name{

font-size:13px;

font-weight:700;

line-height:1.4;

min-height:36px;

overflow:hidden;

margin-bottom:8px;

}

/* BOTTOM */

.product-bottom{

display:flex;

justify-content:
space-between;

align-items:flex-end;

margin-top:auto;

gap:5px;

}


.price-area small{

font-size:9px;

color:#777;

}


.product-price{

font-size:20px;

font-weight:800;

color:#111;

}


/* BUTTON */

.button-area{

text-align:center;

flex-shrink:0;

}


.add-btn{

width:72px;

height:34px;

border-radius:10px;

border:
1px solid #16a34a;

background:#fff;

color:#16a34a;

font-weight:700;

cursor:pointer;

}

.option-count{

font-size:10px;

margin-top:4px;

color:#16a34a;

}

/* ======================
POPUP
====================== */


.popup-overlay{

display:none;

position:fixed;

inset:0;

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

z-index:99999;

}


.popup-overlay.active{

display:flex;

justify-content:center;

align-items:center;

}


.popup-content{

width:95%;
max-width:420px;

}



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

@media(
min-width:768px
){

.products-grid{

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

}   

}

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

@media(
min-width:1200px
){

.customer-main{

margin-left:280px;

}

.products-grid{

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

}

.banner-item img{

height:240px;

}

}

/* --- FIXED LAYOUT ADJUSTMENTS (Ise yahan paste karein, @media ke bahar) --- */

.topbar {
    position: fixed !important;
    top: 0;
    left: 0;
    width: 100%;
    height: 60px;
    z-index: 1000;
}

.main-scroll-container {
    position: fixed;
    top: 60px;
    bottom: 60px;
    left: 0;
    width: 100%;
    overflow-y: auto;
    background: #f6f7fb;
}

.bottom-nav {
    position: fixed !important;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 60px;
    z-index: 1000;
}

.product-variants{
font-size:11px;
color:#666;
line-height:1.3;
margin-bottom:8px;
min-height:14px;
}

.card-slider{
    position:relative;
    overflow:hidden;
    width:100%;
    height:90px;
}

.card-slider .slides{
    display:flex;
    height:100%;
    transition:transform .4s ease;
}

.card-slider .slides img{
    width:100%;
    min-width:100%;
    height:100%;
    object-fit:contain;
    flex:0 0 100%;
}