/* ============================================================
   RefurbishedBazzar — Price-list / catalog view for blog products
   Prefix: rbxb-lp-  |  Depends on tokens from blog-redesign.css
   ============================================================ */
.rbxb-lp{ padding:14px 0 70px; color:var(--rbxb-ink2); }
.rbxb-lp a{ text-decoration:none; color:inherit; }
.rbxb-lp .container{ max-width:1280px; }

.rbxb-lp-title{ display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; margin:6px 0 4px; }
.rbxb-lp-title h1{ font-size:clamp(20px,2.4vw,26px); font-weight:800; color:var(--rbxb-ink); margin:0; letter-spacing:-.01em; }
.rbxb-lp-title .rbxb-lp-sub{ font-size:13px; color:var(--rbxb-muted); }

/* ---- popular brands strip ---- */
.rbxb-brands{ background:var(--rbxb-surface); border:1px solid var(--rbxb-line); border-radius:14px; padding:14px 16px; margin:14px 0; }
.rbxb-brands-head{ font-size:11px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--rbxb-muted); margin-bottom:10px; }
.rbxb-brands-row{ display:flex; gap:10px; flex-wrap:wrap; }
.rbxb-brand{ --bc:var(--rbxb-accent); flex:1 1 auto; justify-content:center;
  display:inline-flex; align-items:center; gap:7px; border:1.5px solid color-mix(in srgb, var(--bc) 65%, transparent);
  background:color-mix(in srgb, var(--bc) 20%, var(--rbxb-surface));
  color:color-mix(in srgb, var(--bc) 72%, var(--rbxb-ink));
  font-size:13px; font-weight:800; padding:7px 14px; border-radius:9px; cursor:pointer; transition:all .15s ease; }
