/* ===== Design tokens (LIGHT by default) ===== */
:root {
  /* your palette */
  --rs-bg: #f4dbf6;      /* page background */
  --rs-panel: #ffe8ff;   /* middle layer */
  --rs-surface: #fff6ff; /* top layer */
  --rs-frost: rgba(24, 24, 27, 0.08); /* subtle border on light */
  --rs-text: #1b1e24;    /* primary text */
  --rs-text-dim: #5b6270;/* secondary text */

  --rs-accent: #ffd166;  /* warm gold */
  --rs-accent-2: #8ecae6;/* cool blue */
  --rs-pink: #f0b3e6;
  --rs-success: #2bb673;
  --rs-danger: #ff6b6b;

  --rs-cover-ratio: 2/3;   /* <<< TALLER BOOK COVERS: tweak this */
  --rs-max: 2800px;         /* soft cap for very wide monitors */
  --rs-rad: 16px;
  --rs-rad-lg: 24px;
  --rs-gap: 16px;
  --rs-shadow: 0 8px 32px rgba(32, 16, 48, 0.14);
}
/* Kill theme/other margins that create the right gutter on this template */
body.page-template-page-recshelf-home .site-content > .ast-container,
body.page-template-page-recshelf-home .ast-container {
  margin-left: 0 !important;
  margin-right: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
:root { --rs-max: 2400px; }  /* or whatever you want the hard ceiling to be */

.page-template-page-recshelf-home #rs-home .rs-container{
  width: 90%;
  margin: 0 auto;
}



@media (max-width: 768px){
  .page-template-page-recshelf-home #rs-home .rs-container{ width: calc(100% - 24px); margin: 0 auto; }
}


/* Stretch the page on this template (remove Astra container padding/limits) */
.page-template-page-recshelf-home .site-content,
.page-template-page-recshelf-home .content-area,
.page-template-page-recshelf-home .ast-container,
.page-template-page-recshelf-home .entry-content {
  max-width: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* ===== Optional DARK theme (toggle with [data-theme="dark"]) ===== */
[data-theme="dark"] {
  --rs-bg: #111215;
  --rs-panel: #16181d;
  --rs-surface: #1b1e24;
  --rs-frost: rgba(255,255,255,0.08);
  --rs-text: #eef1f6;
  --rs-text-dim: #b8beca;
  --rs-shadow: 0 6px 24px rgba(0,0,0,0.35);
}



.rs-title { font-size: clamp(28px, 5vw, 48px); line-height: 1.1; color: var(--rs-text); }
.rs-subtitle { color: var(--rs-text-dim); font-size: clamp(14px, 2.4vw, 18px); }

.rs-link { color: var(--rs-accent-2); text-decoration: none; font-weight: 600; }
.rs-link:hover { text-decoration: underline; }

.rs-btn {
  display:inline-flex; align-items:center; justify-content:center;
  padding:10px 16px; border-radius: 999px; background: var(--rs-accent);
  color:#1a1a1a; font-weight:700; border:none; box-shadow: var(--rs-shadow);
  transition: transform .15s ease, box-shadow .2s ease;
}
.rs-btn:hover { transform: translateY(-1px); }
.rs-btn--ghost { background: transparent; color: var(--rs-text); border:1px solid var(--rs-frost); }

/* ===== Global page ===== */
body { background: var(--rs-bg); }
#rs-home { color: var(--rs-text); overflow: hidden; }
.rs-sec-head { display:flex; align-items:end; justify-content:space-between; gap:16px; margin-bottom: 16px; }
.rs-sec-head h2 { font-size: clamp(22px, 3vw, 32px); }

.rs-scroll { display:grid; grid-auto-flow: column; grid-auto-columns: 220px; gap: 16px; overflow-x:auto; padding-bottom: 6px; scroll-snap-type:x mandatory; }
.rs-scroll > * { scroll-snap-align: start; }

/* ===== Hero ===== */
.rs-hero { position: relative; padding: clamp(28px, 6vw, 64px) 0 32px; isolation: isolate; }
.rs-hero__bg {
  position:absolute; inset:-10% -10% auto -10%; height: 80%;
  background:
    radial-gradient(1200px 600px at 10% 20%, rgba(142,202,230,0.18), transparent 60%),
    radial-gradient(900px 500px at 90% 10%, rgba(255,209,102,0.18), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,0.25), transparent);
  z-index:-1;
  filter: blur(2px);
}
.rs-hero__header { text-align: center; margin-bottom: 24px; }
.rs-hero__header span { color: var(--rs-accent); }

.rs-hero__ctas {
  display:grid; grid-template-columns: 1fr; gap: 16px; margin: 16px 0 12px;
}
@media (min-width: 820px) { .rs-hero__ctas { grid-template-columns: 1fr 1fr; } }

.rs-cta {
  display:flex; justify-content:space-between; align-items:center; gap: 16px;
  padding: 20px; border-radius: var(--rs-rad-lg);
  background: linear-gradient(180deg, rgba(255,255,255,0.75), rgba(255,255,255,0.45));
  border:1px solid var(--rs-frost); text-decoration:none; color: var(--rs-text);
  box-shadow: var(--rs-shadow); transition: transform .15s ease, box-shadow .2s ease;
}
[data-theme="dark"] .rs-cta {
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
}
.rs-cta:hover { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(0,0,0,0.15); }
.rs-cta__label h2 { margin: 0 0 6px; font-size: clamp(18px, 2.6vw, 24px); }
.rs-cta__label p { margin: 0; color: var(--rs-text-dim); }
.rs-cta__icon { font-size: 28px; }

.rs-hero__stats { display:flex; gap: 18px; justify-content:center; list-style:none; padding: 10px 0 0; margin: 6px 0 0; }
.rs-hero__stats li { display:flex; flex-direction:column; align-items:center; padding: 8px 12px; border-radius: 10px; background: rgba(255,255,255,0.70); border:1px solid var(--rs-frost); }
[data-theme="dark"] .rs-hero__stats li { background: rgba(255,255,255,0.04); }
.rs-hero__stats strong { font-size: 18px; color: var(--rs-text); }
.rs-hero__stats span { color: var(--rs-text-dim); font-size: 12px; }

