/* =================================================
   RESET + GLOBAL
================================================= */
*{
  margin:0;
  padding:0;
  box-sizing:border-box;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

:root{
  --bg:#0b1020;
  --panel:#121735;
  --card:#1b2150;
  --card2:#101638;
  --primary:#6d7cff;
  --accent:#22d3ee;
  --success:#22c55e;
  --danger:#ef4444;
  --warning:#f59e0b;
  --text:#f8fafc;
  --muted:#9aa0b4;
}

body{
  background:var(--bg);
  color:var(--text);
  line-height:1.5;
  padding-bottom:64px;
}

/* =================================================
   TOPBAR / DESKTOP NAV
================================================= */
.topbar{
  background:linear-gradient(90deg,#141a3a,#0e1330);
  padding:12px 14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  position:sticky;
  top:0;
  z-index:999;
  box-shadow:0 6px 16px rgba(0,0,0,.7);
}

.topbar h1{
  font-size:16px;
  font-weight:600;
  white-space:nowrap;
}

.topbar nav{
  display:flex;
  gap:12px;
  align-items:center;
}

.topbar nav a{
  color:var(--text);
  font-size:13px;
  text-decoration:none;
}

.topbar nav a:hover{
  color:var(--accent);
}

/* =================================================
   MOBILE NAV
================================================= */
.m-nav{
  display:none;
  background:#0e1330;
  padding:10px;
}

.m-nav-top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:18px;
}

.m-nav .logo{
  font-weight:600;
}

.m-search{
  margin-top:8px;
}

.m-search input{
  width:100%;
}

/* =================================================
   CATEGORY DRAWER
================================================= */
.cat-menu{
  position:fixed;
  top:0;
  left:0;
  width:240px;
  height:100%;
  background:var(--panel);
  padding:16px;
  display:none;
  z-index:1000;
}

.cat-item,
.mobile-item{
  padding:12px;
  border-radius:12px;
  background:var(--card2);
  margin-bottom:10px;
  cursor:pointer;
  font-size:14px;
}

.cat-item:hover,
.mobile-item:hover{
  background:linear-gradient(90deg,var(--primary),var(--accent));
  color:#000;
}

.menu-divider{
  border:none;
  height:1px;
  background:#2b3168;
  margin:12px 0;
}

/* =================================================
   SEARCH / FILTER / SORT
================================================= */
.nav-search,
.nav-select{
  padding:7px 10px;
  border-radius:14px;
  border:1px solid #2b3168;
  background:var(--card2);
  color:var(--text);
  font-size:12px;
}

.nav-search::placeholder{color:var(--muted);}

/* =================================================
   SLIDER
================================================= */
.slider{
  width:100%;
  aspect-ratio:16/9;
  margin:14px auto;
  border-radius:16px;
  overflow:hidden;
  background:var(--card2);
}

.slider img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* =================================================
   PRODUCTS SECTION
================================================= */
.products{
  padding:12px;
}

/* =================================================
   PRODUCT GRID
================================================= */
#product-list{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:12px;
}

/* =================================================
   PRODUCT CARD
================================================= */
.product-box{
  background:var(--card);
  border-radius:16px;
  padding:10px;
  box-shadow:0 8px 20px rgba(0,0,0,.7);
}

/* =================================================
   PRODUCT IMAGE
================================================= */
.img-wrap{
  width:100%;
  aspect-ratio:4 / 5;
  background:#fff;
  border-radius:14px;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
}

.img-wrap img{
  width:100%;
  height:100%;
  object-fit:contain;
}

/* =================================================
   PRODUCT TEXT
================================================= */
.product-box h3{
  font-size:13px;
  margin:6px 0 2px;
}

.product-box p{
  font-size:11px;
  color:var(--muted);
}

/* =================================================
   BUTTON
================================================= */
button{
  margin-top:6px;
  width:100%;
  padding:10px;
  border:none;
  border-radius:16px;
  background:linear-gradient(90deg,var(--primary),var(--accent));
  color:#000;
  font-size:13px;
  font-weight:600;
  cursor:pointer;
}

/* =================================================
   FLIPKART QTY BUTTON
================================================= */
.qty-box{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:8px;
  margin-top:6px;
}

.qty-box button{
  width:28px !important;
  height:28px;
  padding:0;
  border-radius:6px;
  font-size:16px;
  font-weight:700;
}

