/* ============================================================
   Home redesign — shared tokens, section headers, product card
   Prefix: rbx- (product card = .rbx-pc). Light + dark aware.
   ============================================================ */
:root{
  --rbx-accent:#2f9e2f; --rbx-accent-deep:#1f7a20; --rbx-grade:#159C6B;
  --rbx-ink:#0f1720; --rbx-ink2:#33424c; --rbx-muted:#667085;
  --rbx-line:#e7ebef; --rbx-surface:#ffffff; --rbx-surface2:#f5f7f9;
  --rbx-shadow:0 14px 34px -20px rgba(16,30,40,.28);
  --rbx-shadow-sm:0 8px 18px -12px rgba(16,30,40,.20);
  --rbx-r:16px;
}
body[theme="dark"]{
  --rbx-ink:#e9eef2; --rbx-ink2:#c3ccd3; --rbx-muted:#8fa0ab;
  --rbx-line:#26313b; --rbx-surface:#141b22; --rbx-surface2:#0f151b;
  --rbx-shadow:0 18px 40px -20px rgba(0,0,0,.66);
  --rbx-shadow-sm:0 8px 18px -12px rgba(0,0,0,.55);
}

/* ---------- section shell + header (shared by all redesigned sections) ---------- */
.rbx-sec{ padding:26px 0; }
.rbx-sec-inner{ background:var(--rbx-surface); border:1px solid var(--rbx-line); border-radius:22px; padding:26px; box-shadow:var(--rbx-shadow-sm); }
.rbx-sec-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:20px; }
.rbx-sec-title{ margin:0; font-size:clamp(20px,2.4vw,26px); font-weight:800; letter-spacing:-.01em; color:var(--rbx-ink); }
.rbx-sec-title b{ color:var(--rbx-accent); }
.rbx-sec-sub{ margin:4px 0 0; font-size:13.5px; color:var(--rbx-muted); }
.rbx-viewall{ display:inline-flex; align-items:center; gap:6px; font-size:13px; 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 14px; transition:all .16s ease; white-space:nowrap; }
.rbx-viewall:hover{ background:var(--rbx-accent); color:#fff; }
.rbx-viewall .bi{ transition:transform .16s ease; }
.rbx-viewall:hover .bi{ transform:translateX(3px); }

/* ---------- product grid ---------- */
.rbx-grid{ display:grid; gap:16px; grid-template-columns:repeat(5,1fr); }
.rbx-grid-4{ grid-template-columns:repeat(4,1fr); }
@media (max-width:1199px){ .rbx-grid{ grid-template-columns:repeat(4,1fr); } }
@media (max-width:991px){ .rbx-grid, .rbx-grid-4{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:767px){ .rbx-grid, .rbx-grid-4{ grid-template-columns:repeat(2,1fr); gap:12px; } }
@media (max-width:400px){ .rbx-grid, .rbx-grid-4{ grid-template-columns:repeat(2,1fr); gap:10px; } }

/* ---------- premium product card ---------- */
.rbx-pc{ display:flex; flex-direction:column; background:var(--rbx-surface); border:1px solid var(--rbx-line);
  border-radius:var(--rbx-r); overflow:hidden; cursor:pointer; transition:transform .18s ease, box-shadow .22s ease, border-color .18s ease; height:100%; }
.rbx-pc:hover{ transform:translateY(-6px); box-shadow:var(--rbx-shadow); border-color:color-mix(in srgb,var(--rbx-accent) 34%,var(--rbx-line)); }
.rbx-pc-media{ position:relative; aspect-ratio:1/1; background:var(--rbx-surface2); display:flex; align-items:center; justify-content:center; padding:14px; }
.rbx-pc-imgwrap{ width:100%; height:100%; display:flex; align-items:center; justify-content:center; }
.rbx-pc-img{ max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; transition:transform .3s ease; mix-blend-mode:multiply; }
body[theme="dark"] .rbx-pc-img{ mix-blend-mode:normal; }
.rbx-pc:hover .rbx-pc-img{ transform:scale(1.07); }
.rbx-pc-badge{ position:absolute; top:10px; left:10px; z-index:3; background:linear-gradient(135deg,#f5432c,#d61f1f); color:#fff;
  font-size:11px; font-weight:800; padding:4px 9px; border-radius:8px; box-shadow:0 6px 14px -6px rgba(214,31,31,.7); }
.rbx-pc-sold{ position:absolute; left:0; right:0; bottom:0; z-index:3; background:rgba(15,23,32,.82); color:#fff; text-align:center; font-size:11.5px; font-weight:700; padding:6px; text-transform:uppercase; letter-spacing:.04em; }
.rbx-pc-actions{ position:absolute; top:10px; right:10px; z-index:4; display:flex; flex-direction:column; gap:8px; opacity:0; transform:translateX(8px); transition:all .2s ease; }
.rbx-pc:hover .rbx-pc-actions{ opacity:1; transform:translateX(0); }
.rbx-pc-act{ width:34px; height:34px; border-radius:50%; display:grid; place-items:center; background:#fff; color:#33424c; border:1px solid #e7ebef; box-shadow:var(--rbx-shadow-sm); transition:all .16s ease; text-decoration:none; }
.rbx-pc-act:hover, .rbx-pc-act.is-on{ background:var(--rbx-accent); color:#fff; border-color:var(--rbx-accent); }
.rbx-pc-body{ display:flex; flex-direction:column; gap:7px; padding:14px; flex:1 1 auto; }
.rbx-pc-chips{ display:flex; gap:6px; flex-wrap:wrap; }
.rbx-pc-chip{ font-size:9.5px; font-weight:700; text-transform:uppercase; letter-spacing:.03em; padding:3px 8px; border-radius:6px; }
.rbx-pc-chip-grade{ color:var(--rbx-grade); background:color-mix(in srgb,var(--rbx-grade) 12%,transparent); }
.rbx-pc-chip-warr{ color:var(--rbx-accent); background:color-mix(in srgb,var(--rbx-accent) 12%,transparent); }
.rbx-pc-title{ margin:0; font-size:14px; font-weight:600; color:var(--rbx-ink); line-height:1.35; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:2.7em; }
.rbx-pc-rating{ display:flex; align-items:center; gap:6px; font-size:12px; color:var(--rbx-muted); }
.rbx-pc-stars{ color:#f5a623; letter-spacing:1px; }
.rbx-pc-price{ display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; margin-top:2px; }
.rbx-pc-price ins{ text-decoration:none; font-size:17px; font-weight:800; color:var(--rbx-ink); }
.rbx-pc-price del{ font-size:13px; color:var(--rbx-muted); }
.rbx-pc-foot{ margin-top:auto; padding-top:10px; border-top:1px solid var(--rbx-line); display:flex; align-items:center; justify-content:space-between; gap:8px; }
.rbx-pc-store{ font-size:11.5px; color:var(--rbx-muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rbx-pc-view{ font-size:12px; font-weight:700; color:var(--rbx-accent); white-space:nowrap; display:inline-flex; align-items:center; gap:4px; }
.rbx-pc:hover .rbx-pc-view .bi{ transform:translateX(3px); }
.rbx-pc-view .bi{ transition:transform .16s ease; }
@media (max-width:767px){ .rbx-sec-inner{ padding:18px; border-radius:18px; } .rbx-pc-title{ font-size:13px; } .rbx-pc-price ins{ font-size:15px; } }