/* =========================================================
   RING FINDER  single-panel variant
   All four questions on one panel, plus a sticky bar with the chosen filters
   as chips and a "Show rings" button. Uses the theme's own tokens and the
   same dark / light palette as Shop by Category and the other Ring Finder
   variants. Every rule is anchored to .rp-section or uses an rp- prefixed
   class.
   ========================================================= */
.rp-section {
  --rp-bg: var(--fm-black);
  --rp-ink: var(--fm-cream);
  --rp-muted: var(--fm-cream-dim);
  --rp-accent: var(--fm-gold);
  --rp-on-accent: var(--fm-black);
  --rp-card-bg: rgba(255, 255, 255, 0.03);
  --rp-line: rgba(var(--fm-rgb-gold), 0.25);
  --rp-tile-bg: rgba(255, 255, 255, 0.04);
  --rp-tile-line: rgba(var(--fm-rgb-gold), 0.3);
  --rp-bar-bg: var(--fm-cream);
  --rp-bar-ink: var(--fm-black);

  position: relative;
  background: var(--rp-bg);
  padding: 8px 24px 0;
}
.rp-section *,
.rp-section *::before,
.rp-section *::after { box-sizing: border-box; }
:where(.rp-section) button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}
.rp-wrap { max-width: 1120px; margin: 0 auto; }
.rp-lede {
  margin: 0 0 30px;
  text-align: center;
  font-family: var(--fm-font-serif);
  font-size: clamp(15px, 1.4vw, 19px);
  color: var(--rp-muted);
}
.rp-lede a { color: var(--rp-accent); }