.qty-box span{
  width:24px;
  text-align:center;
  font-size:15px;
  font-weight:700;
  color:var(--text);
}

/* =================================================
   RESPONSIVE
================================================= */
@media(max-width:768px){
  .topbar{display:none;}
  .m-nav{display:block;}
}

@media(min-width:900px){
  #product-list{
    grid-template-columns:repeat(4,1fr);
  }
}
/* =========================================
   FINAL FORCE INLINE QTY FIX
========================================= */

.qty-box{
  display:flex !important;
  flex-direction:row !important;
  align-items:center !important;
  justify-content:center !important;
  gap:10px !important;
  width:100% !important;
}

.qty-box > *{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:auto !important;
  flex:0 0 auto !important;
}

/* minus & plus */
.qty-box button{
  width:32px !important;
  height:32px !important;
  padding:0 !important;
  border-radius:6px !important;
  font-size:18px !important;
  font-weight:700 !important;
}

/* number */
.qty-box span,
.qty-box input{
  width:32px !important;
  text-align:center !important;
  font-size:15px !important;
  font-weight:700 !important;
  background:transparent !important;
  border:none !important;
  color:var(--text) !important;
}
/* ===== INLINE QTY FINAL ===== */

.qty-box{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:10px;
}

.qbtn button{
  width:32px !important;
  height:32px;
  padding:0 !important;
  border-radius:6px;
  font-size:18px;
}

.qnum{
  min-width:28px;
  text-align:center;
  font-size:16px;
  font-weight:bold;
}
.qty-box{
display:flex;
justify-content:center;
align-items:center;
gap:10px;
}

.qty-btn{
width:32px;
height:32px;
background:#6d7cff;
color:#000;
border-radius:6px;
display:flex;
justify-content:center;
align-items:center;
font-size:18px;
font-weight:700;
cursor:pointer;
}

.qty-num{
min-width:30px;
text-align:center;
font-size:16px;
font-weight:700;
}
/* ===== FLIPKART STYLE PILL QTY ===== */

.qty-box{
  display:flex;
  justify-content:center;
  align-items:center;
  background:#ffffff;
  border-radius:14px;
  padding:4px 10px;
  gap:14px;
  width:fit-content;
  margin:6px auto;
  box-shadow:0 2px 6px rgba(0,0,0,.2);
}

/* - and + button */
.qty-btn{
  width:28px;
  height:28px;
  background:#f3f4f6;
  color:#000;
  border-radius:50%;
  display:flex;
  justify-content:center;
  align-items:center;
  font-size:18px;
  font-weight:700;
  cursor:pointer;
  user-select:none;
}

/* number */
.qty-num{
  min-width:22px;
  text-align:center;
  font-size:16px;
  font-weight:700;
  color:#000;
}
/* ==== FLIPKART PILL QTY COLOR UPDATE ==== */

.fk-btn{
  width:26px;
  height:26px;
  background:#f3f4f6;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:18px;
  font-weight:700;
  color:#666;              /* lighter minus/plus */
  cursor:pointer;
}

.fk-num{
  min-width:22px;
  text-align:center;
  font-size:16px;
  font-weight:700;
  color:#111;              /* DARK number */
}
/* =================================================
   FINAL HARD OVERRIDE FOR QTY COLOR
   (DO NOT REMOVE ANYTHING ABOVE)
================================================= */

.qty-box span,
.qty-num,
.qnum,
.fk-num{
  color:#000 !important;      /* DARK BLACK NUMBER */
  font-weight:800 !important;
}

.qty-btn,
.fk-btn,
.qty-box button{
  color:#777 !important;      /* LIGHT GREY + - */
}
/* ===== ADMIN ORDER NAV BAR ===== */

.admin-nav{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  justify-content:center;
  padding:10px;
}

