/* ============================================================
   Home redesign — Category / Store / Brand browse sections
   Prefix: rbxb-. Reuses shared tokens + .rbx-sec shell from home-redesign.css.
   Light + dark aware. No horizontal overflow at 360px.
   ============================================================ */

/* ---------- Shop by Category ---------- */
.rbxb-cat-grid{
  display:grid; gap:14px;
  grid-template-columns:repeat(6,1fr);
}
.rbxb-cat{
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:10px;
  padding:18px 12px; text-decoration:none;
  background:var(--rbx-surface); border:1px solid var(--rbx-line); border-radius:var(--rbx-r);
  transition:transform .18s ease, box-shadow .22s ease, border-color .18s ease;
}
.rbxb-cat:hover{
  transform:translateY(-5px); box-shadow:var(--rbx-shadow-sm);
  border-color:color-mix(in srgb,var(--rbx-accent) 34%,var(--rbx-line));
}
.rbxb-cat-ic{
  width:72px; height:72px; border-radius:50%; display:grid; place-items:center; overflow:hidden;
  background:color-mix(in srgb,var(--rbx-accent) 10%,var(--rbx-surface2));
  transition:background .18s ease;
}
.rbxb-cat:hover .rbxb-cat-ic{ background:color-mix(in srgb,var(--rbx-accent) 18%,var(--rbx-surface2)); }
.rbxb-cat-ic img{ width:60%; height:60%; object-fit:contain; }
.rbxb-cat-name{
  font-size:13px; font-weight:600; color:var(--rbx-ink); line-height:1.3;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.rbxb-cat-count{ font-size:11.5px; color:var(--rbx-muted); }

/* ---------- Top Stores ---------- */
.rbxb-store-grid{
  display:grid; gap:16px;
  grid-template-columns:repeat(4,1fr);
}
.rbxb-store{
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:8px;
  padding:22px 16px;
  background:var(--rbx-surface); border:1px solid var(--rbx-line); border-radius:var(--rbx-r);
  transition:transform .18s ease, box-shadow .22s ease, border-color .18s ease;
}
.rbxb-store:hover{
  transform:translateY(-5px); box-shadow:var(--rbx-shadow);
  border-color:color-mix(in srgb,var(--rbx-accent) 34%,var(--rbx-line));
}
.rbxb-store-logo{
  width:88px; height:88px; border-radius:50%; overflow:hidden; display:grid; place-items:center;
  background:var(--rbx-surface2); border:1px solid var(--rbx-line);
}
.rbxb-store-logo img{ width:100%; height:100%; object-fit:cover; }
.rbxb-store-name{
  font-size:14.5px; font-weight:700; color:var(--rbx-ink); text-decoration:none; max-width:100%;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.rbxb-store-name:hover{ color:var(--rbx-accent); }
.rbxb-store-count{ font-size:12px; color:var(--rbx-muted); }
.rbxb-store-btn{
  margin-top:6px; display:inline-flex; align-items:center; gap:5px;
  font-size:12.5px; font-weight:700; text-decoration:none; color:var(--rbx-accent);
  border:1px solid color-mix(in srgb,var(--rbx-accent) 30%,transparent); border-radius:999px;
  padding:7px 16px; transition:all .16s ease;
}
.rbxb-store-btn:hover{ background:var(--rbx-accent); color:#fff; }
.rbxb-store-btn .bi{ transition:transform .16s ease; }
.rbxb-store-btn:hover .bi{ transform:translateX(3px); }

/* ---------- Popular Brands ---------- */
.rbxb-brand-grid{
  display:grid; gap:14px;
  grid-template-columns:repeat(6,1fr);
}
.rbxb-brand{
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:10px;
  padding:18px 12px; text-decoration:none;
  background:var(--rbx-surface); border:1px solid var(--rbx-line); border-radius:var(--rbx-r);
  transition:transform .18s ease, box-shadow .22s ease, border-color .18s ease;
}
.rbxb-brand:hover{
  transform:translateY(-5px); box-shadow:var(--rbx-shadow-sm);
  border-color:color-mix(in srgb,var(--rbx-accent) 34%,var(--rbx-line));
}
.rbxb-brand-logo{
  width:100%; aspect-ratio:16/10; display:grid; place-items:center; overflow:hidden;
  border-radius:12px; background:var(--rbx-surface2); padding:10px;
}
.rbxb-brand-logo img{ max-width:100%; max-height:100%; object-fit:contain; }
.rbxb-brand-name{
  font-size:12.5px; font-weight:600; color:var(--rbx-ink); line-height:1.3;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:100%;
}

/* ---------- Responsive reflow ---------- */
@media (max-width:1199px){
  .rbxb-cat-grid, .rbxb-brand-grid{ grid-template-columns:repeat(5,1fr); }
}
@media (max-width:991px){
  .rbxb-cat-grid, .rbxb-brand-grid{ grid-template-columns:repeat(4,1fr); }
  .rbxb-store-grid{ grid-template-columns:repeat(3,1fr); }
}
@media (max-width:767px){
  .rbxb-cat-grid, .rbxb-brand-grid{ grid-template-columns:repeat(3,1fr); gap:12px; }
  .rbxb-store-grid{ grid-template-columns:repeat(2,1fr); gap:12px; }
}
@media (max-width:479px){
  .rbxb-cat-grid, .rbxb-brand-grid{ grid-template-columns:repeat(2,1fr); }
  .rbxb-cat-ic{ width:60px; height:60px; }
  .rbxb-store-logo{ width:76px; height:76px; }
}
@media (max-width:360px){
  .rbxb-store-grid{ grid-template-columns:1fr; }
}