/* ===== Live Now ===== */
.rs-live { padding: 28px 0; }
.rs-pills { grid-auto-columns: max-content; }
.rs-pill {
  display:inline-flex; align-items:center; gap: 10px; padding: 10px 14px;
  border-radius: 999px; border:1px solid var(--rs-frost); background: var(--rs-surface);
  color: var(--rs-text); white-space: nowrap; cursor: pointer;
}
[data-theme="dark"] .rs-pill { background: rgba(255,255,255,0.04); }
.rs-pill .rs-dot { width:8px; height:8px; background:#2ef2a3; border-radius:50%; box-shadow: 0 0 10px #2ef2a3; }
.rs-pill .rs-count { color: var(--rs-text-dim); font-size: 12px; }

/* ===== Cards (books) ===== */
.rs-recs { padding: 28px 0; }
.rs-cards { grid-auto-columns: clamp(200px, 26vw, 240px); }
.rs-card {
  display:flex; flex-direction:column; gap: 8px; background: var(--rs-surface);
  border:1px solid var(--rs-frost); border-radius: var(--rs-rad); overflow:hidden; box-shadow: var(--rs-shadow);
}
.rs-card__cover, .rs-card__cover img { display:block; width:100%; aspect-ratio: var(--rs-cover-ratio); object-fit: cover; }
.rs-card__placeholder { width:100%; aspect-ratio: var(--rs-cover-ratio); display:grid; place-items:center; color:#777; background:#e9e1ec; }
[data-theme="dark"] .rs-card__placeholder { background:#222; }
.rs-card__body { padding: 10px 12px 12px; }
.rs-card__title { font-size: 15px; margin: 0 0 6px; }
.rs-card__title a { color: var(--rs-text); text-decoration:none; }
.rs-card__meta { display:flex; align-items:center; gap:8px; color: var(--rs-text-dim); font-size: 12px; }
.rs-badge { background: rgba(0,0,0,0.06); padding: 4px 8px; border-radius: 999px; border:1px solid var(--rs-frost); }
[data-theme="dark"] .rs-badge { background: rgba(255,255,255,0.08); }
/* Live Now: hide scrollbar + edge fades */
.rs-live .rs-pills{
  position: relative;
  z-index: 0;
  overflow-x: auto;   /* keep programmatic scrolling */
  overflow-y: hidden;
  scrollbar-width: none;            /* Firefox: hide scrollbar */
}
.rs-live .rs-pills::-webkit-scrollbar{ display: none; }  /* WebKit: hide scrollbar */

/* edge fades so the row doesn’t hard-cut at the sides */
.rs-live .rs-pills::before,
.rs-live .rs-pills::after{
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  width: 48px;
  pointer-events: none;
  z-index: 2;
}
.rs-live .rs-pills::before{
  left: 0;
  background: linear-gradient(90deg, var(--rs-bg), rgba(255,255,255,0));
}
.rs-live .rs-pills::after{
  right: 0;
  background: linear-gradient(-90deg, var(--rs-bg), rgba(255,255,255,0));
}

/* Live Now: continuous marquee */
.rs-live .rs-pills{
  display:block;
  overflow:hidden;                /* no native scrolling; animation handles it */
}

/* The moving track */
.rs-live .rs-pills__track{
  display:inline-flex;            /* all pills in one line */
  align-items:center;
  gap: 10px;
  will-change: transform;
  animation: rs-marquee var(--rs-marquee-dur, 30s) linear infinite;
}

/* Pause on hover */
.rs-live .rs-pills.is-paused .rs-pills__track{
  animation-play-state: paused;
}

/* One full pass slides half the track width because we duplicate it once */
@keyframes rs-marquee{
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}


/* ===== Insights ===== */
.rs-insights { padding: 28px 0; }
.rs-insights__row { grid-auto-columns: clamp(260px, 32vw, 360px); }
.rs-insight__card {
  background: var(--rs-panel); border:1px solid var(--rs-frost); border-radius: 16px;
  padding: 16px; box-shadow: var(--rs-shadow);
}
.rs-insight blockquote { margin: 0 0 14px; color: var(--rs-text); font-size: 15px; }
.rs-insight__footer { display:flex; align-items:center; gap: 10px; }
.rs-avatar { width:36px; height:36px; border-radius:50%; background:#e7dff0; display:grid; place-items:center; }
[data-theme="dark"] .rs-avatar { background:#2b2f36; }
.rs-reveal { margin-left: auto; }

/* ===== Tabs ===== */
.rs-tabs { padding: 28px 0; }
.rs-tabs__nav { display:flex; gap: 10px; margin-bottom: 10px; }
.rs-tab { background: transparent; color: var(--rs-text); border:1px solid var(--rs-frost); border-radius: 999px; padding: 8px 14px; cursor: pointer; }
.rs-tab.is-active { background: rgba(0,0,0,0.05); }
[data-theme="dark"] .rs-tab.is-active { background: rgba(255,255,255,0.08); }
.rs-tabs__panel { display:none; }
.rs-tabs__panel.is-active { display:block; }
.rs-empty { padding: 16px; color: var(--rs-text-dim); border:1px dashed var(--rs-frost); border-radius: 12px; }

/* ===== Events ===== */
.rs-events { padding: 28px 0; }
.rs-event {
  display:flex; align-items:center; justify-content:space-between; gap: 16px;
  background: linear-gradient(90deg, rgba(142,202,230,0.20), rgba(240,179,230,0.20));
  border:1px solid var(--rs-frost); border-radius: var(--rs-rad-lg); padding: 16px;
}

/* ===== Endcap ===== */
.rs-endcap { padding: 36px 0 60px; }
.rs-endcap__box {
  background: linear-gradient(180deg, rgba(255,255,255,0.85), rgba(255,255,255,0.55));
  border:1px solid var(--rs-frost); border-radius: 20px; padding: 24px; text-align:center; box-shadow: var(--rs-shadow);
}
[data-theme="dark"] .rs-endcap__box {
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
}

/* ===== Modal ===== */
.rs-modal[hidden] { display:none; }
.rs-modal { position: fixed; inset: 0; z-index: 1000; }
.rs-modal__scrim { position:absolute; inset:0; background: rgba(0,0,0,0.45); backdrop-filter: blur(2px); }
.rs-modal__card {
  position:absolute; inset: 10% auto auto 50%; transform: translateX(-50%);
  width: min(92vw, 560px); background: var(--rs-panel); color: var(--rs-text);
  border:1px solid var(--rs-frost); border-radius: 18px; padding: 18px; box-shadow: var(--rs-shadow);
}
.rs-modal__close { position:absolute; top: 10px; right: 12px; background:transparent; border:none; color: var(--rs-text); font-size: 22px; cursor:pointer; }
.rs-form { display:grid; gap: 12px; margin-top: 8px; }
.rs-form label { display:grid; gap: 6px; font-size: 14px; color: var(--rs-text-dim); }
.rs-form select, .rs-form input[type="range"] { background:#fff; color:var(--rs-text); border:1px solid var(--rs-frost); border-radius: 10px; padding: 8px; }
[data-theme="dark"] .rs-form select, [data-theme="dark"] .rs-form input[type="range"] { background:#0f1114; color:var(--rs-text); }

/* ===== Drawer ===== */
.rs-drawer {
  position: fixed; right: 0; top: 0; bottom: 0; width: min(92vw, 480px);
  transform: translateX(110%); transition: transform .25s ease; z-index: 1000;
  background: var(--rs-panel); border-left:1px solid var(--rs-frost); box-shadow: var(--rs-shadow);
  display:flex; flex-direction: column;
}
.rs-drawer.is-open { transform: translateX(0); }
.rs-drawer__head { display:flex; align-items:center; justify-content:space-between; padding: 14px; border-bottom: 1px solid var(--rs-frost); }
.rs-drawer__close { background:transparent; border:none; color:var(--rs-text); font-size: 22px; cursor:pointer; }
.rs-drawer__body { padding: 14px; overflow:auto; }
.rs-roomlist { list-style:none; padding: 0; margin: 0; display:grid; gap: 8px; }
.rs-roomlist a { color: var(--rs-text); text-decoration:none; }
.rs-roomlist .rs-count { margin-left: auto; color: var(--rs-text-dim); }
/* Do NOT push the container on the custom home template */
body.page-template-page-recshelf-home.rec-shelf .ast-container {
  margin-left: 0 !important;
}
/* ===== Hero KPIs (site stats) ===== */
.rs-kpis{
  display:flex; gap: 16px; justify-content:center;
  list-style:none; padding: 10px 0 0; margin: 8px 0 0;
  flex-wrap: wrap;
}

.rs-kpi{
  --kpi-accent: var(--rs-accent);
  position: relative;
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255,255,255,0.85), rgba(255,255,255,0.55));
  border: 1px solid var(--rs-frost);
  box-shadow: var(--rs-shadow);
  transform: translateZ(0);
  transition: transform .15s ease, box-shadow .2s ease;
  overflow: hidden;
}
[data-theme="dark"] .rs-kpi{
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.03));
}

/* slim top accent line */
.rs-kpi::before{
  content:""; position:absolute; left:0; right:0; top:0; height:3px;
  background: linear-gradient(90deg, var(--kpi-accent), transparent);
}

/* very subtle moving shine */
.rs-kpi::after{
  content:""; position:absolute; inset:0; border-radius:inherit;
  background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,0.55) 18%, transparent 36%);
  transform: translateX(-120%);
  animation: rs-kpi-shine 6.5s linear infinite;
  opacity: .20; pointer-events: none;
}
@keyframes rs-kpi-shine { to { transform: translateX(120%); } }

.rs-kpi:hover{ transform: translateY(-2px); box-shadow: 0 12px 34px rgba(32,16,48,.16); }

.rs-kpi__icon{
  width: 36px; height: 36px; border-radius: 50%;
  display:grid; place-items:center;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.9), rgba(255,255,255,.55));
  border: 1px solid var(--rs-frost);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.35);
  font-size: 18px;
}

