/* Linked option groups (Diamond Shape / Metal) + the Gold Purity restyle.
   Each choice in a linked group is a SIBLING PRODUCT, not a variant, so these render as
   <a> navigation. Visual contract taken from whitemoonjewels.com's PDP:
     - shape  -> square image tiles, caption underneath, selected tile gets the accent border
     - metal  -> round colour chips, caption underneath, selected chip gets an accent ring
     - purity -> outlined boxes, selected = accent border + accent text (NOT a filled block)
   Scoped under .rr-lopts / .rr-purity so nothing else in the theme moves. */

:root {
  --rr-lopt-accent: #9a7b4f;      /* the tan the reference uses for the selected state */
  --rr-lopt-ink: #1c1c1c;
  --rr-lopt-muted: #6b6b6b;
  --rr-lopt-line: #ddd9d2;
  --rr-lopt-paper: #fff;
}

.rr-lopts { display: flex; flex-direction: column; gap: 2.4rem; margin: 2.4rem 0; }

.rr-lopt__head {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 1.2rem; margin-bottom: 1.2rem;
}
.rr-lopt__label {
  font-size: 1.35rem; font-weight: 600; letter-spacing: .13em;
  text-transform: uppercase; color: var(--rr-lopt-ink);
}
.rr-lopt__value {
  font-size: 1.3rem; font-weight: 500; letter-spacing: .01em;
  color: var(--rr-lopt-muted); text-align: right;
}

.rr-lopt__item {
  display: flex; flex-direction: column; align-items: center; gap: .6rem;
  color: inherit; text-align: center; text-decoration: none;
}
/* The caption has to fit the TILE, because the tile sets the grid track and a wider caption just
   spills out of its column on both sides. At 1.1rem/.04em "Marquise" measured 60px against a 59px
   track, so five of the ten shape captions overhung their tile. */
.rr-lopt__title {
  font-size: 1rem; letter-spacing: .02em; text-transform: uppercase;
  color: var(--rr-lopt-muted); line-height: 1.3;
  max-width: 100%; overflow-wrap: anywhere;
}
.rr-lopt__item.is-selected .rr-lopt__title { color: var(--rr-lopt-accent); }

/* ---- card grid: Diamond Shape ----
   Tile size is set by the grid's MINIMUM track, not by the number of shapes, so it has to be
   chosen for the widest case rather than today's. At minmax(8rem,…) a setting with only four
   shapes stretched each tile to ~93px and filled the column; the same row with all ten shapes
   would be two rows of those. 5.6rem keeps the tiles the same size whether a setting has three
   shapes or ten — the row just gains columns instead of growing. */
