.products-page{
  margin:0;
  min-height:100vh;
  background:
    radial-gradient(900px 600px at 8% -10%, #273355 0%, transparent 60%),
    radial-gradient(900px 600px at 100% 0%, #1b3357 0%, transparent 60%),
    linear-gradient(180deg, #151a2b, #090c15);
  color:#e9edf7;
  font-family:Poppins,system-ui,-apple-system,Segoe UI,sans-serif;
}

.topbar{
  position:sticky;
  top:0;
  z-index:50;
  background:rgba(12,16,30,.95);
  backdrop-filter: blur(12px);
  border-bottom:1px solid rgba(255,255,255,.05);
}

.topbar-inner{
  max-width:1160px;
  margin:0 auto;
  padding:8px 10px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

.brand{
  display:flex;
  align-items:center;
  gap:8px;
}

.logo{
  font-weight:900;
  letter-spacing:.2px;
  font-size:1.18rem;
  color:#fff;
}

.logo span{color:#ffca6b}

.brand-chip{
  font-size:.75rem;
  font-weight:800;
  padding:4px 9px;
  border-radius:999px;
  background:rgba(90,143,255,.16);
  border:1px solid rgba(90,143,255,.5);
  color:#dfe6ff;
}

.top-actions{
  display:flex;
  align-items:center;
  gap:6px;
}

.top-btn{
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.12);
  color:#fff;
  padding:6px 11px;
  border-radius:999px;
  font-weight:800;
  font-size:.82rem;
  cursor:pointer;
  transition:.15s ease;
}

.top-btn:hover{
  background:rgba(255,255,255,.12);
  transform:translateY(-1px);
}

.top-btn-primary{
  background:linear-gradient(135deg,#ffca6b,#ffec9f);
  color:#1c152b;
  border:none;
  box-shadow:0 6px 14px rgba(255,202,107,.25);
}
.top-btn-primary:hover{filter:brightness(1.05)}

.icon-btn{
  width:34px;height:34px;border-radius:50%;
  display:grid;place-items:center;font-size:.98rem;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.12);
  color:#fff;cursor:pointer;transition:.15s ease;
}
.icon-btn:hover{background:rgba(255,255,255,.12);transform:translateY(-1px)}

.search-row{
  max-width:1160px;
  margin:0 auto;
  padding:0 10px 8px 10px;
}

.search-input{
  width:100%;
  background:rgba(6,9,20,.8);
  border:1px solid rgba(255,255,255,.08);
  color:#fff;border-radius:10px;
  padding:9px 11px;outline:none;font-size:.9rem;
}

.search-input:focus{
  border-color:rgba(104,154,255,.8);
  box-shadow:0 0 0 2px rgba(104,154,255,.3);
}

.page-main{
  max-width:1160px;
  margin:10px auto 18px auto;
  padding:0 10px;
}

.major-cats-row{
  display:flex;
  gap:6px;
  overflow-x:auto;
  padding-bottom:2px;
  margin-bottom:8px;
  scrollbar-width:none;
}
.major-cats-row::-webkit-scrollbar{display:none}

.major-cat{
  padding:6px 10px;border-radius:999px;
  border:1px solid rgba(255,255,255,.1);
  background:rgba(255,255,255,.05);
  color:#e9edf7;font-size:.82rem;font-weight:800;
  cursor:pointer;white-space:nowrap;transition:.15s ease;
}
.major-cat:hover{background:rgba(255,255,255,.1)}
.major-cat.active{
  background:linear-gradient(135deg,#5892ff,#4bd3ff);
  border:none;color:#061022;
}

.cats-list{
  list-style:none;padding:0;margin:0 0 8px 0;
  display:flex;flex-wrap:wrap;gap:6px;
}

.cat-btn{
  padding:5px 9px;border-radius:999px;
  background:rgba(10,16,30,.9);
  border:1px solid rgba(255,255,255,.1);
  color:#dfe6ff;cursor:pointer;font-size:.78rem;font-weight:800;
}
.cat-btn:hover{background:rgba(255,255,255,.1)}
.cat-btn.active{background:linear-gradient(135deg,#5892ff,#4bd3ff);color:#061022;border:none}

.hero-band{
  background:linear-gradient(90deg,rgba(34,54,104,.96),rgba(52,82,145,.96));
  border-radius:12px;border:1px solid rgba(255,255,255,.12);
  padding:8px 10px;display:flex;align-items:center;justify-content:space-between;gap:8px;
  box-shadow:0 8px 18px rgba(0,0,0,.5);
  margin-bottom:8px;
}
.hero-left{display:flex;align-items:flex-start;gap:8px}
.hero-icon{width:36px;height:36px;border-radius:10px;background:rgba(6,10,25,.8);display:grid;place-items:center;font-size:1.25rem}
.hero-title{font-weight:900;font-size:.9rem}
.hero-sub{font-size:.78rem;opacity:.86;margin-top:2px}
.hero-btn{
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);
  border-radius:999px;padding:6px 10px;color:#fff;font-size:.78rem;font-weight:800;cursor:pointer;
}
.hero-btn:hover{background:rgba(255,255,255,.18)}

.spot-card{
  border-radius:14px;
  background:linear-gradient(135deg,#394d9e,#7c4acb);
  border:1px solid rgba(255,255,255,.18);
  padding:12px;display:flex;align-items:center;justify-content:space-between;gap:8px;
  color:#fff;box-shadow:0 10px 22px rgba(0,0,0,.55);
  cursor:pointer;margin-bottom:8px;
}
.spot-tag{font-size:.75rem;font-weight:800;padding:3px 8px;border-radius:999px;background:rgba(6,10,25,.75);border:1px solid rgba(255,255,255,.25);width:max-content}
.spot-title{font-weight:900;font-size:1rem}
.spot-sub{font-size:.82rem;opacity:.92}
.spot-btn{
  margin-top:4px;width:max-content;padding:6px 11px;border-radius:999px;border:none;
  background:#ffe27a;color:#1c1730;font-weight:900;font-size:.82rem;cursor:pointer;
}
.spot-illus{font-size:2.7rem;opacity:.35}

.products-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:9px;
}
@media (max-width:980px){.products-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:720px){.products-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.products-grid{grid-template-columns:1fr}}

.product-card{
  background:linear-gradient(180deg,rgba(17,24,47,.98),rgba(9,13,26,.98));
  border:1px solid rgba(255,255,255,.1);
  border-radius:12px;overflow:hidden;display:flex;flex-direction:column;
  box-shadow:0 7px 16px rgba(0,0,0,.6);transition:.16s ease;
}
.product-card:hover{transform:translateY(-2px);border-color:rgba(104,154,255,.75);box-shadow:0 10px 20px rgba(0,0,0,.75)}

.card-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:6px 8px;background:rgba(0,0,0,.45);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.seller-chip{display:flex;align-items:center;gap:6px;background:transparent;border:none;color:#f7f8ff;cursor:pointer;font-weight:800;font-size:.78rem}
.seller-avatar{width:24px;height:24px;border-radius:999px;overflow:hidden;border:1px solid rgba(104,154,255,.7);background:#000}
.seller-avatar img{width:100%;height:100%;object-fit:cover}
.category-pill{font-size:.7rem;font-weight:800;padding:3px 7px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16)}

.card-img{width:100%;height:120px;object-fit:cover;background:#000}

.card-body{
  padding:7px 8px 8px 8px;display:flex;flex-direction:column;gap:4px;flex:1;
}
.card-title{
  font-size:.85rem;font-weight:900;line-height:1.2;min-height:32px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;color:#fff;
}
.card-desc{
  font-size:.78rem;opacity:.9;min-height:30px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;color:#d7ddf4;
}

.card-foot{
  display:flex;align-items:center;justify-content:space-between;margin-top:auto;padding-top:4px;
}
.price{font-weight:900;font-size:.9rem;color:#fff}

.actions{display:flex;gap:4px}
.btn{
  border:none;cursor:pointer;border-radius:999px;padding:5px 9px;
  font-weight:900;font-size:.75rem;transition:.12s ease;white-space:nowrap;
}
.btn-chat{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.15);color:#f5f7ff}
.btn-chat:hover{background:rgba(255,255,255,.16)}
.btn-buy{background:linear-gradient(135deg,#ffca6b,#ffec9f);color:#1c152b}
.btn-buy:hover{filter:brightness(1.06)}

.empty-state{
  margin-top:12px;padding:12px;border-radius:10px;background:rgba(255,255,255,.04);
  border:1px dashed rgba(255,255,255,.15);text-align:center;font-weight:800;opacity:.9;
}
.footer{text-align:center;padding:14px;opacity:.75;font-size:.85rem}

.overlay{position:fixed;inset:0;background:rgba(0,0,0,.55);display:grid;place-items:center;z-index:9999}
.overlay-box{background:rgba(9,12,24,.98);border:1px solid rgba(255,255,255,.15);border-radius:10px;padding:10px 14px;font-weight:900}