.main{
  position:relative;z-index:1;flex:1;
  max-width:900px;width:100%;margin:0 auto;padding:3rem 2rem 4rem;
}
.page-title{
  font-size:2rem;font-weight:700;letter-spacing:-.03em;
  background:linear-gradient(135deg,#e0e7ff 0%,#a78bfa 50%,#7c3aed 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.page-sub{
  margin-top:.5rem;font-size:.95rem;color:rgba(255,255,255,.4);font-weight:300;
}
.divider{
  width:100%;height:1px;margin:2rem 0;
  background:linear-gradient(90deg,transparent,rgba(124,58,237,.4),transparent);
}

/* ── loading / error ── */
.state{
  text-align:center;padding:4rem 1rem;
}
.state p{
  font-size:.95rem;color:rgba(255,255,255,.35);font-weight:300;
}
.spinner{
  width:28px;height:28px;margin:0 auto 1.25rem;
  border:2px solid rgba(124,58,237,.2);border-top-color:#7c3aed;
  border-radius:50%;animation:spin .7s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

/* ── product grid ── */
.grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
  gap:1.25rem;
}

/* ── product card ── */
.card{
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.07);
  border-radius:14px;padding:1.5rem;
  transition:border-color .25s,transform .25s;
  display:flex;flex-direction:column;gap:1rem;
}
.card:hover{
  border-color:rgba(124,58,237,.4);
  transform:translateY(-2px);
}
.card-icon{
  font-size:2.5rem;line-height:1;
}
.card-name{
  font-size:1rem;font-weight:600;color:rgba(255,255,255,.85);
  letter-spacing:-.01em;word-break:break-word;
}
.card-meta{
  display:flex;flex-direction:column;gap:.4rem;margin-top:auto;
}
.card-row{
  display:flex;align-items:center;justify-content:space-between;
}
.card-price{
  font-size:1.35rem;font-weight:700;
  background:linear-gradient(135deg,#e0e7ff,#a78bfa);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.card-stock{
  font-size:.78rem;font-weight:400;
  color:rgba(255,255,255,.35);letter-spacing:.03em;
}
.stock-dot{
  display:inline-block;width:6px;height:6px;border-radius:50%;
  margin-right:5px;vertical-align:middle;
}
.stock-dot.ok{background:#4ade80;box-shadow:0 0 8px rgba(74,222,128,.4)}
.stock-dot.low{background:#fbbf24;box-shadow:0 0 8px rgba(251,191,36,.4)}
.stock-dot.out{background:#f87171;box-shadow:0 0 8px rgba(248,113,113,.4)}

/* ── empty state ── */
.empty{
  text-align:center;padding:4rem 1rem;
}
.empty p{
  font-size:.95rem;color:rgba(255,255,255,.3);font-weight:300;
}