/* VDB @font-face moved to layout/theme.liquid — asset_url renders a relative path here and the font failed CORS. */
.rr-vi{font-family:"VDB"!important;font-style:normal;font-weight:normal;font-variant:normal;text-transform:none;line-height:1;display:inline-block;speak:none;-webkit-font-smoothing:antialiased}
.rr-vi--round::before{content:"\e935"}
.rr-vi--oval::before{content:"\e927"}
.rr-vi--pear::before{content:"\e929"}
.rr-vi--emerald::before{content:"\e90d"}
.rr-vi--princess::before{content:"\e92d"}
.rr-vi--radiant::before{content:"\e92f"}
.rr-vi--marquise::before{content:"\e91f"}
.rr-vi--asscher::before{content:"\e901"}
.rr-vi--heart::before{content:"\e916"}
.rr-vi--cushion::before{content:"\e90b"}
.rr-vi--triangle::before{content:"\e945"}
.rr-vi--square::before{content:"\e93b"}
.rr-vi--setting::before{content:"\ea7c"}
.rr-vi--review::before{content:"\ea1c"}
.rr-vi--grid::before{content:"\e9b1"}
.rr-vi--list::before{content:"\e9af"}
.rr-vi--reset::before{content:"\ea08"}
.rr-vi--lab1::before{content:"\ea09"}
.rr-vi--lab2::before{content:"\ea0a"}
.rr-lab{display:inline-flex;align-items:center;font-size:14px;line-height:1}
.rr-lab .rr-vi--lab2{margin-left:-2.4em}
.rr-lab--dark{color:#222;font-size:20px;margin-right:8px;vertical-align:middle}

/* ===== step rail (demo: .vdb-rb-steps-container) ===== */
.wm-rb .wm-rb__steps{display:flex;list-style:none;margin:0 0 40px;padding:0;border:0;background:transparent;border-radius:8px;position:relative;z-index:1}
.wm-rb .wm-rb__step{position:relative;z-index:1;flex:1 1 0;display:flex;align-items:center;gap:8px;min-height:80px;margin:0;padding:0 40px 0 16px;background:transparent;border:0;color:#222}
.wm-rb .wm-rb__step::before{content:"";position:absolute;inset:0;z-index:-1;background:#edebeb}
.wm-rb .wm-rb__step:first-child{margin-right:-22px;z-index:3}
.wm-rb .wm-rb__step:first-child::before{border-radius:8px 0 0 8px;clip-path:polygon(0 0,calc(100% - 22px) 0,100% 50%,calc(100% - 22px) 100%,0 100%)}
.wm-rb .wm-rb__step:nth-child(2){margin-right:-22px;padding-left:40px;z-index:2}
.wm-rb .wm-rb__step:nth-child(2)::before{clip-path:polygon(0 0,calc(100% - 22px) 0,100% 50%,calc(100% - 22px) 100%,0 100%,22px 50%)}
.wm-rb .wm-rb__step:last-child{padding-left:40px;z-index:1}
.wm-rb .wm-rb__step:last-child::before{border-radius:0 8px 8px 0;clip-path:polygon(0 0,100% 0,100% 100%,0 100%,22px 50%)}
.wm-rb .wm-rb__step.is-active{color:#edebeb;z-index:4;filter:drop-shadow(0 16px 15px rgba(28,5,37,.4))}
.wm-rb .wm-rb__step.is-active::before{background:#217346}
.wm-rb .wm-rb__step.is-done{opacity:1}
.wm-rb .wm-rb__step-n{font-size:56px;line-height:80px;font-weight:300;margin:0 8px 0 0;color:inherit;opacity:1}
.wm-rb .wm-rb__step-lbl{display:flex;flex-direction:column;font-size:14px;line-height:22px;letter-spacing:0;text-transform:uppercase;color:inherit}
.wm-rb .wm-rb__step-lbl b{font-weight:400}
.wm-rb .wm-rb__step-ic{margin-left:auto;display:flex;align-items:center;font-size:26px;color:inherit;opacity:1}
.wm-rb .wm-rb__step-ic svg{display:none}
.wm-rb .wm-rb__step:last-child .wm-rb__step-ic{font-size:30px}
.wm-rb .wm-rb__setting{margin-left:auto;display:flex;align-items:center;gap:12px;color:inherit}
.wm-rb .wm-rb__setting-media{width:48px;height:48px;flex:0 0 auto;border-radius:2px;background:#fff center/cover no-repeat;border:0}
.wm-rb .wm-rb__setting-info{display:flex;flex-direction:column;gap:2px;font-size:14px;line-height:20px}
.wm-rb .wm-rb__setting-price{font-weight:600;font-size:14px;color:inherit}
.wm-rb .wm-rb__setting-links{font-size:14px;letter-spacing:0;text-transform:none}
.wm-rb .wm-rb__setting-links a{color:#217346;text-decoration:none}
.wm-rb .wm-rb__step.is-active .wm-rb__setting-links a{color:#edebeb}
@media screen and (max-width:749px){
  .wm-rb .wm-rb__steps{margin:0 0 24px}
  .wm-rb .wm-rb__step{min-height:44px;padding:0 14px 0 20px!important;gap:6px}
  .wm-rb .wm-rb__step:first-child{margin-right:-11px}
  .wm-rb .wm-rb__step:first-child::before{clip-path:polygon(0 0,calc(100% - 11px) 0,100% 50%,calc(100% - 11px) 100%,0 100%)}
  .wm-rb .wm-rb__step:nth-child(2){margin-right:-11px}
  .wm-rb .wm-rb__step:nth-child(2)::before{clip-path:polygon(0 0,calc(100% - 11px) 0,100% 50%,calc(100% - 11px) 100%,0 100%,11px 50%)}
  .wm-rb .wm-rb__step:last-child::before{clip-path:polygon(0 0,100% 0,100% 100%,0 100%,11px 50%)}
  .wm-rb .wm-rb__step-n,.wm-rb .wm-rb__step-lbl b,.wm-rb .wm-rb__setting{display:none!important}
  .wm-rb .wm-rb__step-lbl{font-size:12px;line-height:16px}
  .wm-rb .wm-rb__step-ic{font-size:20px}
  .wm-rb .wm-rb__step.is-active{filter:drop-shadow(0 5px 7px rgba(28,5,37,.4))}
}

/* ===== filters ===== */
/* 2026-09-16: was display:none — the builder never said which kind of diamond it
   was listing. The row is shown again, but only the Lab Grown Diamond tab: this
   store's stone data could not be confirmed for natural diamonds, so offering a
   Natural tab risked a dead filter. Delete the second rule to bring it back. */
.wm-rb .wm-rb__origin{display:none!important}
.wm-rb .wm-rb__origin-btn[data-wm-rb-origin="natural"]{display:none!important}
.wm-rb .wm-rb__panel{margin-top:0}
.wm-rb .wm-rb__fcard{position:relative;min-height:166px;padding:16px 14px;border:0;border-radius:8px;background:#fff;box-shadow:1px 1px 4px rgba(0,0,0,.16)}
.wm-rb .wm-rb__fcard--wide{margin-bottom:8px}
.wm-rb .wm-rb__fgrid{gap:8px}
.wm-rb .wm-rb__fhead{display:flex;align-items:center;justify-content:space-between;margin:0 0 16px}
.wm-rb .wm-rb__ftitle{font-size:16px;font-weight:600;line-height:18px;letter-spacing:0;text-transform:none;color:#292735}
.wm-rb .wm-rb__fcard.wm-rb__fcard--wide > .wm-rb__shapes,.wm-rb .wm-rb__shapes{display:flex!important;flex-wrap:wrap;gap:16px 20px;margin:0 0 0 12px;padding:0;list-style:none}
.wm-rb .wm-rb__shapes li{margin:0;padding:0}
.wm-rb .wm-rb__shape{display:flex;flex-direction:column;align-items:center;gap:0;padding:0;border:0;background:transparent;cursor:pointer;color:#292735;width:auto}
.wm-rb .wm-rb__shape-ic{display:flex;align-items:center;justify-content:center;width:60px;height:56px;border-radius:8px;border:1px solid transparent;background:#edebeb;color:#222;font-size:35px;overflow:visible}
.wm-rb .wm-rb__shape-ic img{display:none}
.wm-rb .wm-rb__shape[aria-pressed="true"]{color:#292735}
.wm-rb .wm-rb__shape[aria-pressed="true"] .wm-rb__shape-ic{background:#217346;color:#edebeb;border-color:#edebeb}
.wm-rb .wm-rb__shape-l{margin:8px 0 0;font-size:13px;line-height:14px;letter-spacing:-.47px;text-align:center;color:#292735}
.wm-rb .wm-rb__seg{border:0;border-radius:4px;overflow:hidden}
.wm-rb .wm-rb__seg button{padding:4px 10px;font-size:14px;line-height:14px;background:#edebeb;color:#222;border:0}
.wm-rb .wm-rb__seg button.is-active{background:#217346;color:#edebeb}
.wm-rb .wm-rb__slider{padding:12px 12px 4px}
.wm-rb .wm-rb__slider input[type=range]{left:12px;right:12px;width:calc(100% - 24px)}
.wm-rb .wm-rb__slider input[type=range][data-hi]{top:12px;height:4px;border-radius:2px;background:linear-gradient(to right,#edebeb 0%,#edebeb var(--lo),#217346 var(--lo),#217346 var(--hi),#edebeb var(--hi),#edebeb 100%)}
.wm-rb .wm-rb__slider input[type=range][data-lo]{top:14px}
.wm-rb .wm-rb__slider input[type=range]::-webkit-slider-thumb{width:22px;height:22px;background:#fff;border:1px solid #e3e3e3;box-shadow:0 2px 6px rgba(0,0,0,.28)}
.wm-rb .wm-rb__slider input[type=range]::-moz-range-thumb{width:22px;height:22px;background:#fff;border:1px solid #e3e3e3;box-shadow:0 2px 6px rgba(0,0,0,.28)}
.wm-rb .wm-rb__sl-ticks{margin-top:26px}
.wm-rb .wm-rb__sl-ticks span{font-size:14px;line-height:14px;letter-spacing:-.47px;color:#292735;width:auto;min-width:20px}
.wm-rb .wm-rb__sl-ticks span::before{top:-24px;background:#fff;width:2px;height:4px}
.wm-rb .wm-rb__inputs{justify-content:space-between;gap:16px;margin-top:22px}
.wm-rb .wm-rb__inp{flex:0 0 auto;min-width:105px;max-width:110px;min-height:34px;border:1px solid #d8d8d8;border-radius:4px;padding:0 10px;background:#fff}
.wm-rb .wm-rb__inp input{font-size:14px;color:#292735}
.wm-rb .wm-rb__inp span{font-size:14px;color:#000}
.wm-rb .wm-rb__panel-foot{display:flex;align-items:center;justify-content:space-between;margin:32px 0;padding:0 0 25px;border:0;border-bottom:2px solid #eaeaea}
.wm-rb .wm-rb__advanced{display:inline-flex;align-items:center;gap:4px;padding:0;border:0;background:transparent;color:#217346;font-size:16px;line-height:19px;font-weight:500;letter-spacing:0;text-transform:none;cursor:pointer}
.wm-rb .wm-rb__advanced-arrow{color:#217346}
.wm-rb .wm-rb__reset{display:inline-flex;align-items:center;gap:6px;padding:0;border:0;background:transparent;color:#217346;font-size:16px;line-height:19px;font-weight:500;text-decoration:none;text-transform:none;letter-spacing:0;cursor:pointer}
.wm-rb .wm-rb__reset::after{content:"\21bb";font-family:inherit;font-size:20px;line-height:1}
.wm-rb .wm-rb__quick,.wm-rb .wm-rb__aip,.wm-rb .wm-rb__all-title{display:none!important}

/* ===== results ===== */
.wm-rb .wm-rb__resultbar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:0 0 20px}
.wm-rb .wm-rb__count{font-size:14px;line-height:20px;color:#222}
.rr-rb-tools{display:flex;align-items:center;gap:16px}
.rr-rb-views{display:inline-flex;gap:10px;margin:0;padding:0;list-style:none;font-size:18px;color:#000}
.rr-rb-views li{display:inline-flex}
.rr-rb-views li.is-current{color:#217346}
.rr-rb-sort{display:inline-flex;align-items:center;gap:6px;font-size:14px;color:#217346}
.rr-rb-sort select{border:0;background:transparent;color:#217346;font:inherit;font-size:14px;cursor:pointer;padding:0}
.wm-rb .wm-rb__grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:0 16px}
.wm-rb .wm-rb__card{border:0;border-radius:0;background:transparent;padding:10px 0;margin:0 0 28px;box-shadow:none}
.wm-rb .wm-rb__card:hover{box-shadow:none;transform:none}
.wm-rb .wm-rb__card-media{border-radius:4px;background:#fff}
.wm-rb .wm-rb__card-body{padding:0;gap:0}
.wm-rb .wm-rb__card-spec{margin:16px 0 15px;font-size:14px;line-height:20px;color:#000}
.wm-rb .wm-rb__card-price{font-family:inherit;font-size:20px;font-weight:600;line-height:24px;color:#000}
.wm-rb .wm-rb__card-cert,.wm-rb .wm-rb__card-360{display:none!important}
@media screen and (max-width:749px){
  .wm-rb .wm-rb__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 16px}
  .wm-rb .wm-rb__card{margin-bottom:20px}
  .wm-rb .wm-rb__card-spec{margin:8px 0;min-height:40px}
  .wm-rb .wm-rb__resultbar{flex-wrap:wrap}
}

/* ===== stone detail (demo: rb-stone-details) ===== */
.wm-rb .wm-rb__dv-bar{border:0;margin:0 0 24px;padding:0;justify-content:flex-start}
.wm-rb .wm-rb__dv-back{color:#217346;font-size:16px;letter-spacing:0;text-transform:none;font-weight:400}
.wm-rb .wm-rb__dv-x{display:none}
.wm-rb .wm-rb__dv-certno{font-size:16px;letter-spacing:0;text-transform:none;color:#292735;margin:0 0 8px}
.wm-rb .wm-rb__dv-title{font-family:inherit;font-size:24px;font-weight:400;line-height:1.3;color:#222;margin:0 0 6px}
.wm-rb .wm-rb__dv-price{font-family:inherit;font-size:30px;font-weight:600;color:#000;margin:0 0 24px}
.wm-rb .wm-rb__dv-sum{display:none!important}
.wm-rb .wm-rb__dv-cta{display:inline-flex;width:auto;margin:0 0 32px;padding:14px 26px;border-radius:4px;background:#217346!important;border-color:#217346!important;color:#fff!important;font-size:18px;font-weight:400;letter-spacing:0;text-transform:none;box-shadow:0 8px 14px rgba(28,5,37,.2)}
.wm-rb .wm-rb__dv-h3{font-size:16px;font-weight:600;letter-spacing:0;text-transform:none;color:#222;margin:32px 0 12px}
.wm-rb .wm-rb__dv-specs{grid-template-columns:1fr 1fr;gap:0 40px}
.wm-rb .wm-rb__dv-specs div{display:grid;grid-template-columns:120px 1fr;gap:8px;border:0;padding:6px 0;font-size:13px;line-height:18px}
.wm-rb .wm-rb__dv-specs dt{color:#72707a;font-weight:400}
.wm-rb .wm-rb__dv-specs dd{margin:0;color:#222;text-align:left}
.wm-rb .wm-rb__dv-certlink{color:#217346}
@media screen and (max-width:749px){ .wm-rb .wm-rb__dv-specs{grid-template-columns:1fr} }

/* ===== review (demo: rb-ring-review) ===== */
.wm-rb .wm-rb__rv{gap:40px}
.wm-rb .wm-rb__cr-stage{border:1px solid #e6e6e6;background:#fff}
.wm-rb .wm-rb__cr{border:0;border-radius:0;background:transparent;padding:0}
.wm-rb .wm-rb__cr-title{font-family:inherit;font-size:40px;font-weight:400;line-height:1.2;color:#222;padding:0 0 14px;border-bottom:2px solid #222}
.wm-rb .wm-rb__cr-rule{display:none}
.wm-rb .wm-rb__cr-line{margin-top:30px}
.wm-rb .wm-rb__cr-glyph{font-size:24px;color:#222}
.wm-rb .wm-rb__cr-lbl{display:inline-flex;align-items:center;font-size:18px;letter-spacing:0;text-transform:none;color:#72707a}
.wm-rb .wm-rb__cr-links{font-size:16px;color:#222;gap:8px}
.wm-rb .wm-rb__cr-links a{color:#217346}
.wm-rb .wm-rb__cr-name{font-family:inherit;font-size:22px;font-weight:400;line-height:1.3;color:#222;text-decoration:none;margin-top:12px}
.wm-rb .wm-rb__cr-price{margin-top:10px;gap:12px}
.wm-rb .wm-rb__cr-amount{font-family:inherit;font-size:30px;font-weight:600;color:#000}
.wm-rb .wm-rb__cr-amount-lbl{font-size:16px;color:#72707a}
.wm-rb .wm-rb__cr-cert{font-size:16px;color:#292735;margin-top:12px}
.wm-rb .wm-rb__cr-cert a{color:#292735}
.wm-rb .wm-rb__cr-spec{font-size:22px;line-height:1.3;color:#222;margin-top:6px}
.wm-rb .wm-rb__cr-opt-l,.wm-rb .wm-rb__cr-flabel{font-size:14px;font-weight:700;color:#222;letter-spacing:0}
.wm-rb .wm-rb__cr-pill{min-width:40px;height:40px;padding:0 12px;border-radius:20px;border:1px solid transparent;background:#edebeb;color:#222;font-size:13px;display:inline-flex;align-items:center;justify-content:center}
.wm-rb .wm-rb__cr-pill[aria-pressed="true"]{background:#217346;color:#fff;border-color:#217346}
.wm-rb .wm-rb__cr-select{border:1px solid #d8d8d8;border-radius:4px;background:#fff}
.wm-rb .wm-rb__cr-input{border:1px solid #d8d8d8;border-radius:4px}
.wm-rb .wm-rb__cr-subtotal{justify-content:flex-end;align-items:baseline;gap:16px;margin-top:32px;padding-top:40px;border-top:2px solid #222}
.wm-rb .wm-rb__cr-subtotal-lbl{font-size:18px;color:#72707a;letter-spacing:0;text-transform:none}
.wm-rb .wm-rb__cr-subtotal-amt{font-family:inherit;font-size:36px;font-weight:400;color:#222}
.rr-cr-actions{display:flex;justify-content:flex-end;flex-wrap:wrap;gap:16px;margin-top:36px}
.rr-cr-ask{display:inline-flex;align-items:center;padding:0 26px;min-height:50px;border:1px solid #217346;border-radius:4px;background:#fff;color:#217346;font-size:18px;text-decoration:none}
.wm-rb .wm-rb__cr-add{width:auto;margin:0;padding:0 26px;min-height:50px;border-radius:4px;background:#217346!important;border-color:#217346!important;color:#fff!important;font-size:18px;font-weight:400;letter-spacing:0;text-transform:none;box-shadow:0 8px 14px rgba(28,5,37,.2)}
.rr-cr-foot{display:flex;justify-content:space-between;gap:16px;margin:28px 0 0;font-size:16px;color:#5b3f66}
.rr-cr-foot a{color:#217346;text-decoration:none}
@media screen and (max-width:749px){ .wm-rb .wm-rb__cr-title{font-size:30px} .rr-cr-actions{justify-content:stretch} .rr-cr-actions > *{flex:1 1 0;justify-content:center} }

/* D20b: the demo shows a card's current value only in its mobile accordion, never on desktop;
   the LAB wordmark is glyph path1 alone (path2 is the box fill behind it). */
@media screen and (min-width:750px){ .wm-rb .wm-rb__fvalue{display:none!important} }
.rr-lab .rr-vi--lab2{display:none}

/* D20c — measured on the live page after D20b:
   · Windows subpixel (LCD) text AA drew rainbow fringes on the thin VDB glyph strokes; a filter puts
     the glyph on its own composited layer, which makes Chrome fall back to grayscale AA (glyphs are
     monochrome, so grayscale() changes nothing else).
   · At ≤749px the base stylesheet stacks the rail and keeps each filter card 166px tall; the demo's
     phone layout is ONE chevron row (STONE · SETTING · REVIEW) and compact accordion rows. */
.rr-vi{filter:grayscale(1)}
@media screen and (max-width:749px){
  .wm-rb .wm-rb__steps{flex-direction:row!important;gap:0!important}
  .wm-rb .wm-rb__step{flex:1 1 0!important;width:auto!important;max-width:none!important}
  .wm-rb .wm-rb__fcard{min-height:0;padding:0 14px}
  .wm-rb .wm-rb__fcard--wide{padding:16px 14px}
  .wm-rb .wm-rb__fhead{margin:0;padding:14px 0}
  .wm-rb .wm-rb__fcard--wide .wm-rb__fhead{padding:0;margin-bottom:14px}
  .wm-rb .wm-rb__fgrid{gap:8px}
}

/* D20d — phone rail step 3 reads "REVIEW" on the demo (the first word), not "COMPLETE RING". */
@media screen and (max-width:749px){
  .wm-rb .wm-rb__step:last-child .wm-rb__step-lbl b{display:block!important}
  .wm-rb .wm-rb__step:last-child .wm-rb__step-lbl span{display:none}
  /* Step 1 page (rr-ring-settings) — same one-row phone rail as the demo's rb-setting-list. */
  .rr-rs__steps{flex-direction:row!important;filter:none;margin:0 0 24px}
  .rr-rs__step,.rr-rs__step + .rr-rs__step{min-height:44px!important;padding:0 14px 0 20px!important;flex:1 1 0}
  .rr-rs__step-n,.rr-rs__step-lbl b{display:none}
  .rr-rs__step:last-child .rr-rs__step-lbl b{display:block} .rr-rs__step:last-child .rr-rs__step-lbl span{display:none}
  .rr-rs__step-lbl{font-size:12px;line-height:16px;margin-left:0}
  .rr-rs__step:first-child{border-radius:8px 0 0 8px!important} .rr-rs__step:last-child{border-radius:0 8px 8px 0!important}
  /* Phone rail: same three chevron shapes as desktop, at the phone's 11px arrow depth (and the
     overlap has to shrink with it — the desktop's 2.4rem notch would eat a third of a phone step). */
  .rr-rs__step{clip-path:polygon(0 0,calc(100% - 11px) 0,100% 50%,calc(100% - 11px) 100%,0 100%)}
  .rr-rs__step + .rr-rs__step{margin-left:-11px;clip-path:polygon(0 0,calc(100% - 11px) 0,100% 50%,calc(100% - 11px) 100%,0 100%,11px 50%)}
  .rr-rs__step:last-child{clip-path:polygon(0 0,100% 0,100% 100%,0 100%,11px 50%)}
  .rr-rs__step-ic{width:20px;height:20px}
}

/* D20e — Step 1 phone rail overflowed the viewport (each step kept its min-content width; the third
   step ran off the right edge — measured at 375). Steps may shrink and clip, like the demo's masks. */
@media screen and (max-width:749px){
  .rr-rs__steps{width:100%;max-width:100%;overflow:hidden;border-radius:8px}
  .rr-rs__step,.rr-rs__step + .rr-rs__step{min-width:0;overflow:hidden;gap:.6rem!important;justify-content:space-between;padding:0 10px 0 16px!important}
  .rr-rs__step-l{min-width:0}
  .rr-rs__step-lbl{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:.08em}
  .rr-rs__step-ic{flex:0 0 auto}
}

/* D20f — phone rail labels were clipped ("SETTIN", "REVIEW" cut) at 375: three 115px steps need
   11px labels, an 18px icon and tighter padding, like the demo's 12px/mobile masks. */
@media screen and (max-width:749px){
  .rr-rs__step,.rr-rs__step + .rr-rs__step{padding:0 8px 0 14px!important;gap:.4rem!important}
  .rr-rs__step + .rr-rs__step{padding-left:18px!important}
  .rr-rs__step-lbl{font-size:11px;letter-spacing:.02em;margin-left:0}
  .rr-rs__step-ic{width:18px;height:18px}
  .wm-rb .wm-rb__step{padding:0 8px 0 14px!important}
  .wm-rb .wm-rb__step:nth-child(2),.wm-rb .wm-rb__step:last-child{padding-left:18px!important}
  .wm-rb .wm-rb__step-lbl{font-size:11px;letter-spacing:.02em;white-space:nowrap}
}

/* D20g — "SETTING" still lost its last letter under the chevron clip at 375 (scrollWidth > clientWidth
   on steps 1 and 3). Smaller label, tighter first/last padding, zero tracking. */
@media screen and (max-width:749px){
  .rr-rs__step-lbl{font-size:10.5px;letter-spacing:0}
  .rr-rs__step:first-child{padding:0 16px 0 10px!important}
  .rr-rs__step:last-child{padding-right:6px!important}
  .rr-rs__step-ic{width:17px;height:17px}
}

/* D20h — the label itself was being flex-shrunk to 51px while its text needs 58px (the step had room:
   115 − 26 padding − 17 icon − 4 gap = 68). Let the label keep its natural width; only the step clips. */
@media screen and (max-width:749px){
  .rr-rs__step-l{flex:0 1 auto;min-width:0;display:flex;align-items:center}
  .rr-rs__step-lbl{flex:0 0 auto;overflow:visible;max-width:none;text-overflow:clip}
}

/* D21 — Step 1 ring-style glyphs (demo: .vdb-rb-icon-solitaire … -other) and the demo's sort chevron. */
.rr-vi--st-solitaire::before{content:"\ea3a"}
.rr-vi--st-three-stone::before{content:"\ea40"}
.rr-vi--st-side-stone::before{content:"\ea38"}
.rr-vi--st-halo::before{content:"\ea24"}
.rr-vi--st-vintage::before{content:"\ea42"}
.rr-vi--st-accented::before{content:"\ea64"}
.rr-vi--st-bezel-set::before{content:"\ea96"}
.rr-vi--st-bypass::before{content:"\ea93"}
.rr-vi--st-two-stone-rings::before{content:"\ea93"}
.rr-vi--st-other::before{content:"\ea7d"}
/* U+EA7D is the ONE entry in this icon font that is not a drawing — the glyph is the word "Other"
   spelled out. At the 35px every other style icon uses it measured 105x35 against a 60x56 tile, so
   it burst out of its box and over the neighbouring styles. The demo has the identical glyph and
   solves it the same way: every ring-style icon is 50px there EXCEPT .vdb-rb-icon-other, which is
   set to 14px (43x14, inside the same 60x56 tile). Matched here — the tile is the same 60px wide,
   so 14px lands at 42px and fits with the same margin. */
.rr-vi--st-other{font-size:14px;line-height:14px}
.rr-vi--st-chevron::before{content:"\ea7f"}

/* D22 — demo's slider knob (input_range_handle.svg, 30px dial) on the diamond filters too. */
.wm-rb .wm-rb__slider input[type=range]::-webkit-slider-thumb{width:30px;height:30px;border:0;box-shadow:none;background:url("/cdn/themes/cmu6qo1jf0vw0969iezoo9l8w/assets/rr-range-handle.png?v=1hfcv7k") center/contain no-repeat}
.wm-rb .wm-rb__slider input[type=range]::-moz-range-thumb{width:30px;height:30px;border:0;box-shadow:none;background:url("/cdn/themes/cmu6qo1jf0vw0969iezoo9l8w/assets/rr-range-handle.png?v=1hfcv7k") center/contain no-repeat}
.wm-rb .wm-rb__slider{padding:16px 15px 4px}
.wm-rb .wm-rb__slider input[type=range]{left:15px;right:15px;width:calc(100% - 30px)}
.wm-rb .wm-rb__slider input[type=range][data-hi]{top:16px}
.wm-rb .wm-rb__slider input[type=range][data-lo]{top:18px}

/* D22b — knob = the demo's PNG (25×30, drawn with its own drop shadow), 30px box like .irs--round .irs-handle */

/* D23 — Fancy colour tiles like the demo (.vdb-rb-list-item 60×56 #edebeb r8 with the coloured-diamond PNG, 13px title-case label, active = green tile). */
.wm-rb .wm-rb__fancy{margin-top:16px;gap:8px}
.wm-rb .wm-rb__fancy-track{gap:20px;padding:0 4px}
.wm-rb .wm-rb__fancy-tile{display:flex;flex-direction:column;align-items:center;gap:8px;padding:0;border:0;background:transparent;box-shadow:none;width:auto;min-width:60px}
.wm-rb .wm-rb__fancy-dot{width:60px;height:56px;border-radius:8px;background:#edebeb;border:1px solid transparent;display:flex;align-items:center;justify-content:center;box-shadow:none}
.wm-rb .wm-rb__fancy-dot:not(.wm-rb__fancy-dot--img)::before{content:"";width:22px;height:22px;border-radius:50%;background:var(--wm-fc,#ccc)}
.wm-rb .wm-rb__fancy-dot--img img{width:28px;height:40px;object-fit:contain;display:block}
.wm-rb .wm-rb__fancy-l{font-size:13px;line-height:14px;letter-spacing:-.47px;text-transform:none;color:#292735}
.wm-rb .wm-rb__fancy-tile:hover{border-color:transparent}
.wm-rb .wm-rb__fancy-tile[aria-pressed="true"]{border:0;background:transparent;box-shadow:none}
.wm-rb .wm-rb__fancy-tile[aria-pressed="true"] .wm-rb__fancy-dot{background:#217346;border-color:#edebeb}
.wm-rb .wm-rb__fancy-tile[aria-pressed="true"] .wm-rb__fancy-l{color:#292735}
.wm-rb .wm-rb__fancy-nav{width:24px;height:24px;border:0;background:transparent;color:#222;box-shadow:none}
.wm-rb .wm-rb__fancy-nav svg{width:20px;height:20px;stroke-width:2}
/* 2026-09-17: was display:none — the colour strip showed a ">" and no "<", so there was no way back. The demo shows both. */ .wm-rb .wm-rb__fancy-nav--prev{display:inline-flex}

/* D24 — green fill must end at the knob CENTRE (demo). The thumb centre is at 15px + frac*(W-30px), so the
   gradient is drawn over that inner width only; the grey rest is the base colour under the whole rail. */
.wm-rb .wm-rb__slider input[type=range][data-hi]{background-color:#edebeb;background-image:linear-gradient(to right,#edebeb 0%,#edebeb var(--lo),#217346 var(--lo),#217346 var(--hi),#edebeb var(--hi),#edebeb 100%);background-size:calc(100% - 30px) 100%;background-position:15px 0;background-repeat:no-repeat}

/* D24b — no grey beyond the knob centres either (demo's rail is inset by half a knob). */
.wm-rb .wm-rb__slider input[type=range][data-hi]{background-color:transparent}

/* D30 — phone: the Shape card is an accordion row like the others (demo: "Shape … Round" → panel). */
@media screen and (max-width:749px){
  .wm-rb .wm-rb__fcard.wm-rb__fcard--wide{padding:0 14px}
  .wm-rb .wm-rb__fcard.wm-rb__fcard--wide > .wm-rb__fhead{padding:14px 0;margin:0;display:flex}
  .wm-rb .wm-rb__fcard.wm-rb__fcard--wide:not(.is-sheet) > *:not(.wm-rb__fhead){display:none!important}
  .wm-rb .wm-rb__fcard--wide .wm-rb__fvalue{display:block!important}
  .wm-rb .wm-rb__fcard--wide.is-sheet .wm-rb__fvalue{display:none!important}
  .wm-rb .wm-rb__fcard--wide.is-sheet{padding:16px 14px}
  .wm-rb .wm-rb__fcard--wide.is-sheet > .wm-rb__fhead{padding:0 0 14px}
  .wm-rb .wm-rb__fcard--wide.is-sheet > .wm-rb__shapes{display:flex!important}
  .wm-rb .wm-rb__fcard--wide.is-sheet > .wm-rb__sheet-done{display:block}
}

/* D31c: the phone panel's Done button in the builder green (the rail/tiles are #217346; WM shipped it ink-black) */
.wm-rb .wm-rb__sheet-done{background:#217346;border-color:#217346;color:#fff}

/* ------------------------------------------------------------------------------------------------
   Ring-builder design corrections, measured off rockrush.com's own builder (18 Sep 2026).
   DESIGN ONLY — the filter/journey logic is untouched.

   1. BACK ARROW. Our carousels shipped a forward "›" and nothing to go back with. The demo carries
      a slick pair: .slick-prev / .slick-next, 20x20, the glyph drawn by a ::before in its icon font
      at 20px in rgb(34,34,34), and — the part that matters — a DISABLED arrow is `opacity: 0`, not
      removed. So the arrow is present on both sides and simply fades out at the end of its travel.
      `.is-off` below is that state; the JS in the section only ever toggles this class.

   2. THE SEAM BETWEEN STEPS 2 AND 3. The demo builds its rail from three SVG masks
      (step-1/2/3.svg, 426x80 for a 393 slot) with `margin-right: -22px`. Because the notch cut into
      each block (26.56 of 426 ≈ 25.9px once scaled) is DEEPER than that 22px overlap, ~4px of page
      background shows through as a thin chevron line between the blocks — which is the separator
      visible on the demo and missing from ours.

      Ours interlocked exactly: a 24px notch against a -24px margin, so the two greys met with no
      gap at all and the seam disappeared. Backing the overlap off to -20px leaves the same ~4px
      chevron the demo has. Geometry only; every step keeps its shape and its colour.
------------------------------------------------------------------------------------------------ */
.rr-rs__arrow--prev { order: -1; margin-left: 0; margin-right: .2rem; }
.rr-rs__arrow.is-off { opacity: 0; pointer-events: none; }
.rr-rs__arrow { transition: opacity .18s ease; }

.rr-rs__step + .rr-rs__step { margin-left: -20px; }