/* ─────────────────────────────────────────────────────────────────────────
   Ring builder — "Choose a Diamond" and "Choose a Setting" listings.

   Everything is scoped under .rb-wrap and prefixed rb-* so none of it can
   reach the rest of the site, and the site's own CSS cannot reach in.
   ───────────────────────────────────────────────────────────────────────── */

.rb-wrap,
.rb-modal {
   --rb-ink: #1a1a1a;
   --rb-muted: #767676;
   --rb-line: #e2e2e2;
   --rb-line-soft: #ececec;
   --rb-panel: #f5f5f5;
   --rb-card: #fff;
   --rb-link: #3a6b96;
   --rb-dark: #1b2434;

   /* Full-bleed: the listing is a working surface, so it uses the whole
      viewport rather than sitting in the site's usual centred column. */
   width: 100%;
   margin: 0;
   padding: 1.5rem clamp(1rem, 2.2vw, 2.6rem) 3.5rem;
   color: var(--rb-ink);
   font-size: 14px;
}

/* Listings earn the full viewport; a single item does not — it reads better in
   a centred column. */
.rb-wrap--narrow {
   max-width: 84rem;
   margin: 0 auto;
}

.rb-wrap *,
.rb-wrap *::before,
.rb-wrap *::after,
.rb-modal *,
.rb-modal *::before,
.rb-modal *::after { box-sizing: border-box; }

.rb-wrap a { text-decoration: none; }

.rb-sr {
   position: absolute;
   width: 1px;
   height: 1px;
   overflow: hidden;
   clip: rect(0 0 0 0);
   clip-path: inset(50%);
   white-space: nowrap;
}

/* ── Title + step chevrons ─────────────────────────────────────────────── */

.rb-head {
   display: flex;
   align-items: center;
   gap: 1.5rem;
   flex-wrap: wrap;
}

.rb-head-title { flex: 0 0 auto; }

.rb-eyebrow {
   font-size: .72rem;
   letter-spacing: .13em;
   text-transform: uppercase;
   color: #4a4a4a;
   margin: 0;
}

.rb-title {
   font-size: 1.4rem;
   font-weight: 400;
   margin: .1rem 0 0;
   line-height: 1.2;
}

.rb-steps {
   flex: 1 1 34rem;
   min-width: 0;
   display: flex;
}

/* Chevron outline: the <a> paints the border colour, the inner span paints the
   fill 1px inside it. Clipping a real border would cut the outline away. */
.rb-step {
   --notch: 17px;
   flex: 1 1 0;
   min-width: 0;
   padding: 1px;
   background: var(--rb-line);
   color: inherit;
   margin-left: calc(var(--notch) * -1);
   clip-path: polygon(0 0, calc(100% - var(--notch)) 0, 100% 50%, calc(100% - var(--notch)) 100%, 0 100%, var(--notch) 50%);
   transition: background .15s;
}

.rb-step:first-child {
   margin-left: 0;
   clip-path: polygon(0 0, calc(100% - var(--notch)) 0, 100% 50%, calc(100% - var(--notch)) 100%, 0 100%);
}

.rb-step-in {
   display: flex;
   align-items: center;
   gap: .7rem;
   height: 100%;
   padding: .65rem 1.6rem .65rem calc(var(--notch) + .9rem);
   background: #fff;
   clip-path: polygon(0 0, calc(100% - var(--notch)) 0, 100% 50%, calc(100% - var(--notch)) 100%, 0 100%, var(--notch) 50%);
}

.rb-step:first-child .rb-step-in {
   padding-left: .95rem;
   clip-path: polygon(0 0, calc(100% - var(--notch)) 0, 100% 50%, calc(100% - var(--notch)) 100%, 0 100%);
}