.admin-nav button{
  flex:1;
  min-width:120px;
  padding:10px;
  border:none;
  border-radius:8px;
  background:linear-gradient(90deg,#6a7bff,#39c6f0);
  color:#fff;
  font-weight:600;
  cursor:pointer;
}

.admin-nav button:hover{
  opacity:0.9;
}

.admin-nav .danger{
  background:linear-gradient(90deg,#ff4b4b,#ff0000);
}

/* MOBILE VIEW */
@media(max-width:600px){
  .admin-nav button{
    min-width:45%;
  }
}
/* ===============================
   MANAGE PRODUCT IMAGE FIX
================================ */
.product-box .img-wrap{
  width:100%;
  aspect-ratio:4/5;
  background:#fff;
  border-radius:14px;
  overflow:hidden;
}

.product-box .img-wrap img{
  width:100%;
  height:100%;
  object-fit:contain;
}
/* ===== PRICE DESIGN ===== */

.price-box {
  margin: 6px 0;
}

.price-box .mrp {
  color: #888;
  text-decoration: line-through;
  font-size: 14px;
  display: block;
}

.price-box .discount {
  color: #1aa14a; /* green */
  font-size: 14px;
  font-weight: 600;
  display: block;
  margin: 2px 0;
}

.price-box .sale-price {
  font-size: 22px;
  font-weight: bold;
  color: #ffffff;
}
/* ===== MOBILE MENU PANEL ===== */
.cat-menu {
  position: fixed;
  top: 0;
  left: 0;

  width: 260px;
  height: 100vh;

  background: #ffffff;
  z-index: 2000;

  padding: 15px;

  transform: translateX(-100%);
  transition: transform 0.3s ease;

  box-shadow: 4px 0 15px rgba(0, 0, 0, 0.2);
  overflow-y: auto;
}

/* ===== MENU OPEN STATE ===== */
.cat-menu.active {
  transform: translateX(0);
}

/* ===== MENU ITEMS ===== */
.cat-item {
  display: block;
  padding: 12px 10px;
  font-size: 15px;
  color: #222;
  border-radius: 6px;
}

.cat-item:hover {
  background: #f2f2f2;
}

/* ===== DIVIDER ===== */
.menu-divider {
  margin: 15px 0;
  border: none;
  border-top: 1px solid #ddd;
}

/* ===== AUTH LINKS ===== */
#mobileUserMenu a {
  display: block;
  padding: 12px 10px;
  font-size: 15px;
  color: #333;
}

/* ===== DARK BACKDROP ===== */
.menu-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 1500;
  display: none;
}

.menu-overlay.active {
  display: block;
}
/* MOBILE MENU FORCE FIX */
.cat-menu{
  position:fixed;
  top:0;
  left:0;
  width:260px;
  height:100%;
  background:#fff;
  transform:translateX(-100%);
  transition:.3s;
  z-index:9999;
}

.cat-menu.active{
  transform:translateX(0);
}
/* ===============================
   FINAL MOBILE MENU FIX
   (PASTE AT VERY BOTTOM)
================================ */

/* mobile nav always top */
.m-nav{
  position:relative !important;
  z-index:10000 !important;
}

/* menu button always clickable */
.menu-btn{
  position:relative;
  z-index:10001;
  cursor:pointer;
  user-select:none;
}

/* drawer menu */
.cat-menu{
  position:fixed !important;
  top:0 !important;
  left:0 !important;
  width:260px !important;
  height:100vh !important;
  background:#fff !important;
  transform:translateX(-100%) !important;
  transition:transform .3s ease !important;
  z-index:10002 !important;
  display:block !important;
}

/* open state */
.cat-menu.active{
  transform:translateX(0) !important;
}

/* slider cannot block clicks */
.slider{
  position:relative;
  z-index:1;
}

/* product section cannot block */
.products{
  position:relative;
  z-index:1;
}
.noScroll{overflow:hidden;}

#menuOverlay{
position:fixed;
inset:0;
background:rgba(255, 255, 255, 0.5);
opacity:0;
pointer-events:none;
transition:.3s;
z-index:1000;
}

#menuOverlay.show{
opacity:1;
pointer-events:auto;
}

.cat-menu{
position:fixed;
top:0;
left:-260px;
width:260px;
height:100%;
background:white;
z-index:1001;
transition:.3s;
padding:20px;
overflow-y:auto;
}

.cat-menu.active{
left:0;
}
.price-line{
  display:flex;
  gap:8px;
  align-items:center;
}

.mrp{
  text-decoration: line-through;
  color:#888;
}

.price{
  color:#ffffff;
  font-size:18px;
}

.off{
  color:#0a8f2f;
  font-weight:bold;
  font-size:14px;
}
.order-item{
  display:flex;
  gap:10px;
  align-items:center;
  margin:8px 0;
}

.order-img{
  width:60px;
  height:60px;
  object-fit:cover;
  border-radius:6px;
  border:1px solid #ddd;
}
.colorRow{display:flex;gap:10px;margin:10px 0;flex-wrap:wrap;}
.colorItem{padding:6px 14px;border:1px solid #ffffff;cursor:pointer;border-radius:20px;background:#eee;}
.activeColor{background:black;color:white;border:2px solid black;}
#similarBox{
display:grid;
grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
gap:15px;
padding:15px;
}

