/* Moonlit — ring builder. Figma 'Builder steps', 19:8330 / 19:12067 (choose diamond),
   19:9114 / 19:12318 (complete your ring). */
.ml-rb { padding-bottom: 96px; }

/* ---------------------------------------------------------------- builder steps (indigo, 76) */
.ml-rbsteps { background: var(--ml-indigo); color: var(--ml-inverse); }
.ml-rbsteps__in { display: flex; align-items: center; gap: 32px; min-height: 76px; padding-block: 12px; }
.ml-rbsteps__intro { display: flex; flex-direction: column; gap: 2px; flex: 0 0 auto; margin: 0; }
.ml-rbsteps__intro .ml-eyebrow { color: var(--ml-lunar); }
.ml-rbsteps__t { font-family: var(--ml-display); font-style: italic; font-weight: 300; font-size: 19px; line-height: 1.2; color: var(--ml-inverse); }
.ml-rbsteps__l { display: flex; align-items: center; justify-content: center; gap: 28px; flex: 1 1 auto; margin: 0; padding: 0; list-style: none; min-width: 0; }
.ml-rbstep { display: flex; align-items: center; gap: 12px; min-width: 0; }
.ml-rbstep__n { position: relative; flex: 0 0 auto; display: inline-grid; place-items: center; width: 28px; height: 28px; border: 1.2px solid var(--ml-inverse); border-radius: 50%; color: var(--ml-midnight); }
.ml-rbstep__dot, .ml-rbstep__tick { display: none; }
.ml-rbstep.is-on .ml-rbstep__n { width: 40px; height: 40px; margin: -6px; border-color: var(--ml-lunar); }
.ml-rbstep.is-on .ml-rbstep__n::before { content: ''; position: absolute; inset: 4px; border: 1.2px solid var(--ml-lunar); border-radius: 50%; }
.ml-rbstep.is-on .ml-rbstep__dot { display: block; width: 10px; height: 10px; border-radius: 50%; background: var(--ml-lunar); }
.ml-rbstep.is-done .ml-rbstep__n { border-color: var(--ml-lunar); background: var(--ml-lunar); }
.ml-rbstep.is-done .ml-rbstep__tick { display: inline-flex; }
.ml-rbstep__b { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ml-rbstep__b { align-items: flex-start; text-align: left; }
.ml-rbstep__b strong { color: var(--ml-inverse); white-space: nowrap; }
.ml-rbstep__b em { font-style: normal; color: var(--ml-muted-dark); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 240px; }
.ml-rbstep.is-done .ml-rbstep__b em { color: var(--ml-lunar); }
.ml-rbstep__chg { color: var(--ml-inverse); text-decoration: underline; text-underline-offset: 3px; }
.ml-rbstep__chg:hover { color: var(--ml-lunar); }
.ml-rbsteps__tot { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex: 0 0 auto; margin: 0; }
.ml-rbsteps__tot .ml-caption { color: var(--ml-muted-dark); }
.ml-rbsteps__p { font-family: var(--ml-display); font-size: 22px; line-height: 1.2; color: var(--ml-inverse); }
@media (max-width: 1279px) { .ml-rbsteps__intro { display: none; } }
@media (max-width: 767px) {
  /* Figma 19:12067: done = a lunar tick disc, current = the double ring + its title, the rest an open ring */
  .ml-rbsteps__in { min-height: 46px; padding-block: 6px; gap: 12px; }
  .ml-rbsteps__l { justify-content: space-between; gap: 10px; }
  .ml-rbstep__b, .ml-rbstep__chg { display: none !important; }
  .ml-rbstep.is-on .ml-rbstep__b { display: flex !important; }
  .ml-rbstep.is-on .ml-rbstep__b em, .ml-rbstep__k { display: none; }
  .ml-rbstep.is-on .ml-rbstep__b strong { font-family: var(--ml-sans); font-size: 14px; letter-spacing: 0; text-transform: none; }
  .ml-rbstep.is-on .ml-rbstep__n { width: 34px; height: 34px; margin: -3px; }
  .ml-rbstep__n { width: 22px; height: 22px; }
  /* 31 Oct responsive pass: the running total was hidden on phones and shown nowhere else — it stays, as the price alone */
  .ml-rbsteps__tot { display: flex; }
  .ml-rbsteps__tot .ml-caption { display: none; }
  .ml-rbsteps__p { font-size: 15px; white-space: nowrap; }
}

/* ---------------------------------------------------------------- titles + step one */
.ml-rb__title { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; padding-block: 52px 36px; }
.ml-rb__title .ml-body-l, .ml-rb__title .ml-body { max-width: 62ch; color: var(--ml-text-2); }
.ml-rb__chips { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; padding-bottom: 24px; }
.ml-rb__chips--2 { padding-bottom: 36px; }
.ml-rb__body { display: block; }
.ml-rb__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px 24px; margin: 0; padding: 0; list-style: none; }
.ml-rb__pick { margin-top: 12px; }
.ml-rb__sorts { display: flex; gap: 6px; flex-wrap: wrap; }
[data-ml-rb-grid].is-loading, [data-ml-rb-results].is-loading { opacity: .5; transition: opacity .2s; }

