/* rockrush — ring builder base: the tokens and the two shared primitives (.wm-container, .wm-btn)
   the White Moon `wm-ring-builder` section relies on (its own rules ship inside the section's
   {% stylesheet %}). Colours mapped to rockrush's palette (green accent, black ink) so the builder
   sits inside this theme's look; sizes/spacing are White Moon's measured values. */
:root {
  --wm-accent: #17796a;              /* rockrush green (buttons hover, active pills) */
  --wm-accent-rgb: 23 121 106;
  --wm-ink: #121212;
  --wm-ink-rgb: 18 18 18;
  --wm-ink-soft: #4c4e56;
  --wm-paper: #ffffff;
  --wm-bone: #f7f8f8;
  --wm-mist: #e9e8e3;
  --wm-night: #0f3d2e;
  --wm-night-2: #1c6b52;
  --wm-silver: #9a9ca3;
  --wm-hot: #ad3838;
  --wm-bg: #ffffff;
  --wm-bg-alt: #f7f8f8;
  --wm-text: var(--wm-ink);
  --wm-text-muted: var(--wm-ink-soft);
  --wm-heading: #121212;
  --wm-link: #17796a;
  --wm-price: #121212;
  --wm-price-sale: #702424;
  --wm-line: #e3e3e3;
  --wm-hair: rgb(var(--wm-ink-rgb) / .12);
  --wm-hair-soft: rgb(var(--wm-ink-rgb) / .07);
  --wm-success: #11703b;
  --wm-error: #ad3838;
  --wm-highlight: #17796a;
  --wm-font-body: var(--font-body-family, inherit);
  --wm-font-heading: var(--font-heading-family, inherit);
  --wm-maxw: 1440px;
  --wm-gutter: clamp(1.25rem, 4vw, 3.75rem);
  --wm-radius: 0;
  --wm-border: 1px;
  --wm-space-1: .25rem;
  --wm-space-2: .5rem;
  --wm-space-3: .75rem;
  --wm-space-4: 1rem;
  --wm-space-5: 1.5rem;
  --wm-space-6: 2rem;
  --wm-space-8: 3rem;
  --wm-ease: cubic-bezier(.23, 1, .32, 1);
}
.wm-container {
  width: 100%;
  max-width: var(--wm-maxw);
  margin-inline: auto;
  padding-inline: var(--wm-gutter);
}
.wm-container--flush { padding-inline: 0; }
.wm-section--flush { padding-block: 0; }
.wm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--wm-space-2);
  min-height: 48px;
  padding: 1.05rem 2.1rem;
  border: 0;
  border-radius: var(--wm-radius);
  font-size: .72rem;
  font-weight: 400;
  letter-spacing: .2em;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  font-family: inherit;
  transition: background .35s var(--wm-ease), color .35s var(--wm-ease), border-color .35s var(--wm-ease), box-shadow .35s var(--wm-ease), transform .16s var(--wm-ease);
}
.wm-btn--solid { background: var(--wm-ink); color: #f4f3f0; box-shadow: inset 0 1px rgb(255 255 255 / .07); }
.wm-btn--solid:hover { background: var(--wm-accent); }
.wm-btn--outline { border: var(--wm-border) solid currentColor; color: var(--wm-ink); background: transparent; }
.wm-btn--outline:hover { background: var(--wm-ink); color: #fff; transform: translateY(-1px); }
.wm-btn--gold { background: var(--wm-accent); color: #fff; }
.wm-btn--gold:hover { background: var(--wm-ink); color: #f4f3f0; transform: translateY(-1px); }
.wm-btn[disabled], .wm-btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; transform: none; }
/* Mobile: the reference's intent (its own comment) is "Shape keeps its tiles inline" — but its
   `.wm-rb__fcard--wide > * { display:block }` (0,1,0) loses to the collapse rule
   `.wm-rb__fcard > *:not(.wm-rb__fhead) { display:none }` (0,2,0), so the ten shape tiles measured
   0×0 at 375px. Re-state the intent at a specificity that wins. */
@media (max-width: 768px) {
  .wm-rb .wm-rb__fcard.wm-rb__fcard--wide > * { display: block; }
  .wm-rb .wm-rb__fcard.wm-rb__fcard--wide > .wm-rb__shapes { display: grid; }
  .wm-rb .wm-rb__fcard.wm-rb__fcard--wide > .wm-rb__fhead { display: flex; }
}
/* PDP "Choose This Setting" CTA — same box as the theme's own full-width buy button */
.rr-choose-setting { width: 100%; margin-bottom: 1rem; }
/* cart: the builder line's stone band — the White Moon demo's three-band card: head (setting + its
   price), stone (icon · "STONE DETAILS" · two-column specs · stone price), foot (qty + line total). */
.rr-citem__props { list-style: none; margin: .4rem 0 0; padding: 0; font-size: 1.3rem; color: rgba(var(--color-foreground), .75); }
.rr-citem__props li { margin: .15rem 0; }
.rr-citem__k { color: rgba(var(--color-foreground), .55); }
.rr-citem__stone { display: grid; grid-template-columns: 5.6rem minmax(0, 1fr) auto; gap: 1.2rem; align-items: start; margin-top: 1.2rem; padding: 1.2rem 0 0; border-top: 1px solid rgba(var(--color-foreground), .1); }
.rr-citem__stone-ic { display: flex; align-items: center; justify-content: center; width: 5.6rem; height: 5.6rem; border: 1px solid rgba(var(--color-foreground), .12); background: #f7f8f8; color: rgba(var(--color-foreground), .7); }
.rr-citem__stone-ic svg { width: 3.2rem; height: 3.2rem; }
.rr-citem__stone-body { min-width: 0; }
.rr-citem__stone-h { margin: 0 0 .5rem; font-size: 1.1rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 500; }
.rr-citem__stone-body .rr-citem__props { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1.6rem; row-gap: .2rem; margin: 0; }
.rr-citem__stone-body .rr-citem__props li { white-space: normal; overflow-wrap: anywhere; }
.rr-citem__stone-price { grid-column: 3; grid-row: 1; margin: 0; font-size: 1.5rem; font-weight: 400; white-space: nowrap; }
.rr-citem__split { grid-column: 2 / 4; margin: .4rem 0 0; font-size: 1.2rem; color: rgba(var(--color-foreground), .6); }
@media screen and (max-width: 749px) { .rr-citem__stone { grid-template-columns: 4.4rem minmax(0, 1fr); } .rr-citem__stone-ic { width: 4.4rem; height: 4.4rem; } .rr-citem__stone-price { grid-column: 2; grid-row: auto; } .rr-citem__stone-body .rr-citem__props { grid-template-columns: 1fr; } .rr-citem__split { grid-column: 2; } }