.rb-step.is-active { background: var(--rb-ink); }
.rb-step:hover { background: #b9b9b9; }
.rb-step.is-active:hover { background: var(--rb-ink); }

.rb-step-no {
   flex: 0 0 auto;
   font-size: 1.5rem;
   font-weight: 300;
   line-height: 1;
   color: #9a9a9a;
}

.rb-step.is-active .rb-step-no { color: var(--rb-ink); }

.rb-step-body { flex: 1 1 auto; min-width: 0; }

.rb-step-name {
   display: block;
   font-size: .88rem;
   font-weight: 600;
   line-height: 1.25;
}

.rb-step-meta {
   display: block;
   font-size: .72rem;
   color: var(--rb-muted);
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
}

/* The step is a <div>, so its links no longer inherit the anchor colour the
   whole tile used to carry — say it here instead of letting the site's global
   link colour through. */
.rb-step-meta a,
.rb-step-remove {
   color: inherit;
   text-decoration: underline;
}

.rb-step-meta a:hover,
.rb-step-remove:hover { color: var(--rb-ink); }

/* Remove is a submit button that has to read as the link beside it. */
.rb-step-remove {
   padding: 0;
   border: 0;
   background: none;
   font: inherit;
   cursor: pointer;
}

.rb-step-sep { margin: 0 .3rem; color: #c4c4c4; }

/* Stretched overlay: keeps the whole tile clickable while a step is empty,
   without wrapping a link around the Remove button of a filled one. */
.rb-step { position: relative; }
.rb-step-fill { position: absolute; inset: 0; z-index: 1; }

.rb-step-ico {
   flex: 0 0 26px;
   width: 26px;
   height: 26px;
   color: #7c7c7c;
}

.rb-step-ico svg { width: 100%; height: 100%; display: block; }

/* A filled step shows the chosen item instead of the outline. Slightly larger
   than the 26px icon, because a photograph needs the room to read. */
.rb-step-ico--photo {
   flex-basis: 34px;
   width: 34px;
   height: 34px;
   border-radius: 2px;
   overflow: hidden;
   background: #f4f4f4;
}

.rb-step-ico--photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

.rb-step-price {
   flex: 0 0 auto;
   font-size: .78rem;
   font-weight: 600;
   color: #8a6a3b;
}

/* ── Filters toggle ───────────────────────────────────────────────────── */

.rb-filters-toggle {
   display: inline-flex;
   align-items: center;
   gap: .55rem;
   margin: 1.2rem 0 1rem;
   padding: .45rem 1rem;
   border: 0;
   border-radius: 3px;
   background: var(--rb-dark);
   color: #fff;
   font-size: .78rem;
   letter-spacing: .02em;
   cursor: pointer;
}

.rb-filters-toggle svg { width: 13px; height: 13px; }

/* ── Layout ───────────────────────────────────────────────────────────── */

.rb-layout {
   display: grid;
   grid-template-columns: 22rem 1fr;
   gap: 1.6rem;
   align-items: start;
}

.rb-layout.is-collapsed { grid-template-columns: 1fr; }
.rb-layout.is-collapsed .rb-filters { display: none; }

/* ── Filter panel ─────────────────────────────────────────────────────── */

.rb-filters {
   background: var(--rb-panel);
   padding: 1.1rem 1.15rem 1.5rem;
   position: sticky;
   top: 1rem;
   max-height: calc(100vh - 2rem);
   overflow-y: auto;
}

.rb-filters-head {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 1rem;
   margin-bottom: 1.1rem;
}

.rb-filters-head h2 {
   font-size: 1.05rem;
   font-weight: 600;
   margin: 0;
}

.rb-reset {
   display: inline-flex;
   align-items: center;
   gap: .35rem;
   padding: .35rem .7rem;
   border: 1px solid #dcdcdc;
   border-radius: 3px;
   background: #ededed;
   color: #4a4a4a;
   font-size: .72rem;
   cursor: pointer;
}

.rb-reset:hover { background: #e3e3e3; color: var(--rb-ink); }
.rb-reset svg { width: 12px; height: 12px; }

.rb-group { margin-bottom: 1.35rem; }
.rb-group:last-child { margin-bottom: 0; }

/* "Advance Filter" — the grading-report groups, collapsed behind a divider the
   way the reference panel presents them. <details> so it works without JS. */
.rb-advanced {
   margin-top: 1.35rem;
   border-top: 1px solid var(--rb-line-soft);
   padding-top: .9rem;
}

.rb-advanced summary {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: .4rem;
   cursor: pointer;
   list-style: none;
   font-size: .8rem;
   color: var(--rb-muted);
}

.rb-advanced summary::-webkit-details-marker { display: none; }

.rb-advanced summary::after {
   content: "";
   width: .45rem;
   height: .45rem;
   border-right: 1px solid currentColor;
   border-bottom: 1px solid currentColor;
   transform: rotate(45deg) translate(-2px, -2px);
   transition: transform .15s;
}

.rb-advanced[open] summary::after { transform: rotate(-135deg) translate(-2px, -2px); }

.rb-advanced-body { margin-top: 1.1rem; }

/* Stock-number search. Borrows .rb-money's border and focus treatment so it
   sits in the panel as one of the family, but it has no currency prefix and no
   caption above it — the placeholder is the label. */
.rb-search {
   width: 100%;
   padding: .5rem .6rem;
   font-size: .8rem;
   color: var(--rb-ink);
   background: #fff;
   border: 1px solid #dedede;
   border-radius: 2px;
}

.rb-search::placeholder { color: #9a9a9a; }
.rb-search:focus { outline: none; border-color: var(--rb-ink); }

.rb-group h3 {
   font-size: .95rem;
   font-weight: 600;
   margin: 0 0 .7rem;
}

/* Tiles — style, shape */

.rb-tiles {
   display: grid;
   grid-template-columns: repeat(5, minmax(0, 1fr));
   gap: .5rem .4rem;
}

.rb-tile {
   position: relative;
   display: block;
   text-align: center;
   cursor: pointer;
}

.rb-tile input {
   position: absolute;
   inset: 0;
   width: 100%;
   height: 100%;
   margin: 0;
   opacity: 0;
   cursor: pointer;
}

.rb-tile-box {
   display: flex;
   align-items: center;
   justify-content: center;
   aspect-ratio: 1 / 1;
   padding: .3rem;
   background: #fff;
   border: 1px solid #dedede;
   border-radius: 2px;
   color: #6f6f6f;
   transition: border-color .15s, box-shadow .15s;
}

.rb-tile-box svg,
.rb-tile-box img {
   width: 100%;
   height: 100%;
   object-fit: contain;
   display: block;
}

.rb-tile-cap {
   display: block;
   margin-top: .3rem;
   font-size: .62rem;
   line-height: 1.25;
   color: #5f5f5f;
}

/* Select Style shows the picture uploaded against the style in the admin. Not
   every style has one, and a src that fails removes itself and marks the box —
   so this collapses the empty square to a short bar instead of leaving a large
   blank hole above the name. The border still carries the checked state, which
   is the part the customer needs to see. */
.rb-tile-box.is-blank {
   aspect-ratio: auto;
   min-height: 1.6rem;
   background: #fafafa;
   border-style: dashed;
}

.rb-tile:hover .rb-tile-box { border-color: #b0b0b0; }
.rb-tile input:checked + .rb-tile-box { border-color: var(--rb-ink); box-shadow: inset 0 0 0 1px var(--rb-ink); color: var(--rb-ink); }
.rb-tile input:checked ~ .rb-tile-cap { color: var(--rb-ink); font-weight: 600; }
.rb-tile input:focus-visible + .rb-tile-box { outline: 2px solid var(--rb-link); outline-offset: 2px; }

/* Metal swatches */

.rb-swatches { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.rb-swatch {
   display: flex;
   align-items: center;
   justify-content: center;
   width: 100%;
   max-width: 3.4rem;
   margin: 0 auto;
   aspect-ratio: 1 / 1;
   border-radius: 50%;
   font-size: .72rem;
   font-weight: 700;
   letter-spacing: .01em;
   border: 1px solid rgba(0, 0, 0, .07);
   transition: box-shadow .15s;
}

.rb-tile:hover .rb-swatch { box-shadow: 0 0 0 1px #b0b0b0; }
.rb-tile input:checked + .rb-swatch { box-shadow: 0 0 0 2px var(--rb-ink); }

/* Chips — used where a master has no icon (colour, clarity, cut, origin) */

/* Origin pills — two wide buttons side by side, each carrying its mark. Bigger
   and more deliberate than a chip, because this is the first choice on the
   panel and it splits the whole catalogue in two. */

.rb-pills { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem; }

.rb-pill {
   position: relative;
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
   gap: .4rem;
   padding: .55rem .5rem;
   background: #fff;
   border: 1px solid #dedede;
   border-radius: 2px;
   color: #5f5f5f;
   transition: border-color .15s, color .15s;
}

.rb-pill input {
   position: absolute;
   inset: 0;
   width: 100%;
   height: 100%;
   margin: 0;
   opacity: 0;
   cursor: pointer;
}

.rb-pill-ico,
.rb-pill-cap {
   pointer-events: none;
}

.rb-pill-ico { display: flex; width: 17px; height: 17px; flex: 0 0 17px; }
.rb-pill-ico svg { width: 100%; height: 100%; display: block; }

.rb-pill-cap { font-size: .76rem; line-height: 1.2; }

.rb-pill:hover { border-color: #b3b3b3; }

.rb-pill:has(input:checked) {
   border-color: var(--rb-ink);
   color: var(--rb-ink);
   font-weight: 600;
   box-shadow: inset 0 0 0 1px var(--rb-ink);
}

.rb-pill:has(input:focus-visible) { outline: 2px solid var(--rb-link); outline-offset: 2px; }

/* :has() is well supported now, but a browser without it would leave the
   selected pill indistinguishable — this class is set by ring-builder.js as a
   belt-and-braces fallback and styled identically. */
.rb-pill.is-on {
   border-color: var(--rb-ink);
   color: var(--rb-ink);
   font-weight: 600;
   box-shadow: inset 0 0 0 1px var(--rb-ink);
}

.rb-chips { display: flex; flex-wrap: wrap; gap: .3rem; }

.rb-chip { position: relative; cursor: pointer; }

.rb-chip input {
   position: absolute;
   inset: 0;
   width: 100%;
   height: 100%;
   margin: 0;
   opacity: 0;
   cursor: pointer;
}

.rb-chip span {
   display: block;
   padding: .3rem .6rem;
   font-size: .74rem;
   background: #fff;
   border: 1px solid #dedede;
   border-radius: 2px;
   color: #5f5f5f;
   transition: .15s;
}

.rb-chip input:checked + span { border-color: var(--rb-ink); color: var(--rb-ink); font-weight: 600; }
.rb-chip input:focus-visible + span { outline: 2px solid var(--rb-link); outline-offset: 2px; }

/* A master option nothing in stock matches. Still listed — the panel is a view
   of the admin's masters, not of what happens to be in the case today — but
   dimmed and inert, so it reads as "we do this, not right now" rather than as a
   filter that mysteriously returns nothing. */

.rb-tile.is-empty,
.rb-chip.is-empty { cursor: not-allowed; opacity: .38; }
.rb-tile.is-empty:hover .rb-tile-box { border-color: #dedede; }
.rb-tile.is-empty input,
.rb-chip.is-empty input { cursor: not-allowed; }

/* Price / carat range */

.rb-fields { display: flex; gap: 1.1rem; }
.rb-field { flex: 1 1 0; min-width: 0; }

/* :first-child matters — without it this also hits .rb-money and wins on
   specificity, flattening the currency prefix onto its own line. */
.rb-field > span:first-child {
   display: block;
   font-size: .72rem;
   color: var(--rb-muted);
   margin-bottom: .3rem;
}

.rb-money {
   display: flex;
   align-items: stretch;
   background: #fff;
   border: 1px solid #dedede;
   border-radius: 2px;
   overflow: hidden;
}

/* min-width, because the chip is otherwise only as wide as its text: the
   one-character "%" on the Depth and Table ranges started the number box
   further left than the "ct" and currency boxes did, so the Min and Max columns
   of the range blocks in one panel no longer lined up with each other. A floor
   wide enough for the widest prefix in use puts them all back on one grid. */
.rb-money i {
   display: flex;
   align-items: center;
   justify-content: center;
   min-width: 2rem;
   padding: 0 .5rem;
   font-style: normal;
   font-size: .74rem;
   color: #5f5f5f;
   border-right: 1px solid #ececec;
   background: #fafafa;
}

.rb-money input {
   flex: 1 1 auto;
   min-width: 0;
   width: 100%;
   border: 0;
   padding: .4rem .55rem;
   font-size: .8rem;
   background: #fff;
   color: var(--rb-ink);
}

.rb-money input:focus { outline: none; }
.rb-money:focus-within { border-color: var(--rb-ink); }

/* Dual-handle slider: two stacked range inputs, only their thumbs clickable. */

.rb-slider { position: relative; height: 26px; margin-top: 1rem; }

.rb-slider-track,
.rb-slider-fill {
   position: absolute;
   top: 50%;
   height: 3px;
   transform: translateY(-50%);
   border-radius: 2px;
   pointer-events: none;
}

.rb-slider-track { left: 0; right: 0; background: #d7d7d7; }
.rb-slider-fill { background: var(--rb-ink); }

.rb-slider input {
   position: absolute;
   left: 0;
   top: 0;
   width: 100%;
   height: 26px;
   margin: 0;
   padding: 0;
   background: none;
   border: 0;
   pointer-events: none;
   -webkit-appearance: none;
   appearance: none;
}

.rb-slider input:focus { outline: none; }

.rb-slider input::-webkit-slider-thumb {
   -webkit-appearance: none;
   appearance: none;
   pointer-events: auto;
   width: 13px;
   height: 13px;
   border-radius: 50%;
   background: var(--rb-ink);
   border: 0;
   cursor: grab;
}

.rb-slider input::-moz-range-thumb {
   pointer-events: auto;
   width: 13px;
   height: 13px;
   border-radius: 50%;
   background: var(--rb-ink);
   border: 0;
   cursor: grab;
}

.rb-hint { font-size: .68rem; color: var(--rb-muted); margin: .45rem 0 0; }

/* ── Results toolbar ──────────────────────────────────────────────────── */

.rb-toolbar {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 1rem;
   flex-wrap: wrap;
   margin-bottom: .9rem;
}

.rb-count { font-size: .82rem; color: #4a4a4a; margin: 0; }

.rb-toolbar-right { display: flex; align-items: center; gap: 1.1rem; }

.rb-view { display: flex; align-items: center; gap: .5rem; font-size: .8rem; color: #4a4a4a; }

.rb-view button {
   display: flex;
   padding: 2px;
   border: 0;
   background: none;
   color: #c3c3c3;
   cursor: pointer;
}

.rb-view button.is-on { color: var(--rb-ink); }
.rb-view svg { width: 17px; height: 17px; }

.rb-sort-wrap {
   display: flex;
   align-items: center;
   gap: .5rem;
   padding-left: 1.1rem;
   border-left: 1px solid var(--rb-line);
   font-size: .8rem;
   color: #4a4a4a;
}

.rb-sort {
   border: 0;
   background: none;
   font-size: .82rem;
   color: var(--rb-ink);
   cursor: pointer;
   padding: .2rem 0;
}

.rb-sort:focus { outline: none; }

/* ── Product grid ─────────────────────────────────────────────────────── */

.rb-grid {
   display: grid;
   grid-template-columns: repeat(4, minmax(0, 1fr));
   gap: .6rem;
}

.rb-card {
   position: relative;
   display: flex;
   flex-direction: column;
   padding: 1rem .85rem 1.15rem;
   background: #fff;
   border: 1px solid var(--rb-line-soft);
   text-align: center;
   transition: box-shadow .18s, border-color .18s;
}

.rb-card:hover { border-color: #d6d6d6; box-shadow: 0 3px 16px rgba(0, 0, 0, .09); }
.rb-card.is-chosen { border-color: var(--rb-ink); box-shadow: inset 0 0 0 1px var(--rb-ink); }

.rb-card-acts {
   position: absolute;
   top: .5rem;
   right: .55rem;
   display: flex;
   gap: .35rem;
   z-index: 2;
}

.rb-card-act {
   display: flex;
   align-items: center;
   justify-content: center;
   width: 26px;
   height: 26px;
   padding: 0;
   border: 1px solid #e6e6e6;
   border-radius: 50%;
   background: #fff;
   color: #9a9a9a;
   cursor: pointer;
   transition: .15s;
}

.rb-card-act svg { width: 13px; height: 13px; }
.rb-card-act:hover { color: var(--rb-ink); border-color: #bdbdbd; }
.rb-card-act.is-on { color: #b4364a; border-color: #b4364a; }
.rb-card-act.is-on svg { fill: currentColor; }

/* The whole card is the link to its detail page; the icon buttons sit above
   it, so they stay clickable in their own right. */
.rb-card-pick {
   position: absolute;
   inset: 0;
   z-index: 1;
   border: 0;
   padding: 0;
   background: none;
   cursor: pointer;
   font: inherit;
   text-decoration: none;
}

.rb-card-media {
   display: flex;
   align-items: center;
   justify-content: center;
   aspect-ratio: 1 / .84;
   margin-bottom: .75rem;
}

/* width/height rather than max-* so a small intrinsic SVG (the shape marks)
   scales up to the card like a photo does, instead of sitting tiny in the
   middle of it. object-fit keeps every aspect ratio intact. */
.rb-card-media img { width: 100%; height: 100%; object-fit: contain; }

.rb-card-media--icon img { width: auto; height: 62%; max-width: 100%; }

.rb-card-media .rb-ph {
   font-size: .7rem;
   color: var(--rb-muted);
   text-align: center;
   padding: .5rem;
}

.rb-card-name {
   margin: 0 0 .35rem;
   font-size: .82rem;
   line-height: 1.35;
   color: var(--rb-link);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
}

.rb-card-spec {
   margin: 0 0 .3rem;
   font-size: .7rem;
   color: var(--rb-muted);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
}

/* Shape compatibility. Same muted treatment as .rb-card-spec but a step
   quieter, and allowed to wrap — a mounting can fit half a dozen shapes, and
   truncating that to "Fits Round, Ova…" tells the visitor nothing. */
.rb-card-meta {
   margin: 0 0 .25rem;
   font-size: .66rem;
   line-height: 1.4;
   color: var(--rb-muted);
}

.rb-card-sku {
   margin: 0 0 .3rem;
   font-size: .66rem;
   letter-spacing: .04em;
   color: var(--rb-muted);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
}

.rb-card-price { margin: auto 0 0; font-size: .85rem; font-weight: 500; padding-top: .2rem; }

.rb-card-flag {
   position: absolute;
   top: .5rem;
   left: .55rem;
   z-index: 2;
   padding: .12rem .45rem;
   border-radius: 2px;
   background: var(--rb-ink);
   color: #fff;
   font-size: .6rem;
   letter-spacing: .05em;
   text-transform: uppercase;
}

/* List view */

.rb-grid.is-list { grid-template-columns: 1fr; }

.rb-grid.is-list .rb-card {
   flex-direction: row;
   align-items: center;
   gap: 1.4rem;
   text-align: left;
   padding: .9rem 1.1rem;
}

.rb-grid.is-list .rb-card-media {
   flex: 0 0 8.5rem;
   width: 8.5rem;
   aspect-ratio: 1 / 1;
   margin: 0;
}

.rb-grid.is-list .rb-card-body { flex: 1 1 auto; min-width: 0; }
.rb-grid.is-list .rb-card-price { margin: .4rem 0 0; }

/* ── Pagination ───────────────────────────────────────────────────────── */

.rb-pager {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 1rem;
   margin-top: 2rem;
   padding-top: 1.4rem;
   border-top: 1px solid var(--rb-line-soft);
   font-size: .82rem;
}

.rb-pager-edge { color: #4a4a4a; display: inline-flex; align-items: center; gap: .4rem; }
.rb-pager-edge.is-off { color: #bdbdbd; pointer-events: none; }
.rb-pager-edge:hover { color: var(--rb-ink); }

.rb-pager-nums { display: flex; align-items: center; gap: .3rem; }

.rb-pager-num,
.rb-pager-arrow {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   min-width: 28px;
   height: 28px;
   padding: 0 .35rem;
   border-radius: 50%;
   color: #4a4a4a;
}

.rb-pager-num:hover,
.rb-pager-arrow:hover { background: #f0f0f0; color: var(--rb-ink); }
.rb-pager-num.is-on { background: var(--rb-ink); color: #fff; }
.rb-pager-arrow.is-off { color: #cfcfcf; pointer-events: none; }
.rb-pager-gap { color: #a5a5a5; padding: 0 .15rem; }

/* ── Empty / flash / busy ─────────────────────────────────────────────── */

.rb-empty {
   padding: 3.5rem 1.5rem;
   text-align: center;
   color: var(--rb-muted);
   border: 1px dashed var(--rb-line);
}

.rb-empty h3 { margin: 0 0 .4rem; font-size: 1rem; color: var(--rb-ink); }
.rb-empty a { color: var(--rb-link); text-decoration: underline; }

.rb-flash { margin-bottom: 1rem; padding: .7rem 1rem; border-radius: 3px; font-size: .85rem; }
.rb-flash.ok { background: #f0f7f1; border: 1px solid #bcd9c2; color: #1f5130; }
.rb-flash.bad { background: #fdf2f2; border: 1px solid #e6c3c3; color: #8a2020; }

.rb-results { position: relative; min-height: 12rem; }
.rb-results.is-busy { opacity: .45; pointer-events: none; }

.rb-note {
   margin: 0 0 1rem;
   padding: .6rem .85rem;
   background: var(--rb-panel);
   border-left: 2px solid var(--rb-ink);
   font-size: .78rem;
   color: #4a4a4a;
}

.rb-note a { color: var(--rb-link); text-decoration: underline; }

/* ── Detail page ──────────────────────────────────────────────────────── */

.rb-back {
   display: inline-block;
   margin: 1.2rem 0 1.4rem;
   font-size: .8rem;
   color: var(--rb-muted);
}

.rb-back:hover { color: var(--rb-ink); }

.rb-detail {
   display: grid;
   grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
   gap: 2.5rem;
   align-items: start;
   padding-bottom: 2.5rem;
   border-bottom: 1px solid var(--rb-line-soft);
}

.rb-detail-media {
   display: flex;
   align-items: center;
   justify-content: center;
   aspect-ratio: 1 / 1;
   background: #fcfcfc;
   border: 1px solid var(--rb-line-soft);
}

.rb-detail-media img,
.rb-detail-media video { width: 100%; height: 100%; object-fit: contain; padding: 1.5rem; }
.rb-detail-media--icon img { width: auto; height: 52%; padding: 0; }

/* ── Gallery thumbnails ───────────────────────────────────────────────── */

.rb-gallery { display: flex; flex-direction: column; gap: .55rem; }

/* Scrolls sideways rather than wrapping into a second row that pushes the
   whole page down on a narrow screen. */
.rb-thumbs {
   display: flex;
   gap: .5rem;
   overflow-x: auto;
   padding-bottom: .2rem;
   scrollbar-width: thin;
}

.rb-thumb {
   position: relative;
   flex: 0 0 auto;
   width: 4.4rem;
   height: 4.4rem;
   padding: 0;
   border: 1px solid var(--rb-line-soft);
   border-radius: 2px;
   background: #fcfcfc;
   cursor: pointer;
   overflow: hidden;
}

.rb-thumb img,
.rb-thumb video { width: 100%; height: 100%; object-fit: cover; display: block; }

.rb-thumb.is-active { border-color: var(--rb-ink); }
.rb-thumb:focus-visible { outline: 2px solid var(--rb-link); outline-offset: 2px; }

.rb-thumb-play {
   position: absolute;
   inset: 0;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: .8rem;
   color: #fff;
   background: rgba(0, 0, 0, .35);
   pointer-events: none;
}

.rb-detail-body { padding-top: .3rem; }

.rb-detail-sku { margin: 0 0 .4rem; font-size: .78rem; color: var(--rb-muted); letter-spacing: .03em; }
.rb-detail-name { margin: 0 0 .5rem; font-size: 1.6rem; font-weight: 400; line-height: 1.2; }
.rb-detail-price { margin: 0 0 .6rem; font-size: 1.35rem; font-weight: 600; }

.rb-detail-desc {
   margin: .9rem 0 1.4rem;
   padding-top: 1.1rem;
   border-top: 1px solid var(--rb-line-soft);
   font-size: .88rem;
   line-height: 1.6;
   color: #4a4a4a;
}

/* Origin | colour | clarity, stated on one line under a stone's price. Shares
   .rb-detail-desc's rule above the block it opens, but stays a single compact
   line rather than a paragraph. */
.rb-detail-facts {
   margin: .9rem 0 0;
   padding-top: 1.1rem;
   border-top: 1px solid var(--rb-line-soft);
   font-size: .84rem;
   color: #4a4a4a;
}

.rb-detail-group { margin-bottom: 1.3rem; }

.rb-detail-group h3 {
   margin: 0 0 .6rem;
   font-size: .85rem;
   font-weight: 600;
}

.rb-detail-group h3 span { font-weight: 400; color: var(--rb-muted); }

/* Variant swatches sit in a row, not the sidebar's 4-up grid. */
.rb-swatches-inline {
   display: flex;
   flex-wrap: wrap;
   gap: .9rem;
   grid-template-columns: none;
}

.rb-swatches-inline .rb-tile { width: 4.2rem; }
.rb-swatches-inline .rb-tile.is-on .rb-swatch { box-shadow: 0 0 0 2px var(--rb-ink); }
.rb-swatches-inline .rb-tile.is-on .rb-tile-cap { color: var(--rb-ink); font-weight: 600; }

.rb-select {
   width: 100%;
   max-width: 22rem;
   padding: .6rem .7rem;
   font-size: .85rem;
   background: #fff;
   border: 1px solid #dedede;
   border-radius: 2px;
   color: var(--rb-ink);
}

.rb-detail-actions {
   display: flex;
   flex-wrap: wrap;
   gap: .6rem;
   margin-top: 1.5rem;
}

.rb-detail-actions .rb-btn { flex: 1 1 14rem; }

.rb-section-title {
   margin: 2.5rem 0 1rem;
   font-size: 1.25rem;
   font-weight: 400;
}

.rb-details-table {
   width: 100%;
   border-collapse: collapse;
   font-size: .85rem;
}

.rb-details-table th,
.rb-details-table td { padding: .7rem 1rem; text-align: left; font-weight: 400; }
.rb-details-table th { width: 16rem; color: var(--rb-muted); }
.rb-details-table tr:nth-child(odd) { background: #fafafa; }

.rb-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 900px) {
   .rb-detail { grid-template-columns: 1fr; gap: 1.5rem; }
   .rb-details-table th { width: 9rem; }
   .rb-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.rb-modal-more { margin-top: .5rem; }

/* ── Quick view ───────────────────────────────────────────────────────── */

.rb-modal {
   position: fixed;
   inset: 0;
   z-index: 2000;
   display: none;
   align-items: center;
   justify-content: center;
   padding: 1.5rem;
   background: rgba(0, 0, 0, .45);
}

.rb-modal.is-open { display: flex; }

.rb-modal-box {
   width: min(46rem, 100%);
   max-height: 90vh;
   overflow-y: auto;
   background: #fff;
   padding: 1.6rem;
   position: relative;
}

.rb-modal-close {
   position: absolute;
   top: .7rem;
   right: .8rem;
   width: 30px;
   height: 30px;
   border: 0;
   border-radius: 50%;
   background: #f2f2f2;
   color: #4a4a4a;
   font-size: 1.1rem;
   line-height: 1;
   cursor: pointer;
}

.rb-modal-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem; align-items: start; }
.rb-modal-media { display: flex; align-items: center; justify-content: center; aspect-ratio: 1/1; background: #fafafa; }
.rb-modal-media img { max-width: 100%; max-height: 100%; object-fit: contain; }
.rb-modal h3 { margin: 0 0 .3rem; font-size: 1.1rem; font-weight: 500; }
.rb-modal-price { font-size: 1.15rem; font-weight: 600; margin: 0 0 1rem; }

.rb-specs { list-style: none; margin: 0 0 1.3rem; padding: 0; font-size: .82rem; }
.rb-specs li { display: flex; justify-content: space-between; gap: 1rem; padding: .4rem 0; border-bottom: 1px solid var(--rb-line-soft); }
.rb-specs span:first-child { color: var(--rb-muted); }

.rb-btn {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: .4rem;
   padding: .65rem 1.1rem;
   border: 1px solid var(--rb-ink);
   border-radius: 2px;
   background: var(--rb-ink);
   color: #fff;
   font-size: .82rem;
   font-weight: 500;
   cursor: pointer;
}

/* The extra .rb-wrap outranks the site's own link colour, which would otherwise
   paint an <a class="rb-btn"> blue and underline it inside the dark pill. */
.rb-wrap .rb-btn,
.rb-modal .rb-btn { color: #fff; text-decoration: none; }
.rb-btn:hover { background: #000; color: #fff; }

.rb-btn-ghost { background: #fff; color: var(--rb-ink); }
.rb-wrap .rb-btn-ghost { color: var(--rb-ink); }
.rb-btn-ghost:hover { background: var(--rb-panel); color: var(--rb-ink); }

/* "Add to Cart" sits next to "Add this setting", which is the builder's own
   black CTA. The accent blue keeps the two apart at a glance: one continues the
   build, the other buys the mounting on its own. Listed after .rb-btn:hover so
   the shared hover rule cannot repaint it black. */
.rb-btn-cart,
.rb-btn-cart:hover { background: var(--rb-link); border-color: var(--rb-link); color: #fff; }
.rb-btn-cart:hover { background: #2f587c; border-color: #2f587c; }

.rb-btn-block { width: 100%; }
.rb-btn:disabled { opacity: .5; cursor: not-allowed; }

/* ── "Complete your ring" choice ──────────────────────────────────────── */

/* A short menu, not a panel — narrower than the quick view, and listed after
   .rb-modal-box so both overrides land. */
.rb-choice-box {
   width: min(34rem, 100%);
   padding: 2.6rem 1.6rem 1.6rem;
}

.rb-choice-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: .7rem;
}

.rb-choice-btn {
   padding: 1rem .9rem;
   border: 0;
   border-radius: 2px;
   background: #dce4e9;
   color: var(--rb-ink);
   font-family: inherit;
   font-size: .8rem;
   font-weight: 500;
   letter-spacing: .09em;
   text-transform: uppercase;
   text-align: center;
   cursor: pointer;
}

.rb-choice-btn:hover { background: #ccd7dd; }
.rb-choice-btn:disabled { opacity: .5; cursor: not-allowed; }

/* Diamond and gemstone pair up on the first row; the rest take a row each. */
.rb-choice-btn--wide { grid-column: 1 / -1; }

@media (max-width: 480px) {
   .rb-choice-grid { grid-template-columns: 1fr; }
   .rb-choice-btn { grid-column: 1 / -1; }
}

/* ── Responsive ───────────────────────────────────────────────────────── */

@media (max-width: 1400px) {
   .rb-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
   .rb-layout { grid-template-columns: 20rem 1fr; }
}

@media (max-width: 1100px) {
   .rb-steps { flex-basis: 100%; }
   .rb-head { gap: .9rem; }
}

@media (max-width: 900px) {
   .rb-layout { grid-template-columns: 1fr; }
   .rb-filters { position: static; max-height: none; }
   .rb-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
   .rb-step-ico { display: none; }
   .rb-step { --notch: 11px; }
   .rb-step-in { padding-right: .8rem; }
   .rb-modal-grid { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
   .rb-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .4rem; }
   .rb-card { padding: .7rem .5rem .9rem; }
   .rb-pager { flex-wrap: wrap; justify-content: center; }
   .rb-toolbar-right { gap: .7rem; }
   .rb-sort-wrap { padding-left: .7rem; }
   .rb-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
   .rb-wrap * { transition: none !important; }
}