/* ---------------------------------------------------------------- step two: tabs */
.ml-rb__tabs { border-bottom: 1px solid var(--ml-line); }
.ml-rb__tabsin { display: flex; justify-content: center; gap: 40px; overflow-x: auto; scrollbar-width: none; }
.ml-rb__tabsin::-webkit-scrollbar { display: none; }
.ml-rb__tab { flex: 0 0 auto; padding: 14px 0 12px; border-bottom: 2px solid transparent; margin-bottom: -1px; color: var(--ml-text-2); transition: color .3s, border-color .3s; }
.ml-rb__tab:hover { color: var(--ml-text); }
.ml-rb__tab.is-on { color: var(--ml-text); border-bottom-color: var(--ml-midnight); }

/* ---------------------------------------------------------------- step two: the filter panel */
.ml-rb__filters { display: flex; flex-direction: column; gap: 32px; padding-block: 28px 32px; }
.ml-rb__shapes { display: grid; grid-template-columns: repeat(11, minmax(0, 1fr)); gap: 8px; }
.ml-rb__shapes .ml-stile { min-height: 70px; justify-content: center; }
.ml-rb__grid4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; align-items: start; }
.ml-rb__grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
.ml-rb__f { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.ml-rb__f > .ml-label, .ml-rb__rhead .ml-label { color: var(--ml-text); }
.ml-rb__range { display: flex; flex-direction: column; gap: 14px; }
.ml-rb__range[hidden] { display: none; }
.ml-rb__rhead { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.ml-rb__rin { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ml-rb__box { width: 64px; min-height: 34px; padding: 6px 10px; border: 1px solid var(--ml-line); background: var(--ml-white); font: inherit; font-size: 13px; color: var(--ml-text); -moz-appearance: textfield; }
.ml-rb__range[data-ml-rb-range="price"] .ml-rb__box { width: 76px; }
.ml-rb__box::-webkit-outer-spin-button, .ml-rb__box::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.ml-rb__box:focus-visible, .ml-rb__rin .ml-select:focus-visible { outline: 1.5px solid var(--ml-lunar); outline-offset: -1px; }
.ml-rb__rin .ml-select { max-width: none; height: 44px; }

/* the two-thumb slider (Figma: 2px line, midnight span, 16px white thumbs with a 1.5px midnight ring) */
.ml-rbsl { position: relative; height: 18px; --a: 0%; --b: 100%; }
.ml-rbsl::before { content: ''; position: absolute; left: 0; right: 0; top: 8px; height: 2px; background: var(--ml-line); }
.ml-rbsl__fill { position: absolute; top: 8px; height: 2px; left: var(--a); right: calc(100% - var(--b)); background: var(--ml-midnight); }
.ml-rbsl input[type=range] { position: absolute; inset: 0; width: 100%; height: 18px; margin: 0; background: none; pointer-events: none; -webkit-appearance: none; appearance: none; }
.ml-rbsl input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; pointer-events: auto; width: 16px; height: 16px; border-radius: 50%; background: var(--ml-white); border: 1.5px solid var(--ml-midnight); cursor: grab; }
.ml-rbsl input[type=range]::-moz-range-thumb { pointer-events: auto; width: 14px; height: 14px; border-radius: 50%; background: var(--ml-white); border: 1.5px solid var(--ml-midnight); cursor: grab; }
.ml-rbsl input[type=range]::-webkit-slider-runnable-track { background: none; }
.ml-rbsl input[type=range]::-moz-range-track { background: none; }
.ml-rbsl input[type=range]:focus-visible::-webkit-slider-thumb { outline: 2px solid var(--ml-lunar); outline-offset: 2px; }

/* the segmented grade bar (Figma Colour / Clarity: one 1px-line bar, the chosen span midnight) */
.ml-rbseg { display: flex; border: 1px solid var(--ml-line); background: var(--ml-white); }
.ml-rbseg__b { flex: 1 1 0; min-height: 34px; padding: 0 4px; color: var(--ml-text); background: transparent; letter-spacing: .04em; transition: background .25s, color .25s; }
.ml-rbseg__b:hover { background: var(--ml-mist); }
.ml-rbseg__b.is-on { background: var(--ml-midnight); color: var(--ml-inverse); }
.ml-rb__fancy { display: flex; flex-direction: column; gap: 14px; }
.ml-rb__fancy[hidden] { display: none; }

.ml-rb__advrow { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.ml-rb__advb { display: inline-flex; align-items: center; gap: 8px; }
.ml-rb__reset { min-width: 125px; }
.ml-rb__adv { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; padding: 24px; background: var(--ml-mist); }
.ml-rb__adv[hidden] { display: none; }
.ml-rb__sum { display: none; }
.ml-rb__fbar { display: none; }

/* ---------------------------------------------------------------- results toolbar */
.ml-rb__toolbar { border-top: 1px solid var(--ml-line); }
.ml-rb__tool { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 24px 16px; }
.ml-rb__tool .ml-small { font-weight: 500; color: var(--ml-text); }
.ml-rb__view { display: flex; }
.ml-rb__vb { display: inline-grid; place-items: center; width: 33px; height: 33px; border: 1px solid var(--ml-line); background: var(--ml-white); color: var(--ml-text); }
.ml-rb__vb + .ml-rb__vb { border-left: 0; }
.ml-rb__vb[aria-pressed='true'] { background: var(--ml-midnight); border-color: var(--ml-midnight); color: var(--ml-inverse); }

/* ---------------------------------------------------------------- the stones: table */
.ml-dsec { margin-bottom: 44px; }
.ml-rb__more { display: flex; justify-content: center; padding-top: 32px; }
.ml-rb__more .ml-btn { min-width: 190px; }
.ml-dsec__h { display: block; margin-bottom: 16px; color: var(--ml-text-2); }
.ml-dlist { display: flex; flex-direction: column; }
.ml-drow {
  display: grid; align-items: center; gap: 16px; padding: 12px 16px;
  grid-template-columns: 64px 94px 74px 94px 74px 74px 74px minmax(90px, 1fr) 64px 132px;
  border: 1px solid transparent; border-bottom-color: var(--ml-line); cursor: pointer; font-size: 13px; color: var(--ml-text);
  transition: background .25s, border-color .25s;
}
.ml-drow:hover { background: var(--ml-white); }
.ml-drow.is-on { background: var(--ml-white); border: 1.5px solid var(--ml-midnight); }
.ml-drow:focus-visible { outline: 2px solid var(--ml-lunar); outline-offset: -2px; }
.ml-drow--head { padding-block: 10px; background: var(--ml-mist); border-bottom: 0; cursor: default; }
.ml-drow--head:hover { background: var(--ml-mist); }
.ml-drow--head .ml-caption { color: var(--ml-text-2); }
.ml-drow__m { display: block; width: 64px; height: 64px; background: var(--ml-image); }
.ml-drow__m img { width: 100%; height: 100%; object-fit: cover; }
.ml-drow__sh, .ml-drow__lab, .ml-drow__v { display: inline-flex; align-items: center; gap: 8px; }
.ml-drow__sh svg, .ml-drow__lab svg, .ml-drow__v svg { color: var(--ml-icon); flex: 0 0 auto; }
.ml-drow__ct b { font-weight: 600; }
.ml-drow__p .ml-price { font-size: 15px; }
.ml-drow__v i { font-style: normal; color: var(--ml-text-2); }
.ml-drow__go { justify-self: end; }
.ml-drow__go .ml-btn { min-width: 88px; }
.ml-drow__mt { display: none; }
.ml-btn--sm { min-height: 33px; padding: 0 16px; }

/* grid view */
.ml-dgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px 20px; }
.ml-dcard { position: relative; display: flex; flex-direction: column; gap: 8px; cursor: pointer; }
.ml-dcard__m { background: var(--ml-image); }
.ml-dcard__m img { width: 100%; height: 100%; object-fit: cover; }
.ml-dcard__360 { position: absolute; top: 10px; right: 10px; padding: 4px 8px; background: var(--ml-white); color: var(--ml-text); }
.ml-dcard__cert { letter-spacing: .04em; }
.ml-dcard__s { color: var(--ml-text-2); }
.ml-dcard:focus-visible { outline: 2px solid var(--ml-lunar); outline-offset: 3px; }

/* ---------------------------------------------------------------- the overlays */
.ml-rbsm { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 20px; background: rgba(10,15,31,.72); overflow-y: auto; }
.ml-rbsm[hidden] { display: none; }
.ml-rbsm__box { position: relative; width: min(880px, 100%); background: var(--ml-pearl); }
.ml-rbsm--wide .ml-rbsm__box { width: min(1080px, 100%); }
.ml-rbsm__x { position: absolute; top: 12px; right: 12px; z-index: 2; background: var(--ml-white); }
.ml-rbsm__in { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; padding: 28px; }
.ml-rbsm__m { background: var(--ml-image); }
.ml-rbsm__m img { width: 100%; height: 100%; object-fit: cover; }
.ml-rbsm__c { display: flex; flex-direction: column; gap: 18px; }
.ml-dd__m { display: flex; flex-direction: column; gap: 12px; }
.ml-dd__stage { aspect-ratio: 1 / 1; background: var(--ml-image); }
.ml-dd__stage img, .ml-dd__stage video, .ml-dd__stage iframe { width: 100%; height: 100%; border: 0; object-fit: cover; }
.ml-dd__th { display: flex; gap: 8px; flex-wrap: wrap; }
.ml-dd__t { padding: 8px 12px; min-height: 36px; border: 1px solid var(--ml-line); background: var(--ml-white); color: var(--ml-text); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.ml-dd__t.is-on { border-color: var(--ml-midnight); background: var(--ml-midnight); color: var(--ml-inverse); }
.ml-dd__c { display: flex; flex-direction: column; gap: 16px; }
/* ring-builder spec §0: a done step shows its image + Change | View */
.ml-rbstep__img { width: 36px; height: 36px; flex: 0 0 auto; border-radius: 50%; object-fit: cover; background: var(--ml-image); }
button.ml-rbstep__chg { background: none; border: 0; padding: 0; cursor: pointer; color: inherit; font: inherit; }
/* the diamond pager (rbengine pager()): one wrapping row of page links, "Page N of M" under it on a phone */
.ml-rb .ml-pager, [data-ml-rb] .ml-pager { flex-wrap: wrap; row-gap: 10px; }
.ml-pager__l { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; margin: 0; padding: 0; list-style: none; }
@media (max-width: 560px) { .ml-pager__l .ml-pager__a { padding-inline: 8px; } .ml-pager__l + * { flex-basis: 100%; text-align: center; } }
.ml-dd__sum { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 14px 16px; background: var(--ml-mist); }
.ml-dd__sum div { display: flex; justify-content: space-between; font-size: 13px; }
.ml-dd__sum dd { margin: 0; }
.ml-dd__tot { padding-top: 8px; border-top: 1px solid var(--ml-line); font-weight: 600; }

/* ---------------------------------------------------------------- step three: complete your ring */
.ml-rb__review { display: grid; grid-template-columns: minmax(0, 760fr) minmax(0, 512fr); gap: 56px; align-items: start; padding-top: 48px; }
.ml-rb__visual { position: sticky; top: 24px; }
.ml-rb__rcol { display: flex; flex-direction: column; gap: 18px; }
.ml-rb__rcol .ml-d2 { margin-bottom: 8px; }
.ml-rb__receipt { display: block; }
.ml-rbv .ml-gal__stage { aspect-ratio: 760 / 620; }
.ml-rbv .ml-gal__slide { opacity: 1; }
.ml-rbr { display: flex; flex-direction: column; gap: 22px; }
.ml-rbr__card { background: var(--ml-white); border: 1px solid var(--ml-line); }
.ml-rbr__it, .ml-rbr__row, .ml-rbr__eng { padding: 22px 20px; border-top: 1px solid var(--ml-line); }
.ml-rbr__card > :first-child { border-top: 0; }
.ml-rbr__it { display: grid; grid-template-columns: 22px 1fr auto; gap: 16px; align-items: start; }
.ml-rbr__ic { color: var(--ml-icon); padding-top: 1px; }
.ml-rbr__tx { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ml-rbr__tx .ml-label { color: var(--ml-text); }
.ml-rbr__pr { font-size: 15px; font-weight: 600; white-space: nowrap; }
.ml-rbr__a { display: flex; gap: 16px; margin: 0; }
.ml-rbr__lk { white-space: nowrap; text-decoration: underline; text-underline-offset: 3px; color: var(--ml-text); }
.ml-rbr__lk.ml-accent { color: var(--ml-accent); }
.ml-rbr__lk:hover { color: var(--ml-midnight); }
.ml-rbr__cert { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.ml-rbr__row { display: flex; flex-direction: column; gap: 14px; }
.ml-rbr__row .ml-select { max-width: none; }
.ml-rbr__eng { display: grid; grid-template-columns: 22px 1fr auto; gap: 16px; align-items: center; background: var(--ml-mist); }
.ml-rbr__ein { width: 100%; padding: 2px 0; border: 0; border-bottom: 1px solid transparent; background: transparent; font-family: var(--ml-display); font-style: italic; font-size: 17px; color: var(--ml-text-2); }
.ml-rbr__ein:focus-visible { outline: 0; border-bottom-color: var(--ml-lunar); }
.ml-accent { color: var(--ml-accent); }
.ml-rbr__sum { display: flex; flex-direction: column; gap: 12px; padding: 24px 20px; background: var(--ml-midnight); color: var(--ml-muted-dark); }
.ml-rbr__sum p { display: flex; justify-content: space-between; gap: 16px; margin: 0; font-size: 13px; }
.ml-rbr__sum p span:last-child { color: var(--ml-inverse); }
.ml-rbr__save span:last-child { color: var(--ml-lunar) !important; }
.ml-rbr__tot { align-items: baseline; padding-top: 18px; margin-top: 6px !important; border-top: 1px solid rgba(244,242,236,.18); color: var(--ml-inverse); }
.ml-rbr__big { font-family: var(--ml-display); font-size: 32px; line-height: 1; }
.ml-rbr__aff { color: var(--ml-lunar); }
.ml-rbr__over { align-self: center; text-align: center; }
.ml-rbr__as { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.ml-rbr__as li { display: flex; align-items: center; justify-content: center; min-height: 52px; padding: 10px 8px; text-align: center; background: var(--ml-mist); color: var(--ml-text); }

@media (max-width: 1279px) {
  .ml-rb__grid4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ml-drow { grid-template-columns: 56px 88px 70px 84px 56px 60px 64px minmax(80px, 1fr) 56px 110px; gap: 12px; }
}
@media (max-width: 1023px) {
  .ml-rb__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ml-rb__review { grid-template-columns: 1fr; gap: 32px; }
  .ml-rb__visual { position: static; }
  .ml-rb__shapes { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .ml-dgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ml-rbsm__in { grid-template-columns: 1fr; }
  .ml-drow { grid-template-columns: 56px 1fr 70px 56px 60px minmax(70px, auto) 110px; }
  .ml-drow > .ml-drow__c:nth-of-type(4), .ml-drow > .ml-drow__lab, .ml-drow > .ml-drow__v,
  .ml-drow--head > span:nth-child(4), .ml-drow--head > span:nth-child(7), .ml-drow--head > span:nth-child(9) { display: none; }
}
@media (max-width: 767px) {
  .ml-rb { padding-bottom: 56px; }
  .ml-rb__title { padding-block: 28px 20px; text-align: left; align-items: flex-start; gap: 10px; }
  .ml-rb__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px 10px; }
  .ml-rb__tabsin { justify-content: flex-start; gap: 16px; padding-inline: var(--ml-gutter); }
  /* the phone: "Filters · N" + what is set; the panel opens below */
  .ml-rb__filters { gap: 22px; padding-block: 18px 8px; }
  .ml-rb__filters > .ml-rb__shapes, .ml-rb__filters > .ml-rb__grid4, .ml-rb__filters > .ml-rb__grid2,
  .ml-rb__filters > .ml-rb__advrow, .ml-rb__filters > .ml-rb__adv { display: none; }
  .ml-rb__filters.is-open > .ml-rb__shapes { display: flex; overflow-x: auto; scrollbar-width: none; gap: 8px; }
  .ml-rb__filters.is-open > .ml-rb__shapes > * { flex: 0 0 84px; }
  .ml-rb__filters.is-open > .ml-rb__grid4, .ml-rb__filters.is-open > .ml-rb__grid2 { display: grid; grid-template-columns: 1fr; gap: 24px; }
  .ml-rb__filters.is-open > .ml-rb__advrow { display: flex; }
  .ml-rb__filters.is-open > .ml-rb__adv:not([hidden]) { display: grid; grid-template-columns: 1fr; }
  .ml-rb__fbar { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin-inline: calc(var(--ml-gutter) * -1); padding-inline: var(--ml-gutter); }
  .ml-rb__fbar::-webkit-scrollbar { display: none; }
  .ml-rb__fbtn { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; height: 41px; padding: 0 16px; background: var(--ml-midnight); color: var(--ml-inverse); }
  .ml-rb__fpill { flex: 0 0 auto; display: inline-flex; align-items: center; height: 41px; padding: 0 18px; border-radius: 99px; background: var(--ml-midnight); color: var(--ml-inverse); font-size: 13px; white-space: nowrap; }
  .ml-rb__toolbar { border-top: 0; }
  .ml-rb__tool { padding-block: 14px 12px; }
  .ml-dlist { gap: 12px; }
  .ml-drow--head { display: none; }
  .ml-drow { grid-template-columns: 76px 1fr auto; gap: 14px; padding: 12px; background: var(--ml-white); border: 1px solid var(--ml-line); }
  .ml-drow.is-on { border: 1.5px solid var(--ml-midnight); }
  .ml-drow__m { width: 76px; height: 76px; }
  .ml-drow > span:not(.ml-drow__m):not(.ml-drow__mt):not(.ml-drow__v) { display: none; }
  .ml-drow__v { display: inline-flex !important; grid-column: 3; grid-row: 1; }
  .ml-drow__m { grid-column: 1; grid-row: 1; }
  .ml-drow__v i { display: none; }
  .ml-drow__mt { display: flex; flex-direction: column; gap: 4px; min-width: 0; grid-column: 2; grid-row: 1; }
  .ml-drow__t { font-family: var(--ml-display); font-size: 20px; line-height: 1.1; }
  .ml-drow__t i { color: var(--ml-accent); }
  .ml-drow__mt .ml-price { font-size: 15px; }
  .ml-dgrid { grid-template-columns: 1fr 1fr; gap: 20px 12px; }
  .ml-rbsm { padding: 0; place-items: stretch; }
  .ml-rbsm__box { width: 100%; min-height: 100%; }
  .ml-rbsm__in { padding: 56px 16px 28px; }
  .ml-rb__review { padding-top: 0; margin-inline: calc(var(--ml-gutter) * -1); }
  .ml-rb__rcol { padding-inline: var(--ml-gutter); }
  .ml-rbv .ml-gal__stage { aspect-ratio: 390 / 440; }
  .ml-rbv .ml-gal__thumbs { display: none; }
  .ml-rbr__it, .ml-rbr__row, .ml-rbr__eng { padding: 18px 16px; }
}

/* 320px: two cards a row are 132px wide, too narrow for "Choose this setting" on one line (it pushed the page 2px wide) */
@media (max-width: 420px) {
  .ml-rb__pick { white-space: normal; height: auto; min-height: 44px; padding-inline: 8px; line-height: 1.25; text-align: center; }
}

/* ring-builder §9: GRID | LIST as words beside the icons; §4.3: the White | Fancy switch above the colour scale */
.ml-rb__vb { width: auto; display: inline-flex; gap: 6px; padding: 0 12px; }
.ml-rb__ctab { margin-bottom: 12px; max-width: 220px; }
.ml-rb__adv .ml-pills { margin-top: 8px; }