/* ======== variables ======== */
:root{
  --rps-accent: #79be3f;
  --rps-muted:  #c8ccd3;
  --rps-text:   #444;
  --rps-bg:     #f5f6f7;
  --rps-line-h: 3px;
  --rps-dot:    10px;
}

/* ======== container ======== */
.rps-tabs{
  border: 1px solid #e5e7ea;
  border-radius: 6px;
  background: #fff;
  overflow: hidden;
}

/* ======== top strip ======== */
.rps-tabs__nav{
  position: relative;
  display: flex;
  justify-content: space-between;
}

/* full grey baseline */
.rps-tabs__nav::after{
  content:"";
  position:absolute;
  left:12px; right:12px; bottom:12px;
  height: var(--rps-line-h);
  border-radius: 999px;
  background: var(--rps-muted);
  opacity: .95;
}

/* green progress up to the active tab */
.rps-tabs__nav::before{
  content:"";
  position:absolute;
  left:12px; bottom:12px;
  height: var(--rps-line-h);
  border-radius: 999px;
  width: calc((100% - 24px) * (var(--active-i,0) / max(1, (var(--count,1) - 1))));
  background: var(--rps-accent);
  transition: width .25s ease;
  z-index: 1;
}

/* ======== buttons ======== */
.rps-tabs__btn{
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 6px 8px 28px;
  background: transparent;
  border: 0;
  cursor: pointer;
  white-space: nowrap;
  font-size: 1.05rem;
  font-weight: 600;
  color: #818a98;
  line-height: 1.15;
}
.rps-tabs__btn[aria-selected="true"]{ color: var(--rps-text); }

/* ======== Font Awesome icon ======== */
.rps-tabs__icon{
  font-size: 24px;            /* adjust to taste (bigger icon) */
  line-height: 1;
  color: var(--rps-muted);
  margin-top: 10px;
}
.rps-tabs__btn[aria-selected="true"] .rps-tabs__icon{
  color: var(--rps-accent);
}

/* dots that sit on the baseline */
.rps-tabs__btn::after{
  content:"";
  position:absolute;
  bottom: calc(12px - (var(--rps-dot) - var(--rps-line-h))/2);
  left: 50%;
  transform: translateX(-50%);
  width: var(--rps-dot);
  height: var(--rps-dot);
  border-radius: 50%;
  background: var(--rps-muted);
  box-shadow: 0 0 0 2px var(--rps-bg);
  z-index: 2;
}
.rps-tabs__btn[aria-selected="true"]::after{ background: var(--rps-accent); }

/* ======== panels ======== */
.rps-tabs__panels{ padding: 18px 20px; }
.rps-tabs__panel{ display:none; }
.rps-tabs__panel[data-active="true"]{ display:block; }

/* ======== responsive ======== */
@media (max-width: 768px){
  .rps-tabs__btn{ font-size: 0.95rem; gap: 6px; padding: 8px 6px 24px; }
  .rps-tabs__icon{ font-size: 22px; }
  :root{ --rps-dot: 9px; }
  span.rps-tabs__label {
    font-size: 16px !important;
}
}

/* no hover bg */
.rps-tabs__btn[aria-selected="true"], .rps-tabs__btn:hover{
  background: none;
  color: #666;
}


span.rps-tabs__label {
    font-size: 1.2rem;
}











/* ===== Quick Facts (beds / baths / size / days) ===== */
.rps-quickfacts{
  display:grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap:28px;
  padding: 8px 0 18px;
  border-bottom: 1px solid #eee;
  margin-bottom: 6px;
}

.rps-qf{
  display:flex;
  flex-direction:column;
  gap:10px;
  min-width:0;
}

.rps-qf__label{
  font-size: 13px;
  font-weight: 700;
  color: #6b7280;                /* muted like screenshot */
  letter-spacing: .2px;
}

.rps-qf__value{
  display:flex;
  align-items:center;
  gap:12px;
  font-size: 15px;
  color:#2e2e2e;
}

