:root{
  --rbp-bg:#ffffff;
  --rbp-soft:#f7faf9;
  --rbp-border:#e6eaee;
  --rbp-primary:#0d3b2e;
  --rbp-accent:#0f7e4a;
  --rbp-accent-2:#0ab37a;
  --rbp-text:#0f172a;
  --rbp-muted:#6b7280;
  --rbp-radius:18px;
  --rbp-shadow:0 14px 40px rgba(11,59,40,.08);
}
#rbp-app{font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;color:var(--rbp-text)}
.rbp-shell{max-width:1240px;margin:0 auto;padding:18px}

/* Hero + Steps */
.rbp-hero{padding:8px 0 4px}
.rbp-hero h1{font-size:38px;margin:0;color:var(--rbp-primary);font-weight:900;letter-spacing:-.02em}
.rbp-hero p{margin:6px 0 0;color:var(--rbp-muted)}
.rbp-steps{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px;margin:16px 0 20px}
.rbp-step{display:flex;align-items:center;gap:12px;padding:14px 16px;border:1px solid var(--rbp-border);border-radius:14px;background:#fff;box-shadow:var(--rbp-shadow);font-weight:800}
.rbp-step .n{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:999px;background:#e9f5ee;color:var(--rbp-accent);font-weight:900}
.rbp-step.active{background:linear-gradient(135deg,var(--rbp-accent),var(--rbp-accent-2));color:#fff;border-color:transparent}
.rbp-step.active .n{background:rgba(255,255,255,.2);color:#fff}

/* Grid cards (Step 1 settings) */
.rbp-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
@media(min-width:1280px){.rbp-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:760px){.rbp-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.rbp-card{border:1px solid var(--rbp-border);border-radius:var(--rbp-radius);background:#fff;box-shadow:var(--rbp-shadow);overflow:hidden;display:flex;flex-direction:column}
.rbp-card-img{height:230px;background:var(--rbp-soft);display:flex;align-items:center;justify-content:center}
.rbp-card-img img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
.rbp-card-body{padding:14px;display:flex;flex-direction:column;gap:8px}
.rbp-title{font-weight:900;line-height:1.25;min-height:40px}
.rbp-price{font-weight:900}
.rbp-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid transparent;padding:11px 14px;border-radius:14px;cursor:pointer;font-weight:900}
.rbp-btn-primary{background:var(--rbp-accent);color:#fff}
.rbp-btn-ghost{background:#fff;border-color:var(--rbp-border);color:var(--rbp-text)}

/* Filters (Step 2) */
.rbp-filter{border:1px solid var(--rbp-border);border-radius:16px;background:#fff;box-shadow:var(--rbp-shadow);padding:16px;margin-bottom:16px}
.rbp-filter h4{margin:0 0 12px}
.rbp-chiprow{display:flex;flex-wrap:wrap;gap:10px}
.rbp-chip{padding:9px 12px;border:1px solid var(--rbp-border);border-radius:999px;background:#fff;font-weight:800;cursor:pointer}
.rbp-chip.active{background:#e8faf3;border-color:#b8e3d1;color:var(--rbp-accent)}
.rbp-range{display:grid;grid-template-columns:1fr 100px 100px;gap:12px;align-items:center;margin:10px 0}
.rbp-range input[type=range]{width:100%}
.rbp-input input,.rbp-select{padding:10px 12px;border:1px solid var(--rbp-border);border-radius:10px;width:100%;background:#fff}
.rbp-label{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:#6a7e74;margin-bottom:6px}

/* Diamond rows */
.rbp-rows{display:flex;flex-direction:column;gap:12px}
.rbp-row{display:grid;grid-template-columns:1fr auto auto;gap:12px;align-items:center;padding:16px;border:1px solid var(--rbp-border);border-radius:16px;background:#fff;box-shadow:var(--rbp-shadow)}
.rbp-row-title{font-weight:900}
.rbp-row-sub{color:var(--rbp-muted);font-size:13px}

/* Review (Step 3) */
.rbp-review{display:grid;grid-template-columns:1fr 1.2fr .9fr;gap:18px;border:1px solid var(--rbp-border);border-radius:18px;background:#fff;padding:18px;box-shadow:var(--rbp-shadow);margin:8px 0 28px}
.rbp-total{font-size:20px;margin:12px 0}.rbp-total b{color:var(--rbp-accent)}
.rbp-empty{border:1px dashed var(--rbp-border);background:var(--rbp-soft);border-radius:14px;padding:24px;text-align:center;color:var(--rbp-muted)}

/* === Diamond grid like screenshot === */
.rbp-dgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px;margin-top:6px}
@media(max-width:1100px){.rbp-dgrid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:820px){.rbp-dgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.rbp-dcard{border:1px solid var(--rbp-border);border-radius:16px;overflow:hidden;background:#fff;box-shadow:var(--rbp-shadow);display:flex;flex-direction:column}
.rbp-dtop{position:relative;background:#f1f5f9}
.rbp-dsample{position:absolute;left:0;right:0;top:10px;height:24px;display:flex;align-items:center;justify-content:center;
  font-weight:900;color:#a8b0b8;opacity:.9;pointer-events:none}
.rbp-dimg{aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;background:#e9eef2}
.rbp-dimg img{max-width:100%;max-height:100%;object-fit:contain}

.rbp-dicons{position:absolute;right:12px;top:10px;display:flex;gap:8px}
.rbp-dicons .rbp-i{width:30px;height:30px;border-radius:999px;background:#fff;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--rbp-border);box-shadow:0 4px 16px rgba(0,0,0,.08);font-weight:900;color:#667085;cursor:pointer}

.rbp-dbody{padding:12px 14px 14px}
.rbp-dtitle{font-weight:800;margin:6px 0 2px}
.rbp-dmm{color:var(--rbp-muted);font-size:13px}
.rbp-dprice{margin-top:10px;font-weight:900;font-size:18px}

.rbp-loadmore-wrap{display:flex;justify-content:center;margin:18px 0}
.rbp-loadmore{padding:11px 18px;border:1px solid var(--rbp-border);border-radius:999px;background:#fff;font-weight:900;cursor:pointer}
/* ===== RBP FIX: show chip labels (Shape/Color/Clarity) ===== */
.rbp-chip{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center;
  padding:8px 14px !important;
  border-radius:999px !important;
  border:1px solid var(--rbp-border,#e5e7eb) !important;
  background:#fff !important;

  /* force text to show even if theme zeroes it */
  height:auto !important;
  width:auto !important;
  line-height:1.2 !important;
  font-size:14px !important;
  font-weight:700 !important;
  color:var(--rbp-ink,#0f172a) !important;
  white-space:nowrap !important;
}

.rbp-chip.active{
  background:var(--rbp-primary-10,#e6f4ee) !important;
  border-color:var(--rbp-primary,#0f766e) !important;
  color:var(--rbp-primary,#0f766e) !important;
}

.rbp-chiprow{gap:10px !important}

/* If you previously had icon-style round chips, neutralize them here */
.rbp-chip::before{display:none}

/* Labels above sliders */
.rbp-label{
  color:var(--rbp-ink,#0f172a) !important;
  font-weight:800 !important;
  letter-spacing:.02em;
}