.rbxb-brand:hover{ background:color-mix(in srgb, var(--bc) 34%, var(--rbxb-surface)); }
.rbxb-brand .n{ color:var(--rbxb-ink); }
.rbxb-brand.is-on{ background:var(--bc); border-color:var(--bc); color:#fff; }
.rbxb-brand.is-on .n{ color:#fff; opacity:.85; }

/* Brand identity colors */
.rbxb-brand[data-value="Lenovo"]{ --bc:#e2231a; }
.rbxb-brand[data-value="Dell"]{ --bc:#007db8; }
.rbxb-brand[data-value="HP"]{ --bc:#0096d6; }
.rbxb-brand[data-value="Asus"]{ --bc:#0a5ea8; }
.rbxb-brand[data-value="Acer"]{ --bc:#83b81a; }
.rbxb-brand[data-value="Apple"]{ --bc:#8e8e93; }
.rbxb-brand[data-value="Infinix"]{ --bc:#7ac143; }
.rbxb-brand[data-value="Motorola"]{ --bc:#0067a0; }
.rbxb-brand[data-value="Samsung"]{ --bc:#1428a0; }
.rbxb-brand[data-value="Thomson"]{ --bc:#e30613; }
.rbxb-brand[data-value="MSI"]{ --bc:#d0021b; }
.rbxb-brand[data-value="Xiaomi"]{ --bc:#ff6900; }
.rbxb-brand[data-value="Realme"]{ --bc:#e8b02e; }
.rbxb-brand[data-value="OnePlus"]{ --bc:#eb0028; }
.rbxb-brand[data-value="OPPO"]{ --bc:#0b7d51; }
.rbxb-brand[data-value="Vivo"]{ --bc:#415fff; }
.rbxb-brand[data-value="Honor"]{ --bc:#00a3ff; }
.rbxb-brand[data-value="Huawei"]{ --bc:#cf0a2c; }
.rbxb-brand[data-value="LG"]{ --bc:#a50034; }
.rbxb-brand[data-value="Sony"]{ --bc:#4a4a4a; }
.rbxb-brand[data-value="Nokia"]{ --bc:#124191; }
.rbxb-brand[data-value="itel"]{ --bc:#e4002b; }
.rbxb-brand[data-value="Tecno"]{ --bc:#0473ba; }
.rbxb-brand[data-value="iQOO"]{ --bc:#ff9800; }
.rbxb-brand[data-value="Poco"]{ --bc:#ffd200; color:var(--rbxb-ink); }
.rbxb-brand[data-value="Google"]{ --bc:#4285f4; }
.rbxb-brand[data-value="Microsoft"]{ --bc:#7fba00; }
.rbxb-brand[data-value="Avita"]{ --bc:#7a2ea0; }
.rbxb-brand[data-value="Zebronics"]{ --bc:#f9a825; }
.rbxb-brand .n{ font-size:11px; font-weight:600; opacity:.6; }

/* ---- price chips ---- */
.rbxb-pricechips{ display:flex; gap:8px; flex-wrap:wrap; margin:12px 0 4px; }
.rbxb-pricechips .lbl{ font-size:12px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--rbxb-muted); align-self:center; margin-right:4px; }
.rbxb-chip{ border:1px solid var(--rbxb-line-strong); background:transparent; color:var(--rbxb-ink2); font-size:12.5px; font-weight:600;
  padding:6px 13px; border-radius:999px; cursor:pointer; transition:all .15s ease; }
.rbxb-chip:hover{ border-color:var(--rbxb-accent); color:var(--rbxb-accent); }
.rbxb-chip.is-on{ background:var(--rbxb-accent); border-color:var(--rbxb-accent); color:#fff; }

/* ---- layout ---- */
.rbxb-lp-layout{ display:grid; grid-template-columns:262px minmax(0,1fr); gap:22px; align-items:start; margin-top:16px; }
.rbxb-lp-main{ min-width:0; }
.rbxb-lp-side{ position:sticky; top:84px; max-height:calc(100vh - 100px); overflow:auto; padding-right:4px;
  border:1px solid var(--rbxb-line); border-radius:14px; background:var(--rbxb-surface); }
.rbxb-flt-bar{ display:flex; align-items:center; justify-content:space-between; padding:13px 15px; border-bottom:1px solid var(--rbxb-line); position:sticky; top:0; background:var(--rbxb-surface); z-index:2; }
.rbxb-flt-bar b{ font-size:14px; color:var(--rbxb-ink); }
.rbxb-flt-clear{ font-size:12px; font-weight:700; color:var(--rbxb-accent); background:none; border:0; cursor:pointer; }
.rbxb-flt-group{ border-bottom:1px solid var(--rbxb-line); }
.rbxb-flt-group:last-child{ border-bottom:0; }
.rbxb-flt-gtitle{ display:flex; align-items:center; justify-content:space-between; padding:12px 15px; font-size:12.5px; font-weight:800;
  color:var(--rbxb-ink); cursor:pointer; letter-spacing:.02em; text-transform:uppercase; }
.rbxb-flt-gtitle i{ transition:transform .18s ease; color:var(--rbxb-muted); font-size:12px; }
.rbxb-flt-group.is-collapsed .rbxb-flt-gtitle i{ transform:rotate(-90deg); }
.rbxb-flt-list{ padding:0 15px 12px; display:flex; flex-direction:column; gap:9px; max-height:220px; overflow:auto; }
.rbxb-flt-group.is-collapsed .rbxb-flt-list{ display:none; }
.rbxb-flt-opt{ display:flex; align-items:center; gap:9px; font-size:13px; color:var(--rbxb-ink2); cursor:pointer; margin:0; }
.rbxb-flt-opt input{ accent-color:var(--rbxb-accent); width:15px; height:15px; }
.rbxb-flt-opt .c{ margin-left:auto; font-size:11.5px; color:var(--rbxb-faint); font-variant-numeric:tabular-nums; }
.rbxb-flt-opt:hover{ color:var(--rbxb-ink); }

/* ---- toolbar above list ---- */
.rbxb-lp-toolbar{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; background:var(--rbxb-surface); border:1px solid var(--rbxb-line);
  border-radius:12px; padding:10px 14px; margin-bottom:14px; }
.rbxb-lp-count{ font-size:13.5px; color:var(--rbxb-muted); }
.rbxb-lp-count b{ color:var(--rbxb-ink); }
.rbxb-lp-search{ position:relative; flex:1; min-width:180px; }
.rbxb-lp-search i{ position:absolute; left:12px; top:50%; transform:translateY(-50%); color:var(--rbxb-muted); font-size:14px; }
.rbxb-lp-search input{ width:100%; border:1px solid var(--rbxb-line-strong); background:var(--rbxb-paper); color:var(--rbxb-ink);
  border-radius:9px; padding:9px 12px 9px 34px; font-size:13.5px; }
.rbxb-lp-search input:focus{ outline:none; border-color:var(--rbxb-accent); }
.rbxb-lp-sort{ border:1px solid var(--rbxb-line-strong); background:var(--rbxb-paper); color:var(--rbxb-ink); border-radius:9px;
  padding:9px 12px; font-size:13px; font-weight:600; }

/* ---- product cards ---- */
.rbxb-lp-list{ display:flex; flex-direction:column; gap:14px; }
.rbxb-lp-card{ display:grid; grid-template-columns:180px 1fr 210px; gap:18px; background:var(--rbxb-surface); border:1px solid var(--rbxb-line);
  border-radius:14px; padding:18px; transition:box-shadow .2s ease, border-color .2s ease; }
.rbxb-lp-card:hover{ box-shadow:var(--rbxb-shadow-sm); border-color:var(--rbxb-line-strong); box-shadow:0 14px 34px -22px rgba(20,24,29,.3); }
.rbxb-lp-media{ position:relative; }
.rbxb-lp-media .thumb{ width:100%; aspect-ratio:4/3; object-fit:contain; background:#ffffff; border-radius:10px; padding:10px; border:1px solid var(--rbxb-line); }
.rbxb-lp-media .score{ position:absolute; top:8px; left:8px; width:40px; height:40px; border-radius:10px; display:grid; place-items:center;
  background:var(--rbxb-ink); color:#fff; font-weight:800; font-size:14px; line-height:1; flex-direction:column; }
body[theme="dark"] .rbxb-lp-media .score{ color:#0c0e11; background:var(--rbxb-elevated); }
.rbxb-lp-media .score small{ font-size:7px; font-weight:700; letter-spacing:.06em; opacity:.7; display:block; text-align:center; }

.rbxb-lp-body{ min-width:0; }
.rbxb-lp-cat{ font-size:10.5px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--rbxb-accent); }
.rbxb-lp-name{ font-size:16px; font-weight:700; line-height:1.3; margin:5px 0 10px; color:var(--rbxb-ink);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.rbxb-lp-name a:hover{ color:var(--rbxb-accent); }
.rbxb-lp-specs{ display:grid; grid-template-columns:1fr 1fr; gap:6px 20px; margin:0 0 12px; }
.rbxb-lp-spec{ display:flex; align-items:baseline; gap:7px; font-size:12.5px; color:var(--rbxb-ink2); }
.rbxb-lp-spec i{ color:var(--rbxb-accent); font-size:13px; width:15px; flex:0 0 auto; }
.rbxb-lp-spec b{ font-weight:600; color:var(--rbxb-ink); }
.rbxb-lp-actions{ display:flex; align-items:center; gap:14px; }
.rbxb-lp-cmp{ display:inline-flex; align-items:center; gap:7px; font-size:12.5px; font-weight:700; color:var(--rbxb-ink2); cursor:pointer; margin:0; }
.rbxb-lp-cmp input{ accent-color:var(--rbxb-accent); width:15px; height:15px; }
.rbxb-lp-cmp:has(input:checked){ color:var(--rbxb-accent); }
.rbxb-lp-readlink{ font-size:12.5px; font-weight:700; color:var(--rbxb-accent); display:inline-flex; align-items:center; gap:5px; }

.rbxb-lp-aside{ border-left:1px solid var(--rbxb-line); padding-left:18px; display:flex; flex-direction:column; }
.rbxb-lp-price{ font-size:22px; font-weight:800; color:var(--rbxb-ink); font-variant-numeric:tabular-nums; letter-spacing:-.01em; }
.rbxb-lp-price small{ font-size:12px; font-weight:600; color:var(--rbxb-muted); display:block; margin-top:1px; }
.rbxb-lp-store{ margin-top:8px; font-size:12px; color:var(--rbxb-muted); }
.rbxb-lp-store b{ color:var(--rbxb-ink); text-transform:capitalize; }
.rbxb-lp-stars{ margin-top:8px; color:#f2a41c; font-size:12.5px; letter-spacing:1px; }
.rbxb-lp-stars span{ color:var(--rbxb-muted); font-size:11px; margin-left:4px; letter-spacing:0; }
.rbxb-lp-cta{ margin-top:auto; padding-top:12px; }
.rbxb-lp-cta a{ display:block; text-align:center; background:var(--rbxb-accent); color:#fff; font-weight:700; font-size:13px;
  padding:9px; border-radius:9px; transition:background .15s ease; }
.rbxb-lp-cta a:hover{ background:var(--rbxb-accent-deep); }

/* ---- load more / empty ---- */
.rbxb-lp-more{ text-align:center; margin-top:22px; }
.rbxb-lp-more .btn-more{ border:1px solid var(--rbxb-ink); background:transparent; color:var(--rbxb-ink); font-weight:700; font-size:13.5px;
  padding:11px 30px; border-radius:999px; transition:all .16s ease; }
.rbxb-lp-more .btn-more:hover{ background:var(--rbxb-ink); color:var(--rbxb-surface); }
body[theme="dark"] .rbxb-lp-more .btn-more:hover{ color:#0c0e11; }
.rbxb-lp-none{ text-align:center; padding:60px 20px; color:var(--rbxb-muted); border:1px dashed var(--rbxb-line-strong); border-radius:14px; }
.rbxb-lp-none i{ font-size:34px; color:var(--rbxb-faint); }

/* ---- mobile filter toggle ---- */
.rbxb-flt-toggle{ display:none; align-items:center; gap:8px; border:1px solid var(--rbxb-line-strong); background:var(--rbxb-surface);
  color:var(--rbxb-ink); font-weight:700; font-size:13.5px; padding:10px 16px; border-radius:10px; margin-bottom:14px; width:100%; justify-content:center; }
/* backdrop must NOT take a grid cell on desktop */
.rbxb-flt-backdrop{ display:none; }
.rbxb-flt-close{ display:none; }

@media (max-width:1000px){
  .rbxb-lp-layout{ grid-template-columns:1fr; }
  .rbxb-flt-toggle{ display:inline-flex; }
  .rbxb-lp-side{ position:fixed; inset:0 auto 0 0; z-index:1055; width:min(320px,86vw); max-height:100vh; border-radius:0;
    transform:translateX(-102%); transition:transform .28s ease; box-shadow:var(--rbxb-shadow); }
  .rbxb-lp-side.is-open{ transform:translateX(0); }
  .rbxb-flt-backdrop{ display:block; position:fixed; inset:0; background:rgba(10,12,15,.5); z-index:1050; opacity:0; visibility:hidden; transition:opacity .25s ease; }
  .rbxb-flt-backdrop.is-open{ opacity:1; visibility:visible; }
  .rbxb-flt-close{ display:inline-flex; }
}
@media (max-width:720px){
  .rbxb-lp-card{ grid-template-columns:110px 1fr; }
  .rbxb-lp-aside{ grid-column:1 / -1; border-left:0; border-top:1px solid var(--rbxb-line); padding-left:0; padding-top:12px; margin-top:4px;
    flex-direction:row; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; }
  .rbxb-lp-cta{ margin:0; padding:0; } .rbxb-lp-cta a{ padding:9px 20px; }
  .rbxb-lp-specs{ grid-template-columns:1fr; }
}
.rbxb-flt-close{ background:none; border:0; color:var(--rbxb-muted); font-size:20px; cursor:pointer; }

/* ---- Subcategory chips ---- */
.rbxb-subtabs{ display:flex; gap:7px; flex-wrap:wrap; margin:10px 0 2px; }
.rbxb-subtab{ font-size:12px; font-weight:700; color:var(--rbxb-ink2); border:1px solid var(--rbxb-line-strong);
  border-radius:999px; padding:5px 12px; text-decoration:none; transition:all .15s ease; }
.rbxb-subtab:hover{ border-color:var(--rbxb-accent); color:var(--rbxb-accent); }
.rbxb-subtab.is-active{ background:color-mix(in srgb, var(--rbxb-accent) 16%, var(--rbxb-surface)); border-color:var(--rbxb-accent); color:var(--rbxb-accent); }

/* ============================================================
   Trending / Popular page (rbxb-tr-)
   ============================================================ */
.rbxb-tr{ padding:14px 0 72px; color:var(--rbxb-ink2); }
.rbxb-tr a{ text-decoration:none; }
.rbxb-tr-crumb{ font-size:12.5px; color:var(--rbxb-muted); display:flex; flex-wrap:wrap; gap:7px; align-items:center; margin:8px 0 18px; }
.rbxb-tr-crumb a{ color:var(--rbxb-muted); }
.rbxb-tr-crumb a:hover{ color:var(--rbxb-accent); }
.rbxb-tr-crumb .cur{ color:var(--rbxb-ink); font-weight:600; }

.rbxb-tr-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap; margin-bottom:18px; }
.rbxb-tr-head-text{ max-width:640px; }
.rbxb-tr-head h1{ font-size:clamp(22px,3vw,30px); font-weight:800; color:var(--rbxb-ink); margin:0 0 8px; letter-spacing:-.01em; }
.rbxb-tr-head h1 i{ color:#f59e0b; }
.rbxb-tr-head p{ font-size:13.5px; color:var(--rbxb-muted); line-height:1.6; margin:0; }
.rbxb-tr-search{ display:flex; align-items:center; gap:8px; background:var(--rbxb-surface); border:1.5px solid var(--rbxb-line-strong);
  border-radius:11px; padding:6px 6px 6px 14px; min-width:300px; }
.rbxb-tr-search i{ color:var(--rbxb-muted); }
.rbxb-tr-search input[type=text]{ border:0; background:transparent; outline:none; font-size:13.5px; color:var(--rbxb-ink); flex:1; min-width:0; }
.rbxb-tr-search button{ border:0; background:var(--rbxb-accent); color:#fff; font-size:13px; font-weight:700; padding:8px 16px; border-radius:8px; cursor:pointer; }
.rbxb-tr-search button:hover{ background:var(--rbxb-accent-deep); }
.rbxb-tr-search:focus-within{ border-color:var(--rbxb-accent); }

.rbxb-tr-chips{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:20px; }
.rbxb-tr-chip{ font-size:12.5px; font-weight:700; color:var(--rbxb-ink2); background:var(--rbxb-surface); border:1px solid var(--rbxb-line);
  border-radius:999px; padding:7px 15px; transition:all .15s ease; }
.rbxb-tr-chip:hover{ border-color:var(--rbxb-accent); color:var(--rbxb-accent); }
.rbxb-tr-chip.is-active{ background:var(--rbxb-accent); border-color:var(--rbxb-accent); color:#fff; }
.rbxb-tr-count{ font-size:13px; color:var(--rbxb-muted); margin:0 0 14px; }
.rbxb-tr-count a{ color:var(--rbxb-accent); font-weight:700; margin-left:8px; }

/* podium: top 3 */
.rbxb-tr-podium{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-bottom:20px; }
.rbxb-tr-top{ position:relative; background:var(--rbxb-surface); border:1px solid var(--rbxb-line); border-radius:14px; overflow:hidden;
  display:flex; flex-direction:column; transition:box-shadow .15s ease, border-color .15s ease; }
.rbxb-tr-top:hover{ border-color:var(--rbxb-accent); box-shadow:0 14px 34px -22px rgba(20,24,29,.4); }
.rbxb-tr-top .rank{ position:absolute; top:10px; left:10px; z-index:2; font-size:13px; font-weight:800; color:#fff; padding:4px 11px; border-radius:8px; }
.rbxb-tr-top .rank-1{ background:#f59e0b; }
.rbxb-tr-top .rank-2{ background:#64748b; }
.rbxb-tr-top .rank-3{ background:#b45309; }
.rbxb-tr-top .media{ display:block; background:#fff; }
.rbxb-tr-top .media img{ width:100%; aspect-ratio:16/10; object-fit:contain; padding:14px; }
.rbxb-tr-top .body{ padding:14px 16px 16px; display:flex; flex-direction:column; gap:7px; flex:1; }
.rbxb-tr-top .cat{ font-size:10px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; color:var(--rbxb-accent); }
.rbxb-tr-top h2{ font-size:15px; font-weight:700; line-height:1.35; margin:0; }
.rbxb-tr-top h2 a{ color:var(--rbxb-ink); }
.rbxb-tr-top h2 a:hover{ color:var(--rbxb-accent); }
.rbxb-tr-top .meta{ display:flex; align-items:center; gap:14px; font-size:12.5px; color:var(--rbxb-muted); }
.rbxb-tr-top .meta .price{ font-weight:800; color:var(--rbxb-ink); font-size:14px; }
.rbxb-tr-top .go{ margin-top:auto; font-size:12.5px; font-weight:700; color:var(--rbxb-accent); }

/* ranked rows */
.rbxb-tr-list{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-bottom:26px; }
.rbxb-tr-row{ display:grid; grid-template-columns:38px 70px minmax(0,1fr) auto; gap:12px; align-items:center;
  background:var(--rbxb-surface); border:1px solid var(--rbxb-line); border-radius:12px; padding:10px 16px 10px 10px;
  transition:border-color .15s ease; }
.rbxb-tr-row:hover{ border-color:var(--rbxb-accent); }
.rbxb-tr-row .rank{ font-size:16px; font-weight:800; color:var(--rbxb-faint); text-align:center; font-variant-numeric:tabular-nums; }
.rbxb-tr-row .media{ display:block; background:#fff; border:1px solid var(--rbxb-line); border-radius:9px; }
.rbxb-tr-row .media img{ width:100%; aspect-ratio:1/1; object-fit:contain; padding:6px; }
.rbxb-tr-row .cat{ font-size:9.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--rbxb-accent); }
.rbxb-tr-row h3{ font-size:14px; font-weight:700; margin:2px 0 4px; line-height:1.35; }
.rbxb-tr-row h3 a{ color:var(--rbxb-ink); }
.rbxb-tr-row h3 a:hover{ color:var(--rbxb-accent); }
.rbxb-tr-row .meta{ display:flex; gap:14px; font-size:12px; color:var(--rbxb-muted); }
.rbxb-tr-row .aside{ text-align:right; display:flex; flex-direction:column; gap:5px; align-items:flex-end; }
.rbxb-tr-row .aside .price{ font-size:15px; font-weight:800; color:var(--rbxb-ink); font-variant-numeric:tabular-nums; }
.rbxb-tr-row .aside .go{ font-size:12.5px; font-weight:700; color:var(--rbxb-accent); }
.rbxb-tr-pagination{ display:flex; justify-content:center; }

@media (max-width:992px){
  .rbxb-tr-podium{ grid-template-columns:1fr 1fr; }
  .rbxb-tr-top.is-first{ grid-column:1 / -1; }
}
@media (max-width:768px){
  .rbxb-tr-list{ grid-template-columns:1fr; }
}
@media (max-width:576px){
  .rbxb-tr-podium{ grid-template-columns:1fr; }
  .rbxb-tr-top.is-first{ grid-column:auto; }
  .rbxb-tr-search{ width:100%; }
  .rbxb-tr-row{ grid-template-columns:30px 60px minmax(0,1fr); }
  .rbxb-tr-row .aside{ grid-column:2 / -1; flex-direction:row; justify-content:space-between; width:100%; }
}