#similarBox .product-box{
cursor:pointer;
transition:.3s;
}

#similarBox .product-box:hover{
transform:scale(1.05);
}

.productTop{
display:flex;
justify-content:space-between;
align-items:center;
gap:10px;
margin-top:10px;
}

.productTop h3{
font-size:16px;
font-weight:600;
color:#ffffff;
margin:0;
line-height:1.4;
}

.wishBtn{
width:36px;
height:36px;
display:flex;
align-items:center;
justify-content:center;
border-radius:50%;
background:#000000;
border:1px solid #e5e5e5;
font-size:22px;
cursor:pointer;
user-select:none;
transition:0.2s;
flex-shrink:0;
}

.wishBtn:hover{
transform:scale(1.08);
}

.wishBtn.active{
color:red;
border-color:red;
background:#ffffff;
}

.sizeList{
display:flex;
gap:8px;
flex-wrap:wrap;
margin-top:12px;
}

.sizeTag{
min-width:40px;
height:36px;
display:flex;
align-items:center;
justify-content:center;
padding:0 12px;
border-radius:8px;
border:1px solid #ddd;
background:#fff;
color:#111;
font-size:13px;
font-weight:600;
box-sizing:border-box;
transition:0.2s;
}

.sizeTag:hover{
border-color:#111;
transform:translateY(-1px);
}
.price{
color:#16a34a;
font-weight:700;
font-size:18px;
}
.mrp{
color:#888;
text-decoration:line-through;
margin-right:8px;
font-size:14px;
}

.colorRow{
display:flex;
gap:14px;
margin:16px 0;
flex-wrap:wrap;
align-items:center;
}

.colorItem{
width:40px;
height:40px;
border-radius:50%;
cursor:pointer;
border:3px solid #e5e5e5;
transition:0.25s;
box-shadow:0 3px 10px rgba(0,0,0,0.10);
}

.colorItem:hover{
transform:scale(1.08);
}

.activeColor{
border:3px solid #00ff88;
transform:scale(1.15);
box-shadow:0 5px 14px rgba(0,255,136,0.35);
}

/* SIZE */

.sizeRow{
display:flex;
gap:12px;
flex-wrap:wrap;
margin:16px 0;
}

.sizeItem{
min-width:58px;
padding:12px 18px;
border-radius:12px;
cursor:pointer;
font-size:15px;
font-weight:700;

background:#000 !important;
color:#fff !important;

border:2px solid #000;

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

transition:0.25s;

box-shadow:0 3px 10px rgba(0,0,0,0.18);
}

.sizeItem:hover{
transform:translateY(-2px);
}

.activeSize{
background:#00b894 !important;
border-color:#00b894 !important;
color:#fff !important;

transform:scale(1.05);

box-shadow:0 5px 14px rgba(0,184,148,0.35);
}
.cat-menu .cat-item{
display:block;
color:#fff !important;
text-decoration:none;
font-weight:600;
}


/* =========================================
   FINAL MOBILE MENU TEXT FIX
========================================= */

.cat-menu{
background:#ffffff !important;
}

.cat-menu .cat-item{
display:block !important;

background:#0f1742 !important;

color:#ffffff !important;

text-decoration:none !important;

font-size:16px !important;

font-weight:600 !important;

padding:14px 16px !important;

border-radius:12px !important;

margin-bottom:14px !important;
}

.cat-menu .cat-item:hover{
background:#1d2a72 !important;
color:#ffffff !important;
}

/* account/order/logout normal */
#mobileUserMenu a{
display:block;
padding:12px 10px;
font-size:16px;
color:#222 !important;
text-decoration:none;
font-weight:500;
}



/* =====================================
   FINAL BIG SLIDER FIX
===================================== */

.slider{
  width:100% !important;

  height:260px !important;

  margin:14px auto !important;

  border-radius:16px !important;

  overflow:hidden !important;

  background:#111 !important;

  position:relative !important;

  z-index:1 !important;
}

/* slide row */
.slides{
  display:flex !important;

  width:100% !important;

  height:100% !important;

  transition:transform .4s ease !important;
}

/* images */
.slides img{
  width:100% !important;

  height:100% !important;

  flex-shrink:0 !important;

  object-fit:cover !important;

  display:block !important;
}