/* ---------------- panel + rows ---------------- */
.rp-panel {
  background: var(--rp-card-bg);
  border: 1px solid var(--rp-line);
  border-radius: var(--fm-radius-md);
  box-shadow: 0 1px 2px rgba(60, 40, 15, 0.04), 0 8px 24px rgba(60, 40, 15, 0.05);
}
.rp-row {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 12px 40px;
  align-items: center;
  padding: 30px 40px;
}
.rp-row + .rp-row { border-top: 1px solid var(--rp-line); }
.rp-label h3 {
  margin: 0 0 6px;
  font-family: var(--fm-font-serif);
  font-weight: 500;
  font-size: 24px;
  line-height: 1.15;
  color: var(--rp-ink);
}
.rp-label p {
  margin: 0 0 8px;
  font-family: var(--fm-font-serif);
  font-size: 15px;
  line-height: 1.4;
  color: var(--rp-muted);
}
.rp-meta { display: flex; gap: 14px; font-family: var(--fm-font-serif); font-size: 15px; }
.rp-meta a,
.rp-clear {
  color: var(--rp-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.rp-clear[hidden] { display: none; }

/* ---------------- options ---------------- */
.rp-opts { display: grid; gap: 12px; }
.rp-opts--shape { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.rp-opts--metal { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.rp-opts--price { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.rp-opts--style { grid-template-columns: repeat(5, minmax(0, 1fr)); }

.rp-opt {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 6px 12px;
  text-align: center;
  font-family: var(--fm-font-serif);
  font-size: 16px;
  line-height: 1.2;
  color: var(--rp-ink);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--fm-radius-md);
  transition: background var(--fm-duration-base) var(--fm-ease), border-color var(--fm-duration-base) var(--fm-ease), transform var(--fm-duration-med) var(--fm-ease), box-shadow var(--fm-duration-med) var(--fm-ease);
}
.rp-opt:hover { background: var(--rp-tile-bg); border-color: var(--rp-tile-line); transform: translateY(-2px); }
.rp-opt[aria-pressed="true"] {
  background: var(--rp-tile-bg);
  border-color: var(--rp-accent);
  box-shadow: 0 0 0 1px var(--rp-accent) inset, 0 10px 20px rgba(168, 117, 42, 0.12);
}
.rp-opt[aria-pressed="true"]::after {
  content: '';
  position: absolute;
  top: 7px;
  right: 7px;
  width: 16px;
  height: 16px;
  border-radius: var(--fm-radius-circle);
  background: var(--rp-accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M4 7.2l2 2 4-4.4' fill='none' stroke='%23fff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat;
}
.rp-opt .rf-ico { width: 52px; height: 52px; color: var(--rp-ink); }
.rp-opt .rf-ico--style { width: 76px; height: 76px; }
.rp-opt[aria-pressed="true"] .rf-ico { color: var(--rp-accent); }
.rp-opt .rf-sw {
  width: 54px;
  height: 54px;
  border-radius: var(--fm-radius-circle);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12), 0 6px 12px -6px rgba(0, 0, 0, 0.35);
}
/* budget: wide serif pills */
.rp-opts--price .rp-opt {
  justify-content: center;
  min-height: 64px;
  padding: 12px 8px;
  font-size: 20px;
  background: var(--rp-tile-bg);
  border-color: var(--rp-tile-line);
}
.rp-opts--price .rp-opt:hover { border-color: var(--rp-accent); }
.rp-opts--price .rp-opt[aria-pressed="true"] { border-color: var(--rp-accent); }

/* ---------------- sticky summary bar ---------------- */
.rp-bar { position: sticky; bottom: 0; z-index: 5; margin-top: 28px; }
.rp-bar-in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  max-width: 1120px;
  margin: 0 auto;
  padding: 16px 24px;
  background: var(--rp-bar-bg);
  color: var(--rp-bar-ink);
  border-radius: var(--fm-radius-md) var(--fm-radius-md) 0 0;
  box-shadow: 0 -8px 24px rgba(60, 40, 15, 0.12);
}
.rp-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-height: 24px;
  font-family: var(--fm-font-serif);
  font-size: 16px;
}
.rp-hint { opacity: 0.7; }
.rp-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 6px 4px 12px;
  font-size: 15px;
  background: rgba(var(--fm-rgb-gold), 0.18);
  border-radius: var(--fm-radius-pill);
}
.rp-chip button { width: 20px; height: 20px; border-radius: var(--fm-radius-circle); font-size: 16px; line-height: 1; }
.rp-chip button:hover { background: rgba(var(--fm-rgb-gold), 0.35); }
.rp-cta {
  flex: 0 0 auto;
  padding: 12px 26px;
  font-family: var(--fm-font-serif);
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  color: var(--rp-on-accent);
  background: var(--rp-accent);
  border-radius: var(--fm-radius-pill);
  transition: opacity var(--fm-duration-base) var(--fm-ease);
}
.rp-cta:hover { opacity: 0.85; }
.rp-opt:focus-visible,
.rp-cta:focus-visible,
.rp-clear:focus-visible,
.rp-meta a:focus-visible,
.rp-chip button:focus-visible { outline: 2px solid var(--rp-accent); outline-offset: 3px; border-radius: var(--fm-radius-sm); }

/* ---------------- responsive ---------------- */
@media (max-width: 960px) {
  .rp-row { grid-template-columns: 1fr; gap: 14px; padding: 24px 20px; }
  .rp-label { display: flex; align-items: baseline; justify-content: space-between; }
  .rp-label h3 { margin: 0; }
  .rp-label p { display: none; }
  .rp-opts--shape,
  .rp-opts--metal,
  .rp-opts--style { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rp-opts--price { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .rp-section { padding: 0 16px; }
  .rp-bar-in { flex-direction: column; align-items: stretch; gap: 12px; padding: 14px 16px; }
  .rp-cta { text-align: center; }
  .rp-opt .rf-ico { width: 44px; height: 44px; }
  .rp-opt .rf-ico--style { width: 58px; height: 58px; }
  .rp-opt .rf-sw { width: 46px; height: 46px; }
}
@media (prefers-reduced-motion: reduce) {
  .rp-opt, .rp-cta { transition: none; }
  .rp-opt:hover { transform: none; }
}

/* ---------------- LIGHT THEME ----------------
   Same palette as Shop by Category / the other Ring Finder variants. The
   summary bar goes dark so it stands out against the light page. */
html[data-theme="light"] .rp-section {
  --rp-bg: #F5EDE6;
  --rp-ink: #1a1714;
  --rp-muted: #5b554d;
  --rp-accent: #a8752a;
  --rp-on-accent: #ffffff;
  --rp-card-bg: rgba(255, 255, 255, 0.75);
  --rp-line: #eadfcf;
  --rp-tile-bg: linear-gradient(180deg, #fffdf9 0%, #faf5ee 100%);
  --rp-tile-line: #e6d9c6;
  --rp-bar-bg: #1a1714;
  --rp-bar-ink: #f3efe7;
}
html[data-theme="light"] .rp-chip { background: rgba(255, 255, 255, 0.12); }
html[data-theme="light"] .rp-chip button:hover { background: rgba(255, 255, 255, 0.25); }