.rs-kpi__body{ display:flex; flex-direction:column; line-height:1; }
.rs-kpi__num{
  font-size: clamp(20px, 3vw, 28px);
  color: var(--rs-text);
}
.rs-kpi__label{
  margin-top: 4px;
  font-size: 11px; letter-spacing: .04em; text-transform: uppercase;
  color: var(--rs-text-dim);
}

/* color variants */
.rs-kpi.is-gold { --kpi-accent: var(--rs-accent); }
.rs-kpi.is-blue { --kpi-accent: var(--rs-accent-2); }
.rs-kpi.is-pink { --kpi-accent: var(--rs-pink); }
/* ===== Spotlight (hero card) ===== */
.rs-spotlight { padding: 32px 0; }

.rs-spot{
  position: relative;
  display: grid;
  gap: 24px;
  align-items: center;
  grid-template-columns: 1fr;                  /* mobile stack */
  padding: 24px;
  border-radius: var(--rs-rad-lg);
  background: linear-gradient(180deg, var(--rs-panel), rgba(255,255,255,0.55));
  border: 1px solid var(--rs-frost);
  box-shadow: var(--rs-shadow);
  overflow: hidden;
  isolation: isolate;
}
[data-theme="dark"] .rs-spot{
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
}
@media (min-width: 980px){
  .rs-spot{
    grid-template-columns: clamp(260px, 28vw, 380px) minmax(0, 1fr);
    padding: 28px;
  }
}

/* left: cover with glow + badge */
.rs-spot__art{
  position: relative;
  border-radius: 14px;
}
.rs-spot__cover,
.rs-spot__cover img,
.rs-spot__ph{
  display:block; width:100%; aspect-ratio: var(--rs-cover-ratio);
  border-radius: 14px; object-fit: cover;
  background:#ede4f1;
  border:1px solid var(--rs-frost);
  box-shadow: 0 16px 50px rgba(32,16,48,.18);
}
[data-theme="dark"] .rs-spot__cover,
[data-theme="dark"] .rs-spot__ph{ background:#23262c; }

.rs-spot__badge{
  position:absolute; left:14px; top:14px;
  padding:6px 10px; border-radius:999px;
  font-size:12px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  color:#1a1a1a; background: var(--rs-accent); border:1px solid var(--rs-frost);
  box-shadow: var(--rs-shadow);
}

/* soft radial glow under the art */
.rs-spot::before{
  content:""; position:absolute; inset:-30% -10% auto -10%; height:70%;
  background:
    radial-gradient(520px 260px at 18% 30%, rgba(142,202,230,0.20), transparent 60%),
    radial-gradient(480px 260px at 80% 18%, rgba(255,209,102,0.22), transparent 60%);
  filter: blur(2px);
  z-index: -1;
}

/* moving shine across the art (very subtle) */
.rs-spot__shine{
  position:absolute; inset:0; border-radius:14px; pointer-events:none;
  background: linear-gradient(110deg, transparent 0%, rgba(255,255,255,.55) 12%, transparent 24%);
  mix-blend-mode: soft-light; opacity:.18; transform: translateX(-120%);
  animation: rs-spot-shine 7s linear infinite;
}
@keyframes rs-spot-shine { to { transform: translateX(120%); } }

/* right: content */
.rs-spot__content{ display:grid; gap: 14px; }
.rs-spot__eyebrow{
  font-size:12px; text-transform:uppercase; letter-spacing:.06em;
  color: var(--rs-text-dim);
}
.rs-spot__title{ font-size: clamp(22px, 3.2vw, 34px); margin: 0; }
.rs-spot__deck{ color: var(--rs-text-dim); margin: 0; }

/* meta chips row */
.rs-spot__meta{
  display:flex; gap:8px; flex-wrap: wrap; margin: 0; padding: 0; list-style:none;
}
.rs-chip{ display:inline-flex; align-items:center; gap:7px; padding: 6px 12px; border-radius:999px; font-size:12px; }
.rs-chip--soft{
  background: rgba(0,0,0,0.04); border:1px solid var(--rs-frost); color: var(--rs-text-dim);
}
[data-theme="dark"] .rs-chip--soft{ background: rgba(255,255,255,0.08); }

/* reasons chips (pop a bit more) */
.rs-spot__reasons{ display:flex; gap:10px; flex-wrap:wrap; }
.rs-reason{
  --bg: rgba(255,209,102,.25);
  display:inline-flex; align-items:center; gap:8px;
  padding: 8px 12px; border-radius: 12px;
  background: var(--bg); border:1px solid var(--rs-frost);
  box-shadow: 0 3px 14px rgba(32,16,48,.10);
  transform: translateY(6px); opacity: 0; transition: transform .35s ease, opacity .35s ease;
}
.rs-reason i{ display:inline-block; width:18px; text-align:center; }
.rs-reason.is-2{ --bg: rgba(142,202,230,.25); }
.rs-reason.is-3{ --bg: rgba(240,179,230,.25); }

/* reveal stagger */
#rs-spot.is-in .rs-reason{ opacity:1; transform: translateY(0); }
#rs-spot.is-in .rs-reason:nth-child(1){ transition-delay:.04s; }
#rs-spot.is-in .rs-reason:nth-child(2){ transition-delay:.10s; }
#rs-spot.is-in .rs-reason:nth-child(3){ transition-delay:.16s; }

/* CTAs */
.rs-spot__cta{ display:flex; gap:10px; flex-wrap: wrap; margin-top: 4px; }

/* small screens: keep things readable */
@media (max-width: 540px){
  .rs-spot{ padding: 18px; }
  .rs-spot__meta{ gap:6px; }
  .rs-chip--soft{ padding:5px 10px; font-size:11px; }
  .rs-reason{ padding:7px 10px; font-size:12px; }
}
/* === Spotlight: add a right rail for widgets === */
@media (min-width: 1280px){
  .rs-spot{
    grid-template-columns: clamp(260px, 28vw, 440px) 1fr 410px; /* cover | content | rail */
  }
}

.rs-spot__rail{
  display: grid;
  gap: 12px;
  align-self: stretch;
}

/* On tablet, place widgets in a horizontal scroller below the content */
@media (min-width: 980px) and (max-width: 1279.98px){
  .rs-spot__rail{
    grid-auto-flow: column;
    grid-auto-columns: 300px;
    overflow-x: auto;
    padding-bottom: 8px;
    scrollbar-width: none;
  }
  .rs-spot__rail::-webkit-scrollbar{ display:none; }
}

/* On narrow screens (single column), rail just stacks */
@media (max-width: 979.98px){
  .rs-spot__rail{ display: grid; }
}

/* === Widgets (shared) === */
.rs-spotwig{
  background: linear-gradient(180deg, rgba(255,255,255,0.85), rgba(255,255,255,0.55));
  border: 1px solid var(--rs-frost);
  border-radius: 14px;
  padding: 14px;
  box-shadow: var(--rs-shadow);
}
[data-theme="dark"] .rs-spotwig{
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
}
.rs-spotwig__title{
  margin: 0 0 10px;
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--rs-text-dim);
}

