/** Shopify CDN: Minification failed

Line 1181:5 Unexpected ".58"
Line 1187:78 Unterminated string token
Line 1188:76 Unterminated string token
Line 1197:76 Unterminated string token

**/
/* ══════════════════════════════════════════════════════════════
   TJC RING BUILDER — PROTOTYPE v0.1 (02 JUL 2026)
   assets/tjc-ring-builder.css
   All rules scoped under .tjc-rb — no global overrides.
   Palette: Brand Mist #BBC7D7 · Warm Stone #EDECE5 · Clean White #F9F9F9
            Near Black #2D2D2D · Warm Charcoal #4A4A4A · Stone Grey #D9D6D0
   ══════════════════════════════════════════════════════════════ */

.tjc-rb { font-family: 'Montserrat', sans-serif; font-size: 13px; color: #4A4A4A; padding-bottom: 80px; }
/* safety net: no image inside the builder may ever exceed its container */
.tjc-rb img { max-width: 100%; }

/* full page width with theme-consistent gutters, capped on very wide monitors
   (or a browser zoomed far out, which widens the effective viewport the same
   way) so the layout doesn't stretch edge-to-edge indefinitely. Inert below
   1680px — normal desktop review widths are unaffected. */
.tjc-rb.page-width { max-width: 1680px; width: 100%; box-sizing: border-box; margin: 0 auto; padding-left: clamp(20px, 3.5vw, 56px); padding-right: clamp(20px, 3.5vw, 56px); }

/* ── Softened corners, applied globally ── */
.tjc-rb__card, .tjc-rb__stone, .tjc-rb__config-form, .tjc-rb__rail, .tjc-rb__summary,
.tjc-rb__pers-card, .tjc-rb__tray, .tjc-rb__craft, .tjc-rb__trust, .tjc-rb__filters,
.tjc-rb__concierge, .tjc-rb__step, .tjc-rb__modal-content, .tjc-rb__boot { border-radius: 0; }
.tjc-rb__card, .tjc-rb__stone { overflow: hidden; }
.tjc-rb__cta, .tjc-rb__stone-btn, .tjc-rb__pill, .tjc-rb__select, .tjc-rb__input,
.tjc-rb__range-pair input, .tjc-rb__toggle, .tjc-rb__config-thumb, .tjc-rb__hint-link input,
.tjc-rb__hint-copy, .tjc-rb__pers-soon-badge { border-radius: 0; }
.tjc-rb__toggle { overflow: hidden; }

/* deep-entry (?product=handle): the catalogue is never shown, so hide it
   before the app boots — prevents the grid flashing on slow loads */
.tjc-rb-deep-entry .tjc-rb__filters,
.tjc-rb-deep-entry .tjc-rb__grid { display: none !important; }

/* boot placeholder — visible only on deep entry, removed when the app mounts */
.tjc-rb__boot { display: none; }
.tjc-rb-deep-entry .tjc-rb__boot { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 70px 20px; color: #939292; font-size: 12px; letter-spacing: 0.06em; }
.tjc-rb__boot-ring { width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid #D9D6D0; border-top-color: #BBC7D7; animation: tjcRbSpin 0.9s linear infinite; }
@keyframes tjcRbSpin { to { transform: rotate(360deg); } }

/* ── Selling-points list bullets (Seamless Journey section, this page only) ──
   Upright diamond profile in fine line work — girdle, crown to table, pavilion —
   replacing the default marker. Own drawing, encoded inline. */
.section-rich-text .rte ul li::before {
  content: "";
  width: 14px; height: 14px;
  top: 0.35em;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none"><path d="M2.5 6h11M2.5 6L5.2 2.8h5.6L13.5 6M2.5 6L8 13.8 13.5 6M5.2 2.8 8 6l2.8-3.2M8 6v7.8" stroke="%234A4A4A" stroke-width="0.9" stroke-linejoin="round" stroke-linecap="round"/></svg>') no-repeat center / contain;
}

/* ── Journey image-with-text, tablet band (v1.34) ──
   LUXE stacks the section below 950px but keeps the text block at its narrow
   450px cap, left-aligned — lopsided under a full-bleed image (mobile <750px is
   already centred by the theme; ≥950px sits beside the image). Centre it in the
   stacked tablet band to match the mobile treatment. Applies to both templates
   (fork + builder page) via the shared section key. */
@media screen and (min-width: 750px) and (max-width: 949px) {
  [id*="__image_text_journey"] .image-with-text--text .image-with-text--content {
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
  }
}

/* ── Header ── */
.tjc-rb__header { text-align: center; max-width: 620px; margin: 28px auto 40px; }
.tjc-rb__eyebrow { font-size: 11px; letter-spacing: 0.22em; text-transform: lowercase; color: #4A4A4A; margin: 0 0 10px; }
.tjc-rb__title { font-family: 'Marigold', serif; font-size: 42px; font-weight: 400; color: #2D2D2D; margin: 0 0 14px; letter-spacing: 0.02em; }
.tjc-rb__intro { font-size: 13px; line-height: 1.8; color: #4A4A4A; margin: 0; }

/* ── Step navigation — segmented bar ── */
/* v0.71: trimmed the gap above the step bar (banner→steps) more than below it
   (steps→content) — Omri felt desktop's top space read heavier than the
   bottom, which the old 60px/48px split actually caused rather than fixed.
   36px/40px keeps a touch more room below (where the ring image/content sits)
   than above (right under the banner), closing the imbalance. Base rule,
   shared with iPad Pro per the established box-style pattern (v0.56/v0.69). */
/* v1.02: more air — banner→bar 36→52px, bar→panel 40→56px (Omri: "sitting
   too close"); the ≤1023px band keeps its own tighter margins */
.tjc-rb__steps { display: flex; align-items: stretch; gap: 12px; margin: 52px 0 56px; max-width: none; }
/* NOT sticky (reverted by Omri, 6 Jul) — the bar scrolls away naturally. What
   stays is the scroll offset below: when switching steps, the target panel lands
   low enough that the bar remains in view, so you always see where you are. */
@media (min-width: 750px) {
  .tjc-rb__panel { scroll-margin-top: calc(var(--site-header-height-desktop, 120px) + 150px); }
}
@media (max-width: 749px) {
  .tjc-rb__panel { scroll-margin-top: calc(var(--site-header-height-mobile, 80px) + 40px); }
}
/* segments in true neutral grey (grey-on-grey, TMC register — the earlier warm
   tint read beige against white imagery once the bar went sticky), with a quiet
   keyline and corners eased a touch off dead-square */
/* v0.69: trimmed top/bottom padding (24px→16px) — Omri felt the boxes read
   too thick/square on desktop; this keeps the same horizontal footprint but
   flattens the box into a more refined, elongated shape. Left/right padding
   untouched (22px) so badge/text spacing is unaffected. This is the BASE box
   style, shared with iPad Pro (1024–1366px) per v0.56's "revert to box style"
   decision — the slimmer proportions apply there too, which is expected. */
.tjc-rb__step { display: flex; align-items: center; gap: 14px; flex: 1 1 0; text-align: left; background: #E9E9E9; border: 1px solid #D9D9D9; border-radius: 3px; padding: 16px 22px; cursor: pointer; font-family: inherit; transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease; min-width: 0; }
/* active step: soft halo on all sides (not just below) — the box appears to
   lift gently off the bar rather than cast a hard drop shadow */
.tjc-rb__step.is-active { background: #fff; border-color: #D6D6D6; box-shadow: 0 3px 16px rgba(26, 26, 26, 0.09), 0 0 24px rgba(26, 26, 26, 0.055); }
.tjc-rb__step.is-done { background: #F0F0F0; }
.tjc-rb__step:disabled { cursor: default; opacity: 0.6; }
.tjc-rb__step.is-done:not(:disabled):hover, .tjc-rb__step:not(:disabled):not(.is-active):hover { border-color: #BFBFBF; }
/* brand-mist badge with black numeral — small signature moment in the step bar */
.tjc-rb__step-badge { flex: 0 0 27px; width: 27px; height: 27px; border-radius: 50%; border: 1px solid #BBC7D7; color: #2D2D2D; background: #BBC7D7; display: flex; align-items: center; justify-content: center; font-size: 12px; }
/* completed steps keep the SAME mist badge as pending ones — black tick swaps in
   for the numeral, nothing else changes. One badge treatment across all states. */
.tjc-rb__step-text { display: flex; flex-direction: column; gap: 3px; flex: 0 0 auto; }
/* rev 21 (Omri, 19 Aug): the top row ("Select your" / "Personalise your" /
   "Ring") now reads as quiet caps - same treatment as the rail's "Guidance
   at every step" label (11px-family caps, wider tracking, medium weight) -
   instead of sentence case. The Marigold step name below is untouched. */
.tjc-rb__step-sub { font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 500; color: #2D2D2D; white-space: nowrap; }
.tjc-rb__step-name { font-family: 'Marigold', serif; font-size: 15.5px; letter-spacing: 0.1em; text-transform: uppercase; color: #2D2D2D; white-space: nowrap; line-height: 1.1; }
/* mobile-only short labels for steps 3/4 — hidden at desktop widths.
   Threshold matches the widened mobile band below (749 → 1023 → 1366px). */
.tjc-rb__step-shortname { display: none; }
/* v0.56: narrowed from ≤1366 to ≤1023 — box style is back at iPad Pro
   (1024–1366), and boxes show the full name + sub every time (see base
   rules above), so the shortname swap is only needed once boxes dissolve
   into the compact circle stepper below. */
@media (max-width: 1023px) { .tjc-rb__step-shortname { display: block; } }
.tjc-rb__step-meta { flex: 1 1 auto; min-width: 24px; text-align: right; padding: 0 10px 0 14px; font-size: 11.5px; color: #2D2D2D; white-space: nowrap; }
.tjc-rb__step-icon { flex: 0 0 30px; width: 30px; height: 30px; color: #2D2D2D; }
@media (max-width: 1280px) { .tjc-rb__step-icon { display: none; } }
.tjc-rb__step.is-active .tjc-rb__step-icon, .tjc-rb__step.is-done .tjc-rb__step-icon { color: #2D2D2D; }
.tjc-rb__step-icon svg { width: 100%; height: 100%; }
/* v0.99: step-1 icon is the licensed solitaire on a wide 140x80 canvas — give it
   a wide box at its native ratio so it reads at bar height */
.tjc-rb__step[data-rb-step-link="1"] .tjc-rb__step-icon { flex: 0 0 52px; width: 52px; }
/* Shape diagrams (stoneSVG, 64-unit grid) use currentColor + relative stroke
   widths — they inherit each container's color and need no per-context boosts. */

/* ── Panels ── */
.tjc-rb__panel[hidden] { display: none; }

/* ── Filters (step 1) ── */
.tjc-rb__filters { display: flex; flex-wrap: wrap; gap: 28px; margin-bottom: 30px; padding: 22px 24px; background: #EDECE5; }
.tjc-rb__filter-group { display: flex; flex-direction: column; gap: 10px; }
.tjc-rb__filter-label { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: #2D2D2D; font-weight: 500; }
.tjc-rb__pills { display: flex; flex-wrap: wrap; gap: 8px; }

/* Layer-1 filter tiles — vector + label */
.tjc-rb__ftiles { display: flex; flex-wrap: wrap; gap: 10px; }
.tjc-rb__ftile { display: flex; flex-direction: column; align-items: center; gap: 6px; background: #fff; border: 1px solid #E7E4DD; border-radius: 0; padding: 10px 8px 8px; width: 76px; cursor: pointer; font-family: inherit; transition: border-color 0.2s ease, box-shadow 0.2s ease; }
.tjc-rb__ftile:hover { border-color: #BBC7D7; }
.tjc-rb__ftile.is-on { border-color: #2D2D2D; box-shadow: 0 2px 10px rgba(26,26,26,0.06); }
.tjc-rb__ftile-icon { width: 34px; height: 34px; color: #2E3338; display: flex; align-items: center; justify-content: center; }
.tjc-rb__ftile-icon svg { width: 100%; height: 100%; }
.tjc-rb__ftile-icon .tjc-rb__swatch-dot { width: 26px; height: 26px; }
.tjc-rb__ftile-label { font-size: 9.5px; letter-spacing: 0.03em; color: #4A4A4A; text-align: center; line-height: 1.3; }
.tjc-rb__ftile.is-on .tjc-rb__ftile-label { color: #2D2D2D; font-weight: 500; }
.tjc-rb__pill { background: #fff; border: 1px solid transparent; padding: 8px 16px; font-family: inherit; font-size: 12px; color: #4A4A4A; cursor: pointer; transition: border-color 0.2s ease, background 0.2s ease; }
.tjc-rb__pill:hover { border-color: #BBC7D7; }
.tjc-rb__pill.is-on { background: #BBC7D7; color: #2D2D2D; border-color: #BBC7D7; }
.tjc-rb__pills--small .tjc-rb__pill { padding: 6px 12px; font-size: 11px; }

/* ── Setting grid ── */
.tjc-rb__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.tjc-rb__card { background: #F9F9F9; cursor: pointer; border: 1px solid transparent; transition: border-color 0.25s ease; text-align: left; padding: 0; font-family: inherit; }
.tjc-rb__card:hover { border-color: #BBC7D7; }
.tjc-rb__card-media { position: relative; aspect-ratio: 1; overflow: hidden; background: #F9F9F9; }
.tjc-rb__card-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: opacity 0.3s ease; }
.tjc-rb__card-media img.hover { position: absolute; inset: 0; opacity: 0; }
.tjc-rb__card:hover .tjc-rb__card-media img.hover { opacity: 1; }
.tjc-rb__card-body { padding: 14px 16px 18px; }
.tjc-rb__card-title { font-size: 12.5px; color: #2D2D2D; margin: 0 0 6px; line-height: 1.5; font-weight: 500; }
.tjc-rb__card-price { font-size: 12px; color: #4A4A4A; margin: 0; }

/* ── Setting config ── */
.tjc-rb__back { background: none; border: none; font-family: inherit; font-size: 12px; color: #4A4A4A; cursor: pointer; padding: 0; margin-bottom: 22px; letter-spacing: 0.04em; }
.tjc-rb__back:hover { color: #2D2D2D; }
/* TJC-PDP-V2 19 Aug: config/summary galleries re-proportioned to the finished PDP design (Omri: 'same 60/40 split, larger thumbnails'). Measured on the pushed Astra PDP at 1470w: media column 790px (~58% of the inner grid), media-to-text gap 78px, thumbs 70px. Was 1fr 1fr / 64px / 68px thumbs / media capped 760px centred. */
/* rev 17 (Omri, 19 Aug): the 58fr/37fr split left dead space between the
   image and the form - the image is bound to the form's height (~630px,
   rev 16), so a percentage media column outgrows it at wide viewports and
   the leftover read as a hole in the middle. Fixed-width columns instead:
   media 714px (70 thumb + 14 gap + 630 image), form 502px (its measured
   PDP-matched width), gap 78px = the measured media-to-text gap on the
   approved Astra PDP. Leftover viewport now lands AFTER the form (his call:
   "a touch more border with the end of the page, not in the middle"). */
.tjc-rb__config-layout { display: grid; grid-template-columns: minmax(0, 714px) minmax(0, 502px); gap: 78px; justify-content: start; align-items: start; }
/* media block: vertical thumb rail on the LEFT (TMC pattern) so the media
   column stays shallow and its bottom lands near the info column's */
.tjc-rb__config-media { position: sticky; top: 24px; max-width: none; width: 100%; justify-self: stretch; display: flex; gap: 14px; align-items: flex-start; }
.tjc-rb__config-media > img { flex: 1; min-width: 0; width: auto; aspect-ratio: 1 / 1; object-fit: contain; display: block; background: #F2F1EF; border-radius: 0; }
.tjc-rb__config-thumbs { order: -1; display: flex; flex-direction: column; gap: 10px; margin-top: 0; flex: 0 0 70px; }
.tjc-rb__config-thumb { width: 70px; height: 70px; padding: 0; border: 1px solid #E7E4DD; background: #F9F9F9; cursor: pointer; transition: border-color 0.2s ease; }
.tjc-rb__config-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tjc-rb__config-thumb.is-on, .tjc-rb__config-thumb:hover { border-color: #BBC7D7; }
/* v1.02: letter-spacing 0.08em→0 — matches the theme's Marigold heading standard (settings h1/h2_letter_spacing = 0), same as product-page titles */
.tjc-rb__config-title { font-family: 'Marigold', serif; font-size: 19px; font-weight: 400; letter-spacing: 0; line-height: 1.25; text-transform: uppercase; color: #2D2D2D; margin: 0 0 8px; } /* v1.06: line-height 1.25 = the theme's h1-h6 standard */
.tjc-rb__config-price { font-family: 'Montserrat', sans-serif; font-size: 15px; font-weight: 600; letter-spacing: 0.04em; color: #2D2D2D; margin: 0 0 28px; }
.tjc-rb__price-note { font-family: 'Montserrat', sans-serif; font-size: 11.5px; font-weight: 300; color: #4A4A4A; letter-spacing: 0; }

.tjc-rb__field { margin-bottom: 24px; }
/* the ring-size field's hint sits directly above the shared error line (and,
   when there's no error, directly above the CTA button) — the standard 24px
   field gap reads as dead air there, so it's tightened just for this field */
.tjc-rb__field:has(#rb-ring-size) { margin-bottom: 12px; }
.tjc-rb__field-header { display: flex; justify-content: flex-start; align-items: center; gap: 7px; margin-bottom: 10px; }
.tjc-rb__field-header .tjc-rb__link-btn, .tjc-rb__field-header .tjc-rb__counter { margin-left: auto; }
.tjc-rb__field-header .tjc-rb__field-label, .tjc-rb__field-header .tjc-rb__filter-label { margin-bottom: 0; }
.tjc-rb__field-label { display: block; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: #2D2D2D; font-weight: 500; margin-bottom: 10px; }
.tjc-rb__hint { font-size: 11px; color: #939292; line-height: 1.6; margin: 8px 0 0; }
.tjc-rb__counter { font-size: 10px; color: #939292; }

/* metal swatches */
.tjc-rb__swatches { display: flex; flex-wrap: wrap; gap: 10px; }
.tjc-rb__swatch { display: flex; flex-direction: column; align-items: center; gap: 6px; background: none; border: none; cursor: pointer; font-family: inherit; padding: 4px; width: 74px; }
/* every dot (solid AND two-tone) carries the SAME glass sheen overlay, so all
   six read as one family — the sheen lives here, not in the fills */
.tjc-rb__swatch-dot { position: relative; overflow: hidden; width: 34px; height: 34px; border-radius: 50%; border: 1px solid #D9D6D0; box-sizing: border-box; transition: box-shadow 0.2s ease; }
.tjc-rb__swatch-dot::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: linear-gradient(160deg, rgba(255,255,255,0.5) 4%, rgba(255,255,255,0) 40%); pointer-events: none; }
.tjc-rb__swatch.is-on .tjc-rb__swatch-dot { box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px #BBC7D7; }
.tjc-rb__swatch-label { font-size: 10px; color: #4A4A4A; line-height: 1.3; text-align: center; }
.tjc-rb__swatch.is-on .tjc-rb__swatch-label { color: #2D2D2D; font-weight: 500; }
.tjc-rb__swatch:disabled { opacity: 0.3; cursor: default; }
/* metal dot colours */
/* Metal swatches — radial "orb" gradients (bright off-centre highlight →
   deeper rim) so each dot reads as polished metal, not a flat chip.
   White gold runs WARM greys; platinum runs COOL and a touch deeper —
   the two now separate visually on screen. */
/* Stop values sampled from Cullen's swatch gradients (colour values are facts):
   yellow #fff5d6→#e6d599→#c4b076 · rose #fff1eb→#e3ac9a→#c28a76 ·
   white gold (warm greys) #fbfbfb→#d8d4d0→#ccc7c2 · platinum base #dcdcdc (cool).
   Radials are CENTRED (soft polished dome) — the earlier off-centre highlight
   read as a billiard ball. */
/* fills are gentle — low centre-to-rim contrast (the sphere/billiard illusion
   came from a bright centre against a dark rim); the ::after sheen adds life */
.dot--yellow { background: radial-gradient(circle, #F3E4B4 0%, #E6D599 55%, #D2BC85 100%); }
.dot--white { background: radial-gradient(circle, #F0EDEA 0%, #E0DCD8 55%, #CCC7C2 100%); }
.dot--rose { background: radial-gradient(circle, #F3D0C2 0%, #E3AC9A 55%, #CE9884 100%); }
.dot--platinum { background: radial-gradient(circle, #ECEDEE 0%, #DCDCDC 55%, #C7C9CB 100%); }
/* two-tones: ONE linear gradient — geometrically straight diagonal split with a
   soft hairline at the boundary; each side carries its own gentle sheen */
.dot--wy { background: linear-gradient(135deg, #FBFBFB 0%, #D8D4D0 34%, #CCC7C2 49.6%, rgba(74,74,74,0.35) 49.6%, rgba(74,74,74,0.35) 50.4%, #F6E8C0 50.4%, #E6D599 70%, #C4B076 100%); }
.dot--wr { background: linear-gradient(135deg, #FBFBFB 0%, #D8D4D0 34%, #CCC7C2 49.6%, rgba(74,74,74,0.35) 49.6%, rgba(74,74,74,0.35) 50.4%, #F8E4DC 50.4%, #E3AC9A 70%, #C28A76 100%); }

/* karat toggle */
.tjc-rb__toggle { display: inline-flex; border: 1px solid #D9D6D0; }
.tjc-rb__toggle-btn { background: #fff; border: none; font-family: inherit; font-size: 12px; color: #4A4A4A; padding: 9px 22px; cursor: pointer; transition: background 0.2s ease; }
.tjc-rb__toggle-btn.is-on { background: #BBC7D7; color: #2D2D2D; }
.tjc-rb__toggle-btn:disabled { opacity: 0.35; cursor: default; }

/* inputs */
.tjc-rb__select, .tjc-rb__input { width: 100%; padding: 12px 14px; background: #fff; border: 1px solid #D9D6D0; border-radius: 0; font-family: inherit; font-size: 12px; color: #2D2D2D; box-sizing: border-box; appearance: auto; }
.tjc-rb__select:focus, .tjc-rb__input:focus { outline: none; border-color: #BBC7D7; }
.tjc-rb__select--inline { width: auto; height: 34px; padding: 0 32px 0 12px; font-size: 11px; letter-spacing: 0.04em; color: #4A4A4A; border-color: #D9D6D0; }
.tjc-rb__input::placeholder { color: #939292; }

/* high specificity so the theme's global <a> styling cannot diverge the two elements */
/* quiet text links — sentence case, 11px (Size guide, Edit, Remove, Clear filters, Skip) */
.tjc-rb a.tjc-rb__link-btn, .tjc-rb button.tjc-rb__link-btn,
.tjc-rb a.tjc-rb__link-btn:visited, .tjc-rb a.tjc-rb__link-btn:hover {
  background: none; border: none; padding: 0;
  font-family: 'Montserrat', sans-serif; font-size: 11px; font-weight: 400;
  letter-spacing: 0.04em; text-transform: none; color: #939292;
  text-decoration: underline; text-decoration-thickness: 1px; text-decoration-color: currentColor;
  text-underline-offset: 3px; cursor: pointer; line-height: 1.5;
}
/* action links keep their full-caps presence AND the darker charcoal: Send a hint ·
   Book a consultation. Utility links (Edit/Remove/Size guide/Clear/Skip) sit in
   soft grey per the TMC pattern — present, never demanding. Hover restores depth.
   :hover/:visited included at matching specificity — the base rule's a:hover
   variant was overriding the caps on hover, making the text visibly reflow */
.tjc-rb a.tjc-rb__link-btn--caps, .tjc-rb a.tjc-rb__link-btn--caps:hover, .tjc-rb a.tjc-rb__link-btn--caps:visited,
.tjc-rb button.tjc-rb__link-btn--caps, .tjc-rb button.tjc-rb__link-btn--caps:hover { text-transform: uppercase; font-size: 11px; letter-spacing: 0.08em; color: #4A4A4A; }
.tjc-rb a.tjc-rb__link-btn--caps:hover, .tjc-rb button.tjc-rb__link-btn--caps:hover { color: #2D2D2D; }
.tjc-rb a.tjc-rb__link-btn:hover, .tjc-rb button.tjc-rb__link-btn:hover { color: #2D2D2D; }
.tjc-rb a.tjc-rb__link-btn--nowrap { white-space: nowrap; font-size: 10px; letter-spacing: 0.06em; }
.tjc-rb__link-btn:hover { color: #2D2D2D; }
.tjc-rb__link-btn--center { display: block; text-align: center; margin-top: 16px; }

.tjc-rb__error { font-family: 'Montserrat', sans-serif; font-style: normal; font-size: 12px; color: #b44a4a; margin: 0 0 14px; }

/* info ⓘ buttons — solid grey disc, white glyph (trial 8 Jul; the outlined
   mist version read faint at 15px). Styled here so the SVGs stay untouched:
   first circle = the disc, path + small circle = the "i". Revert = restore
   the old color rule and drop the three overrides below. */
.tjc-rb__info { background: none; border: none; padding: 0; width: 13px; height: 13px; color: #A8A8A6; cursor: pointer; display: inline-flex; align-items: center; transition: color 0.2s ease; }
.tjc-rb__info:hover { color: #6F6F6D; }
.tjc-rb__info svg { width: 100%; height: 100%; }
.tjc-rb__info svg circle:first-of-type { fill: currentColor; stroke: currentColor; }
.tjc-rb__info svg path { stroke: #fff; }
.tjc-rb__info svg circle:last-of-type { fill: #fff; }
.tjc-rb__field-header .tjc-rb__info { position: relative; top: -1px; }

/* discrete slider scale labels */
.tjc-rb__scale { display: flex; justify-content: space-between; font-size: 10px; color: #939292; padding: 0 4px; margin-top: 2px; letter-spacing: 0.04em; }

/* assist links row */
.tjc-rb__assist { display: flex; justify-content: center; align-items: baseline; gap: 26px; margin-top: 22px; flex-wrap: wrap; }
.tjc-rb__tray-actions { display: flex; flex-direction: column; align-items: center; gap: 8px; }

/* info + hint modal content */
.tjc-rb__modal-content--info { max-width: 520px; padding: 34px 36px 30px; }
/* wider variant (precious metal popup) — copy spreads, modal sits shorter */
.tjc-rb__modal-content--wide { max-width: 640px; }
.tjc-rb__modal-title { font-family: 'Marigold', serif; font-size: 17px; font-weight: 400; letter-spacing: 0.1em; text-transform: uppercase; color: #2D2D2D; text-align: center; margin: 0 0 12px; } /* v1.15: 21→17px */
.tjc-rb__modal-body { font-size: 11px; line-height: 1.8; color: #4A4A4A; text-align: center; } /* v1.14: →11px (TMC/Cullen-comparable) */
.tjc-rb__modal-body p { margin: 0 0 12px; }
/* coded ring-size conversion table — clean on desktop and mobile; the modal
   body scrolls, so the header row stays pinned while sizes scroll beneath it */
.tjc-rb__size-table { width: 100%; border-collapse: collapse; margin-top: 16px; font-size: 11.5px; text-align: center; }
.tjc-rb__size-table th { position: sticky; top: 0; background: #EDECE5; color: #2D2D2D; font-weight: 500; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; padding: 10px 6px; }
.tjc-rb__size-table td { padding: 7px 6px; border-bottom: 1px solid #EFEDE8; color: #4A4A4A; }
.tjc-rb__size-table td:nth-child(2) { color: #2D2D2D; font-weight: 500; }
.tjc-rb__size-table tbody tr:nth-child(odd) { background: #FAFAF8; }

/* compact variant for content-dense popups (Metal Karat) — smaller type, tighter rhythm */
/* centre-aligned like every other popup — one register across all modals */
.tjc-rb__info-compact { font-size: 11px; line-height: 1.75; text-align: center; }
.tjc-rb__info-compact p { margin: 0 0 9px; }
.tjc-rb__info-compact h4 { margin: 13px 0 4px; }
.tjc-rb__info-compact h4:first-child { margin-top: 12px; }

/* metal composition bars — own drawing: gold/platinum share vs alloy */
.tjc-rb__karat-bars { margin-top: 16px; display: flex; flex-direction: column; gap: 7px; }
.tjc-rb__karat-bar { display: flex; align-items: center; gap: 10px; }
.tjc-rb__karat-bar-name { flex: 0 0 96px; font-size: 9.5px; font-weight: 600; letter-spacing: 0.05em; color: #2D2D2D; }
.tjc-rb__karat-bar-track { flex: 1; display: flex; height: 24px; overflow: hidden; }
.tjc-rb__karat-bar-fill, .tjc-rb__karat-bar-rest { display: flex; align-items: center; justify-content: center; font-size: 9px; font-weight: 500; letter-spacing: 0.03em; text-transform: none; white-space: nowrap; overflow: hidden; }
.tjc-rb__karat-bar-fill--gold { background: linear-gradient(180deg, #EBDCA8, #DCC685); color: #5C4F2E; }
.tjc-rb__karat-bar-fill--pt { background: linear-gradient(180deg, #E4E5E7, #CFD1D4); color: #4A4A4A; }
.tjc-rb__karat-bar-rest { flex: 1; background: #EDECE5; color: #939292; }

/* carat popup visual: the 4Cs page image holds three size rows — this crop
   isolates the MIDDLE row so the aid stays a single quiet band on screen */
.tjc-rb__carat-visual { margin-top: 16px; height: 84px; overflow: hidden; }
/* the source photo carries a pale grey backdrop — a light brightness lift pushes
   it to pure white so the stones float on the popup, no image editing required */
.tjc-rb__carat-visual img { width: 100%; height: 100%; object-fit: cover; object-position: center 47%; display: block; filter: brightness(1.07) contrast(1.03); }

/* side-by-side comparison figures inside info popups (labels above images) */
.tjc-rb__info-figures { display: flex; gap: 14px; margin: 18px 0 4px; }
.tjc-rb__info-figures figure { flex: 1; margin: 0; min-width: 0; }
.tjc-rb__info-figures figcaption { font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: #2D2D2D; font-weight: 500; margin-bottom: 8px; }
.tjc-rb__info-figures img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; border: 1px solid #E7E4DD; box-sizing: border-box; }

/* per-metal subheads inside info popups (karat breakdown etc.) */
.tjc-rb__modal-body h4 { font-family: 'Montserrat', sans-serif; font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: #2D2D2D; margin: 16px 0 4px; }
.tjc-rb__modal-body a { color: #2D2D2D; text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
.tjc-rb__hint-names { display: flex; gap: 8px; margin: 16px 0 0; }
.tjc-rb__hint-names input { flex: 1; min-width: 0; padding: 11px 12px; border: 1px solid #D9D6D0; border-radius: 0; font-family: inherit; font-size: 11.5px; color: #2D2D2D; background: #fff; }
.tjc-rb__hint-names input::placeholder { color: #939292; }
.tjc-rb__hint-link { display: flex; gap: 8px; margin: 10px 0 6px; }
.tjc-rb__hint-link input { flex: 1; padding: 11px 12px; border: 1px solid #D9D6D0; font-family: inherit; font-size: 11.5px; color: #4A4A4A; background: #F9F9F9; }
.tjc-rb__hint-copy { display: flex; align-items: center; justify-content: center; background: #fff; border: 1px solid #BBC7D7; color: #2D2D2D; padding: 0 13px; cursor: pointer; transition: background 0.2s ease; }
.tjc-rb__hint-copy:hover { background: #BBC7D7; }
.tjc-rb__hint-status { font-size: 11px; color: #939292; min-height: 15px; margin: 0 0 10px; }
/* email CTA in the hint modal: quieter — smaller type, tighter tracking */
.tjc-rb__cta--modal { display: block; text-align: center; text-decoration: none; box-sizing: border-box; font-size: 11px; letter-spacing: 0.08em; }

.tjc-rb__cta { width: 100%; background: #BBC7D7; color: #2D2D2D; border: 1px solid #BBC7D7; font-family: inherit; font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; padding: 16px 20px; cursor: pointer; transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease; }
.tjc-rb__cta:hover { background: #A9B8CB; border-color: #A9B8CB; }
.tjc-rb__cta:disabled { opacity: 0.4; cursor: default; }

/* ── Step 2: diamond browser ── */
.tjc-rb__diamond-layout { display: grid; grid-template-columns: 310px 1fr; gap: 36px; align-items: start; }
.tjc-rb__rail { background: #EDECE5; padding: 26px 24px; position: sticky; top: 20px; }
.tjc-rb__rail-block { margin-bottom: 26px; }
.tjc-rb__locked-shape { font-size: 13px; color: #2D2D2D; margin: 6px 0 0; }
.tjc-rb__range-pair { display: flex; align-items: center; gap: 8px; }
.tjc-rb__range-pair input { width: 100%; padding: 8px 10px; border: 1px solid #D9D6D0; background: #fff; font-family: inherit; font-size: 12px; color: #2D2D2D; box-sizing: border-box; }
.tjc-rb__range-pair input:focus { outline: none; border-color: #BBC7D7; }
.tjc-rb__range-sep { font-size: 11px; color: #939292; }
.tjc-rb__concierge { border-top: 1px solid #D9D6D0; margin-top: 24px; padding-top: 18px; }
.tjc-rb__concierge-title { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: #2D2D2D; margin: 0 0 8px; font-weight: 500; }
.tjc-rb__concierge-text { font-size: 11.5px; line-height: 1.7; margin: 0 0 10px; }

.tjc-rb__toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; gap: 14px; }
.tjc-rb__toolbar-group { display: flex; align-items: center; gap: 12px; }
.tjc-rb__result-count { font-size: 12px; color: #939292; margin: 0; }
.tjc-rb__tool-btn { width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; background: #fff; border: 1px solid #D9D6D0; border-radius: 0; color: #4A4A4A; cursor: pointer; transition: border-color 0.2s ease, background 0.2s ease; padding: 0; }
.tjc-rb__tool-btn svg { width: 17px; height: 17px; }
.tjc-rb__tool-btn:hover { border-color: #BBC7D7; }
.tjc-rb__tool-btn.is-on { background: #fff; border-color: #2D2D2D; color: #2D2D2D; }
.tjc-rb__view-toggle { display: flex; gap: 6px; }
.tjc-rb__tool-btn--labelled { width: auto; padding: 0 14px; gap: 8px; }
.tjc-rb__tool-btn--bare, .tjc-rb__tool-btn--bare.is-on { background: transparent; border: none; color: #2D2D2D; width: 40px; height: 40px; }
.tjc-rb__tool-btn--bare svg { width: 24px; height: 24px; }
.tjc-rb__tool-btn--bare:hover { border: none; color: #4A4A4A; }
.tjc-rb__tool-btn--labelled span { font-family: 'Montserrat', sans-serif; font-size: 11px; letter-spacing: 0.04em; white-space: nowrap; }
/* v0.69: on TRUE desktop (>1366px — the mobile/tablet/iPad Pro band already
   has its own fix below at .tjc-rb__tool-btn--labelled{height:31px}, which
   went the OTHER direction and shrank the Gallery/List buttons down to match
   the select's shorter rendered height) Omri compared the "Sort by" trigger
   against the Gallery/List view buttons beside it and wanted the select
   grown to match instead, not the buttons shrunk. Both boxes already share
   height:34px in CSS, but native <select> rendering sits visually shorter
   than a flex-centred button at the same declared height — bumping to 38px
   is the practical fix rather than fighting UA select metrics. */
@media (min-width: 1367px) {
  .tjc-rb__select--inline { height: 38px; }
}

/* rail hidden mode */
.tjc-rb__diamond-layout.rail-hidden { grid-template-columns: 1fr; }
.tjc-rb__diamond-layout.rail-hidden .tjc-rb__rail { display: none; }

.tjc-rb__stone-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
/* TMC-GRID-1: infinite-scroll sentinel — spans the full grid row, invisible.
   display:block !important beats LUXE's global `div:empty { display:none }`
   reset, which would otherwise hide the (empty) sentinel and kill the
   IntersectionObserver — the JS also inlines these styles as first defence. */
.tjc-rb__stone-sentinel { display: block !important; grid-column: 1 / -1; width: 100%; height: 1px; padding: 0; margin: 0; }

/* ── List view (tabular, header row, expand-to-select) ── */
.tjc-rb__stone-grid--list { display: block; }
/* rev 7: 8 tracks — Cut column replaced by Polish + Symmetry */
.tjc-rb__stone-listhead { display: grid; grid-template-columns: 1.3fr 0.8fr 0.8fr 0.9fr 1fr 1fr 1fr 40px; gap: 12px; align-items: center; background: #EFEFEF; border-radius: 0; padding: 13px 18px; font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: #4A4A4A; font-weight: 500; }
/* headers sit dead-centre above their column values (Shape stays left, over the label) */
.tjc-rb__stone-listhead span:not(:first-child) { text-align: center; }
.tjc-rb__stone-row-main .tjc-rb__stone-row-spec,
.tjc-rb__stone-row-main .tjc-rb__stone-row-price { text-align: center; }
.tjc-rb__stone-row { background: #fff; border: 1px solid #E7E4DD; border-radius: 0; margin-bottom: 10px; overflow: hidden; }
.tjc-rb__stone-grid--list .tjc-rb__stone-row { border-radius: 0; margin-bottom: 0; border-top: none; }
.tjc-rb__stone-grid--list .tjc-rb__stone-row:last-child { border-radius: 0; }
.tjc-rb__stone-row.is-selected { border-color: #2D2D2D; }
/* tabular list: TMC-style zebra rows; selection marked only by a quiet mist bar */
.tjc-rb__stone-grid--list .tjc-rb__stone-row:nth-child(odd) { background: #F7F7F7; }
.tjc-rb__stone-grid--list .tjc-rb__stone-row.is-selected { border-color: #E7E4DD; box-shadow: inset 3px 0 0 #BBC7D7; }
.tjc-rb__stone-row-main { display: grid; grid-template-columns: 1.3fr 0.8fr 0.8fr 0.9fr 1fr 1fr 1fr 40px; align-items: center; gap: 12px; padding: 12px 18px; cursor: pointer; } /* rev 7: matches the 8-track head */
.tjc-rb__stone-row-shapecell { display: flex; align-items: center; gap: 8px; font-size: 12px; color: #2D2D2D; }
.tjc-rb__stone-row-shape { width: 34px; height: 34px; flex: 0 0 34px; }
.tjc-rb__stone-row-shape svg { width: 100%; height: 100%; }
.tjc-rb__stone-row-title { font-size: 12.5px; color: #2D2D2D; font-weight: 500; }
.tjc-rb__stone-row-spec { font-size: 11.5px; color: #4A4A4A; }
.tjc-rb__stone-row-grades { font-size: 10.5px; color: #939292; }
.tjc-rb__stone-row-price { font-family: 'Montserrat', sans-serif; font-size: 13px; color: #2D2D2D; font-weight: 500; white-space: nowrap; }
.tjc-rb__stone-price { font-family: 'Montserrat', sans-serif; }
.tjc-rb__stone-row .tjc-rb__stone-btn { padding: 8px 14px; }
.tjc-rb__stone-row-expand { width: 30px; height: 30px; background: none; border: none; cursor: pointer; color: #9FB0C4; display: flex; align-items: center; justify-content: center; transition: transform 0.25s ease, color 0.2s ease; }
.tjc-rb__stone-row-expand:hover { color: #2D2D2D; }
.tjc-rb__stone-row.is-open .tjc-rb__stone-row-expand { transform: rotate(180deg); }
.tjc-rb__stone-row-detail { display: none; border-top: 1px solid #EDECE5; padding: 20px 22px; background: #FCFBF9; }
.tjc-rb__stone-row.is-open .tjc-rb__stone-row-detail { display: grid; grid-template-columns: 170px 1fr auto; gap: 26px; align-items: start; }
.tjc-rb__stone-row-facts a { color: #4A4A4A; text-decoration: underline; text-underline-offset: 3px; }
.tjc-rb__stone-row-facts a:hover { color: #2D2D2D; }
.tjc-rb__stone-row-detail .tjc-rb__stone-btn { align-self: center; }
.tjc-rb__stone-row-video { flex: 0 0 180px; aspect-ratio: 1; background: linear-gradient(180deg, #F9F9F9, #EFF1F4); border: 1px solid #E7E4DD; border-radius: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; font-size: 10px; color: #939292; text-align: center; padding: 10px; }
.tjc-rb__stone-row-video svg { width: 56px; height: 56px; color: #55595E; }
.tjc-rb__stone-row-facts { font-size: 12px; color: #4A4A4A; line-height: 2; }
.tjc-rb__stone-row-facts strong { color: #2D2D2D; font-weight: 500; }
.tjc-rb__stone-row-facts-m { display: none; } /* mobile-only spec table — shown in the ≤1366px band */
.tjc-rb__stone { background: #F9F9F9; border: 1px solid transparent; padding: 0 0 16px; text-align: center; transition: border-color 0.25s ease; }
.tjc-rb__stone:hover { border-color: #BBC7D7; }
.tjc-rb__stone.is-selected { border-color: #2D2D2D; }
.tjc-rb__stone-media { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; background: linear-gradient(180deg, #F9F9F9, #EFF1F4); }
.tjc-rb__stone-media svg { width: 58%; height: 58%; color: #55595E; }
.tjc-rb__stone-carat { font-family: 'Montserrat', sans-serif; font-size: 12.5px; font-weight: 600; letter-spacing: 0.05em; color: #2D2D2D; margin: 6px 0 3px; }
.tjc-rb__stone-spec { font-size: 11px; color: #4A4A4A; margin: 0 0 4px; letter-spacing: 0.04em; }
.tjc-rb__stone-spec--grades { font-size: 10px; color: #939292; margin: -2px 0 4px; }
.tjc-rb__stone-cert { font-size: 10px; color: #939292; margin: 0 0 8px; letter-spacing: 0.06em; }
.tjc-rb__stone-price { font-size: 13px; font-weight: 500; color: #2D2D2D; margin: 0 0 12px; }
/* v0.69: "View full details" link, gallery card — MOVED here from inside the
   old `@media (max-width: 1366px)` band now that the JS renders this link on
   every viewport (see renderStones()). Base/unconditional so real desktop
   (>1366px) gets the same centred, full-width block treatment instead of
   falling back to unstyled inline text sitting flush against the button —
   that was the "View full details sitting to the left of Select Diamond,
   looks funny" bug Omri flagged on desktop. */
.tjc-rb__stone .tjc-rb__rowm-more { display: block; width: 100%; text-align: center; margin: 6px 0 8px; font-size: 10px; }
.tjc-rb__stone-btn { background: #BBC7D7; border: 1px solid #BBC7D7; color: #2D2D2D; font-family: inherit; font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; padding: 9px 18px; cursor: pointer; transition: background 0.2s ease, border-color 0.2s ease; }
.tjc-rb__stone-btn:hover { background: #A9B8CB; border-color: #A9B8CB; }
.tjc-rb__stone.is-selected .tjc-rb__stone-btn, .tjc-rb__stone-row.is-selected .tjc-rb__stone-btn { background: #2D2D2D; border-color: #2D2D2D; color: #fff; }
.tjc-rb__empty { text-align: center; padding: 60px 20px; color: #939292; line-height: 1.8; }

/* ── Step 3: summary ── */
.tjc-rb__summary-layout { display: grid; grid-template-columns: minmax(0, 714px) minmax(0, 502px); gap: 78px; justify-content: start; align-items: start; }
.tjc-rb__summary-media { position: sticky; top: 24px; max-width: none; width: 100%; justify-self: stretch; display: flex; gap: 14px; align-items: flex-start; }
.tjc-rb__summary-media > img { flex: 1; min-width: 0; width: auto; aspect-ratio: 1 / 1; object-fit: contain; display: block; background: #F2F1EF; border-radius: 0; }

/* rev 16 (Omri, 19 Aug): exact bottom alignment, replacing the failed rev 15
   fixed-height cap (which both overshot the form by ~48px at 1470w and
   letterboxed grey stage bars beside the white render - his two complaints).
   Mechanism: the image is absolutely positioned inside the media cell, so the
   grid row's height comes from the FORM column alone; the image then fills
   100% of that height as a square. "Send a hint / Book a virtual
   consultation" and the media bottom now share a line by construction, for
   every product and every viewport in this tier. Sticky dropped here - the
   columns are equal-height, so there is nothing to stick past. Applies only
   in the thumbs-beside-image tier; the tablet/mobile arrangements keep their
   own in-flow rules. */
@media (min-width: 1367px) {
  /* rev 25 (Omri, 20 Aug): step-4's summary column is far taller than the
     image, and rev 16's absolutely-positioned image could not stick - the
     render scrolled away while the summary kept going. Back to normal flow:
     with the media column FIXED at 714px (rev 17), the in-flow square image
     is width-driven (714 - 84 rail = 630) so there is no circular-height
     problem, the row height still comes from the taller column, and both the
     image and the thumb rail can be position:sticky - they follow the scroll
     down long summaries exactly like the PDP gallery. Step-1 bottom
     alignment is unchanged: standard forms measure ~630, equal to the image.
     rev 24's letterbox fix is inherent here (the box IS the square). */
  .tjc-rb__config-media, .tjc-rb__summary-media {
    position: relative; top: 0; align-self: stretch; max-width: none;
    display: flex; gap: 14px; align-items: flex-start;
    /* rev 26: size container, so the thumb rail below can compute the square
       image's rendered height (100cqw - 84px) without JS. inline-size
       containment only pins the inline axis - block size stays content-
       driven, and the sticky children are unaffected. */
    container-type: inline-size;
  }
  .tjc-rb__config-media > img, .tjc-rb__summary-media > img {
    position: sticky; top: calc(var(--site-header-height-desktop, 120px) + 24px);
    flex: 0 1 auto; width: calc(100% - 84px); height: auto;
    aspect-ratio: 1 / 1; object-fit: contain; object-position: top center;
    background: transparent;
  }
  /* rev 26 (Omri, 20 Aug): thumb rail = EXACTLY the media card's height, and
     scrollable inside it. Height is the square image's rendered height
     (container width - 70px rail - 14px gap), so the rail's top AND bottom
     land on the image's by construction at every width in this tier. Rail
     scrolls (scrollbar hidden - same quiet scroller as the PDP gallery's
     gst-inner), so every thumbnail stays reachable now that the section
     emits the full gallery (limit 6 removed, see tjc-ring-builder.liquid). */
  .tjc-rb__config-media .tjc-rb__config-thumbs, .tjc-rb__summary-media .tjc-rb__config-thumbs {
    position: sticky; top: calc(var(--site-header-height-desktop, 120px) + 24px);
    order: -1; flex: 0 0 70px;
    height: calc(100cqw - 84px); overflow-y: auto;
    scrollbar-width: none; -ms-overflow-style: none;
  }
  .tjc-rb__config-media .tjc-rb__config-thumbs::-webkit-scrollbar,
  .tjc-rb__summary-media .tjc-rb__config-thumbs::-webkit-scrollbar { display: none; }
  /* without this, a fixed-height flex column SHRINKS its items instead of
     overflowing (18 thumbs squeezed to fit; measured sh 630 == ch 630, no
     scroll) - pin each thumb at its natural 70px so the rail overflows */
  .tjc-rb__config-media .tjc-rb__config-thumb,
  .tjc-rb__summary-media .tjc-rb__config-thumb { flex: 0 0 auto; }
}
.tjc-rb__summary-kicker { font-family: 'Montserrat', sans-serif; font-size: 11px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: #2D2D2D; margin: 0 0 6px; }
.tjc-rb__summary-title { font-family: 'Marigold', serif; font-size: 20px; font-weight: 400; letter-spacing: 0; line-height: 1.25; text-transform: uppercase; color: #2D2D2D; margin: 4px 0 22px; } /* v1.02 tracking + v1.06 leading = theme standard */
/* separator dots between specs — bumped so the breaks read clearly on screen */
.tjc-rb__sep { font-weight: 700; font-size: 1.15em; line-height: 1; color: #4A4A4A; vertical-align: -0.02em; }

.tjc-rb__summary-lines { border-top: 1px solid #D9D6D0; }
.tjc-rb__summary-line { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 14px 0; border-bottom: 1px solid #D9D6D0; }
.tjc-rb__summary-line-label { flex: 1; }
.tjc-rb__summary-line-label strong { display: block; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: #2D2D2D; font-weight: 500; margin-bottom: 3px; }
.tjc-rb__summary-line-label span { font-size: 12px; color: #4A4A4A; line-height: 1.6; }
/* payment options link: right-aligned directly beneath the total, so the price
   column reads amount → GST → how to pay */
.tjc-rb__summary-payment { text-align: right; margin: 6px 0 0; }

/* measurements hold together as one unit — no orphaned "mm" on its own line */
.tjc-rb__nowrap { white-space: nowrap; }

/* certificate number in summary lines: fine weight with a light bold lift,
   hyperlinked to verification */
.tjc-rb .tjc-rb__summary-line a.tjc-rb__cert-link { font-weight: 500; color: #2D2D2D; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }

/* line prices: medium weight (500) — one notch above regular, well short of
   semibold; enough to echo the grand total without shouting */
.tjc-rb__summary-line-price { font-size: 13px; font-weight: 500; color: #2D2D2D; white-space: nowrap; }
.tjc-rb__summary-line .tjc-rb__link-btn { margin-left: 10px; }
.tjc-rb__summary-total { display: flex; justify-content: space-between; align-items: baseline; font-size: 16px; color: #2D2D2D; padding: 18px 0 4px; font-weight: 500; }
.tjc-rb__summary-total small { font-size: 10px; font-weight: 400; color: #939292; letter-spacing: 0.06em; margin-left: 7px; }
.tjc-rb__trust { background: #EDECE5; padding: 16px 20px; margin: 22px 0; }
.tjc-rb__trust p { font-size: 11.5px; margin: 5px 0; color: #4A4A4A; letter-spacing: 0.03em; }

/* ── Panel transitions (each step feels like its own page) ── */
@keyframes tjcRbFade { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.tjc-rb__panel.is-entering, .tjc-rb__view-enter { animation: tjcRbFade 0.45s ease both; }

/* ── Dual-range slider ── */
/* TMC-SLIDER-1: the rail is clickable (nearest handle jumps to the press
   point — see setupSlider in tjc-ring-builder.js), so the wrap cursors as
   interactive; touch-action keeps vertical page scroll working while taps
   still land on the rail */
.tjc-rb__slider { position: relative; height: 26px; margin: 4px 2px 10px; cursor: pointer; touch-action: pan-y; }
.tjc-rb__slider-track { position: absolute; top: 50%; left: 0; right: 0; height: 2px; transform: translateY(-50%); background: #D9D6D0; }
.tjc-rb__slider-fill { position: absolute; top: 0; bottom: 0; background: #BBC7D7; }
.tjc-rb__slider input[type="range"] { position: absolute; inset: 0; width: 100%; margin: 0; -webkit-appearance: none; appearance: none; background: none; pointer-events: none; height: 26px; }
/* handle border: near-black, kept (DECIDED 8 Jul) — finer weight per feedback */
.tjc-rb__slider input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; pointer-events: auto; width: 16px; height: 16px; border-radius: 50%; background: #BBC7D7; border: 1.1px solid #2D2D2D; cursor: grab; box-shadow: 0 1px 4px rgba(26,26,26,0.25); }
.tjc-rb__slider input[type="range"]::-moz-range-thumb { pointer-events: auto; width: 15px; height: 15px; border-radius: 50%; background: #BBC7D7; border: 1.1px solid #2D2D2D; cursor: grab; box-shadow: 0 1px 4px rgba(26,26,26,0.25); }
.tjc-rb__slider input[type="range"]::-webkit-slider-thumb:active { cursor: grabbing; }
.tjc-rb__slider input[type="range"]::-moz-range-track { background: none; }

/* ── Summary line icons — same 46px footprint as the thumbnail so all rows align ── */
.tjc-rb__summary-line-icon { width: 46px; height: 46px; flex: 0 0 46px; color: #2E3338; align-self: center; display: flex; align-items: center; justify-content: center; }
.tjc-rb__summary-line-icon svg { width: 32px; height: 32px; }
/* v1.49: the setting row now carries the step-bar's 140×80 solitaire
   composition — give the wide artwork the slot's width, not the square default */
.tjc-rb__summary-line-icon svg[viewBox="0 0 140 80"] { width: 42px; height: 24px; }

/* ── Crafting window ── */
.tjc-rb__craft { background: #EFEFEF; border: 1px solid #E3E3E1; padding: 16px 20px; margin: 20px 0 18px; }
.tjc-rb__craft-opts { display: flex; gap: 10px; margin: 4px 0 12px; }
.tjc-rb__craft-opt { flex: 1; background: #fff; border: 1px solid #D9D6D0; border-radius: 0; padding: 11px 12px; font-family: inherit; cursor: pointer; text-align: center; transition: border-color 0.2s ease, background 0.2s ease; }
.tjc-rb__craft-opt strong { display: block; font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase; color: #2D2D2D; font-weight: 500; margin-bottom: 3px; }
.tjc-rb__craft-opt span { font-size: 10.5px; color: #939292; }
.tjc-rb__craft-opt.is-on { border-color: #BBC7D7; background: #EFF3F8; }

/* ── Perks row (feature vectors) ── */
.tjc-rb__perks { display: flex; gap: 8px; margin: 18px 0 28px; align-items: flex-start; }
/* perks are links now — kill theme underline/colour inheritance; subtle hover lift */
.tjc-rb .tjc-rb__perks a.tjc-rb__perk { flex: 1; display: block; text-align: center; font-size: 10px; color: #4A4A4A; letter-spacing: 0.04em; line-height: 1.45; text-decoration: none; transition: opacity 0.2s ease; }
.tjc-rb .tjc-rb__perks a.tjc-rb__perk:hover { opacity: 0.65; color: #2D2D2D; }
/* icons in near-black for this round (was mist #9FB0C4 — single-line revert if preferred) */
.tjc-rb__perk svg { display: block; width: 26px; height: 26px; color: #2D2D2D; margin: 0 auto 7px; }
.tjc-rb__craft-title { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: #2D2D2D; font-weight: 500; margin: 0 0 6px; }
.tjc-rb__craft-text { font-size: 12.5px; color: #4A4A4A; line-height: 1.7; margin: 0 0 4px; }
.tjc-rb__craft-note { font-size: 11px; color: #939292; margin: 0; }
.tjc-rb__craft-delivery { display: flex; align-items: center; gap: 9px; font-size: 12px; color: #4A4A4A; margin: 12px 0 0; }
.tjc-rb__craft-delivery svg { width: 20px; height: 20px; color: #6B7684; flex: 0 0 20px; }

/* ── Accordions ── */
.tjc-rb__accordions { margin-top: 38px; border-top: 1px solid #D9D6D0; }
.tjc-rb__acc { border-bottom: 1px solid #D9D6D0; }
.tjc-rb__acc summary { list-style: none; cursor: pointer; padding: 15px 2px; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: #2D2D2D; font-weight: 500; display: flex; justify-content: space-between; align-items: center; }
.tjc-rb__acc summary::-webkit-details-marker { display: none; }
.tjc-rb__acc summary::after { content: '+'; font-size: 16px; font-weight: 400; color: #9FB0C4; transition: transform 0.25s ease; }
.tjc-rb__acc[open] summary::after { content: '\2013'; }
.tjc-rb__acc-body { padding: 2px 2px 18px; font-size: 12px; line-height: 1.8; color: #4A4A4A; }
.tjc-rb__acc-body p { margin: 0; }

/* spec list inside accordion */
.tjc-rb__spec-list { margin: 0; display: grid; grid-template-columns: 1fr 1.4fr; row-gap: 8px; column-gap: 16px; }
.tjc-rb__spec-list dt { font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: #939292; align-self: baseline; }
.tjc-rb__spec-list dd { margin: 0; font-size: 12px; color: #2D2D2D; align-self: baseline; }

/* ── Panel headers (each step dressed with its vector) ── */
.tjc-rb__panel-head { text-align: center; max-width: 560px; margin: 0 auto 30px; }
.tjc-rb__panel-head-icon { display: block; width: 42px; height: 42px; margin: 0 auto 10px; color: #2D2D2D; }
.tjc-rb__panel-head-icon svg { width: 100%; height: 100%; }
.tjc-rb__panel-title { font-family: 'Marigold', serif; font-size: 28px; font-weight: 400; color: #2D2D2D; margin: 0 0 8px; }
.tjc-rb__panel-title--small { font-size: 16px; letter-spacing: 0.14em; text-transform: uppercase; }
.tjc-rb__panel-sub { font-size: 12.5px; color: #4A4A4A; line-height: 1.7; margin: 0; }

/* ── Selected-diamond tray (centre-aligned) ── */
.tjc-rb__tray { display: flex; flex-direction: column; align-items: center; gap: 10px; background: #EFEFEF; border: 1px solid #E3E3E1; padding: 12px 20px; margin-bottom: 26px; text-align: center; }
.tjc-rb__tray-info { max-width: 640px; }
.tjc-rb__tray-label { display: block; font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: #939292; margin-bottom: 5px; }
.tjc-rb__tray-value { font-size: 12px; color: #2D2D2D; line-height: 1.7; }
.tjc-rb__tray-blocks { display: flex; justify-content: center; gap: 40px; flex-wrap: wrap; }
.tjc-rb__tray-block { text-align: center; }
.tjc-rb__tray-block .tjc-rb__link-btn { margin-top: 6px; }
.tjc-rb__tray-line1 { font-size: 13.5px; font-weight: 600; color: #2D2D2D; margin: 0 0 3px; }
.tjc-rb__tray-line2 { font-size: 11px; color: #939292; margin: 0 0 3px; }
.tjc-rb__tray-line2--spec { font-size: 12.5px; color: #4A4A4A; }
.tjc-rb__tray-line2 a { color: #4A4A4A; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.tjc-rb__tray-line2 a:hover { color: #2D2D2D; }
.tjc-rb__tray-price { font-size: 14px; font-weight: 500; color: #2D2D2D; margin: 4px 0 0; }
.tjc-rb__cta--tray { width: auto; padding: 12px 34px; }
/* remove links: bottom line of the tray (register inherited from the base link style) */
.tjc-rb__tray-removes { display: flex; justify-content: center; gap: 24px; }

/* locked shape block — small vector + name on its own row */
.tjc-rb__shape-lock { display: flex; align-items: center; gap: 8px; margin-top: 8px; width: fit-content; }
.tjc-rb__shape-lock svg { width: 26px; height: 26px; flex: 0 0 26px; color: #2D2D2D; }
.tjc-rb__shape-lock span { font-size: 11.5px; letter-spacing: 0.04em; color: #2D2D2D; }
/* TOI-1: multi-stone designs — quiet slot note beside the locked shape,
   and the tray's next-stone prompt while slots remain */
.tjc-rb__shape-lock span.tjc-rb__shape-lock-slot { color: #767676; font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; padding-left: 4px; }
.tjc-rb__tray-next { font-size: 12.5px; letter-spacing: 0.02em; color: #2D2D2D; margin: 10px 0 0; }

/* ── Personalise step ── */
.tjc-rb__personalise { max-width: 560px; margin: 0 auto; }
.tjc-rb__pers-card { background: #fff; border: 1px solid #E7E4DD; padding: 24px 26px; margin-bottom: 16px; }
.tjc-rb__pers-card--soon { position: relative; border-style: dashed; background: #FCFBF9; }
/* Something Blue (v1.51): gem sits right after the label text; "+$100" is a
   standalone counter in the header, so the theme's own
   `.tjc-rb__field-header .tjc-rb__counter { margin-left: auto }` parks it in
   the top-right corner exactly like "0 / 20" on the engraving card */
.tjc-rb__field-label--gem { display: inline-flex; align-items: center; gap: 9px; }
.tjc-rb__blue-gem { width: 26px; height: 26px; flex: 0 0 auto; display: block; }
/* toggle — centred in the card, square-cornered like every other control (v1.46) */
.tjc-rb__blue-toggle {
  display: block; margin: 2px auto 0; min-width: 160px;
  font-family: 'Montserrat', sans-serif; font-size: 11px;
  letter-spacing: 0.08em; text-transform: uppercase; padding: 10px 18px;
  background: #fff; color: #2D2D2D; border: 1px solid #2D2D2D; border-radius: 0;
  cursor: pointer; transition: background 0.25s ease, border-color 0.25s ease;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; /* gem sits inside the button (20 Jul) */
}
.tjc-rb__blue-toggle:hover { background: #F4F6F9; }
.tjc-rb__blue-toggle.is-on { background: #BBC7D7; border-color: #BBC7D7; }
/* ghost CTA — white twin of the primary, used by "No personalisation required" */
.tjc-rb__cta--ghost { background: #fff; color: #2D2D2D; border: 1px solid #2D2D2D; margin-top: 10px; }
.tjc-rb__cta--ghost:hover { background: #2D2D2D; color: #fff; }
/* v1.48: the v1.46 scoped tracking override is GONE — step-3 CTAs follow the
   exact same rules as every other button in the journey (base .tjc-rb__cta). */
/* v1.51 (Omri): the two step-3 action buttons no longer span the full card
   width on desktop — content-sized with a sensible floor, centred. Phones
   keep the standard full-width tap target. */
@media screen and (min-width: 750px) {
  .tjc-rb__personalise .tjc-rb__cta { width: auto; min-width: 320px; display: block; margin-left: auto; margin-right: auto; }
}
/* v1.47: Something Blue's own summary row — gem thumb; Remove sits in the
   action slot beside the price (v1.48), styled exactly like Edit */
.tjc-rb__sumline-gem { width: 22px; height: 22px; display: block; }
.tjc-rb__pers-card--soon .tjc-rb__field-label { color: #939292; }
.tjc-rb__pers-soon-badge { position: absolute; top: 14px; right: 16px; font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase; color: #9FB0C4; border: 1px solid #D5DCE6; padding: 3px 8px; }
.tjc-rb__personalise .tjc-rb__cta { margin-top: 10px; }
.tjc-rb__personalise .tjc-rb__link-btn--center { display: block; width: 100%; text-align: center; margin: 16px auto 0; }

/* ── Visual density layer (TMC-weight cards & panels) ── */
.tjc-rb__card { background: #fff; border: 1px solid #E7E4DD; }
.tjc-rb__card:hover { border-color: #BBC7D7; box-shadow: 0 4px 18px rgba(26, 26, 26, 0.05); }
.tjc-rb__stone { background: #fff; border: 1px solid #E7E4DD; }
.tjc-rb__stone:hover { box-shadow: 0 4px 18px rgba(26, 26, 26, 0.05); }
.tjc-rb__config-form { background: transparent; border: none; padding: 0; }
.tjc-rb__rail { background: #fff; border: 1px solid #E7E4DD; }
.tjc-rb__summary { background: transparent; border: none; padding: 0; }
.tjc-rb__summary-line-thumb { width: 46px; height: 46px; flex: 0 0 46px; object-fit: cover; background: transparent; border: none; align-self: center; mix-blend-mode: multiply; }

/* ── Modal ── */
.tjc-rb__modal { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 20px; }
.tjc-rb__modal[hidden] { display: none; }
.tjc-rb__modal-overlay { position: absolute; inset: 0; background: rgba(26, 26, 26, 0.35); cursor: pointer; }
/* fine near-black frame so modals stay defined against product imagery behind them */
.tjc-rb__modal-content { position: relative; background: #fff; max-width: 480px; width: 100%; max-height: 82vh; overflow-y: auto; border: 1px solid #2D2D2D; }
.tjc-rb__modal-content img { width: 100%; display: block; }
/* close button: larger glyph + hit area, comfortable to click on every modal */
.tjc-rb__modal-close { position: absolute; top: 8px; right: 8px; width: 40px; height: 40px; border-radius: 50%; background: rgba(255, 255, 255, 0.92); border: none; font-size: 24px; line-height: 1; color: #2D2D2D; cursor: pointer; z-index: 2; }

/* v0.69: stone detail modal (opened via a card's "View full details" link) —
   MOVED here from inside the old `@media (max-width: 1366px)` band, where it
   had lived alone since the modal itself only used to open on mobile/tablet/
   iPad Pro. Now that the "View full details" link renders on every viewport
   (see the card grid below), the same gap meant TRUE desktop (>1366px) opened
   this modal with none of its content styling at all — the diamond icon had
   no size cap so it overflowed the modal box upward/outward, and the spec
   rows (Colour, Clarity, Cut...) had no flex/space-between, so label and
   value ran together with no gap ("ColourF" instead of "Colour" / "F" on
   opposite sides). Base, unconditional now — same layout at every width. */
.tjc-rb__stonemod-media { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; aspect-ratio: 1.4; background: linear-gradient(180deg, #F9F9F9, #EFF1F4); margin-bottom: 16px; font-size: 10px; color: #939292; }
.tjc-rb__stonemod-media svg { width: 44%; height: auto; color: #55595E; }
.tjc-rb__stonemod-price { font-size: 15px; font-weight: 500; color: #2D2D2D; margin: 0 0 14px; }
.tjc-rb__stonemod-specs { text-align: left; margin-bottom: 18px; border-top: 1px solid #EFEDE8; }
.tjc-rb__stonemod-row { display: flex; justify-content: space-between; gap: 14px; padding: 8px 0; border-bottom: 1px solid #EFEDE8; font-size: 11.5px; }
.tjc-rb__stonemod-row span:first-child { color: #939292; letter-spacing: 0.04em; }
.tjc-rb__stonemod-row span:last-child { color: #2D2D2D; text-align: right; }
.tjc-rb__stonemod-row a { color: #2D2D2D; }

/* ── Responsive ── */
@media (max-width: 1279px) {
  .tjc-rb__stone-grid { grid-template-columns: repeat(3, 1fr); }
}
/* v0.50's separate "750–1100px holds two columns" tier is GONE as of v0.51 —
   corrected same-day after Omri checked TMC directly at both iPad sizes:
   TMC stays SINGLE COLUMN through iPad Air (820px) and only goes two-column
   at iPad Pro (1024px). The 6 Jul recon note's "900–1100 holds two columns"
   assumption was wrong; this direct A/B is the more reliable source and
   REPLACES it. See the widened MOBILE BAND below (now ≤1023px, was ≤749px)
   — everything mobile does (stepper step bar, image-on-top media, static
   rail, bottom summary drawer) now simply extends up through iPad Air,
   and true two-column only starts at 1024px where the base/desktop rules
   already take over unassisted. */
/* ── Custom dropdowns — menu ALWAYS opens beneath the trigger, no focus ring ── */
.tjc-rb__dd { position: relative; }
.tjc-rb__dd select { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.tjc-rb__dd-trigger { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; box-sizing: border-box; padding: 12px 14px; background: #fff; border: 1px solid #D9D6D0; border-radius: 0; font-family: 'Montserrat', sans-serif; font-size: 12px; color: #2D2D2D; cursor: pointer; text-align: left; transition: border-color 0.2s ease; }
.tjc-rb__dd-trigger:hover, .tjc-rb__dd-trigger[aria-expanded="true"] { border-color: #BBC7D7; }
.tjc-rb__dd-trigger:focus, .tjc-rb__dd-trigger:focus-visible { outline: none; box-shadow: none; }
.tjc-rb__dd-trigger { -webkit-tap-highlight-color: transparent; white-space: nowrap; }
.tjc-rb__dd-trigger.is-placeholder .tjc-rb__dd-label { color: #939292; }
.tjc-rb__dd-trigger svg { flex: 0 0 auto; color: #4A4A4A; }
.tjc-rb__dd-menu { position: absolute; top: 100%; left: 0; right: 0; z-index: 60; margin: 0; padding: 0; list-style: none; background: #fff; border: 1px solid #BBC7D7; border-top: none; max-height: 240px; overflow-y: auto; }
.tjc-rb__dd-item { padding: 9px 14px; font-size: 12px; color: #2D2D2D; cursor: pointer; transition: background 0.15s ease; }
.tjc-rb__dd-item:hover { background: #EDECE5; }
.tjc-rb__dd-item.is-on { background: #BBC7D7; }
.tjc-rb__dd-item--ph { color: #939292; }
/* TMC-style option headings (11 Aug): the label's live value — same uppercase
   tracking as the label itself, softened a shade so the field name still leads */
.tjc-rb__field-value { font-weight: 400; color: #6E6E6E; }
/* locked band-width dropdown — fixed-width designs (11 Aug): the set width is
   visible in a real dropdown but cannot change; only the chevron dims, the
   value stays fully legible. Trigger is also disabled in JS for keyboards. */
.tjc-rb__dd.is-locked .tjc-rb__dd-trigger { pointer-events: none; cursor: default; }
.tjc-rb__dd.is-locked .tjc-rb__dd-trigger svg { opacity: 0.35; }
/* the inline sort variant keeps its compact footprint; its trigger reads a
   constant "Sort by" while the menu opens wider than the trigger */
.tjc-rb__dd--inline .tjc-rb__dd-trigger { padding: 8px 12px; font-size: 11px; }
.tjc-rb__dd--inline .tjc-rb__dd-menu { right: auto; min-width: 180px; }
.tjc-rb__dd--inline .tjc-rb__dd-item { white-space: nowrap; }

/* mobile ring-summary drawer: hidden at desktop widths entirely */
.tjc-rb__mobsum { display: none; }
/* mobile-only filter-sheet chrome: invisible at desktop widths */
.tjc-rb__rail-mobhead, .tjc-rb__rail-mobapply, .tjc-rb__rail-chips, .tjc-rb__tool-btn-label { display: none; }

/* ══ MOBILE BAND (≤1366px, widened from ≤1023px in v0.52) — first-class
   layout, v0.27, widened AGAIN 9 Jul: testing iPad Pro (1024×1366) surfaced
   several components that hadn't been given the mobile-band treatment above
   1023px — the ring-summary bottom drawer, the stepper step bar, and step
   2's list/gallery/toolbar polish all still showed bare/legacy desktop
   styling there. Rather than re-deriving each one at a new width, the whole
   band now simply runs through 1366px (covers iPad Pro in both
   orientations). EXCEPTION, confirmed explicitly with Omri: the config/
   summary media+form split should still match TMC's own 2-column switch at
   1024px — that's restored by the override block immediately after this
   one, which reintroduces the two-column layout ONLY for those two panels
   in the 1024–1366px range. Step 2 (diamond rail/sheet) and step 1's
   catalogue grid are NOT part of that exception — they stay mobile-styled
   through 1366px, per Omri's explicit step-2 request this round. */
@media (max-width: 1366px) {
  .tjc-rb { font-size: 12.5px; }
  .tjc-rb.page-width { padding-left: 16px; padding-right: 16px; }
  .tjc-rb__title { font-size: 30px; }

  /* single-column collapse — self-contained here (not relying on the wider
     desktop rules) so this band's behaviour is fully predictable regardless
     of what sits above 1023px */
  /* it.55: minmax(0,1fr) not 1fr - a bare fr track's minimum is the item's
     min-content, and a scroll container still reports its FULL content width
     as min-content (scrolling never shrinks intrinsic size). With the it.54
     nowrap thumb row that min-content is ~1270px, so the track blew the
     phone layout out sideways (Omri's "gone rogue" screenshots: Safari
     zoomed the whole page out to fit ~1300px). */
  .tjc-rb__config-layout, .tjc-rb__summary-layout, .tjc-rb__diamond-layout { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .tjc-rb__config-media, .tjc-rb__summary-media { min-width: 0; }
  .tjc-rb__rail { position: static; }

  /* catalogue filters: stacked groups, wrapping tiles */
  .tjc-rb__filters { flex-direction: column; gap: 14px; padding: 14px; }
  .tjc-rb__ftile { width: 64px; padding: 8px 4px 6px; }
  .tjc-rb__ftile-icon { width: 30px; height: 30px; }
  .tjc-rb__grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .tjc-rb__card-body { padding: 10px 10px 12px; }

  /* config + summary: media leads, thumbnails move BENEATH the image
     (the left rail is too greedy at phone widths) */
  .tjc-rb__config-media, .tjc-rb__summary-media { position: static; flex-direction: column; gap: 10px; max-width: none; }
  /* CRITICAL: in a column stack, flex:1 + width:auto let the image render at
     its natural 2000px and blow the viewport — pin it to the container */
  .tjc-rb__config-media > img, .tjc-rb__summary-media > img { width: 100%; flex: none; }
  /* it.54 (Omri, 21 Aug): ONE swipeable row — the uncapped gallery (rev 26)
     wrapped into 3-4 stacked rows of thumbs on phones, too messy. Carousel:
     single horizontal scroller, quiet (hidden) scrollbar; flex:0 0 auto on
     each thumb so the fixed-size row overflows instead of shrinking (same
     flex-shrink trap as the desktop rail, other axis). */
  /* it.55: min-width:0 + max-width:100% are what actually make the row SCROLL
     instead of stretching - measured: without the cap the row held its full
     1270px content width (clientW == scrollW, nothing to scroll). */
  .tjc-rb__config-thumbs { order: 1; flex-direction: row; flex-wrap: nowrap; flex: none; min-width: 0; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; -ms-overflow-style: none; }
  .tjc-rb__config-thumbs::-webkit-scrollbar { display: none; }
  .tjc-rb__config-thumb { width: 56px; height: 56px; flex: 0 0 auto; }
  .tjc-rb__cta { width: 100%; padding: 14px 20px; }
  .tjc-rb__assist { gap: 18px; }
  /* v0.77: "Send a hint" / "Book a virtual consultation" read a touch large
     against their surroundings on mobile and both tablets — trimmed 1px off
     each variant's base size. Desktop (>1366px) is untouched, so the base
     11px/10px rules above still apply there. */
  .tjc-rb a.tjc-rb__link-btn--caps, .tjc-rb button.tjc-rb__link-btn--caps { font-size: 10px; }
  .tjc-rb a.tjc-rb__link-btn--nowrap.tjc-rb__link-btn--caps { font-size: 9px; }
  /* the step-2 tray's compact "Continue" trims by the same margin, keeping
     its already-smaller footprint proportionate to the other three CTAs
     (all four share the same 12px label size — the mismatch people notice is
     the padding, not the type) */
  .tjc-rb__cta--tray { padding: 10px 34px; }

  /* precious metal swatches: the v0.48 squeeze (56px) crammed all six onto one
     row, but that's too narrow for the two-tone labels ("White Gold / Yellow
     Gold") — even with the slash-break above, two words per line at 56px
     still reads cramped next to a one-word "Platinum". Settled on a gentler
     width: four solid-colour swatches fit their own row (4 × ~78px ≈ 312px,
     comfortable on a 360px+ phone) and the two two-tone swatches + Platinum
     wrap to a second row — a deliberate, balanced split rather than forcing
     one row at the cost of legibility. */
  .tjc-rb__swatches { gap: 8px; }
  .tjc-rb__swatch { width: 66px; padding: 4px 2px; gap: 5px; }
  .tjc-rb__swatch-label { font-size: 9.5px; line-height: 1.25; }

  /* stone cards: borderless on mobile — media, specs and the coloured button
     breathe on the page instead of sitting in outlined boxes */
  .tjc-rb__stone { border: none; background: transparent; }
  .tjc-rb__stone.is-selected { border: none; }

  /* diamond step: stones lead — the rail is HIDDEN by default and opens as a
     full-screen filter sheet from the Filters button (× or Apply closes it).
     The open sheet is reparented to <body> (class --sheet) so position:fixed
     can never be clipped by a transformed ancestor. */
  .tjc-rb__rail { display: none; }
  /* z-index above the theme's sticky header (which was swallowing clicks on
     the × at the top of the sheet) — same tier as our modals */
  .tjc-rb__rail--sheet { display: block; position: fixed; inset: 0; z-index: 9990; margin: 0; background: #fff; border: none; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding: 0 16px 0; }
  /* the sheet carries .tjc-rb itself while reparented (keeps scoped link styles
     alive) — cancel the root paddings that class would otherwise drag along */
  .tjc-rb__rail--sheet.tjc-rb { padding: 0 16px 0; }
  /* the concierge pitch sits out of the sheet — filtering is the job here;
     guidance links live on the step itself and in step 4 (desktop rail keeps it) */
  .tjc-rb__rail--sheet .tjc-rb__concierge { display: none; }
  /* the bottom stack steps aside while the sheet is open */
  .tjc-rb-sheet-open .tjc-rb__mobsum { display: none; }
  /* summary chips of the current ranges, under the sheet header */
  .tjc-rb__rail-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 16px; }
  .tjc-rb__rail-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 10px; letter-spacing: 0.04em; color: #2D2D2D; background: #EFEFEF; padding: 5px 8px 5px 10px; border-radius: 3px; white-space: nowrap; }
  .tjc-rb__rail-chip button { border: none; background: none; padding: 0 2px; margin: 0; font-size: 13px; line-height: 1; color: #4A4A4A; cursor: pointer; }
  .tjc-rb__rail-mobhead { display: flex; align-items: center; justify-content: flex-end; position: sticky; top: 0; background: #fff; padding: 10px 0 8px; margin-bottom: 6px; z-index: 2; }
  .tjc-rb__rail-mobclose { position: static; }
  /* Apply rides STICKY inside the scrolling sheet — always visible at the
     bottom edge, can never detach from its scroller. display:block is
     ESSENTIAL — the desktop rule hides this element and position alone
     never re-enabled it (the missing-Apply bug). */
  .tjc-rb__rail-mobapply { display: block; position: sticky; bottom: 0; margin: 18px -16px 0; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: #fff; border-top: 1px solid #EFEDE8; z-index: 3; }
  .tjc-rb__tool-btn-label { font-size: 11px; letter-spacing: 0.06em; color: #2D2D2D; margin-left: 6px; }
  /* Gallery/List view buttons were a hair taller than the "Sort by" trigger
     beside them (34px fixed vs the trigger's ~31px content height) — visible
     with this many boxes stacked on a phone screen. Match the trigger's
     footprint and tighten the horizontal padding so the toolbar reads as one
     consistent row. */
  .tjc-rb__tool-btn--labelled { height: 31px; padding: 0 10px; }
  .tjc-rb__stone-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .tjc-rb__stone-btn { width: 100%; }
  /* gallery card button now reads "Select diamond" on mobile too (was "View
     Diamond") — a point smaller here only, so the longer label sits as quietly
     as the old one did in these tight 2-across tiles */
  .tjc-rb__stone .tjc-rb__stone-btn { font-size: 9.5px; }
  /* v0.69: the "View full details" block rule moved to the base stone-card
     styles (near .tjc-rb__stone-price) so it applies at every width, not just
     this ≤1366px band — removed the duplicate here. */
  .tjc-rb__tray { padding: 12px 14px; }
  .tjc-rb__tray-blocks { gap: 18px; }

  /* list view: FULL columns on mobile (like desktop) — compact type, icon-only
     shape cell, centred headings, zebra + grey header inherit from base */
  /* rev 7: the Polish/Symmetry columns hide at narrow widths — the grades
     live in the drawer here. 6 tracks: icon, carat, colour, clarity, price,
     chevron. Specificity deliberately beats the `.tjc-rb__stone-row-main
     .tjc-rb__stone-row-spec { display:block }` rule below. */
  .tjc-rb__stone-listhead .tjc-rb__col-grade,
  .tjc-rb__stone-row-main .tjc-rb__stone-row-spec.tjc-rb__col-grade { display: none; }
  .tjc-rb__stone-listhead { display: grid; grid-template-columns: 34px repeat(3, 1fr) 1.2fr 20px; gap: 4px; padding: 10px 8px; font-size: 8.5px; letter-spacing: 0.06em; text-align: center; }
  .tjc-rb__stone-listhead span:first-child { text-align: center; }
  .tjc-rb__stone-row-main { grid-template-columns: 34px repeat(3, 1fr) 1.2fr 20px; gap: 4px; padding: 10px 8px; }
  .tjc-rb__stone-row-main .tjc-rb__stone-row-spec { display: block; font-size: 10.5px; text-align: center; }
  .tjc-rb__stone-row-shapecell span:last-child { display: none; } /* icon carries the shape */
  .tjc-rb__stone-row-shape { width: 26px; height: 26px; flex: 0 0 26px; margin: 0 auto; }
  .tjc-rb__stone-row-price { font-size: 10.5px; text-align: center; }
  /* expanded drawer (TMC-genre detail row): media square LEFT, title + price +
     two-column specs RIGHT, Select spanning the full width beneath — no wasted
     width, far less vertical depth than the stacked layout */
  .tjc-rb__stone-row-detail { padding: 14px 12px; }
  .tjc-rb__stone-row.is-open .tjc-rb__stone-row-detail { display: grid; grid-template-columns: 128px 1fr; gap: 12px 14px; align-items: start; }
  /* rev 9 (Omri): pin the drawer media to a TRUE square on mobile — the flex
     row was stretching it to the text column's height, wrecking the crop and
     leaving the square player unable to fill it */
  .tjc-rb__stone-row-video { flex: none; width: 128px; height: 128px; aspect-ratio: 1; align-self: flex-start; margin: 0; }
  .tjc-rb__stone-row-video span { display: none; } /* caption hides — the square stays compact */
  .tjc-rb__stone-row-facts { display: none; } /* desktop prose lines sit out */
  .tjc-rb__stone-row-facts-m { display: block; }
  /* no price line — the row summary above already shows it; title finer + smaller */
  .tjc-rb__rowm-title { margin: 0 0 8px; font-size: 12px; font-weight: 500; color: #2D2D2D; }
  .tjc-rb__rowm-specs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 10px; font-size: 11px; color: #4A4A4A; }
  .tjc-rb__rowm-specs strong { color: #2D2D2D; font-weight: 500; }
  .tjc-rb__rowm-more { margin-top: 10px; font-size: 11px; }
  .tjc-rb__stone-row-detail .tjc-rb__stone-btn { grid-column: 1 / -1; width: 100%; }

  /* step 4: crafting options stack; summary lines wrap */
  .tjc-rb__craft-opts { flex-direction: column; }
  /* perks: ONE row of four (trial 8 Jul — the 2×2 wrap left a hollow middle);
     type steps down and icons shrink so all four sit comfortably. Labels
     already break to two lines. Revert = restore flex-wrap: wrap; gap: 14px
     8px; flex: 1 1 40% and drop the size overrides. */
  .tjc-rb__perks { flex-wrap: nowrap; gap: 6px; }
  .tjc-rb__perks a.tjc-rb__perk, .tjc-rb .tjc-rb__perks a.tjc-rb__perk { flex: 1 1 0; min-width: 0; font-size: 9px; letter-spacing: 0.02em; }
  .tjc-rb__perk svg { width: 22px; height: 22px; margin-bottom: 5px; }
  .tjc-rb__summary-line { flex-wrap: wrap; }
  /* payment link keeps the desktop convention: beneath the price, right side */
  /* summary type steps down one point so the certificate + measurements share
     the diamond line's third row instead of wrapping to a fourth */
  .tjc-rb__summary-line-label strong { font-size: 10px; margin-bottom: 2px; }
  .tjc-rb__summary-line-label span { font-size: 11px; line-height: 1.45; }
  .tjc-rb__summary-line-price { font-size: 12px; }
  /* TMC-density pass: tighter rows and smaller icons so the whole breakdown —
     lines, total, crafting, CTA — sits closer to one screen */
  .tjc-rb__summary-line { padding: 9px 0; gap: 10px; }
  .tjc-rb__summary-line-icon, .tjc-rb__summary-line-thumb { width: 38px; height: 38px; flex: 0 0 38px; }
  .tjc-rb__summary-line-icon svg { width: 27px; height: 27px; }
  .tjc-rb__summary-line-icon svg[viewBox="0 0 140 80"] { width: 34px; height: 19px; }
  /* crafting window sentence matches the breakdown type above it */
  .tjc-rb__craft-text { font-size: 11px; line-height: 1.55; }

  /* persistent three-tier stack pinned to the bottom edge:
     summary line (grey gradient) → price + context note → sticky step CTA */
  .tjc-rb { padding-bottom: 190px; } /* keep content clear of the full stack */
  /* step 4: no sticky drawer to clear, but NOT zero — a hard 0 left the
     "Send a hint / Book a consultation" links sitting flush against the next
     theme section (Crafted to be cherished...) with nothing but that
     section's own padding_top between them, reading as one merged block. */
  .tjc-rb.tjc-rb--no-mobsum { padding-bottom: 48px; }
  .tjc-rb__mobsum { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 800; background: #fff; box-shadow: 0 -4px 18px rgba(26, 26, 26, 0.07); padding-bottom: env(safe-area-inset-bottom); transition: transform 0.3s ease, opacity 0.3s ease; }
  .tjc-rb__mobsum[hidden] { display: none; } /* display:block above defeats the hidden attribute — restore it (step 4, catalogue) */
  /* the stack yields while the page's real primary button is on screen */
  .tjc-rb__mobsum.is-yielding { transform: translateY(105%); opacity: 0; pointer-events: none; }
  .tjc-rb__mobsum-bar { display: flex; align-items: center; gap: 10px; width: 100%; background: linear-gradient(180deg, #FAFAF9, #F1F1F0); border: none; border-top: 1px solid #E9E9E7; border-bottom: 1px solid #E9E9E7; font-family: 'Montserrat', sans-serif; padding: 11px 16px; cursor: pointer; }
  .tjc-rb__mobsum-label { font-size: 11.5px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: #2D2D2D; }
  .tjc-rb__mobsum-plus { display: flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: #BBC7D7; color: #2D2D2D; margin-left: auto; transition: transform 0.25s ease; }
  .tjc-rb__mobsum-bar.is-open .tjc-rb__mobsum-plus { transform: rotate(45deg); }
  .tjc-rb__mobsum-price-row { display: flex; align-items: baseline; gap: 7px; padding: 11px 16px 0; }
  .tjc-rb__mobsum-grand { font-size: 16px; font-weight: 500; color: #2D2D2D; }
  .tjc-rb__mobsum-note { font-size: 10px; color: #939292; }
  .tjc-rb__mobsum-cta-row { padding: 10px 16px 12px; }
  .tjc-rb__mobsum-cta-row .tjc-rb__cta { width: 100%; }
  .tjc-rb__mobsum-panel { border-bottom: 1px solid #EFEDE8; max-height: 55vh; overflow-y: auto; padding: 4px 16px; }
  .tjc-rb__mobsum-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid #F2F0EC; }
  .tjc-rb__mobsum-row:last-child { border-bottom: none; }
  .tjc-rb__mobsum-row--pending { opacity: 0.55; }
  .tjc-rb__mobsum-ic { flex: 0 0 30px; width: 30px; height: 30px; color: #2E3338; }
  .tjc-rb__mobsum-ic svg { width: 100%; height: 100%; }
  .tjc-rb__mobsum-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
  .tjc-rb__mobsum-txt strong { font-size: 11.5px; font-weight: 500; color: #2D2D2D; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .tjc-rb__mobsum-txt span { font-size: 10.5px; color: #939292; }
  .tjc-rb__mobsum-price { font-size: 11.5px; font-weight: 500; color: #2D2D2D; white-space: nowrap; }

  /* modals: near-full-width, generous height, tighter padding */
  .tjc-rb__modal { padding: 12px; }
  .tjc-rb__modal-content { max-height: 88vh; }
  .tjc-rb__modal-content--info { padding: 26px 18px 22px; }
  .tjc-rb__info-figures { gap: 10px; }
  .tjc-rb__karat-bar-name { flex: 0 0 78px; font-size: 8.5px; }
  .tjc-rb__hint-names { flex-direction: column; }
}

/* ══ STEP BAR: compact circle STEPPER (≤1023px only) — v0.56 ══
   Previously part of the wide ≤1366px mobile band, so it also applied
   through iPad Pro. Omri's call this round: bring back the TMC-style boxes
   at iPad Pro (1024–1366) — the base/unconditional box rules near the top
   of this file (.tjc-rb__step etc.) now apply there untouched, since
   nothing in the 1024–1366 range overrides them any more. This block only
   dissolves the boxes into the fine-line-and-circles stepper from 1023px
   down, where the boxes are too cramped to hold four across.
   Note: the old `@media (max-width: 1060px) { .tjc-rb__step-sub {
   display:none } }` rule was deleted (not moved) — it used to intrude on
   the 1024–1060 sliver and hide the box's subtitle without the stepper's
   own shortname-swap logic being active there, recreating the earlier
   "RING"/"RING" ambiguity. Boxes now keep their subtitle at every width
   ≥1024px, so no separate hide rule is needed. */
@media (max-width: 1023px) {
  .tjc-rb__steps { gap: 0; margin: 18px 0 20px; position: relative; }
  /* the connecting line — runs between the first and last circle centres
     (4 equal columns → centres at 12.5% and 87.5%) */
  .tjc-rb__steps::before { content: ''; position: absolute; top: 12px; left: 12.5%; right: 12.5%; height: 1.5px; background: #D9D6D0; }
  .tjc-rb__step { background: transparent; border: none; border-radius: 0; box-shadow: none; padding: 0; gap: 0; flex-direction: column; align-items: center; justify-content: flex-start; position: relative; }
  .tjc-rb__step.is-active, .tjc-rb__step.is-done { background: transparent; border: none; box-shadow: none; }
  .tjc-rb__step:disabled { opacity: 1; }
  .tjc-rb__step:disabled .tjc-rb__step-badge { background: #EFEFEF; border-color: #E0E0E0; color: #939292; }
  .tjc-rb__step:disabled .tjc-rb__step-name, .tjc-rb__step:disabled .tjc-rb__step-shortname { color: #939292; }
  /* circles sit ON the line — solid fill masks it passing behind */
  .tjc-rb__step-badge { flex: 0 0 24px; width: 24px; height: 24px; font-size: 10.5px; margin-bottom: 7px; }
  .tjc-rb__step-badge svg { width: 10px; height: 10px; }
  /* the current step wears a mist halo ring */
  .tjc-rb__step.is-active .tjc-rb__step-badge { box-shadow: 0 0 0 2.5px #fff, 0 0 0 4px #BBC7D7; }
  .tjc-rb__step-text { align-items: center; gap: 0; }
  .tjc-rb__step-name, .tjc-rb__step-shortname { font-size: 10px; letter-spacing: 0.05em; font-family: 'Marigold', serif; text-transform: uppercase; color: #2D2D2D; white-space: nowrap; line-height: 1.1; }
  .tjc-rb__step-sub, .tjc-rb__step-meta, .tjc-rb__step-icon { display: none; }
  /* steps 3 & 4 swap the ambiguous "Ring" for their own short names */
  .tjc-rb__step-text:has(.tjc-rb__step-shortname) .tjc-rb__step-name { display: none; }
}

/* ══ TABLET PADDING EXCEPTION (750–1023px) — v0.53 ══
   Omri compared us against TMC at iPad Air width directly: TMC insets its
   content noticeably further from the edges than our 16px (~40px+ there vs
   ours). Scoped deliberately narrow: true mobile (≤749px) is already signed
   off at 16px and stays untouched; the iPad Pro two-column range
   (1024–1366px, exception above) is explicitly EXCLUDED too — Omri's call,
   since two real columns already read as well-proportioned there without
   extra edge padding. This only touches the single-column tablet slice in
   between. */
@media (min-width: 750px) and (max-width: 1023px) {
  .tjc-rb.page-width { padding-left: 40px; padding-right: 40px; }
}

/* ══ iPad Pro EXCEPTION (1024–1366px) — v0.52, extended v0.55 ══
   Confirmed directly by Omri against TMC's own site: the config/summary
   panels (image + form) switch to a real two-column split at iPad Pro.
   Step 1's catalogue grid stays mobile-styled through 1366px (unchanged).
   Step 2's diamond rail is PARTIALLY reinstated this round — see below. */
@media (min-width: 1024px) and (max-width: 1366px) {
  /* v0.70: Omri revisited v0.53's explicit call to leave iPad Pro OUT of the
     tablet 40px edge-padding exception (reasoning at the time: "two real
     columns already read as well-proportioned there without extra edge
     padding") — on a fresh look at 1024px he felt the two-column content now
     sits too close to the screen edges at the inherited flat 16px (set for
     the whole ≤1366px band above). Bumped to 28px here specifically: a
     deliberate middle ground between true mobile's 16px and the single-column
     tablet band's fuller 40px, since iPad Pro's two real columns already use
     the width efficiently and don't need as much edge relief as a stacked
     single column does. */
  .tjc-rb.page-width { padding-left: 28px; padding-right: 28px; }
  /* v0.76: the step bar's price (.tjc-rb__step-meta, right-aligned inside
     each box) was sitting too close to the box's right edge on iPad Pro —
     Omri's own diagnosis: reduce the type slightly so the box feels less
     cramped and the price doesn't push as far right, rather than widening
     the box's own padding (which would shrink the badge/name side instead).
     Trims step-meta's price and, for visual consistency within the same
     box, the smaller step-sub label by a point each — step-name (the serif
     step title) is left alone since it's the one piece of text that should
     stay full-strength. */
  .tjc-rb__step-meta { font-size: 10.5px; }
  .tjc-rb__step-sub { font-size: 9.5px; }
  .tjc-rb__config-layout, .tjc-rb__summary-layout { grid-template-columns: minmax(0, 58fr) minmax(0, 37fr); gap: 40px; } /* it.55: minmax - same scroll-container min-content blowout as the phone band */
  /* v0.55: media stays STICKY and two-column, but keeps the mobile band's
     image-leads/thumbs-below internal arrangement rather than restoring the
     desktop thumb-rail-beside-image treatment — Omri felt the image read
     small next to the options column once a ~82px-wide thumb rail (68px +
     14px gap) was carved out of it; freeing that width for the image alone
     makes it noticeably bigger while the outer two-column split is unchanged. */
  .tjc-rb__config-media, .tjc-rb__summary-media { position: sticky; top: 24px; flex-direction: column; gap: 10px; max-width: none; }
  .tjc-rb__config-media > img, .tjc-rb__summary-media > img { width: 100%; flex: none; }
  /* it.54: same single swipeable row as the phone band (this tier re-declares
     the thumbs row, so it needs its own copy of the carousel rules) */
  .tjc-rb__config-thumbs { order: 1; flex-direction: row; flex-wrap: nowrap; flex: none; min-width: 0; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; -ms-overflow-style: none; }
  .tjc-rb__config-thumbs::-webkit-scrollbar { display: none; }
  .tjc-rb__config-thumb { width: 70px; height: 70px; flex: 0 0 auto; }

  /* v0.56: step bar is box-style again at this width (see the dedicated
     ≤1023px STEPPER block) — it uses its own base desktop margin
     (60px 0 48px) automatically now, so the v0.55 override that used to
     compensate for the compact stepper's tight 18px/20px margin is gone. */

  /* v0.55: step 2's filter rail returns to the desktop pattern — visible
     inline by default (sticky sidebar), hideable via the existing
     .rail-hidden toggle class — instead of the mobile full-screen sheet.
     Omri specifically recalled this as "a nice touch" from an earlier
     desktop build. Gallery/list views, the toolbar, and the stone-card
     "View full details" link all stay mobile-styled — this ONLY concerns
     the rail's own visibility/layout. Needs a matching JS change (the
     rail-toggle click handler) — see railIsSheet() in tjc-ring-builder.js. */
  .tjc-rb__diamond-layout { grid-template-columns: 260px 1fr; gap: 24px; }
  .tjc-rb__rail { display: block; position: sticky; top: 20px; }

  /* v0.56: a third stone card per row — Omri felt two large gallery cards
     wasted space at this width once the rail sidebar was back (TMC runs
     four; three keeps cards a comfortable size without feeling cramped).
     Everything else about step 2 (toolbar, list view, card content,
     "View full details" link) is untouched. */
  .tjc-rb__stone-grid { grid-template-columns: repeat(3, 1fr); gap: 14px; }

  /* v0.56: the mobile "Apply" button was a sheet-closing affordance for
     the full-screen filter sheet — now that the rail is an always-visible
     inline sidebar here (not a sheet), selections apply live as you change
     them, so the button is redundant and its position (beneath the
     guidance copy, at the bottom of every step) reads as misplaced. Hidden
     for this width range only; mobile/iPad Air keep it, since the rail is
     still a sheet there. */
  .tjc-rb__rail-mobapply { display: none; }
}

/* ══ "A Seamless Journey" section fixes — v0.54, REWORKED v0.56,
   RANGE-WIDENED v0.57, SELECTOR ROOT-CAUSE FIX v0.58, RE-ARCHITECTED v0.62,
   EXTENDED TO product.diamond-rings.json v0.73 ══
   This section (Custom 2 Col RichText, sections/custom-two-col-text.liquid)
   is a SHARED theme section used on ~9 other templates site-wide — it is
   NOT edited here. Everything below is scoped to a substring match on this
   page's unique block ID (custom_two_col_text_rb1, from
   templates/page.tjc-ring-builder.json), so nothing else on the site is
   affected. (The paragraph/bullet-list left-alignment mismatch Omri also
   flagged was a block-setting problem, not CSS — fixed by changing
   text_rbj1's text_indent from "rich-text__pindent" to "noindent" in the
   template JSON, matching the list block's own setting.)
   v0.73: every selector below now ALSO matches custom_two_col_text_bg3hnB —
   the separate "Seamless Journey" instance on product.diamond-rings.json
   (the product-fork template with the autoplay video). Duplicated the FULL
   compound selector for each rule (not just the leading bracket) — a naive
   comma-insert right after `[class*="...rb1"]` would silently detach the
   descendant part of the selector into its own dangling, unscoped rule.
   This file (assets/tjc-ring-builder.css) wasn't even loading on that
   product template before now — added the stylesheet_tag to
   snippets/tjc-builder-cta.liquid (a custom_liquid block rendered ONLY on
   that page) so it's pulled in there without touching any other template.
   The reorder block and the ring-builder-specific -140px gap fix further
   below are DELIBERATELY NOT extended here — product.diamond-rings.json's
   reorder is handled directly in its own template JSON instead (see its
   "order" array), and the -140px fix is specific to the ring builder's own
   190px reserved bottom padding, which doesn't exist on this page. */
   v0.58 ROOT CAUSE (selector never matched at all, all of v0.54/56/57 were
   inert): Online Store 2.0 PREFIXES section IDs defined inside a JSON
   template with `template--<numeric template id>__` at render time, so
   `.section-custom_two_col_text_rb1` never matched anything real. Fixed by
   switching to a `[class*="..."]` substring attribute selector on the
   stable, human-authored part of the ID, immune to that prefix.
   v0.62 — Omri checked TMC's own equivalent section directly and found they
   DON'T force two columns at every tablet width: TMC STACKS (single column,
   heading+paragraph above, list below) through the smaller tablet size and
   only goes side-by-side at the larger iPad Pro size. v0.56/57/59/61 fought
   to make v0.51-style vertical alignment work for a forced 2-column layout
   through the ENTIRE 751–1366px band, and every attempt at getting the two
   uneven-height columns (heading+paragraph vs a 5-item list) to align
   cleanly at the narrower end (iPad Air) fell short — because the section
   was never meant to be 2 columns at that width in the first place. Instead
   of continuing to chase alignment on a forced layout, this switches to
   matching TMC's actual pattern: split the fix into the SAME two ranges the
   rest of this page already uses everywhere else (the ≤1023px "mobile band"
   vs the 1024–1366px "iPad Pro exception") — stack below 1024, force
   side-by-side only at 1024+. This removes the alignment problem at its
   root for iPad Air (a stacked layout has no side-by-side columns to
   misalign) while keeping the working 2-column iPad Pro treatment. */
@media (min-width: 751px) and (max-width: 1023px) {
  /* STACKED range (iPad Air and similar) — this is the section's own native
     ≤1025px behaviour (single column), left alone except for one gap: its
     own ≤1025px rule only ever gives the two stacked blocks a 1rem SIDE
     margin, no vertical gap between them — original v0.54 complaint, still
     true here since v0.56+ moved away from patching the stacked state.
     Restoring a clean vertical gap between the heading+paragraph block and
     the list block below it.
     v0.76: Omri found this gap AND the shared-left-edge fix below both
     reading as not applied on a fresh iPad Air check (paragraph also still
     full-width) — re-applied all three with `!important` in case something
     with higher specificity (the shared section's own native ≤1025px rule,
     or an inline style) was quietly winning; also bumped the gap up and the
     paragraph cap down for a more obviously intentional result rather than
     a subtle one that's easy to mistake for "still not applied". */
  [class*="custom_two_col_text_rb1"] .rich-text__blocks:nth-child(odd),
  [class*="custom_two_col_text_bg3hnB"] .rich-text__blocks:nth-child(odd) { margin-bottom: 2.5rem !important; }
  /* v0.63: two more issues Omri found once the stacked layout was in place.
     (a) The list sat visibly indented further right than the heading above
     it — traced to the shared section's own `<ul>` default padding-left:
     its own CSS only zeroes that out inside a `@media max-width:750px`
     block, i.e. TRUE mobile only. This 751–1023px stacked range inherited
     the section's native behaviour but not that specific reset, so the
     bullet icons started ~40px right of where the heading text starts.
     Zeroing it here too so both blocks share the same left edge.
     (b) The paragraph was stretching the full stacked-column width (nearly
     edge-to-edge at this width, 2 long lines) — v0.63 capped it to 480px;
     v0.76 narrows this further to 340px (a genuinely "medium" measure that
     finishes roughly halfway across the column at this width, per Omri's
     direct comparison against the page) rather than the fuller 480px, which
     still read as close to full-width. */
  [class*="custom_two_col_text_rb1"] .rich-text__text > ul,
  [class*="custom_two_col_text_bg3hnB"] .rich-text__text > ul { padding: 0 !important; margin-left: 0 !important; }
  [class*="custom_two_col_text_rb1"] .rich-text__blocks:nth-child(odd) .rich-text__text p,
  [class*="custom_two_col_text_bg3hnB"] .rich-text__blocks:nth-child(odd) .rich-text__text p { max-width: 340px !important; }
  [class*="custom_two_col_text_rb1"] .rich-text__blocks:nth-child(odd) .rich-text__text,
  [class*="custom_two_col_text_bg3hnB"] .rich-text__blocks:nth-child(odd) .rich-text__text,
  [class*="custom_two_col_text_rb1"] .rich-text__blocks:nth-child(even) .rich-text__text,
  [class*="custom_two_col_text_bg3hnB"] .rich-text__blocks:nth-child(even) .rich-text__text { padding-left: 0 !important; margin-left: 0 !important; }
}
@media (min-width: 1024px) and (max-width: 1366px) {
  /* 2-COLUMN range (iPad Pro) — matches TMC's own breakpoint for switching
     to side-by-side. The heading reliably fits on one line at this width,
     so the two columns land close enough in height that a simple vertical
     centre reads as clean and intentional (confirmed — this is the range
     Omri already signed off as looking right). */
  [class*="custom_two_col_text_rb1"] .rich-text-content,
  [class*="custom_two_col_text_bg3hnB"] .rich-text-content { display: flex !important; align-items: center; }
  [class*="custom_two_col_text_rb1"] .rich-text__blocks:nth-child(odd),
  [class*="custom_two_col_text_bg3hnB"] .rich-text__blocks:nth-child(odd) { margin: 0 2.5rem 0 0; }
  [class*="custom_two_col_text_rb1"] .rich-text__blocks:nth-child(even),
  [class*="custom_two_col_text_bg3hnB"] .rich-text__blocks:nth-child(even) { margin: 0 0 0 2.5rem; }
  /* belt-and-braces from v0.61: balances the heading's line break if it
     ever wraps at this width (e.g. very large browser zoom) — harmless
     when the heading stays on one line, which is the normal case here. */
  [class*="custom_two_col_text_rb1"] h2,
  [class*="custom_two_col_text_bg3hnB"] h2 { text-wrap: balance; }
  /* v0.64: the OTHER half of v0.61 — extra li margin-bottom (5px→13px) —
     is REMOVED here (not just reverted, actively wrong at this width now).
     It was tuned to close a height gap in the OLD merged 751–1366px range,
     where the heading commonly wrapped to 2 lines at the narrow end. Now
     that iPad Pro is its own range with a single-line heading, block1
     (heading+paragraph) and block2 (list) are already close in height at
     their ORIGINAL spacing — adding +8px × 5 items made the list TALLER
     than the heading block instead, so centring flipped direction and
     pushed the heading DOWN below the list's top edge (confirmed by Omri's
     screenshot: "selling points start higher than the title"). Dropping
     back to the list's normal spacing fixes it. */
}

/* ══ Layout order shift: "A Seamless Journey" moves ABOVE "Crafted to be
   cherished..." + the 3 content cards, on mobile/tablet/iPad Pro
   (≤1366px) — v0.65, RANGE-WIDENED v0.66 ══
   Omri's request: across all 3 non-desktop layouts (mobile, tablet, iPad
   Pro) the customer should see the process/promise section before the
   editorial cards, not after — desktop (>1366px) keeps the original order,
   unchanged. (v0.65 originally scoped this to ≤1023px only, matching the
   earlier "mobile, tablet" wording; Omri confirmed this round it should
   cover iPad Pro too, so widened to match this page's usual ≤1366px
   non-desktop band.)
   Section order lives in templates/page.tjc-ring-builder.json and is shared
   HTML source order — there's no way to have two different source orders
   for two different breakpoints without JS. Instead, `#MainContent` (the
   theme's global content wrapper, used on EVERY page) is turned into a flex
   column with explicit `order` per section ONLY when it contains OUR unique
   custom_two_col_text_rb1 section — gated with `:has()` (well-supported in
   2026) so this NEVER applies on any other page/template site-wide, even
   though it targets a shared element. Confirmed via direct DOM inspection
   (Claude in Chrome) that all 7 sections are plain direct children of
   #MainContent, in template order, each carrying a unique
   `id="shopify-section-template--<id>__<section-key>"` — the same
   template-id-prefix quirk root-caused in v0.58, so section keys are
   matched the same safe way, with substring selectors. NOTE: this still
   only fires on THIS page — product.diamond-rings.json's deep-entry variant
   has its own separate section instance (custom_two_col_text_bg3hnB, not
   _rb1), so the :has() gate doesn't match there; flagged to Omri as a
   separate open question, not yet actioned. */
@media (max-width: 1366px) {
  #MainContent:has([id*="__custom_two_col_text_rb1"]) { display: flex; flex-direction: column; }
  #MainContent:has([id*="__custom_two_col_text_rb1"]) > [id*="__breadcrumb_nav"] { order: 1; }
  #MainContent:has([id*="__custom_two_col_text_rb1"]) > [id*="__image_banner_rb1"] { order: 2; }
  #MainContent:has([id*="__custom_two_col_text_rb1"]) > [id*="__main"] { order: 3; }
  #MainContent:has([id*="__custom_two_col_text_rb1"]) > [id*="__custom_two_col_text_rb1"] { order: 4; }
  #MainContent:has([id*="__custom_two_col_text_rb1"]) > [id*="__rich_text_rb1"] { order: 5; }
  #MainContent:has([id*="__custom_two_col_text_rb1"]) > [id*="__multicolumn_rb1"] { order: 6; }
  #MainContent:has([id*="__custom_two_col_text_rb1"]) > [id*="__featured_collection_rb1"] { order: 7; }

  /* v0.67: the reorder puts Seamless Journey DIRECTLY after the ring
     builder now — and `.tjc-rb` reserves a flat 190px of bottom padding on
     every step except step 4, so the sticky ring-summary drawer never
     covers the CTA/links while a customer is actively on that step. With
     nothing else in between any more, that reserved space reads as a huge
     dead gap before the next heading (confirmed live: 0px gap between the
     two sections' boxes — the whole 190px is padding INSIDE the ring
     builder's own box, not space between sections). Pulling Seamless
     Journey up to compensate, but NOT touching `.tjc-rb`'s own padding
     itself — that reservation still matters while a customer is actively
     scrolled within steps 1–3 (the drawer can still open without covering
     real content); this only closes the now-empty visual gap once they've
     scrolled past the builder entirely. Step 4 (`.tjc-rb--no-mobsum`)
     already reserves a much smaller, already-tuned 48px (v0.54) — pulling
     up by the SAME amount there would overlap real content, so that case
     is explicitly reset back to 0 extra pull-up, checked via `:has()`
     against the whole page (live/reactive as the step-switching JS toggles
     the class, since this is a single-page app, not full reloads). */
  #MainContent:has([id*="__custom_two_col_text_rb1"]) [id*="__custom_two_col_text_rb1"] { margin-top: -140px; }
  #MainContent:has(.tjc-rb--no-mobsum) [id*="__custom_two_col_text_rb1"] { margin-top: 0; }
}

/* ══ "A Seamless Journey": centre-aligned on true mobile only (≤750px) —
   v0.65, FIXED v0.68 ══ iPad Air/tablet (751–1023px) keeps the left-aligned
   stacked layout confirmed in v0.63 — Omri asked for centring on mobile
   specifically. Heading + paragraph centre via text-align.
   v0.65's list fix used `display:flex; flex-direction:column;
   align-items:center` — this centres EACH li's box individually, and since
   each li's box width equals its own text length, rows with shorter text
   (e.g. "Lifetime warranty guarantee") end up with their icon sitting
   further right than rows with longer text (e.g. "Complimentary express
   insured shipping"), so the diamond icons never line up in a column —
   confirmed by Omri's screenshot against TMC, where every icon starts at
   the same x position regardless of row length. Fixed by centring the
   LIST AS ONE BLOCK instead of centring each row: `width: fit-content` +
   `margin: 0 auto` sizes the ul to its widest row and centres that whole
   block on the page, while li's default block stacking keeps every row
   left-aligned WITHIN the block — so icons land in a single column and the
   block itself still sits centred under the centred heading. */
@media (max-width: 750px) {
  [class*="custom_two_col_text_rb1"] .rich-text__text,
  [class*="custom_two_col_text_bg3hnB"] .rich-text__text { text-align: center; }
  [class*="custom_two_col_text_rb1"] .rich-text__text > ul,
  [class*="custom_two_col_text_bg3hnB"] .rich-text__text > ul { display: block; width: fit-content; max-width: 100%; margin: 0 auto; text-align: left; }
}

/* ultra-wide cap (20 Jul) - at >=1700px CSS viewports the PDP's full-width
   two-column block stretched edge to edge (Omri flagged via browser zoom-out;
   TMC caps and centres instead). The builder page needs nothing: its root
   already carries the theme's page-width class. Loads on all six facelift
   PDP surfaces via the perks/cta snippets. */
@media (min-width: 1700px) {
  .product-main-top-section { max-width: 1660px; margin-left: auto; margin-right: auto; }
}

/* ── NIVODA-20: live-inventory wait states (loading / empty / error) ──
   Rendered inside the stone grid so rail, tray and step chrome hold
   their layout while the Storefront API fetch runs. Scoped .tjc-rb. */
.tjc-rb .tjc-rb__stone-wait {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-height: 260px;
  padding: 32px 20px;
  text-align: center;
}
.tjc-rb .tjc-rb__stone-wait p {
  margin: 0;
  font-size: 13px;
  color: #2D2D2D;
  max-width: 420px;
  line-height: 1.6;
}
.tjc-rb .tjc-rb__stone-wait a { color: #2D2D2D; text-decoration: underline; text-underline-offset: 2px; }
.tjc-rb .tjc-rb__stone-wait-ring {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid #BBC7D7;            /* Brand Mist track */
  border-top-color: #2D2D2D;            /* standard black sweep */
  animation: tjc-rb-wait-spin 0.9s linear infinite;
}
@keyframes tjc-rb-wait-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .tjc-rb .tjc-rb__stone-wait-ring { animation: none; border-top-color: #BBC7D7; }
}

/* ── NIVODA-20 chunk 2 (rev. 27 Jul): TMC-genre in-card 360° media ──
   Photo = poster frame; rotate badge top-right signals a 360° video;
   hover/tap loads the embed OVER the poster, playing in place. Single-
   class selectors on purpose — the v0.42 reparenting lesson: never hang
   these off a `.tjc-rb` ancestor that a body-reparented element loses. */
/* rev 4 — structure lifted from TMC's live step 2 (forensic pass 27 Jul):
   the media box is a FIXED square; poster and player are both absolute
   children, so no media state can ever change a card's size (rev-2's
   in-flow img was what let cards grow and stay grown). Poster is
   object-fit COVER like theirs — with the box fixed, the mild crop on
   landscape sources reads correctly (their posters vary 1.0–1.27 the
   same as ours). Poster sits ABOVE the player and fades out only when
   the player is loaded — the white iframe warm-up is never seen. */
.tjc-rb__stone-media--photo { position: relative; padding: 0; overflow: hidden; }
.tjc-rb__stone-media--photo .tjc-rb__stone-img--poster {
  position: absolute; top: 0; left: 0; z-index: 1;
  transition: opacity 0.25s ease;
}
.tjc-rb__stone-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tjc-rb__stone-iframe { width: 100%; height: 100%; border: 0; display: block; }
.tjc-rb__stone-iframe--card { position: absolute; top: 0; left: 0; }
/* rotate mark: bare white, TMC-weight shadow, always above poster+player */
.tjc-rb__stone-360 {
  position: absolute; top: 8px; right: 8px; z-index: 2;
  width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
}
.tjc-rb__stone-360 svg {
  width: 30px; height: 30px; color: #FFFFFF;
  filter: drop-shadow(1px 2px 3px rgba(0, 0, 0, 0.55));
}
.tjc-rb__stone-row-video--live { padding: 0; overflow: hidden; }
/* modal media: a contained square (not full modal width — the full-width
   square towered over the specs and read as "ratio way off") */
.tjc-rb__stonemod-media--live {
  aspect-ratio: 1; padding: 0; overflow: hidden;
  width: min(100%, 340px); margin-left: auto; margin-right: auto;
}

/* ── rev 7 (Omri, TMC-referenced): drawer spec stacks ──
   Colour/Clarity stacked left · Polish/Symmetry (+Cut) stacked right ·
   Measurements full-width beneath. Single-class selectors (reparent-safe). */
.tjc-rb__rowm-col > div { margin: 0 0 5px; }
.tjc-rb__rowm-meas { font-size: 11px; color: #4A4A4A; margin-top: 2px; }
.tjc-rb__rowm-meas strong { color: #2D2D2D; font-weight: 500; }

/* rev 7 (Omri): iPad Air band gets 3 stone columns — the 2-col rule was
   spanning all of ≤1023px; phones (≤750px) keep 2. Appended last so it
   wins the cascade over the older 2-col rule in the ≤1366 block. */
@media (min-width: 751px) and (max-width: 1023px) {
  .tjc-rb__stone-grid { grid-template-columns: repeat(3, 1fr); gap: 12px; }
}

/* rev 8 (Omri): on phones the modal media goes full-bleed across the modal —
   the 340px cap wasted the one screen dimension a phone has. The player
   auto-sizes to the box, so no JS change needed. */
@media (max-width: 749px) {
  .tjc-rb__stonemod-media--live { width: 100%; max-width: none; }
}

/* rev 9 (Omri, TMC-referenced): the OPEN row's summary bar fills with Brand
   Mist so it's unmistakable which stone the drawer belongs to — most valuable
   on small screens, applied at every breakpoint for one consistent system.
   #2D2D2D text/icons hold contrast on Mist (per the site typography rules). */
.tjc-rb__stone-row.is-open > .tjc-rb__stone-row-main { background: #BBC7D7; }

/* ── rev 11 (Omri, 28 Jul) — CONCIERGE PROMPT ──────────────────────────────
   One panel serving two moments: an empty result set, and a stretch of
   inactivity on the diamond step. It docks to the bottom of the viewport so
   it never displaces the grid mid-browse, and it stays a panel rather than a
   modal — nothing behind it is blocked, no overlay, no scroll lock. The
   visitor can keep working with it on screen, which is the difference between
   an offer of help and an interruption. */
/* rev 19 (Omri, 19 Aug): the card now sits in the MIDDLE of the screen
   (was bottom-docked), sized down to a compact prompt. Everything inside is
   centre-aligned. Still a panel, not a modal - no overlay, no scroll lock,
   the page behind stays usable. Scoped to [data-rb-concierge] so the rail's
   "Guidance at every step" box (same class) is untouched. Fade+settle
   transition replaces the slide-up (a slide reads wrong from mid-screen). */
.tjc-rb__concierge[data-rb-concierge] {
  position: fixed;
  left: 50%; right: auto; top: 50%; bottom: auto;
  width: min(480px, calc(100vw - 48px));
  z-index: 900;   /* above the fixed mobile summary bar (800), below the filter sheet (9990) and modals (9999) */
  background: #fff;
  border: 1px solid #E7E4DD;
  border-top: 2px solid #BBC7D7;
  box-shadow: 0 10px 34px rgba(45, 45, 45, 0.16);
  padding: 30px 34px 28px;
  box-sizing: border-box;
  text-align: center;
  transform: translate(-50%, -46%);
  opacity: 0;
  transition: transform 0.42s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.42s ease;
}
.tjc-rb__concierge[data-rb-concierge].is-open { transform: translate(-50%, -50%); opacity: 1; }

/* rev 19 (Omri, 19 Aug): SCOPED to the panel. Unscoped, this 27px Marigold
   rule also hit the filter rail's "Guidance at every step" box (same class,
   defined earlier at ~line 359 as 11px caps) and blew it up - his report.
   Heading also reduced 27px -> 18px to sit in proportion with the smaller
   centred card (his call). */
[data-rb-concierge] .tjc-rb__concierge-title {
  font-family: 'Marigold', serif;
  font-size: 18px;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.3;
  text-transform: uppercase;
  color: #2D2D2D;
  margin: 0 0 10px;
}
[data-rb-concierge] .tjc-rb__concierge-body {
  font-family: 'Montserrat', sans-serif;
  font-size: 13px;
  font-weight: 300;
  line-height: 1.75;
  color: #4A4A4A;
  margin: 0 auto 22px;
  max-width: 44ch;
}
[data-rb-concierge] .tjc-rb__concierge-actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }

/* the panel's buttons size to their words — the full-width .tjc-rb__cta rule
   is written for the tray and the rail, not for a horizontal row */
/* rev 24 (Omri, 20 Aug, final): no underline inside the Mist button - plain
   fill, words centred. (rev 19's underline reviewed on the live card and
   retired.) */
.tjc-rb__cta--concierge { width: auto; min-width: 190px; padding: 14px 28px; margin-top: 0; text-decoration: none; text-align: center; display: inline-block; }

[data-rb-concierge] .tjc-rb__concierge-close {
  position: absolute;
  top: 18px; right: 20px;
  background: none;
  border: none;
  padding: 6px;
  line-height: 0;
  color: #2D2D2D;
  cursor: pointer;
  opacity: 0.55;
  transition: opacity 0.2s ease;
}
[data-rb-concierge] .tjc-rb__concierge-close:hover { opacity: 1; }

@media (max-width: 749px) {
  .tjc-rb__concierge[data-rb-concierge] { padding: 24px 20px 22px; width: calc(100vw - 32px); }
  [data-rb-concierge] .tjc-rb__concierge-title { font-size: 16px; }
  [data-rb-concierge] .tjc-rb__concierge-body { font-size: 12.5px; line-height: 1.7; margin-bottom: 18px; }
  [data-rb-concierge] .tjc-rb__concierge-actions { flex-direction: column; gap: 9px; }
  .tjc-rb__cta--concierge { width: 100%; min-width: 0; padding: 14px 20px; }
  [data-rb-concierge] .tjc-rb__concierge-close { top: 12px; right: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .tjc-rb__concierge[data-rb-concierge] { transition: opacity 0.2s ease; transform: translate(-50%, -50%); }
}

/* rev 13 - opt-in 360 control on the expanded stone row.
   TMC put a single "Watch 360 video" control on the stone detail view and
   mount nothing until it is pressed. At 128px square a worded button would
   crowd the stone, so ours is the same rotate mark used on the cards, quiet
   in the corner, filling with Brand Mist while the player is live. */
.tjc-rb__row360 {
  position: absolute;
  right: 6px;
  bottom: 6px;
  z-index: 2;
  width: 26px;
  height: 26px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #E7E4DD;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: #55595E;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.tjc-rb__stone-row-video .tjc-rb__row360 svg { width: 15px; height: 15px; color: inherit; }
.tjc-rb__row360:hover { background: #BBC7D7; color: #FFFFFF; border-color: #BBC7D7; }
.tjc-rb__row360.is-on { background: #BBC7D7; color: #FFFFFF; border-color: #BBC7D7; }

@media (max-width: 1366px) {
  .tjc-rb__row360 { right: 4px; bottom: 4px; width: 24px; height: 24px; }
  .tjc-rb__stone-row-video .tjc-rb__row360 svg { width: 14px; height: 14px; }
}

/* ── FANCY-1 (25 Aug 2026): diamond-type lane toggle + colour family pills ──
   Top-of-rail pair of circular type buttons (white / coloured lab-grown) and
   the coloured lane's family pills. Icons are photo swatches once configured
   (LANE_ICONS / FAMILY_ICONS in tjc-ring-builder.js), tinted vectors until
   then. Active ring = Brand Mist, matching the swatch selection language. */
.tjc-rb__lane-toggle { display: flex; gap: 18px; margin-top: 10px; }
.tjc-rb__lane-btn { display: flex; flex-direction: column; align-items: center; gap: 7px; background: none; border: none; padding: 0; cursor: pointer; opacity: 0.78; transition: opacity 0.15s ease; }
/* inactive dim 0.78 (was 0.55) — at 0.55 the yellow lane swatch washed to pale
   lemon; active state still reads via the Brand Mist ring + full opacity (26 Aug) */
.tjc-rb__lane-btn:hover { opacity: 0.85; }
.tjc-rb__lane-btn.is-on { opacity: 1; cursor: default; }
.tjc-rb__lane-icon { width: 44px; height: 44px; border-radius: 50%; border: 1px solid #E7E4DD; background: #FFFFFF; display: flex; align-items: center; justify-content: center; overflow: hidden; box-sizing: border-box; transition: border-color 0.15s ease, box-shadow 0.15s ease; }
.tjc-rb__lane-btn.is-on .tjc-rb__lane-icon { border: 2px solid #BBC7D7; box-shadow: 0 1px 6px rgba(26, 26, 26, 0.12); }
.tjc-rb__lane-img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; transform: scale(1.7); }
/* 1.7× zoom crops out the grey margin Nivoda photos carry around the stone —
   the .tjc-rb__lane-icon wrapper's overflow:hidden keeps the circle clean;
   swatch picks were made AT this crop (25 Aug contact sheet) */
.tjc-rb__lane-vec { display: flex; align-items: center; justify-content: center; color: #2E3338; }
.tjc-rb__lane-vec svg { width: 30px; height: 30px; }
.tjc-rb__lane-name { font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; color: #2D2D2D; font-weight: 500; line-height: 1.45; text-align: center; }

/* Borderless two-column family rows (Omri 26 Aug — the bordered capsules read
   cramped next to TMC's open swatch+name rows). Selection affordance moved to
   the swatch: Brand Mist ring + weighted name, the lane toggle's own language. */
.tjc-rb__family-pills { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 12px; margin-top: 12px; }
.tjc-rb__family-pill { display: flex; align-items: center; gap: 10px; padding: 0; background: none; border: none; cursor: pointer; text-align: left; }
.tjc-rb__family-pill .tjc-rb__lane-icon { width: 30px; height: 30px; flex-shrink: 0; }
.tjc-rb__family-pill:hover .tjc-rb__lane-icon { border-color: #BBC7D7; }
.tjc-rb__family-pill.is-on .tjc-rb__lane-icon { border: 2px solid #BBC7D7; box-shadow: 0 1px 6px rgba(26, 26, 26, 0.12); }
.tjc-rb__family-pill.is-on .tjc-rb__family-name { font-weight: 600; }
.tjc-rb__family-pill .tjc-rb__lane-vec { display: flex; }
.tjc-rb__family-pill .tjc-rb__lane-vec svg { width: 17px; height: 17px; }
/* matches .tjc-rb__lane-name exactly (Omri 26 Aug — family names sit in the
   same visual register as the lane labels above them) */
.tjc-rb__family-name { font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; color: #2D2D2D; font-weight: 500; line-height: 1.45; }

/* Unified family swatches: the white lane's clean round tinted per family
   (one asset, TMC's same-diamond-different-colour look; tuned 26 Aug). */
.tjc-rb__tint--yellow { filter: sepia(1) saturate(2.2) hue-rotate(8deg) brightness(1.05); }
.tjc-rb__tint--pink { filter: sepia(0.7) saturate(1.9) hue-rotate(-75deg) brightness(1.08); }
.tjc-rb__tint--blue { filter: sepia(0.9) saturate(1.9) hue-rotate(172deg) brightness(1.02); }
.tjc-rb__tint--green { filter: sepia(0.9) saturate(1.8) hue-rotate(58deg) brightness(1); }
.tjc-rb__tint--champagne { filter: sepia(1) saturate(1.5) hue-rotate(-10deg) brightness(0.86); }