/* Moonlit — collection filters (collection-filters-rules 2.md). Generated by tools/mlt/parts/filters.mjs. */
.ml-ref__g--price .ml-ref__h { display: flex; justify-content: space-between; align-items: baseline; }
.ml-ref__n { margin-left: 4px; }
.ml-ref__m[disabled], .ml-ref__shape[disabled] { opacity: .35; pointer-events: none; }
.ml-ref__shape { flex-direction: column; }
.ml-ref__price label { display: flex; flex-direction: column; gap: 6px; }
/* the two-thumb rail (Figma: 2px line, midnight span, 16px white thumbs with a midnight ring) — visible at every
   width; the number-box styles are scoped to type=number so they never reach the slider (rule 1 traps) */
.ml-cfsl { position: relative; height: 24px; margin: 4px 0 12px; --a: 0%; --b: 100%; }
.ml-cfsl::before { content: ''; position: absolute; left: 0; right: 0; top: 11px; height: 2px; background: var(--ml-line); }
.ml-cfsl__fill { position: absolute; top: 11px; height: 2px; left: var(--a); right: calc(100% - var(--b)); background: var(--ml-midnight); }
.ml-cfsl input[type=range] { position: absolute; inset: 0; width: 100%; height: 24px; margin: 0; background: none; pointer-events: none; -webkit-appearance: none; appearance: none; }
.ml-cfsl input[type=range]::-webkit-slider-runnable-track { height: 24px; background: none; }
.ml-cfsl input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; pointer-events: auto; width: 18px; height: 18px; margin-top: 3px; border-radius: 50%; background: var(--ml-white); border: 1.5px solid var(--ml-midnight); cursor: grab; }
.ml-cfsl input[type=range]::-moz-range-thumb { pointer-events: auto; width: 16px; height: 16px; border-radius: 50%; background: var(--ml-white); border: 1.5px solid var(--ml-midnight); cursor: grab; }
.ml-cfsl input[type=range]::-moz-range-track { background: none; }
.ml-cfsl input[type=range]:focus-visible::-webkit-slider-thumb { outline: 2px solid var(--ml-lunar); outline-offset: 2px; }
.ml-ref__msg { margin-top: -8px; }
.ml-flip { display: inline-flex; transform: scaleX(-1); }
[data-ml-cf].is-cf [data-ml-cf-server] { display: none; }
.ml-ctool__chips button.ml-chip { cursor: pointer; }
.ml-card.is-swapping .ml-card__img { background: linear-gradient(100deg, var(--ml-image) 30%, var(--ml-mist) 50%, var(--ml-image) 70%); background-size: 200% 100%; animation: ml-shimmer 1.2s linear infinite; }
.ml-card.is-swapping .ml-card__t, .ml-card.is-swapping .ml-price { display: block; min-height: 1.2em; background: var(--ml-image); color: transparent; }
@keyframes ml-shimmer { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .ml-card.is-swapping .ml-card__img { animation: none; } }
@media (max-width: 767px) {
  .ml-ref__o--shapes { grid-template-columns: repeat(3, 1fr); }
}

/* 31 Oct (user, iPhone screenshots of the filter drawer) */
.ml-ref__o--sort { gap: 8px; }                     /* the drawer's sort is chips now (mlt-filters.js refine) */
.ml-ref__sortc { min-width: 0; }
/* On touch screens mlt-touch.css makes the range inputs 44px tall, but the rail stayed 24px with its line at 11px — the thumbs
   sat ~10px under the line. There the rail is 44px, the line and the thumbs are centred in it, and the thumbs are 24px. */
@media (max-width: 1023px), (pointer: coarse) {
  .ml-cfsl { height: 44px; margin: 0 0 6px; }
  .ml-cfsl::before, .ml-cfsl__fill { top: 21px; }
  .ml-cfsl input[type=range] { height: 44px; }
  .ml-cfsl input[type=range]::-webkit-slider-runnable-track { height: 44px; }
  .ml-cfsl input[type=range]::-webkit-slider-thumb { width: 24px; height: 24px; margin-top: 10px; }
  .ml-cfsl input[type=range]::-moz-range-thumb { width: 24px; height: 24px; }
}

/* 31 Oct, second pass (workflow audit) */
.ml-ref__foot .ml-btn.is-wait { opacity: .55; pointer-events: none; }        /* "Counting…" is not a button yet */
.ml-dw:focus { outline: none; }                                               /* a finger-opened drawer takes focus itself, no ring */
/* touch: the thumbs' hit area is 44px (the drawn circle stays 24px); the line and the fill are inset by half a thumb so they meet
   the thumb centres, which the range input places at 22px + value x (width - 44px) — --fa / --fb come from mlt-filters.js */
@media (max-width: 1023px), (pointer: coarse) {
  .ml-cfsl::before { left: 22px; right: 22px; }
  .ml-cfsl__fill { left: calc(22px + (100% - 44px) * var(--fa, 0)); right: calc(22px + (100% - 44px) * (1 - var(--fb, 1))); }
  .ml-cfsl input[type=range]::-webkit-slider-thumb { width: 44px; height: 44px; margin-top: 0; border: 0; background: radial-gradient(circle, var(--ml-white) 0 10.5px, var(--ml-midnight) 10.5px 12px, transparent 12.5px); }
  .ml-cfsl input[type=range]::-moz-range-thumb { width: 44px; height: 44px; border: 0; background: radial-gradient(circle, var(--ml-white) 0 10.5px, var(--ml-midnight) 10.5px 12px, transparent 12.5px); }
}
@media (max-width: 767px) { [data-ml-cf-ref] .ml-ref__o--metals { display: grid; align-items: start; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; } .ml-ref__m { min-width: 0; text-align: center; } }   /* 320: Rose Gold no longer wraps alone */