.rr-lopt--card .rr-lopt__items {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(5.6rem, 1fr)); gap: 1rem;
}
.rr-lopt--card .rr-lopt__media {
  display: grid; place-items: center; width: 100%; aspect-ratio: 1;
  border: 1px solid var(--rr-lopt-line); overflow: hidden; background: var(--rr-lopt-paper);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.rr-lopt--card .rr-lopt__media img { width: 100%; height: 100%; object-fit: cover; }
.rr-lopt--card .rr-lopt__item:hover .rr-lopt__media { border-color: var(--rr-lopt-ink); }
.rr-lopt--card .rr-lopt__item.is-selected .rr-lopt__media {
  border-color: var(--rr-lopt-accent); box-shadow: inset 0 0 0 1px var(--rr-lopt-accent);
}

/* ---- chip row: Metal ---- */
.rr-lopt--chip .rr-lopt__items { display: flex; flex-wrap: wrap; gap: 1.6rem; }
.rr-lopt--chip .rr-lopt__item { width: 6.2rem; }
.rr-lopt__chip {
  width: 3.4rem; height: 3.4rem; border-radius: 50%;
  background: var(--rr-mc, #ccc);
  /* hairline matches the demo card swatch (1px #ddd), not an inset shadow */
  border: 1px solid #ddd;
  box-sizing: border-box;
  transition: box-shadow .15s ease;
}
.rr-lopt--chip .rr-lopt__item:hover .rr-lopt__chip { border-color: rgba(0, 0, 0, .4); }
.rr-lopt--chip .rr-lopt__item.is-selected .rr-lopt__chip { box-shadow: 0 0 0 2px var(--rr-lopt-accent); }

/* ---- collapsible (a group with more than 12 items) ---- */
.rr-lopt__item--extra { display: none; }
.rr-lopt--collapsible.is-open .rr-lopt__item--extra { display: flex; }
.rr-lopt__more {
  display: inline-block; margin: 1.2rem auto 0; font-size: 1.1rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--rr-lopt-ink); border: 1px solid var(--rr-lopt-line);
  padding: .9rem 1.8rem; background: transparent; cursor: pointer; transition: border-color .15s ease;
}
.rr-lopt__more:hover { border-color: var(--rr-lopt-ink); }
.rr-lopt--collapsible.is-open .rr-lopt__more { display: none; }

/* The stock picker ships a rule at the SAME specificity as a bare `.rr-purity …` selector
   (0,4,2) and loads after this file, so an equally-specific override silently loses — verified in
   the browser: the identical selector injected last still rendered the theme green. The `body`
   prefix buys one element and settles it without an !important. */
/* ---- Gold Purity: the same row language as the two linked groups ----
   The theme's stock pill paints the selected value as a solid foreground block, which in the
   reference is an outlined box in the accent. Restyled here rather than in
   component-product-variant-picker.css so only the PDP buy box changes. */
body .rr-purity .product-form__input--pill { display: block; text-align: left; margin: 0 0 2.4rem; }
body .rr-purity .product-form__input--pill > legend.form__label {
  display: flex; justify-content: space-between; align-items: baseline; width: 100%;
  font-size: 1.35rem; font-weight: 600; letter-spacing: .13em; text-transform: uppercase;
  color: var(--rr-lopt-ink); margin-bottom: 1.2rem; float: none;
}
body .rr-purity .product-form__input--pill > legend.form__label .rr-legend-val {
  font-size: 1.3rem; font-weight: 500; letter-spacing: .01em;
  text-transform: none; color: var(--rr-lopt-muted);
}
body .rr-purity .product-form__input--pill input[type="radio"] + label {
  border: 1px solid var(--rr-lopt-line); background: var(--rr-lopt-paper);
  color: var(--rr-lopt-ink); border-radius: 0; margin: 0 1rem 1rem 0;
  min-width: 7.2rem; padding: 1.3rem 2rem; font-size: 1.3rem;
  letter-spacing: .08em; text-decoration: none; transition: border-color .15s ease, color .15s ease;
}
body .rr-purity .product-form__input--pill input[type="radio"] + label:hover { border-color: var(--rr-lopt-ink); }
body .rr-purity .product-form__input--pill input[type="radio"]:checked + label {
  background: var(--rr-lopt-paper); color: var(--rr-lopt-accent);
  border-color: var(--rr-lopt-accent); text-decoration: none;
}
/* The stock rule draws an inset shadow behind every pill; with a square outlined box it reads
   as a smudge under the border. */
body .rr-purity .product-form__input--pill input[type="radio"] + label:before { box-shadow: none; }

@media screen and (max-width: 749px) {
  /* 5.4rem, not 4.8: at 375 a 4.8rem track resolves to a 49px tile and the longest caption
     ("Marquise") needs ~53px even at 1rem, so the row has to give the column a little more. */
  .rr-lopt--card .rr-lopt__items { grid-template-columns: repeat(auto-fill, minmax(5.4rem, 1fr)); }
  .rr-lopt--chip .rr-lopt__items { gap: 1.2rem; }
  /* Tap targets: the chip itself is 34px, so the whole column carries the touch area. */
  .rr-lopt--chip .rr-lopt__item { width: 5.6rem; min-height: 4.4rem; }
}