/* Widget 1: From the community */
.rs-quote{
  position: relative;
  margin: 0 0 10px;
  color: var(--rs-text);
  font-size: 14px;
  line-height: 1.45;
}
.rs-quote::before{
  content:"“";
  position:absolute; left:-6px; top:-2px;
  color: var(--rs-accent-2); opacity:.35; font-size: 22px;
}
.rs-comm{
  display:flex; align-items:center; gap:10px;
  font-size: 12px; color: var(--rs-text-dim); margin: 8px 0;
}
.rs-comm .rs-chip--cta{ margin-left: auto; }
.rs-pulse{
  width:10px; height:10px; border-radius:50%;
  background:#2ef2a3; box-shadow: 0 0 10px #2ef2a3;
  animation: rs-pulse 2s ease-in-out infinite;
}
@keyframes rs-pulse{ 0%,100%{ transform:scale(.9); opacity:.9 } 50%{ transform:scale(1.15); opacity:1 } }
.rs-tags{ display:flex; gap:6px; flex-wrap:wrap; }

/* Widget 2: Similar picks */
.rs-mini{
  list-style:none; padding:0; margin:0 0 8px; display:grid; gap:10px;
}
.rs-mini__item{ display:flex; gap:10px; align-items:center; }
.rs-mini__cover, .rs-mini__cover img, .rs-mini__ph{
  display:block; width:46px; height:70px; border-radius:8px; object-fit:cover;
  background:#ede4f1; border:1px solid var(--rs-frost);
}
[data-theme="dark"] .rs-mini__cover img, [data-theme="dark"] .rs-mini__ph{ background:#24262c; }
.rs-mini__title{ font-size: 13px; color: var(--rs-text); }
.rs-mini__more{ display:inline-block; margin-top: 4px; }
.rs-mini__ph{ display:grid; place-items:center; font-size:11px; color:#777; }

/* Widget 3: Vibe meter */
.rs-vbar{
  display:grid; grid-template-columns: auto 1fr auto; gap:10px; align-items:center;
  margin: 8px 0;
}

.rs-spot__content,
.rs-spot__rail { min-width: 0; }

.rs-vbar__label{ font-size: 12px; color: var(--rs-text-dim); }
.rs-vbar__track{
  position: relative; height: 8px; border-radius: 999px; overflow: hidden;
  background: rgba(0,0,0,.06); border: 1px solid var(--rs-frost);
}
[data-theme="dark"] .rs-vbar__track{ background: rgba(255,255,255,.08); }
.rs-vbar__fill{
  position:absolute; left:0; top:0; bottom:0; width:0;
  background: linear-gradient(90deg, var(--rs-accent-2), var(--rs-accent));
  transition: width .8s ease;
}
/* animate bars when spotlight enters view (home.js toggles .is-in) */
#rs-spot.is-in .rs-vbar__fill{ width: var(--w, 0%); }
.rs-vbar__pct{ font-size: 12px; color: var(--rs-text-dim); }

/* Tweaks so chips look good everywhere */
.rs-chip{ background: rgba(0,0,0,0.04); border:1px solid var(--rs-frost); color: var(--rs-text-dim); }
.rs-chip.rs-chip--cta{ background: var(--rs-accent); color:#1a1a1a; font-weight:700; border: none; }
/* Keep all bars aligned: fixed label + pct columns */
.rs-vbar{
  --v-label: 100px;   /* tweak this width if you change label copy */
  --v-pct:   60px;    /* room for “100%” */
  display: grid;
  grid-template-columns: var(--v-label) 1fr var(--v-pct);
  gap: 10px;
  align-items: center;
  margin: 8px 0;
}
.rs-vbar__label{
  width: var(--v-label);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rs-vbar__pct{
  width: var(--v-pct);
  text-align: right;
}
/* ===========================
   HERO v2 — visually rich, still lightweight
   =========================== */

.rs-hero--v2 {
  position: relative;
  overflow: clip;
  /* smaller top/bottom padding */
  padding: clamp(1px, 2.4vw, 80px) 0 clamp(16px, 3.6vw, 20px);
  isolation: isolate;
}

.rs-hero--v2 .page-template-page-recshelf-home #rs-home .rs-container { position: relative; z-index: 1; }

/* Soft animated background (light mode friendly) */
.rs-hero__bg {
  position: absolute;
  inset: -20% -10% -10%;
  background:
    radial-gradient(1200px 600px at 30% 10%, #fff6ff 0%, transparent 60%),
    radial-gradient(900px 500px at 80% 0%, #ffe8ff 0%, transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,0.35), rgba(255,255,255,0));
  filter: saturate(1.05);
}
.rs-hero__bg::after {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(600px 300px at 20% 30%, rgba(255,255,255,0.65), transparent 60%),
    radial-gradient(600px 300px at 70% 25%, rgba(255,255,255,0.5), transparent 60%);
  mix-blend-mode: soft-light;
}

/* Floating pastel orbs */
.rs-hero__orb {
  position: absolute; border-radius: 999px; filter: blur(18px) saturate(1.1);
  opacity: .55; animation: rsFloat 18s ease-in-out infinite;
  background: radial-gradient(closest-side, #fff6ff, #ffe8ff 65%, transparent 70%);
  will-change: transform;
}
.rs-hero__orb.is-1 { width: 28vmin; height: 28vmin; left: 6%; top: 10%; animation-delay: 0s; }
.rs-hero__orb.is-2 { width: 22vmin; height: 22vmin; right: 8%; top: 12%; animation-delay: 2.2s;}
.rs-hero__orb.is-3 { width: 18vmin; height: 18vmin; left: 42%; top: -4%; animation-delay: 4.4s;}
@keyframes rsFloat {
  0%,100% { transform: translate3d(0,0,0) }
  50%    { transform: translate3d(0,-16px,0) }
}

/* Headline */
.rs-hero__title {
  font-size: clamp(32px, 5.8vw, 72px);
  line-height: 1.02;
  letter-spacing: -0.01em;
  margin: 0 0 .4rem;
}
.rs-hero__title span { display: inline-block; }
.rs-hero__brand {
  background: linear-gradient(90deg, #f4c238, #ffcf69 40%, #ffc842);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: 0 1px 0 rgba(255, 208, 64, .15);
}

/* Strapline with rotating word */
.rs-hero__strap {
  font-size: clamp(16px, 1.9vw, 22px);
  color: rgba(0,0,0,.62);
  margin: .25rem 0 1.4rem;
}
.rs-rotator {
  position: relative; white-space: nowrap; font-weight: 600;
  color: #1b2340;
}
.rs-rotator.is-out { opacity: 0; transform: translateY(6px); transition: .28s ease; }
.rs-rotator.is-in  { opacity: 1; transform: translateY(0);  transition: .38s cubic-bezier(.2,.7,.1,1); }

/* CTA cards */
.rs-hero__ctas {
  display: grid; grid-template-columns: 1fr; gap: 14px; margin: 18px 0 22px;
}
@media (min-width: 880px) {
  .rs-hero__ctas { grid-template-columns: 1fr 1fr; gap: 18px; }
}
.rs-cta {
  display: grid; grid-template-columns: 1fr auto; align-items: center;
  gap: 18px; text-decoration: none;
  background: #fff6ff;
  border-radius: 24px;
  padding: 18px 20px;
  box-shadow: 0 8px 24px rgba(111, 61, 132, .08), 0 1px 0 rgba(255,255,255,.6) inset;
  transition: transform .18s ease, box-shadow .18s ease;
}
.rs-cta:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(111,61,132,.12), 0 1px 0 rgba(255,255,255,.7) inset; }
.rs-cta__label h2 { margin: 0 0 4px; font-size: clamp(18px, 2.2vw, 22px); }
.rs-cta__label p  { margin: 0; opacity: .7; }
.rs-cta__icon { font-size: 28px; filter: drop-shadow(0 2px 6px rgba(0,0,0,.12)); }

.rs-cta--alchemist { background: linear-gradient(180deg,#fff6ff,#fff6ff 60%,#ffe8ff); }
.rs-cta--community { background: linear-gradient(180deg,#fff6ff,#fff6ff 60%,#ffe8ff); }

/* KPIs layout under hero (you already had these; minor spacing) */
.rs-hero--v2 .rs-kpis { margin-top: 18px; }

/* OPTIONAL: slight parallax feel on mouse (JS toggles transform) */
.rs-parallax { transition: transform .25s ease; will-change: transform; }
/* Option A: narrow, template-scoped */
.page-template-page-recshelf-home #rs-home .rs-hero--v2 .rs-container {
  text-align: center;
  margin-bottom: 1px;
}


/* Headline + strapline centered with a readable max width */
.rs-hero__title,
.rs-hero__strap {
  max-width: 1100px;
  margin: 0 auto 1.2rem; /* centers + consistent gap under title */
}

/* Keep the CTA cards centered as a group */
.rs-hero__ctas {
  margin: 14px auto 8px; /* center the grid */
}
@media (min-width: 1180px){
  .rs-hero__ctas { max-width: 1250px; }
}

/* (Already true in your CSS, but safe) */
.rs-kpis,
.rs-hero--v2 .rs-kpis { justify-content: center; }
/* ===== HERO CTAs — make them feel like primary buttons ===== */
.rs-cta{
  --cta-accent: var(--rs-accent);           /* default accent */
  position: relative;
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 18px;
  text-decoration: none; cursor: pointer;
  padding: 18px 22px;
  border-radius: 24px;
  border: 2px solid transparent;
  padding-right: 68px;
  /* gradient border + soft surface */
  background:
    linear-gradient(#fff6ff, #fff6ff) padding-box,
    linear-gradient(110deg, var(--cta-accent), transparent 65%) border-box;
  box-shadow: 0 10px 28px rgba(32,16,48,.12), 0 1px 0 rgba(255,255,255,.7) inset;
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
  will-change: transform, box-shadow, filter;
}
.rs-cta--alchemist{ --cta-accent: var(--rs-accent); }   /* warm gold */
.rs-cta--community{ --cta-accent: var(--rs-accent-2); } /* cool blue */

.rs-cta:hover{
  transform: translateY(-3px);
  box-shadow: 0 16px 36px rgba(32,16,48,.16), 0 1px 0 rgba(255,255,255,.75) inset;
  filter: saturate(1.02);
}
.rs-cta:active{ transform: translateY(-1px) scale(.995); }

.rs-cta:focus-visible{
  outline: none;
  box-shadow:
    0 0 0 2px #fff,
    0 0 0 6px var(--cta-accent),
    0 16px 36px rgba(32,16,48,.16);
}

/* icon bubble with glow on hover */
.rs-cta__icon{
  width: 46px; height: 46px; border-radius: 999px;
  display: grid; place-items: center;
  background: radial-gradient(circle at 30% 30%, #fff, #ffe8ff);
  border: 1px solid var(--rs-frost);
  position: relative; transition: transform .18s ease;
  font-size: 28px; filter: drop-shadow(0 2px 6px rgba(0,0,0,.12));
}
.rs-cta:hover .rs-cta__icon{ transform: translateX(2px); }
.rs-cta__icon::after{
  content:""; position:absolute; inset:-8px; border-radius:inherit;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--cta-accent) 60%, transparent), transparent 70%);
  opacity: 0; filter: blur(6px); transition: opacity .25s ease;
}
.rs-cta:hover .rs-cta__icon::after{ opacity: .45; }

/* tiny chevron hint so the tile reads as “go” */
/* CTA chevron — centered vertically and a bit clearer */
.rs-cta::after{
  content: "→";
  position: absolute;
  right: 22px;
  top: 50%;
  transform: translateY(-50%);      /* keep it vertically centered at rest */
  font-weight: 800;
  font-size: 20px;
  opacity: .65;
  transition: transform .18s ease, opacity .18s ease;
  pointer-events: none;
}
.rs-cta:hover::after{
  transform: translate(6px, -50%);  /* slide right, stay vertically centered */
  opacity: .9;
}




/* click ripple (JS adds an element with this class) */
.rs-ripple{
  position:absolute; left:0; top:0; transform: translate(-50%,-50%) scale(0);
  width:8px; height:8px; border-radius:9999px; pointer-events:none; opacity:.45;
  background: radial-gradient(circle, color-mix(in srgb, var(--cta-accent) 70%, transparent), transparent 70%);
  animation: rs-ripple .65s ease-out forwards;
}
@keyframes rs-ripple{
  to { transform: translate(-50%,-50%) scale(18); opacity:0; }
}
/* --- H-scroll shell (nav + fades) --- */
.rs-hwrap {
  position: relative;
  --nav-size: 44px;
  --nav-bg: var(--rs-card, #fff6ff);
  --nav-shadow: 0 8px 24px rgba(20, 14, 30, .18);
}

/* edge fades (only show when there is overflow; toggled by JS) */
.rs-hwrap::before,
.rs-hwrap::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  width: 72px;
  pointer-events: none;
  opacity: 0;
  transition: opacity .25s;
  z-index: 1;
}
.rs-hwrap.is-left::before {
  left: 0;
  background: linear-gradient(to right, rgba(244,219,246,.9), rgba(244,219,246,0));
  opacity: 1;
}
.rs-hwrap.is-right::after {
  right: 0;
  background: linear-gradient(to left, rgba(244,219,246,.9), rgba(244,219,246,0));
  opacity: 1;
}

/* arrows */
.rs-hnav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: var(--nav-size);
  height: var(--nav-size);
  border-radius: 999px;
  background: var(--nav-bg);
  box-shadow: var(--nav-shadow);
  display: grid;
  place-items: center;
  z-index: 2;
  border: 1px solid rgba(0,0,0,.05);
  transition: transform .15s ease, box-shadow .2s ease, opacity .2s ease;
}
.rs-hnav:hover { transform: translateY(-50%) scale(1.05); }
.rs-hnav:active { transform: translateY(-50%) scale(.98); }

.rs-hnav--prev { left: -8px; }
.rs-hnav--next { right: -8px; }

.rs-hnav.is-disabled {
  opacity: .35;
  pointer-events: none;
}

/* chevrons (pure CSS) */
.rs-hnav::before {
  content: "";
  width: 12px; height: 12px;
  border-right: 3px solid rgba(35,25,45,.8);
  border-bottom: 3px solid rgba(35,25,45,.8);
  transform: rotate(-45deg);
}
.rs-hnav--prev::before { transform: rotate(135deg); }

/* remove native scrollbar & enable snap */
.rs-scroll {
  scrollbar-width: none;           /* Firefox */
  -ms-overflow-style: none;        /* Edge Legacy */
  scroll-snap-type: x proximity;
  scroll-padding-inline: 12px;
}
.rs-scroll::-webkit-scrollbar {    /* WebKit */
  display: none;
}

/* snap children */
.rs-cards > .rs-card { scroll-snap-align: start; }

/* small screens: tuck arrows in a bit */
@media (max-width: 900px) {
  .rs-hnav--prev { left: 2px; }
  .rs-hnav--next { right: 2px; }
  .rs-hwrap::before, .rs-hwrap::after { width: 48px; }
}
/* Author line under rating/genre on cards */
.rs-card__byline{
  margin-top: 6px;
  margin-bottom: 8px;
  color: var(--rs-text-dim);
  font-size: 12px;
  line-height: 1.2;
}
/* Cards – tidy rhythm when author is under the title */
.rs-card__title { margin-bottom: 6px; }
.rs-card__byline { margin-bottom: 10px; color: var(--rs-muted, #7b7b7b); }

/* Keep the badge row visually anchored toward the bottom */
.rs-card__body { display: flex; flex-direction: column; }
.rs-card__meta { margin-top: auto; }
/* Spotlight: card (left) + rail (right) as two siblings */
.rs-spotwrap{
  display: grid;
  gap: 24px;
}

/* Wide screens: 2 columns — card | rail */
@media (min-width: 1280px){
  .rs-spotwrap{
    grid-template-columns: minmax(0, 1fr) 410px;
    align-items: start;
  }
  /* Ensure the card itself only has 2 cols (cover | content) */
  .rs-spot{
    grid-template-columns: clamp(260px, 28vw, 440px) 1fr !important;
  }
}

/* Tablet & below: stack rail under the card (existing rail styles still apply) */
@media (max-width: 1279.98px){
  .rs-spotwrap{ grid-template-columns: 1fr; }
}
/* Spotlight two-column layout */
.rs-spotwrap{
  display:grid;
  grid-template-columns:minmax(0,1fr) 360px; /* left card | right rail */
  gap: var(--rs-gap-xl, 28px);
  align-items:start;
}

/* The right column should NOT be absolutely positioned anymore */
.rs-spot__rail{
  position: static !important;
  top:auto; right:auto; left:auto;
}

/* The left card keeps the “panel” look */
.rs-spot{
  grid-column:1;
}

/* Right rail sits on the page background, independent of the card */
.rs-spot__rail{
  grid-column:2;
}
/* === Spotlight: container-aware layout (no more VW sizing) === */
.rs-spot { 
  container-type: inline-size;      /* allow container queries */
}
.rs-spotwrap { 
  container-type: inline-size;      /* let the rail decision be container-based too */
}

/* CARD: two columns once the card is wide enough.
   Left (cover) stays ~34–36% of the CARD, never the full viewport. */
@container (min-width: 760px) {
  .rs-spot{ 
    grid-template-columns: minmax(230px, 36cqi) 1fr; 
    gap: 18px; 
    padding: 22px;
  }
}
@container (min-width: 980px) {
  .rs-spot{ grid-template-columns: minmax(250px, 34cqi) 1fr; }
}

/* Compact typography/spacing on smaller laptop widths so nothing feels cramped */
@container (max-width: 1100px) {
  .rs-spot__title { font-size: clamp(20px, 3.1cqi, 28px); }
  .rs-spot__meta  { gap: 6px; }
  .rs-spot__reasons { gap: 8px; }
  .rs-spot__cta { gap: 8px; }
  .rs-spot__cta .rs-btn { padding: 10px 14px; }
}
/* When the spotlight block has room, use a right rail column */
@container (min-width: 1220px) {
  .rs-spotwrap{
    grid-template-columns: minmax(0, 1fr) 380px;   /* card | rail */
    align-items: start;
  }
}
/* Grow the rail a touch on very wide desktops */
@container (min-width: 1400px) {
  .rs-spotwrap{ grid-template-columns: minmax(0, 1fr) 410px; }
}

/* Between ~980px and that rail threshold, keep your existing horizontal rail scroller */
@container (max-width: 1219px) and (min-width: 980px) {
  .rs-spot__rail{
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 300px;
    overflow-x: auto;
    padding-bottom: 8px;
    scrollbar-width: none;
  }
  .rs-spot__rail::-webkit-scrollbar{ display: none; }
}
/* Fallback: use a % of the CARD instead of vw */
@media (min-width: 980px){
  .rs-spot{ grid-template-columns: minmax(250px, 38%) 1fr !important; }
}
/* =========================
   Quick Alchemist (modal)
   ========================= */
.rs-alch { padding: 18px 18px 14px; }
.rs-alch__head{ display:flex; gap:12px; align-items:center; margin-bottom: 8px; }
.rs-alch__icon{ width:36px; height:36px; border-radius:12px; display:grid; place-items:center;
  background: radial-gradient(circle at 30% 30%, #fff, #ffe8ff);
  border:1px solid var(--rs-frost);
  box-shadow: 0 6px 18px rgba(20,14,30,.12);
}
.rs-alch__strap{ margin:.25rem 0 0; color: var(--rs-text-dim); }
.rs-alch__form{ display:grid; gap:12px; }
.rs-alch__row{ display:grid; gap:12px; grid-template-columns: 1fr 1fr; }
@media (max-width:700px){ .rs-alch__row{ grid-template-columns: 1fr; } }

.rs-alch__group{ border:0; padding:0; margin:0; }
.rs-alch__group > legend{ font-weight:700; font-size:14px; margin-bottom:6px; }
.rs-alch__hint{ font-weight:400; opacity:.65; margin-left:6px; }

.rs-alch__chips{ display:flex; gap:8px; flex-wrap:wrap; }
.rs-alch__chips .rs-chip{
  background:#fff; color:var(--rs-text); border:1px solid var(--rs-frost);
  padding:7px 12px; border-radius:999px; cursor:pointer; transition: all .15s ease;
}
[data-theme="dark"] .rs-alch__chips .rs-chip{ background:#0f1114; }
.rs-alch__chips .rs-chip.is-active{ background: var(--rs-accent); color:#161616; border-color: transparent; }

.rs-alch__seg{ display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap:8px; }
.rs-seg{
  display:grid; place-items:center; gap:2px; text-align:center; padding:10px 8px;
  border-radius:12px; background: #fff; border:1px solid var(--rs-frost); cursor:pointer;
}
[data-theme="dark"] .rs-seg{ background:#0f1114; }
.rs-seg em{ font-style: normal; font-weight:700; font-size:12px; line-height:1; }
.rs-seg span{ font-size:11px; color: var(--rs-text-dim); }
.rs-seg.is-active{ outline: 2px solid color-mix(in srgb, var(--rs-accent) 60%, transparent); background: #fffef6; }

.rs-alch__slider{ position:relative; padding: 6px 0 12px; }
.rs-alch__slider input[type="range"]{ width:100%; accent-color: var(--rs-accent); }
.rs-alch__rail{ display:flex; justify-content:space-between; font-size:11px; color:var(--rs-text-dim); margin-top:4px; }
.rs-alch__bubble{
  position:absolute; top:-18px; left:0; transform: translateX(-50%);
  padding: 3px 8px; font-size: 12px; border-radius: 999px; background:#fff;
  border:1px solid var(--rs-frost); box-shadow: var(--rs-shadow);
  pointer-events: none;
}
[data-theme="dark"] .rs-alch__bubble{ background:#0f1114; }

.rs-alch__details{ margin-top: -2px; }
.rs-alch__toggle{ display:flex; align-items:center; gap:10px; padding:6px 0; font-size:14px; color:var(--rs-text-dim); }

.rs-alch__footer{
  margin-top: 2px; padding-top: 10px; display:flex; gap:12px; align-items:center; justify-content:space-between;
  border-top: 1px dashed var(--rs-frost);
}
.rs-alch__summary{ display:flex; gap:6px; flex-wrap:wrap; min-height: 28px; }
.rs-alch__summary .rs-chip{ background: rgba(0,0,0,.04); border:1px solid var(--rs-frost); color: var(--rs-text-dim); }

.rs-alch__actions{ display:flex; gap:8px; flex-wrap:wrap; }
.rs-alch__to-studio{ cursor:pointer; }
/* ---------- Quick Alchemist — visual refresh ---------- */
.rs-alch { 
  --rs-g1: #7b5cff;      /* violet */
  --rs-g2: #ff73b9;      /* pink */
  --rs-ink: #231f2a;
  --rs-ink-soft: #5b5566;
  --rs-card: rgba(255,255,255,0.7);

  background: linear-gradient(180deg, rgba(255,255,255,.65), rgba(255,255,255,.55));
  backdrop-filter: blur(10px);
  border-radius: 18px;
  box-shadow: 0 20px 60px rgba(21,16,34,.25);
}

.rs-alch__head { 
  position: relative;
  padding: 28px 24px 18px;
  border-bottom: 1px solid rgba(0,0,0,.06);
}
.rs-alch__head--center { text-align: center; }
.rs-alch__icon { font-size: 26px; margin-bottom: 6px; }
.rs-alch__title { 
  font-family: var(--rs-display, ui-serif, Georgia, serif);
  font-size: clamp(22px, 2.2vw, 30px);
  line-height: 1.15;
  letter-spacing: .2px;
}
.rs-alch__strap { color: var(--rs-ink-soft); margin-top: 6px; }

/* Studio pill in header (top-right), but keeps title centered */
.rs-alch__studio {
  position: absolute;
  top: 20px; right: 20px;
  display: inline-flex; gap: 8px; align-items: center;
  padding: 10px 14px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--rs-g1), var(--rs-g2));
  color: #fff; font-weight: 600;
  border: 0; cursor: pointer;
  box-shadow: 0 8px 20px rgba(127, 90, 240, .35);
  transform: translateZ(0);
}
.rs-alch__studio svg { width: 18px; height: 18px; }
.rs-alch__studio:hover { filter: brightness(1.05); transform: translateY(-1px); }
.rs-alch__studio:active { transform: translateY(0); }

/* Chips */
.rs-chip {
  --bg: rgba(255,255,255,.9);
  background: var(--bg);
  border: 1px solid rgba(0,0,0,.08);
  color: var(--rs-ink);
  border-radius: 999px;
  padding: 8px 12px;
  font-weight: 600;
  transition: transform .12s ease, box-shadow .12s ease, background .2s ease;
}
.rs-chip:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,.05); }
.rs-chip.is-active {
  color: #fff;
  background: linear-gradient(90deg, var(--rs-g1), var(--rs-g2));
  border-color: transparent;
  box-shadow: 0 6px 18px rgba(127, 90, 240, .35);
}

/* When group max reached, give a gentle pulse */
.rs-alch__chips.is-max { animation: rs-pulse .5s; }
@keyframes rs-pulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(255,115,185,.0); }
  50%     { box-shadow: 0 0 0 6px rgba(255,115,185,.25); }
}

/* Segmented length buttons */
.rs-seg {
  background: rgba(255,255,255,.9);
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 14px; min-width: 132px;
  padding: 10px 12px;
  text-align: center;
  transition: box-shadow .15s ease, transform .12s ease, background .2s ease;
}
.rs-seg em { display:block; font-weight:700; }
.rs-seg:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(0,0,0,.06); }
.rs-seg.is-active {
  color:#fff; 
  background: linear-gradient(90deg, var(--rs-g1), var(--rs-g2));
  border-color: transparent;
  box-shadow: 0 10px 24px rgba(127,90,240,.35);
}

/* Slider bubbles & rails */
.rs-alch__rail span { color: var(--rs-ink-soft); }
.rs-alch__bubble {
  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
  color: var(--rs-ink);
  box-shadow: 0 10px 24px rgba(0,0,0,.06);
}
input[type="range"]::-webkit-slider-thumb {
  background: linear-gradient(90deg, var(--rs-g1), var(--rs-g2));
}

/* Footer buttons */
/* Make "See picks" match the unified CTA palette */
.rs-alch__actions .rs-btn{
  background: var(--rs-grad1);
  color:#fff;
  border:0;
  box-shadow:
    0 14px 32px rgba(89,96,255,.32),
    inset 0 1px 0 rgba(255,255,255,.25);
}
.rs-alch__actions .rs-btn:hover{
  filter:saturate(1.06);
  transform: translateY(-1px);
}

.rs-alch__actions .rs-btn.rs-btn--ghost {
  background: transparent; color: var(--rs-g1);
  border: 1.5px solid var(--rs-g1);
}
/*=============================
  Quick Alchemist polish
==============================*/
:root{
  --rs-ink: #0e1320;
  --rs-ink-soft: #3d4456;
  --rs-card: #ffffff;
  --rs-surface: #faf7ff;
  --rs-accent-1: #7a5cff;   /* indigo */
  --rs-accent-2: #ff7ed8;   /* pink */
  --rs-accent-3: #78e3ff;   /* cyan sparkle for glow */
  --rs-grad: linear-gradient(90deg,var(--rs-accent-1),var(--rs-accent-2));
  --rs-focus: 0 0 0 3px rgba(122,92,255,.25);
  --rs-accent-4: #5960ff;   /* Electric indigo */
  --rs-accent-5: #22d3ee;   /* Cyan pop */
  --rs-grad1: linear-gradient(135deg, var(--rs-accent-1), var(--rs-accent-5));
}

/* Header layout (icon + centered title + CTA button) */
.rs-alch__head--stack{
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto auto;
  justify-items: center;
  text-align: center;
  gap: .6rem;
  padding-top: .75rem;
  padding-bottom: .25rem;
}
.rs-alch__badge{
  width: 56px; height: 56px; border-radius: 14px;
  display: grid; place-items: center;
  font-size: 28px;
  background:
    radial-gradient(120% 120% at 20% 20%, rgba(120,227,255,.35), transparent 55%),
    radial-gradient(120% 120% at 80% 80%, rgba(255,126,216,.28), transparent 55%),
    #fff;
  box-shadow: 0 8px 30px rgba(122,92,255,.20);
}
.rs-alch__titles .rs-alch__title{
  font-size: clamp(26px, 2.3vw, 34px);
  line-height: 1.05;
  color: var(--rs-ink);
  letter-spacing: .2px;
}
.rs-alch__strap{
  margin-top: .15rem;
  color: var(--rs-ink-soft);
}

/* Button system (unified) */
.rs-btn{
  --pad-x: 20px; --pad-y: 12px;
  display: inline-flex; align-items: center; gap: .55rem;
  padding: var(--pad-y) var(--pad-x);
  border-radius: 9999px;
  font-weight: 700;
  line-height: 1;
  border: 0;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease, background .2s ease, color .2s ease;
  outline: none;
  position: relative;
}
.rs-btn:focus-visible{ box-shadow: var(--rs-focus); }

/* Primary (used by “See picks”) */
.rs-btn:not(.rs-btn--ghost):not(.rs-btn--beam){
  color:#fff; background: var(--rs-grad);
  box-shadow: 0 10px 24px rgba(122,92,255,.28);
}
.rs-btn:hover:not(.rs-btn--ghost):not(.rs-btn--beam){ transform: translateY(-1px); }

/* Ghost outline (used by footer “Open Studio”) */
.rs-btn--ghost{
  background: transparent;
  color: var(--rs-accent-1);
}
.rs-btn--ghost::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:9999px;
  padding:2px;
  background: var(--rs-grad);

  /* Gradient-border mask: standard + webkit */
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);

  /* Composite mode: WebKit uses `xor`, spec uses `exclude` */
  -webkit-mask-composite: xor;
          mask-composite: exclude;

  pointer-events:none;
}

.rs-btn--ghost:hover{
  background: linear-gradient(#fff,#fff) padding-box, var(--rs-grad) border-box;
  color:#fff;
  box-shadow: 0 8px 22px rgba(122,92,255,.18);
}

/* Beam (special header CTA, most attention-grabbing) */
.rs-btn--beam{
  color:#fff; background: var(--rs-grad);
  box-shadow:
    0 14px 34px rgba(122,92,255,.35),
    0 0 0 1px rgba(255,255,255,.22) inset;
  padding: 14px 22px;
}
.rs-btn--beam::after{
  content:""; position:absolute; inset:-40%;
  background: radial-gradient(40% 40% at 20% 20%, rgba(120,227,255,.55), transparent 60%),
              radial-gradient(35% 35% at 75% 75%, rgba(255,126,216,.45), transparent 70%);
  filter: blur(12px);
  opacity:.0; transition: opacity .25s ease, transform .35s ease;
}
.rs-btn--beam:hover{ transform: translateY(-1px); }
.rs-btn--beam:hover::after{ opacity:.35; transform: translate3d(5px,-3px,0); }
.rs-btn--beam svg{ width:20px; height:20px; }

/* Footer alignment in modal */
.rs-alch__footer{
  align-items: center;
}
.rs-alch__actions{ gap:.6rem; }

/* Chips / Segments visual cohesion */
.rs-chip,
.rs-seg{
  --bg: #fff;
  --bd: rgba(14,19,32,.12);
  --ink: var(--rs-ink);
  background: var(--bg);
  color: var(--ink);
  border: 1px solid var(--bd);
  transition: border .15s ease, transform .1s ease, box-shadow .15s ease, color .15s ease, background .15s ease;
}
.rs-chip:hover,
.rs-seg:hover{ transform: translateY(-1px); }
.rs-chip.is-active{
  color:#fff; border-color: transparent;
  background: var(--rs-grad);
  box-shadow: 0 8px 22px rgba(122,92,255,.18);
}
.rs-seg.is-active{
  background: linear-gradient(#fff,#fff) padding-box, var(--rs-grad) border-box;
  color: var(--rs-accent-1);
  border: 2px solid transparent;
  box-shadow: 0 8px 22px rgba(122,92,255,.12);
}
.rs-alch__chips.is-max{
  animation: rs-wobble .3s ease;
}
@keyframes rs-wobble{
  0%,100%{ transform: translateX(0); }
  25%{ transform: translateX(-5px); }
  75%{ transform: translateX(5px); }
}

/* Sliders: knobs + rail tuned to brand */
.rs-alch__slider input[type=range]{
  accent-color: #7a5cff;
}
.rs-alch__slider .rs-alch__bubble{
  background:#111827; color:#fff;
  border-radius: 10px; padding: 4px 8px; font-weight: 700;
  box-shadow: 0 6px 18px rgba(0,0,0,.18);
}

/* Modal card subtle glass */
.rs-alch{
  background: linear-gradient(180deg,#ffffffcc, rgba(255, 255, 255, 0.384)) padding-box;
  backdrop-filter: blur(6px);
}
/* Chips – base */
.rs-chip{
  --rs-chip-bg: #fff;
  --rs-chip-ink: var(--rs-ink-800);
  display:inline-flex; align-items:center; gap:.5rem;
  border-radius:999px; font-weight:600; letter-spacing:.1px;
  padding:.55rem .9rem;
  border:2px solid rgba(0,0,0,.08);
  background: var(--rs-chip-bg);
  color: var(--rs-chip-ink);
  transition: box-shadow .2s ease, transform .12s ease, background .2s ease, color .2s ease, border-color .2s ease;
}

.rs-chip:hover{ transform: translateY(-1px); box-shadow: 0 10px 26px rgba(0,0,0,.06); }

/* Chips – active = same gradient-border treatment as Length */
.rs-chip.is-active{
  border-color: transparent;
  background:
     linear-gradient(var(--rs-chip-bg), var(--rs-chip-bg)) padding-box,
     var(--rs-grad) border-box;       /* ← matches .rs-seg.is-active */
  color: var(--rs-ink-900);
  box-shadow: 0 8px 26px rgba(88, 99, 255, .18);
}

/* Dark surface tweak (if you ever put the modal on a darker shell) */
.rs-alch.is-dark .rs-chip       { --rs-chip-bg:#15161c; --rs-chip-ink:#e8e8ef; border-color:rgba(255,255,255,.12); }
.rs-alch.is-dark .rs-chip.is-active{
  background:
    linear-gradient(#15161c,#15161c) padding-box,
    var(--rs-grad) border-box;
  color:#fff;
}







/* Core CTA */
.rs-btn{
  --rs-btn-pad-x: 1.2rem; --rs-btn-pad-y: .95rem;
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  border-radius:999px; padding:var(--rs-btn-pad-y) var(--rs-btn-pad-x);
  font-weight:800; letter-spacing:.15px; line-height:1;
  color:#fff; background: var(--rs-grad1); border:none;
  box-shadow:
    0 14px 32px rgba(89,96,255,.32),         /* indigo drop */
    inset 0 1px 0 rgba(255,255,255,.25);     /* subtle top edge */
  transform: translateY(0); transition: transform .12s ease, box-shadow .2s ease, filter .2s ease;
}
.rs-btn:hover{ transform: translateY(-1px); filter:saturate(1.06); }
.rs-btn:active{ transform: translateY(0); box-shadow: 0 8px 18px rgba(89,96,255,.28); }

/* Ghost (outline) – uses same gradient for the border */
.rs-btn--ghost{
  color: var(--rs-accent-4);
  background:
    linear-gradient(#fff,#fff) padding-box,
    var(--rs-grad1) border-box;
  border:2px solid transparent;
  box-shadow: 0 8px 24px rgba(89,96,255,.08);
}
.rs-btn--ghost:hover{ box-shadow: 0 12px 28px rgba(89,96,255,.12); }

/* “Beam” variant – hero/primary (use for Open Studio at the top) */
.rs-btn--beam{
  position:relative; isolation:isolate;
  box-shadow:
    0 18px 44px rgba(89,96,255,.40),
    inset 0 1px 0 rgba(255,255,255,.28);
}
.rs-btn--beam::after{
  content:""; position:absolute; inset:-2px;
  border-radius:inherit;
  background: radial-gradient(40% 60% at 20% 20%, rgba(255,255,255,.35), transparent 60%),
              radial-gradient(50% 70% at 80% 100%, rgba(34,211,238,.22), transparent 60%);
  filter: blur(10px); opacity:.85; z-index:-1;
}