.rps-qf__icon{
  width:36px; height:36px;
  display:inline-grid;
  place-items:center;
  border:1px solid #cfd4da;      /* thin outline icon box */
  border-radius:6px;
  color:#111;
  flex:0 0 36px;
  font-size:18px;
}

/* small features (amenities) → subtle chips */
.rps-single-features--chips{
  display:flex;
  flex-wrap:wrap;
  gap:0px;
  margin-top: 14px;
}
.rps-single-features--chips .rps-single-feature-label-sm{
  border:1px solid #e3e6ea;
  border-radius:999px;
  padding:6px 10px;
  font-size:13px;
  color:#444;
  background:#fff;
}

.bootstrap-realtypress .rps-single-listing .rps-single-feature-label-sm{
    background: #004177 !important;
}

.rps-single-features--chips .rps-chip-icon{
    margin-right: 5px;
}

/* Hide the original “labels-in-a-row” block once converted */
.rps-single-features[data-qf-source="consumed"]{ display:none; }

/* ===== Responsive ===== */
@media (max-width: 1024px){
  .rps-quickfacts{ gap:22px; }
}
@media (max-width: 768px){
  .rps-quickfacts{
    grid-template-columns: repeat(2,minmax(0,1fr)); /* 2×2 like the app */
    gap:18px 16px;
  }
  .rps-qf__icon{ width:34px; height:34px; font-size:17px; }
  .rps-qf__value{ font-size:14px; }
}







/* ---------- HoodQ At-a-Glance — modern skin ---------- */
.hq-ah--container{
  --hq-border:#e9eef3;
  --hq-text:#3a4452;
  --hq-muted:#607080;
  --hq-bg:#fff;
  --hq-shadow:0 6px 20px rgba(15, 23, 42, .06);

  border:1px solid var(--hq-border);
  border-radius:14px;
  background:var(--hq-bg);
  padding:20px 18px 12px;
  box-shadow:var(--hq-shadow);
}

/* three equal columns on desktop, tidy spacing */
.hq-ah--data-container{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:28px;
  align-items:start;
}

/* each item */
.hq-ah--data-container > div{
  text-align:center;
  padding:4px 6px;
  width: 100% !important;
}

/* icon “medallion” */
.hq-ah--icon{
  width:72px; height:72px;
  margin:0 auto 10px;
  border-radius:50%;
  display:grid; place-items:center;
  background:
    radial-gradient(100% 100% at 50% 0%, rgba(255,255,255,.9) 0%, rgba(255,255,255,.6) 100%),
    #f5f7fb;
}
.hq-ah--icon svg{ width:44px; height:auto; display:block; }

/* headline */
.hq-ah--headline{
  display:block;
  margin:4px 0 6px;
  font:700 15px/1.2 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  letter-spacing:.3px;
  text-transform:uppercase;
  color:var(--hq-text);
}

/* description */
.hq-ah--data-container p{
  margin:0;
  color:var(--hq-muted);
  font-size:14px;
  line-height:1.55;
}