/* desktop size */
@media(min-width:768px){

  .slider{
    height:520px !important;
  }

}


/* =====================================
   CHECKOUT FINAL PREMIUM MOBILE UI
===================================== */

.checkout-wrap{
  max-width:520px;
  margin:auto;
  padding:14px;
}

.checkout-card{
  background:#161d45;
  border-radius:20px;
  padding:18px;
  margin-bottom:18px;

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

/* title */
.checkout-card h3{
  font-size:20px;
  margin-bottom:16px;
  color:#fff;
}

/* label */
.checkout-card label{
  display:block;
  margin:14px 0 6px;
  font-size:14px;
  color:#cbd5e1;
  font-weight:500;
}

/* inputs */
.checkout-card input,
.checkout-card textarea{
  width:100%;
  background:#0f173d;
  border:1px solid #2d3d84;

  color:#fff;

  border-radius:14px;

  padding:14px;

  font-size:15px;

  outline:none;

  transition:.25s;
}

/* textarea */
.checkout-card textarea{
  min-height:110px;
  resize:none;
}

/* focus */
.checkout-card input:focus,
.checkout-card textarea:focus{
  border-color:#22d3ee;

  box-shadow:
  0 0 0 3px rgba(34,211,238,.15);
}

/* placeholder */
.checkout-card input::placeholder,
.checkout-card textarea::placeholder{
  color:#7b88b6;
}

/* buttons */
.checkout-card button{
  width:100%;

  margin-top:16px;

  border:none;

  border-radius:14px;

  padding:14px;

  font-size:15px;

  font-weight:700;

  cursor:pointer;

  background:
  linear-gradient(90deg,#6d7cff,#22d3ee);

  color:#000;

  transition:.25s;
}

.checkout-card button:hover{
  transform:translateY(-1px);
}

/* summary item */
#summary p{
  background:#0f173d;

  padding:14px;

  border-radius:14px;

  margin-bottom:12px;

  line-height:1.7;

  border:1px solid #1f2b63;
}

/* hr */
.checkout-card hr{
  border:none;
  border-top:1px solid #29366f;
  margin:16px 0;
}

/* total */
.total-line{
  display:flex;
  justify-content:space-between;
  align-items:center;

  margin-top:12px;

  font-size:22px;
  font-weight:800;

  color:#ffffff;
}

/* coupon message */
#couponMsg{
  margin-top:10px;
  font-size:14px;
  font-weight:600;
}

/* mobile */
@media(max-width:768px){

  .checkout-wrap{
    padding:10px;
  }

  .checkout-card{
    padding:16px;
    border-radius:18px;
  }

  .checkout-card h3{
    font-size:18px;
  }

  .total-line{
    font-size:20px;
  }

}
/* =====================================
   PRODUCT IMAGE GALLERY
===================================== */

.gallery{
  width:100%;
}

.thumbRow{
  display:flex;
  gap:10px;
  margin-top:14px;
  overflow-x:auto;
  padding-bottom:4px;
}

.thumb{
  width:70px;
  height:70px;
  border-radius:12px;
  object-fit:cover;
  background:#fff;
  border:2px solid transparent;
  cursor:pointer;
  flex-shrink:0;
  transition:.25s;
}

.thumb:hover{
  transform:translateY(-2px);
}

.activeThumb{
  border-color:#00ff88;

  box-shadow:
  0 0 10px rgba(0,255,136,.35);
}


/* =====================================
   PRODUCT IMAGE GALLERY
===================================== */

.gallery{
  width:100%;
}

#mainImg{
  width:100%;
  height:320px;
  object-fit:contain;
  background:#fff;
  border-radius:18px;
  display:block;
}

.thumbRow{
  display:flex;
  gap:10px;
  margin-top:14px;
  overflow-x:auto;
  padding-bottom:4px;
}

.thumb{
  width:72px;
  height:72px;
  border-radius:12px;
  object-fit:cover;
  background:#fff;
  border:2px solid transparent;
  cursor:pointer;
  flex-shrink:0;
  transition:.25s;
}

.thumb:hover{
  transform:translateY(-2px);
}

.activeThumb{
  border-color:#00ff88;
  box-shadow:0 0 10px rgba(0,255,136,.35);
}

@media(max-width:768px){

  #mainImg{
    height:280px;
  }

  .thumb{
    width:65px;
    height:65px;
  }

}