/* brandish each headline with its icon color (keeps the nice HoodQ palette) */
.hq-ah--schools .hq-ah--headline{ color:#00aeef; }
.hq-ah--parks   .hq-ah--headline{ color:#51b848; }
.hq-ah--transit .hq-ah--headline{ color:#6b6cb2; }

/* subtle divider line at the very bottom area is not needed visually */
.hq-ah--container svg [fill="#8a8c8c"] { opacity:.25; } /* soften HoodQ’s built-in grey bars */

/* Powered by row */
.hq-ah--powered-by-container{
  margin-top:14px;
  display:flex; justify-content:flex-end;
  opacity:.8;
}
.hq-ah--powered-by-container img{ height:18px; }

/* ---------- Mobile layout ---------- */
@media (max-width: 768px){
  .hq-ah--container{ padding:14px 12px 10px; }

  .hq-ah--data-container{
    grid-template-columns:1fr;   /* stack */
    gap:16px;
    flex-direction: column;
  }

  /* turn each card into a compact “media object” */
  .hq-ah--data-container > div{
    display:inline-block; align-items:flex-start; gap:12px; text-align:left;
    padding:10px 2px;
    border-radius:12px;
    background:#fff;            /* keep white for contrast */
  }
  .hq-ah--icon{
    width:56px; height:56px; margin:0;
  }
  .hq-ah--icon svg{ width:34px; }
  .hq-ah--headline{ margin:0 0 4px; font-size:14px; }
  .hq-ah--data-container p{ font-size:13.5px; }
}












/* =========================
   Listing Map Tabs (modern)
   ========================= */
:root{
  --map-accent: #79be3f;
  --map-ink:    #1f2937;
  --map-muted:  #6b7280;
  --map-edge:   #e5e7eb;
  --map-bg:     #f7f8fa;
}

/* wrapper */
.rps-single-listing-map-tabs{
  margin-top: 12px;
}

/* --- Tab bar --- */
.rps-single-listing-map-tabs .nav-tabs{
  display:flex;
  gap: 8px;
  border:0;
  background: var(--map-bg);
  padding: 8px;
  border-radius: 14px;
  box-shadow: inset 0 1px 0 rgba(0,0,0,.03);
}
.rps-single-listing-map-tabs .nav-tabs > li{
  float:none; /* kill bootstrap float */
  flex:1 1 0;
}
.rps-single-listing-map-tabs .nav-tabs > li > a{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  font-weight:600;
  color: var(--map-muted);
  background:#fff;
  border:1px solid transparent;
  border-radius: 10px;
  padding: 10px 14px;
  line-height:1.1;
  box-shadow: 0 1px 1px rgba(2,8,23,.04), 0 0 0 1px rgba(2,8,23,.03);
  transition: all .2s ease;
}
.rps-single-listing-map-tabs .nav-tabs > li > a:hover{
  color: var(--map-ink);
  box-shadow: 0 2px 10px rgba(2,8,23,.08), 0 0 0 1px rgba(2,8,23,.05);
}
/* active */
.rps-single-listing-map-tabs .nav-tabs > li.active > a,
.rps-single-listing-map-tabs .nav-tabs > li.active > a:focus,
.rps-single-listing-map-tabs .nav-tabs > li.active > a:hover{
  color: var(--map-ink);
  background:#fff;
  border-color: rgba(121,190,63,.35);
  box-shadow: 0 0 0 2px rgba(121,190,63,.25), 0 4px 14px rgba(2,8,23,.08);
}

/* icons (SVG masks so no HTML changes needed) */
.rps-single-listing-map-tabs .nav-tabs > li > a::before{
  content:"";
  width:18px; height:18px;
  background: currentColor;
  -webkit-mask: no-repeat center / contain;
          mask: no-repeat center / contain;
}
.rps-single-listing-map-tabs a.aerial::before{
  -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3 11l9-8 9 8v10a1 1 0 0 1-1 1h-5v-7H9v7H4a1 1 0 0 1-1-1V11z"/></svg>');
          mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3 11l9-8 9 8v10a1 1 0 0 1-1 1h-5v-7H9v7H4a1 1 0 0 1-1-1V11z"/></svg>');
}
.rps-single-listing-map-tabs a.street::before{
  -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 7a3 3 0 110-6 3 3 0 010 6zm-4 14l1-5-2-2 3-4h2l3 4-2 2 1 5H8z"/></svg>');
          mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 7a3 3 0 110-6 3 3 0 010 6zm-4 14l1-5-2-2 3-4h2l3 4-2 2 1 5H8z"/></svg>');
}
.rps-single-listing-map-tabs a.walkscore::before{
  -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M13 5a2 2 0 11-4 0 2 2 0 014 0zm-2 5l2 3 2 1-2 7h-2l1-5-2-1-2 6H6l3-9-2-2 1-2h3z"/></svg>');
          mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M13 5a2 2 0 11-4 0 2 2 0 014 0zm-2 5l2 3 2 1-2 7h-2l1-5-2-1-2 6H6l3-9-2-2 1-2h3z"/></svg>');
}

/* --- Card/body --- */
.rps-single-listing-map-tabs .tab-content{
  margin-top: 12px;
  background:#fff;
  border:1px solid var(--map-edge);
  border-radius: 14px;
  overflow:hidden;
  box-shadow: 0 6px 20px rgba(15,23,42,.08);
}

/* map areas */
.rps-single-listing-map-tabs .tab-map{
  width:100% !important;
  min-height: 440px;
}
#ws-walkscore-tile,
#ws-walkscore-tile iframe{
  width:100% !important;
  height: clamp(280px, 55vh, 480px) !important;
}

/* Leaflet/Google control polishing */
.leaflet-control-zoom a,
.leaflet-control-layers-toggle{
  border-radius:10px !important;
  box-shadow: 0 2px 8px rgba(2,8,23,.15) !important;
}
.leaflet-container{
  outline:none;
}

/* --- Mobile --- */
@media (max-width: 768px){
  .rps-single-listing-map-tabs .nav-tabs{
    gap:6px; padding:6px; border-radius:12px;
  }
  .rps-single-listing-map-tabs .nav-tabs > li > a{
    padding:9px 10px; font-size:14px;
  }
  .rps-single-listing-map-tabs .tab-map{
    min-height: 300px;
  }
  
  .rps-single-listing-map-tabs .nav-tabs{
      flex-direction: column;
      background: none;
      border-bottom: none !important;
  }
}












/* =============== Theme tokens =============== */
:root{
  --ink: #151a23;
  --sub: #6b7280;
  --edge:#e6e8ee;
  --bg-soft:#f7f8fb;
  --chip:#eef1f5;
  --ok:#79be3f;
  --ok-ink:#2f5e0f;
}

/* ===== Quick Facts ===== */
.rps-quickfacts{
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 14px;
  margin: 8px 0 18px;
}
.rps-qf{
  border:1px solid var(--edge);
  border-radius:16px;
  background:#fff;
  padding:16px 14px;
  box-shadow: 0 1px 0 rgba(20,23,38,.03), 0 8px 24px rgba(20,23,38,.04);
  transition: transform .18s ease, box-shadow .18s ease;
}
.rps-qf:hover{ transform: translateY(-2px); box-shadow:0 8px 28px rgba(20,23,38,.08); }
.rps-qf__label{
  font-size:12px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  color:var(--sub); margin-bottom:10px;
}
.rps-qf__value{ display:flex; align-items:center; gap:10px; color:var(--ink); }
.rps-qf__value > span:last-child{ font-size:20px; font-weight:700; }
.rps-qf__icon{
  width:42px; height:42px; border-radius:12px;
  display:grid; place-items:center; flex:0 0 42px;
  background: conic-gradient(from 180deg at 50% 50%, #ecf6e6 0 25%, #eef4ff 25% 50%, #fff6ec 50% 75%, #f3f5f9 75% 100%);
  box-shadow: inset 0 0 0 1px var(--edge);
}
.rps-qf__icon i{ font-size:18px; color:#93a0b0; }
.rps-qf[aria-label="Beds"] .rps-qf__icon i{ color:#4f76ff; }
.rps-qf[aria-label="Baths"] .rps-qf__icon i{ color:#00b3b3; }
.rps-qf[aria-label="Size"] .rps-qf__icon i{ color:#79be3f; }

/* ===== Feature chips (amenities) ===== */
.rps-single-features--chips{
  display:flex; flex-wrap:wrap; margin:10px 0 22px;
}
.rps-single-features--chips .rps-single-feature-label-sm{
  display:inline-flex; align-items:center; gap:10px;
  padding:10px 12px; border-radius:12px;
  background: var(--chip);
  color:#3a4552; font-weight:600; line-height:1;
  border:1px solid var(--edge);
  box-shadow: 0 1px 0 rgba(20,23,38,.04), inset 0 -1px 0 rgba(255,255,255,.6);
  transition: transform .16s ease, background .16s ease, box-shadow .16s ease;
}
.rps-single-features--chips .rps-single-feature-label-sm:hover{
  background:#e7f6dd;
  border-color:#cfe9b9;
  box-shadow: 0 8px 20px rgba(121,190,63,.15);
  transform: translateY(-1px);
}
.rps-chip-icon{
  width:24px;height:24px;border-radius:8px;display:grid;place-items:center;
  background:#fff; border:1px solid var(--edge);
}
.rps-chip-icon i{ font-size:12px; color:#7a8797; }
.rps-single-features .rps-single-feature-label{ display:none; } /* we already show QFs */

/* ===== Price badge ===== */
.rps-pricing{
  display:inline-block;
  margin: 6px 0 14px;
  padding: 12px 18px;
  border-radius: 14px;
  background: linear-gradient(180deg, #8bd54a, #6fb436);
  color:#0b2200; font-weight:800; letter-spacing:.02em;
  box-shadow: 0 10px 30px rgba(121,190,63,.35), inset 0 1px 0 rgba(255,255,255,.5);
}

/* ===== Description ===== */
[itemprop="description"]{
  color:#3a404b;
  font-size:16px;
  line-height:1.6;
}
.rps-readmore--clamp{ display:block; max-height:8.8em; overflow:hidden; position:relative; }
.rps-readmore--clamp::after{
  content:""; position:absolute; inset:auto 0 0 0; height:4.5em;
  background: linear-gradient(to bottom, rgba(255,255,255,0), #fff 55%);
}
.rps-readmore__btn{
  display:inline-flex; align-items:center; gap:8px; margin-top:8px;
  padding:8px 12px; border-radius:10px; cursor:pointer;
  background:#f0f4f8; border:1px solid var(--edge); color:#334155; font-weight:600;
}
.rps-readmore__btn i{ color:#64748b; }

/* ===== Section headings inside panels ===== */
.rps-tabs__panel h3{
  margin:28px 0 10px; font-weight:800; color:#111827;
}
.rps-tabs__panel h3 + .table{ margin-top:8px; }

/* ===== Tables (cards + responsive) ===== */
.rps-tabs__panel .table{
  display:block; width:100%;
  border:1px solid var(--edge);
  border-radius:14px;
  overflow:hidden;               /* round corners */
  background:#fff;
  box-shadow: 0 8px 22px rgba(20,23,38,.06);
}

/* give the table body a scroll container on small screens */
.rps-tabs__panel .table > thead,
.rps-tabs__panel .table > tbody,
.rps-tabs__panel .table tr{ display:block; }
.rps-tabs__panel .table thead{ background:#f4f6fa; position:sticky; top:0; z-index:2; }
.rps-tabs__panel .table thead tr{ display:grid; grid-template-columns: 1.1fr 1fr 1fr 1fr 1.1fr; gap:0; }
.rps-tabs__panel .table thead th{ padding:12px 14px; font-weight:700; color:#334155; border-bottom:1px solid var(--edge); }

.rps-tabs__panel .table tbody{ max-height: 520px; overflow:auto; }
.rps-tabs__panel .table tbody tr{
  display:grid; grid-template-columns: 1fr 1fr; /* for 2-col definition tables */
  border-bottom:1px solid var(--edge);
}
.rps-tabs__panel .table-hover tbody tr:hover{ background:#fafbfe; }
.rps-tabs__panel .table tbody td{
  padding:12px 14px; color:#333; background:#fff;
}
.rps-tabs__panel .table-bordered{ border:0; }
.rps-tabs__panel .table-bordered td{ border:0; }
.rps-tabs__panel .text-right{ text-align:right; }

/* Rooms table has 5 columns -> switch layout */
.rps-tabs__panel .table thead + tbody + .table,
.rps-tabs__panel table:has(thead th:nth-child(5)) tbody tr{
  grid-template-columns: 1.1fr 1.1fr .7fr .7fr 1fr;
}

/* Soft fade edges while scrolling */
.rps-tabs__panel .table tbody{
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
}

/* ===== Mobile ===== */
@media (max-width: 900px){
  .rps-quickfacts{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px){
  .rps-quickfacts{ grid-template-columns: 1fr; }
  .rps-qf{ padding:14px; }

  /* tables become horizontally scrollable instead of tall scroll */
  .rps-tabs__panel .table{ overflow:auto; }
  .rps-tabs__panel .table thead,
  .rps-tabs__panel .table tbody,
  .rps-tabs__panel .table tr{ display:table; width:100%; }
  .rps-tabs__panel .table tbody{ max-height:none; -webkit-mask-image:none; mask-image:none; }
  .rps-tabs__panel .table{ mask-image: linear-gradient(90deg, transparent, #000 10px, #000 calc(100% - 10px), transparent); }

  [itemprop="description"]{ font-size:15px; }
}

/* Tiny polish for Realtor link at the end */
.rps-single-listing-information-link{
  display:inline-flex; align-items:center; gap:8px; margin-top:14px;
  font-weight:600; color:#1d4ed8;
}
.rps-single-listing-information-link::before{
  content:"\f14c"; font-family:"Font Awesome 6 Free"; font-weight:900;
}



a.rps-single-listing-information-link {
    display: none;
}











/* ===== Section header (nicer title + right-side arrows) ===== */
.rps-similar-wrap{ margin:42px 0 42px; }
.rps-similar-head{
  display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px;
}
.rps-similar-title{
  margin:0; font-weight:800; color:#0f172a;
  font-size:clamp(20px, 2.2vw, 28px);
  position:relative; padding-bottom:6px;
}
.rps-similar-title:after{
  content:""; position:absolute; left:0; bottom:0;
  width:48px; height:3px; border-radius:3px; background:linear-gradient(90deg,#1f9db2,#4cc9f0);
}
.rps-similar-arrows{ display:flex; gap:10px; }
.rps-similar-btn{
  width:40px; height:40px; border:none; border-radius:999px; background:#fff;
  box-shadow:0 10px 24px rgba(16,24,40,.12); cursor:pointer;
  display:grid; place-items:center; transition:transform .15s ease, box-shadow .15s ease;
}
.rps-similar-btn:hover{ transform:translateY(-1px); box-shadow:0 12px 30px rgba(16,24,40,.16); }
.rps-similar-btn:disabled{ opacity:.35; cursor:not-allowed; }

/* ===== Track / slides ===== */
.rps-similar-scroller{ overflow:hidden; position:relative; }
.rps-similar-track{
  display:flex; gap:24px; overflow-x:auto; scroll-behavior:smooth;
  padding:8px 2px 10px;  /* small bottom pad for custom scrollbar */
}

/* 3 / 2 / 1 layout */
.rps-similar-track > .listing-container{ flex:0 0 calc((100% - 48px)/3); max-width:420px; }
@media (max-width: 980px){
  .rps-similar-track > .listing-container{ flex-basis: calc((100% - 24px)/2); }
}
@media (max-width: 640px){
  .rps-similar-track > .listing-container{ flex-basis: 92%; }
}

/* ===== Custom slim scrollbar (hide chunky OS bar, show sleek one) ===== */
.rps-similar-track{
  scrollbar-width: thin;                 /* Firefox */
  scrollbar-color: rgba(31,157,178,.55) transparent;
}
.rps-similar-track::-webkit-scrollbar{ height:6px; }
.rps-similar-track::-webkit-scrollbar-track{ background:transparent; }
.rps-similar-track::-webkit-scrollbar-thumb{
  background: rgba(31,157,178,.55);
  border-radius: 999px;
}
.rps-similar-track::-webkit-scrollbar-thumb:hover{ background: rgba(31,157,178,.75); }

/* optional: fade edges to hint scrollability */
.rps-similar-scroller:before,
.rps-similar-scroller:after{
  content:""; position:absolute; top:0; bottom:0; width:38px; pointer-events:none; z-index:1;
}
.rps-similar-scroller:before{
  left:0; background:linear-gradient(90deg, #fff, rgba(255,255,255,0));
}
.rps-similar-scroller:after{
  right:0; background:linear-gradient(270deg, #fff, rgba(255,255,255,0));
}

/* keep your existing grid card styles; only layout/scrollbar changed here */