/*
Theme Name: Astra Child
Template: astra
Version: 1.0
*/


@import url("../astra/style.css");

.book-content-warnings {
  background-color: #ffe8ff;
  border-left: 6px solid #ff9500;
  padding: 1.2em 1.5em;
  border-radius: 12px;
  font-size: 1rem;
  margin-top: 1.5em;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.warning-heading {
  display: flex;
  align-items: center;
  margin-bottom: 0.7em;
  font-weight: bold;
  font-size: 1.05rem;
  color: #2e1503;
}

.warning-heading .warning-icon {
  font-size: 1.2em;
  margin-right: 0.4em;
}

.flag-boxes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4em;
}

.flag-pill {
  background-color: #fff6ff;
  color: #5a2e00;
  padding: 0.35em 0.7em;
  border-radius: 1em;
  font-size: 0.9rem;
  border: 1px solid #9a6ea0;
  white-space: nowrap;
}



.book-features-card {
  background: #ffe8ff;
  border-radius: 12px;
  border-left: 6px solid #13c816;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 4px 6px rgba(0, 0, 0, 0.08);
  padding: 1.5rem;
  margin-top: 2rem;
  position: relative;
  z-index: 1;
}

/* Book additional info panel — support both class names */
.book_additional_info,
.book_additional_information {
  background: #ffe8ff;
  border-radius: 12px;
  border-left: 6px solid #13c816 !important; /* ensure nothing overrides it */
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 4px 6px rgba(0, 0, 0, 0.08);
  padding: 1.5rem;
  margin-top: 2rem;
}

/* test upload */


/* Hide Rec Shelf sidebar + shift canvas on UM auth pages */
body.um-page-login.rec-shell-on #rec-sidebar,
body.um-page-register.rec-shell-on #rec-sidebar { display:none !important; }

body.um-page-login.rec-shell-on #page,
body.um-page-register.rec-shell-on #page {
  margin-left: 0 !important;      /* undo sidebar offset */
  width: 100% !important;
}

body.um-page-login.rec-shell-on #rec-header,
body.um-page-register.rec-shell-on #rec-header { left: 0 !important; }


/* ===== RecShelf Auth Buttons ===== */
.rec-login-btn,
.rec-register-btn {
  --btn-h: 42px;
  --pad-x: 18px;
  --radius: 999px;
  --shadow: 0 10px 20px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.12);

  display: inline-flex;
  align-items: center;
  gap: .5rem;
  height: var(--btn-h);
  padding: 0 var(--pad-x);
  border-radius: var(--radius);
  font-weight: 800;
  letter-spacing: .3px;
  text-decoration: none !important;
  border: 0;
  box-shadow: var(--shadow);
  transform: translateZ(0);
  transition: transform .15s ease, box-shadow .2s ease, filter .2s ease, background-position .25s ease;
  position: relative;
  overflow: hidden;
  isolation: isolate; /* so the shine stays inside rounded corners */
}

/* Login = sleek glassy charcoal */
.rec-login-btn {
  color: #fff !important;
  background: radial-gradient(120% 140% at 20% 0%, #3b3b3b 0%, #222 45%, #161616 100%);
  border: 1px solid rgba(255,255,255,.08);
}

/* Register = premium gradient pop */
.rec-register-btn {
  color: #fff !important;
  background: linear-gradient(135deg, #ff6d6d 0%, #ff2bd6 52%, #7c3aed 100%);
  background-size: 160% 160%;
  border: 1px solid rgba(255,255,255,.10);
}

/* Subtle animated shine on hover */
.rec-login-btn::after,
.rec-register-btn::after {
  content: "";
  position: absolute;
  inset: -50% -30% auto -30%;
  height: 200%;
  background: linear-gradient(120deg, transparent 45%, rgba(255,255,255,.28) 50%, transparent 55%);
  transform: translateX(-80%) rotate(12deg);
  transition: transform .45s ease;
  pointer-events: none;
  mix-blend-mode: screen;
}

.rec-login-btn:hover::after,
.rec-register-btn:hover::after { transform: translateX(40%) rotate(12deg); }

/* Lift + glow on hover/focus */
.rec-login-btn:hover,
.rec-register-btn:hover,
.rec-login-btn:focus-visible,
.rec-register-btn:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 14px 26px rgba(0,0,0,.35), 0 0 0 3px rgba(255,255,255,.08);
  filter: saturate(1.1);
  outline: none;
}

/* Pressed */
.rec-login-btn:active,
.rec-register-btn:active {
  transform: translateY(0);
  box-shadow: 0 8px 16px rgba(0,0,0,.3);
}

/* Compact on small screens */
@media (max-width: 640px) {
  .rec-login-btn, .rec-register-btn { --btn-h: 38px; --pad-x: 14px; font-size: .95rem; }
}

/* Keep them visible on very dark headers */
.site-header .rec-login-btn, .site-header .rec-register-btn { filter: none !important; }

/* Optional: tiny icon spacing if you add FA icons */
.rec-login-btn i, .rec-register-btn i { font-size: 1rem; margin-right: .25rem; }



/* ---- Book Features Bar Chart ---- */

.feature-row {
  display: flex;
  align-items: center;
  margin-bottom: 1.2rem;
  
}
.book-features {
  padding-top: 1.25rem;
}


.feature-icon {
  width: 24px; height: 24px;
  flex-shrink: 0;
  margin-right: 0.25rem;
}
.feature-icon img {
  display: block; width: 100%; height: auto;
}
.feature-label {
  font-weight: 600;
  font-size: 1.1rem;
  color: #2e1503;
  width: 140px; /* enough for 'Worldbuilding' */
  flex-shrink: 0;
  margin-top: -30px;
  margin-right: 2rem;
  justify-content: flex-end;
  text-align: right;
}
.feature-bar-wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.3rem; 
  width: 100%;
}


.feature-bar {
    position: relative;
    height: 20px;
    background: #f5c5ff;
    border-radius: 20px;
    overflow: visible;
    padding: 0;
    display: flex;
    align-items: center;
}

.feature-fill {
    position: absolute;
    height: 100%;
    background: linear-gradient(to right, #823ec2, #b644b0);
    border-radius: 10px;
    top: 0;
    left: 0;
    z-index: 1;
    transition: width 0.4s ease;
}

.feature-fill::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 0;
    transform: translate(50%, -50%);
    width: 28px;
    height: 28px;
    background: #b644b0;
    border-radius: 50%;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
    z-index: 2;
}

.bar-labels {
  display: flex;
  justify-content: space-between;
  font-size: 0.85rem;
  color: #444;
  padding: 0;
  font-weight: 500;
  z-index: 3;
  width: 100%; 
}


.bar-labels span {
  flex: none;
}

.bar-label-left {
  text-align: left;
}

.bar-label-right {
  text-align: right;
}


.book-author {
  display: inline-flex;
  font-size: 30px;
  align-items: center;
  font-weight: 600;
  color: #000;
  font-family: 'Helvetica', serif;
}

.book-author-archivecard {
  display: inline-flex;
  font-size: 12px;
  align-items: center;
  font-weight: 400;
  color: #4b4b4b;
  font-family: 'Helvetica', serif;
}





/* ————————————————————————————————
   1) Horizontal pills for Character/Mood/Genre/Setting
   ———————————————————————————————— */
.term-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em;
  margin-top: 0.5em; /* tweak as needed */
}
.term-pills span {
  background: #fff6ff;
  color: #4b2c20;
  padding: 6px 12px;
  border-radius: 1em;
  border: 1px solid #9a6ea0;
  font-weight: 500;
  white-space: nowrap;
  box-shadow: 0 5px 4px rgba(0, 0, 0, 0.05);
  display: inline-block;
}

/* ————————————————————————————————
   2) Vertical ✓ list for Reading Experience
   ———————————————————————————————— */
.reading-experience-list {
  display: flex;
  flex-direction: column;
  gap: 2.1em;
  margin-top: 1em;
}
.reading-experience-item {
  position: relative;
  padding-left: 1.4em;
  font-size: 1.6rem;
  color: #222;
  font-weight: 500;
}
.reading-experience-item::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: green;
  font-weight: bold;
}


/* Author card container — force two columns: avatar | content */
.Author_Card{
  /* card chrome */
  position: relative;
  padding: 24px 28px;
  border: 1px solid var(--rec-card-border, #e5d0ef);
  border-radius: 22px;
  background: var(--rec-card-bg, #f8eefe);
  box-shadow: var(--rec-card-shadow, 0 6px 18px rgba(17,10,31,.06));
  width: 100%;
  max-width: none;
  margin-left: 0;
  margin-right: 0;

  /* two-column layout */
  display: grid;
  grid-template-columns: 120px 1fr;  /* avatar | content */
  gap: 18px 24px;
  align-items: center;               /* center avatar + name row vertically */
}

.Author_Card .author-info {
  flex: 1 1 auto;
  min-width: 0;                /* allows long lines to shrink instead of forcing wrap */
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* let the right column shrink without wrapping the avatar */
.Author_Card .author-info{ flex: 1 1 auto; min-width: 0; }

/* bio runs across both columns */
.Author_Card .author-bio{ grid-column: 1 / -1; }
/* ensure the avatar itself is centered on the row */
.Author_Card .author-photo { align-self: center; }

/* Prevent any global “card” styles from styling rows inside the author card */
.Author_Card > *{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.Author_Card:hover {
    box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.15);
}


.Author_Card .author-photo img {
  width: 120px;
  height: 120px;
  object-fit: cover;
  border-radius: 100px;
  border: 3px solid #000000;
  box-shadow: 0 0 5px rgba(0,0,0,0.1);
}

.Author_Card .author-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.Author_Card .author-name {
  margin: 0.8rem 0 0rem 0;
  font-size: 1.8rem;
  font-weight: 600;
  color: #231942;
}

.Author_Card .verified {
  font-size: 0.8rem;
  width: 130px;
  color: #ffffff;
  background-color: #7191fcde;
  padding: 4px 10px;
  border-radius: 20px;
  display: inline-block;
  margin-bottom: 0.2rem;
}

.Author_Card .author-stats {
  font-size: 0.85rem;
  color: #5e5e5e;
  margin-bottom: 0.7rem;
}

.Author_Card .author-stats span {
  margin-right: 1.5rem;
}

.Author_Card .author-bio {
  font-size: 1rem;
  color: #333;
  line-height: 1.6;
  max-width: 100%;
  padding-right: 0;            /* was 200px — remove it */
}


.author-genres {
  margin-top: 0.5rem;
  font-style: italic;
}

.author-website a {
  display: inline-block;
  margin-top: 0.5rem;
  color: #5566dd;
  text-decoration: underline;
}

.author-meta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.5rem;
  margin: 0rem 0;
}

.author-genres,
.author-website {
  font-size: 0.95rem;
}

.author-name-row {
  display: flex;
  align-items: center;      /* center-align vertically */
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 0rem;
}

.author-name {
  margin: 0;
}

.author-stats-inline {
  display: flex;
  gap: 1.25rem;              /* space between followers/following */
  margin-left: 2rem;         /* wider gap between name and stats */
  font-size: 0.95rem;
  margin-top: 15px;
  color: #555;
}





/* Overlay link stretches across the whole card */
.clickable-card a.card-overlay-link {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
  text-indent: -9999px; /* hides text */
}

/* Outer Card Wrapper */
.clickable-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}
/* Keep the Author card as a 2‑column grid even when it's "clickable" */
.Author_Card.clickable-card {
  display: grid !important;
  grid-template-columns: 120px 1fr;
  gap: 18px 24px;
  align-items: start;
}

/* Inner content that holds title, genre, and stars */
.card-content {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex-grow: 1;
  padding: 8px;
}

/* Genre */
.book-genre {
  font-size: 0.85em;
  margin-bottom: 8px;
  line-height: 1.2em;
}

/* Rating (sticks to bottom due to space-between) */
.book-rating {
  margin-top: auto;
}




.um.um-register {
  background-color: #2c2f33;
  padding: 30px;
  border-radius: 8px;
  color: #fff;
  box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.45);
}

.um.um-login {
  background-color: #2c2f33;
  padding: 30px;
  border-radius: 8px;
  color: #fff;
  box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.45);
}

/*.um.um-register input[type="text"],
.um.um-register input[type="password"],
.um.um-register input[type="email"],
.um.um-register select {
  background-color: #23272a;
  border: none;
  color: #ffffff;
  padding: 12px;
  font-size: 15px;
  border-radius: 5px;
}*/

.um.um-register input[type="submit"] {
  background-color: #5865f2;
  color: white;
  font-weight: bold;
  border: none;
  padding: 12px 20px;
  border-radius: 5px;
  cursor: pointer;
}
.um.um-login label {
  font-size: 14px;
  font-weight: bold;
  color: #dcdcdc;
  margin-bottom: 5px;
}


.um.um-register label {
  font-size: 14px;
  font-weight: bold;
  color: #ffffff;
  margin-bottom: 5px;
}

.um-form .um-field-icon {
    color: #f0f0f0 !important;
}



.um input[type="submit"]:hover {
    background-color: #1a78dd !important;
    transform: scale(1.04);
    transition: all 0.2s ease-in-out;
}

.um input[type="submit"] {
    background-color: #4e95e2 !important;
}





/* Center the Create Account heading */
h1.entry-title {
    text-align: center;
    color: #000000;
    font-size: 35px;
}


.rec-register-heading {
    text-align: center;
    font-size: 30px;
    font-weight: 600;
    color: #dcdcdc;
    margin-bottom: 20px;
    margin-top: -10px;
}

.rec-login-heading {
    text-align: center;
    font-size: 30px;
    font-weight: 600;
    color: #dcdcdc;
    margin-bottom: 20px;
    margin-top: -10px;
}



.page-id-2196 .entry-title {
    display: none;
}

.page-id-2195 .entry-title {
    display: none;
}

.um .um-field-checkbox,
.um .um-field-checkbox * {
    color: #c0bebe !important;
}

/* Make the "Show privacy policy" text white */
.um-toggle-gdpr {
    color: #4f7ab3 !important;
}

.um-toggle-gdpr:hover {
    color: #ffffff !important;
}



.um .um-postmessage {
  color: #ffffff !important;
  padding: 1rem;
  border-radius: 8px;
  text-align: center;
}

.um .um-button.um-alt:hover {
    background-color: #616161 !important; /* Change to any color you want */
    color: #ffffff !important;
    border-color: #1e73be !important;
}



a.elementor-button {
    background-color: #383838 !important;
    color: #ffffff !important;
    border: none;
}

a.elementor-button:hover {
    background-color: #bebebe !important;
    color: #ffffff !important;
}


/*.um-form-columns {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    justify-content: space-between;
}

.um-form-left,
.um-form-right {
    flex: 1;
    min-width: 300px;
}

.um .um-row-half {
    width: 100% !important;
}*/
/* Base dropdown styling */
/* Style the visible dropdown field */
/* === Select2 Dropdown Field Styling === */

/* OUTER BOX (closed dropdown) */
/* Change the visible box of the select field */
/* 1. Style the visible dropdown box */
/* Style the visible Select2 field inside the row */


.select2-search--dropdown {
  display: none !important;
}



/* Text input fields */
.um input[type="text"],
.um input[type="email"],
.um input[type="password"],
.um input[type="date"],
.um select,
.um textarea {
    border-radius: 12px !important;  /* Adjust roundness */
    border: 2px solid #1e73be !important; /* Replace with your color */
    background-color: #1e1e1e; /* Optional: match your dark theme */
    color: #fff;
}

.rec-account-layout {
  display: flex;
  gap: 2rem;
}

.rec-account-wrapper {
  display: flex;
  width: 100%;
  max-width: 75%;
  margin: 4rem auto;
  gap: 3rem;
  background: #111;
  border-radius: 12px;
  padding: 25px;
  color: white;
}
.rec-account-heading {
  color: #e3e3e3; /* Example color: warm yellow-orange */
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 1.5rem;
}


.rec-account-sidebar {
  width: 260px;
  background: #1a1a1a;
  padding: 2rem 1rem;
  border-radius: 0.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 1.2rem;
  text-align: center;
}

.rec-account-nav-list {
  list-style: none;
  padding: 0;
  margin: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.3rem;
}

.rec-account-nav-list li {
  width: 100%;
  display: flex;
  justify-content: center;
}

.rec-account-nav-list a {
  display: block;
  width: 100%;
  text-align: center;
  font-size: 1.2rem;
  text-decoration: none;
  color: white;
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
  transition: background-color 0.2s ease;
}

.rec-account-nav-list a:hover {
  background-color: #1a1a1a;
  color: #13c0eb;
}

.rec-account-main {
  flex-grow: 1;
  width: 100%;
}

/* Profile grid INSIDE the boxed center: left + main only */
.rec-profile-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:24px;
}
@media (min-width:900px){
  .rec-profile-grid{ grid-template-columns:320px 1fr; }
}



.rec-profile-section {
  background-color: #2b2b2b;
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 6px;
}

.rec-profile-label {
  font-size: 1.2rem;
  font-weight: 700;
  color: white;
  display: flex;
  align-items: center;
  height: 100%;
}

.rec-profile-display {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
  text-align: left;
  color: white;
}

.rec-profile-display,
.rec-profile-edit-form {
  padding: 20px 28px;
}

.rec-contact-info {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.rec-info-row {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.rec-label {
  font-weight: 600;
  width: 140px;
  display: inline-block;
  color: rgb(174, 174, 174);
}

.rec-profile-edit-form {
  background-color: #2b2b2b;
  padding: 1rem 1.5rem;
  border-radius: 0.5rem;
}

.rec-profile-edit-form label {
  display: block;
  font-weight: 600;
  margin: 0.75rem 0 0.25rem;
}

.rec-profile-edit-form input {
  display: block;
  width: 100%;
  padding: 0.5rem;
  font-size: 1rem;
  margin-bottom: 1rem;
  border-radius: 4px;
  border: none;
}

.rec-profile-buttons {
  display: flex;
  gap: 1rem;
  margin-top: 1rem;
}

.save-btn {
  background: #1e90ff;
  color: white;
  border: none;
  padding: 0.5rem 1rem;
  border-radius: 0.3rem;
}

.cancel-btn {
  background: #444;
  color: white;
  border: none;
  padding: 0.5rem 1rem;
  border-radius: 0.3rem;
}

.rec-profile-picture-container {
  display: flex;
  justify-content: center;
  margin: 2rem auto;
  width: fit-content;
  position: relative;
}

.rec-profile-avatar {
  width: 96px;
  height: 96px;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}

.edit-icon-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  border-radius: 50%;
  pointer-events: none;
  transition: 0.3s ease;
}

.profile-pic-label {
  position: relative;
  display: inline-block;
  cursor: pointer;
}

.profile-pic-label:hover .edit-icon-overlay {
  opacity: 80%;
}

.um-icon-edit {
  font-size: 14px;
  color: white;
}

.rec-name-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.rec-name-row .rec-form-group {
  flex: 1 1 48%;
}

.rec-form-group label {
  display: block;
  font-weight: 600;
  margin-bottom: 0.25rem;
}

.rec-form-group input {
  width: 100%;
  padding: 0.5rem;
}

.hidden {
  display: none !important;
}

.rec-profile-header {
  background-color: #1e1e1e; /* lighter top bar */
  padding: 0 24px;
  height: 48px; /* or however tall you want */
  display: flex;
  align-items: center !important; 
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
}


/* ===== WRAPPER AND TRIGGER ===== */
.rec-auth-wrapper {
  position: relative;
  display: inline-block;
}

.rec-auth-trigger {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
  border-radius: 8px;
}

.rec-auth-trigger:hover {
  background: rgba(255, 255, 255, 0.08); /* subtle background change on hover */
  color: #439cf5;
  border-radius: 8px;
}
.rec-auth-trigger:hover .rec-auth-name,
.rec-auth-trigger:hover .rec-auth-arrow {
  color: #b4b4b4;
}
.rec-auth-avatar {
  width: 38px;
  height: 38px;
  object-fit: cover;
  border-radius: 50% !important; /* Force circle */
  display: block;
}

.rec-avatar-lg {
    width: 54px;
    height: 54px;
}

.rec-auth-name {
  font-weight: 600;
  color: #fff;
  font-size: 1rem;
}

.rec-auth-arrow {
  font-size: 1rem;
  color: #ffffff;
}

.rec-auth-avatar,
.rec-avatar-lg {
  border-radius: 50%;
  object-fit: cover;
  aspect-ratio: 1 / 1;
}

/* ===== DROPDOWN ===== */
.rec-auth-menu {
  position: absolute;
  top: 100%;
  right: 0;
  background-color: #1a1a1a;
  padding: 1.2rem;
  border-radius: 12px;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
  z-index: 999;
  min-width: 280px;
  display: none;
  flex-direction: column;
  gap: 0.6rem;
  align-items: stretch;
}

/* Show menu on hover */
.rec-auth-wrapper:hover .rec-auth-menu {
  display: flex;
}

/* Top block inside dropdown */
.rec-auth-header {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}

/* Name/email text block */
.rec-auth-info {
  display: flex;
  flex-direction: column;
}

.rec-user-name {
  font-weight: 600;
  font-size: 1.35rem;
  color: #439cf5;
  line-height: 1.2;
  margin-bottom: 0.4rem;
}

.rec-user-email {
  font-size: 0.75rem;
  color: #ccc;
  word-break: break-word;
}

/* Divider */
.rec-auth-divider {
  height: 1px;
  background-color: #333;
  margin: 0.8rem 0;
}

/* Links */
.rec-auth-menu a {
  padding: 0.6rem 1rem;
  border-radius: 8px;
  color: #fff;
  font-size: 1rem;
  text-decoration: none;
  transition: background-color 0.2s ease;
}

.rec-auth-menu a:hover {
  background-color: #2e2e2e;
}


.rec-password-control-wrapper {
    display: flex;
    gap: 2rem;
    flex-wrap: wrap;
}
.rec-security-row {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;

}

.rec-password-box {
  flex: 1 1 48%;
  background-color: #222;
  padding: 0; /* Reset outer padding */
  border-radius: 8px;
  overflow: hidden; /* Ensure no padding gap shows through rounded corners */
  box-sizing: border-box;
}

@media (max-width: 768px) {
  .rec-password-box {
    flex: 1 1 100%;
  }
}
.rec-section-title {
  color: white !important;
  font-size: 36px;
  margin: 0 0 1rem 0;
}
img.review-avatar {
  width: 40px !important;
  height: 40px !important;
  border-radius: 100% !important;
  object-fit: cover !important;
}


.star-rating .star {
  color: orange;
  font-size: 1.5rem;
}
.rating-number {
  font-size: 1.1rem;
  font-weight: bold;
  margin-left: 4px;
}


.star-rating {
  font-size: 30px;
  color: gold;
}
.star.empty {
  color: #666;
}

.rec-password-box-header {
  background-color: #1b1b1b;
  padding: 16px 20px;
  margin: 0;
  font-weight: bold;
  font-size: 16px;
}
#account-password-actions .rec-profile-label-wrapper {
    margin-bottom: 1rem;
}

/* Reset Password Button */
.rec-reset-password-btn {
    background-color: transparent;
    color: #00bfa6; /* Teal */
    border: 1px solid #00bfa6;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.rec-reset-password-btn:hover {
    background-color: #00bfa6;
    color: #111;
}


/* Delete Account Button */
.rec-delete-account-btn {
    background-color: transparent;
    color: #ff4d4f; /* Red */
    border: 1px solid #ff4d4f;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.rec-delete-account-btn:hover {
    background-color: #ff4d4f;
    color: #111;
}


/* Confirm Delete Button (that appears after clicking delete) */
.rec-delete-confirm-wrapper button {
    background-color: transparent;
    color: #ff4d4f;
    border: 1px solid #ff4d4f;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-left: 1rem;
}

.rec-delete-confirm-wrapper button:hover {
    background-color: #ff4d4f;
    color: #111;
}
.rec-modal-overlay {
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.6);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.rec-modal {
  background: #1f1f1f;
  padding: 2rem;
  border-radius: 10px;
  max-width: 500px;
  width: 90%;
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.5);
  position: relative;
  color: white;
}

.rec-modal-header {
  margin-bottom: 1rem;
}

.rec-modal-close {
  position: absolute;
  top: 12px;
  right: 16px;
  font-size: 1.5rem;
  cursor: pointer;
  color: #ccc;
}

.rec-password-form input {
  width: 100%;
  margin-top: 0.5rem;
  padding: 0.6rem;
  border-radius: 5px;
  border: none;
  background-color: #333;
  color: #fff;
}

.rec-password-message {
  margin-top: 0.5rem;
  font-weight: bold;
}

.rec-modal-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 1rem;
  gap: 10px;
}

.rec-modal-actions .cancel-reset,
.rec-modal-actions .confirm-reset {
  padding: 0.6rem 1rem;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.rec-modal-actions .cancel-reset {
  background: #444;
  color: #ccc;
}

.rec-modal-actions .confirm-reset {
  background: #4cc9f0;
  color: #000;
  font-weight: 600;
  border-radius: 6px;
  padding: 0.6rem 1.2rem;
  transition: all 0.2s ease;
  border: none;
}
.rec-modal-actions .confirm-reset:hover {
  background: rgb(55, 160, 195);
  cursor: pointer;
}

.rec-modal h2 {
  font-size: 1.5rem;
  color: #ffffff; /* or #f3f4f6 for soft white */
  font-weight: 600;
  margin-bottom: 0.25rem;
}
.rec-modal p {
  color: #d1d5db;
  font-size: 0.9rem;
  margin-bottom: 1rem;
}
.rec-field-group {
  margin-bottom: 1.2rem; /* or try 16px, 20px etc. */
}

.rec-delete-error {
  color: #ff5f5f;
  font-size: 0.95rem;
  margin-top: 6px;
}
.rec-password-box-content {
  padding: 20px;
}




.write-review-container {
            background: #ffe8ff;
            padding-left: 25px;
            padding-right: 25px;
            padding-bottom: 10px;
            padding-top: 10px;
            border-radius: 12px;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 4px 6px rgba(0, 0, 0, 0.08);
            margin: 20px auto;
            color: rgb(0, 0, 0);
        }
        .review-form-title {
            font-size: 1.8rem;
            margin-bottom: 20px;
            color: rgb(0, 0, 0);
        }
        label {
            display: block;
            margin-top: 10px;
            font-weight: bold;
        }
        input[type="text"], textarea {
            width: 100%;
            padding: 10px;
            border-radius: 6px;
            border: none;
            margin-top: 5px;
            background: #fff6ff;
            color: rgb(0, 0, 0);
            resize: none;
        }
        textarea {
            min-height: 120px;
        }
        .rating-stars {
    margin-top: 10px;
}
/* interactive stars only inside the review form */
.rating-stars .interactive-star {
    font-size: 28px;
    cursor: pointer;
    color: #888;
}
.rating-stars .interactive-star.selected,
.rating-stars .interactive-star:hover,
.rating-stars .interactive-star:hover ~ .interactive-star {
    color: gold;
}

        #submit-review-btn {
            margin-top: 8px;
            padding: 12px 24px;
            background: #49b9ff;
            color: white;
            border: none;
            border-radius: 6px;
            cursor: pointer;
            transition: background 0.3s ease;
        }
        #submit-review-btn:hover {
            background: #3ea1de;
        }
        #review-message {
            margin-top: 15px;
            font-size: 0.9rem;
        }
.star-rating .star {
  pointer-events: none;
  user-select: none;
}
/* Remove pointer for static stars */
.star-rating .star,
.summary-rating-stars .star {
  pointer-events: none;
}

/* Interactive stars only clickable inside the form */
.interactive-star {
  cursor: pointer;
  transition: color 0.2s ease-in-out;
}

/* Ensure stars fill left-to-right on hover */
#rating-stars {
  direction: ltr;
}

/* Coloring */
.interactive-star:hover,
.interactive-star.hover,
.interactive-star.selected {
  color: gold;
}

.interactive-star {
  color: #ccc;
}
.review-votes {
  display: flex;
  gap: 15px;
  font-size: 1rem;
  align-items: center;
}

.rec-review-vote {
  cursor: pointer;
  color: #444;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 500;
  transition: color 0.2s ease;
}

.rec-review-vote:hover {
  color: #0073aa; /* WordPress blue */
}

.rec-review-vote i {
  font-size: 1.2rem;
}

.review-tags-display {
    margin-top: 5px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.review-tag-item {
    background-color: #eee;
    padding: 4px 8px;
    border-radius: 5px;
    font-size: 0.8rem;
    color: #333;
}
.review-tag-wrapper {
  position: relative;
  margin-bottom: 20px;
}

.review-tag {
    display: inline-block;
    background: #f6eef9;
    border: 1px solid #95b2e7;
    color: #442256;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 0.85em;
    margin: 4px 6px 0 0;
}


.tag-pill-button {
  padding: 8px 16px;
  background-color: #f7d0f7;
  border: none;
  border-radius: 20px;
  margin-top: 10px;
  cursor: pointer;
  font-weight: 600;
}

.tag-dropdown-overlay {
  position: absolute;
  top: 100%;
  left: 0;
  width: 20%;
  max-height: 200px;
  overflow-y: auto;
  background: rgb(239, 239, 232);
  border: 1px solid #ccc;
  z-index: 1000;
  padding: 10px;
  display: none;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.tag-dropdown-overlay.visible {
  display: block;
}

.tag-option {
  display: block;
  margin-bottom: 8px;
}

/* Shared layout for both sort bars (tighter vertical sizing) */
.review-filter-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 48px;                /* a bit tighter horizontally */
  width: 100%;
  flex-wrap: wrap;
  min-height: 48px;            /* let content define height */
}


/* Inputs */
.review-filter-bar select {
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  background: #fff;
  border: 1px solid #d7cbe8;
  border-radius: 10px;
  padding: 8px 12px;
  font-size: 16px;
  line-height: 1.2;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.04);
}

.review-filter-bar select:focus {
  outline: none;
  border-color: #6f5ae8;
  box-shadow: 0 0 0 3px rgba(111,90,232,.25);
}

/* Rounded container — compact vertical padding */
.review-bar-parent {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;          /* was 84px */
  padding: 6px 16px;         /* was 14px 20px */
  border-radius: 14px;
  background: rgba(255,255,255,0.5);
  box-shadow: 0 6px 18px rgba(21,14,56,.08);
  margin: 0 0 8px;           /* less space below */
  backdrop-filter: saturate(120%) blur(2px);
}
@media (prefers-reduced-transparency: reduce) {
  .review-bar-parent { backdrop-filter: none; }
}



.review-filter-group {
  display: flex;
  align-items: center;
  gap: 12px;
}

.review-filter-bar label {
  margin: 0;
  font-weight: 700;
  font-size: 18px;
  color: #3d345c;
}

@media (max-width: 720px) {
  .review-filter-bar { gap: 20px; }
  .review-bar-parent { padding: 12px; }
  .review-filter-bar label { font-size: 16px; }
}



.review-items .review-item {
  margin-bottom: 30px;
}

/* Remove all loop grid internal padding */
.elementor .elementor-widget-loop-grid .e-loop-item,
.elementor .elementor-widget-loop-grid .e-loop-item > .e-con,
.elementor .elementor-widget-loop-grid .elementor-widget-container {
    padding: 0 !important;
}





/* Optional, if you added a wrapper around title+genres+author */
.book-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;              /* keeps title→genres→author tight */
}

/* Keep rating row anchored at the bottom so cards feel same height */
.book-rating {
  margin-top: auto !important;
}




/*profile stuff*/






:root{
  --rec-content-max: 1240px;  /* wider center column (try 1200–1280 if you prefer) */
  --rail-w: 340px;
  --rec-cover-h: 200px;
  --rec-cover-gap: 56px;
  --frame-gap: 16px;    
  --rec-canvas-w: calc(100vw - var(--rec-sidebar-w-current)); /* NEW */
        /* reduce to 16px if you also want less space between center↔rail */
}





.rec-page-inner{
  width:100% !important;
  max-width:var(--rec-content-max);
  margin:0 auto;
  padding:24px 0 48px;   /* no left/right padding */
  box-sizing:border-box;

  /* Re-center the main column while the grid is right-aligned:
     dx = (rail + gap) - ((vw - center)/2) */
  transform: translateX(
    calc( (var(--rail-w) + var(--frame-gap)) - ((100vw - var(--rec-content-max)) / 2) )
  );
  will-change: transform; /* keeps it crisp */
}



/* Full-width frame: centre column is centred; rail truly hard-right */
.rec-page-frame{
  display: grid;
  gap: var(--frame-gap);
  justify-content: right;
  box-sizing: border-box;
  width: 100%;
  margin: 0;

  /* Left padding centers the centre column BUT subtracts rail+gap.
     Right padding is 0 so the rail sits on the window edge. */
  padding-left: max(
    0px,
    calc( (100vw - var(--rec-content-max)) / 2 - var(--rail-w) - var(--frame-gap) )
  );
  padding-right: 0;

  grid-template-columns:
    minmax(0, var(--rec-content-max))   /* centre */
    var(--rail-w);                      /* rail */
}







/* New 2-track layout: centre is track 1, rail is track 2 */
.rec-page-inner{ grid-column: 1; }


.rec-rail-outside{
  grid-column:2;
  justify-self:end;
  align-self:start;
  position:sticky;
  top:16px;
  margin-top: calc(var(--rec-cover-h) + var(--rec-cover-gap)); /* starts below banner */
}



@media (max-width: calc(var(--rec-content-max) + var(--rail-w) + var(--frame-gap))){
  .rec-page-frame{
    grid-template-columns: minmax(0, var(--rec-content-max));
    padding-left: max(0px, calc((100vw - var(--rec-content-max)) / 2));
    padding-right: max(0px, calc((100vw - var(--rec-content-max)) / 2));
  }
  .rec-page-inner{ transform: none; }  /* center normally when rail is hidden */
  .rec-rail-outside{ display:none; }
}








/* === Cover === */
.rec-cover {
  position: relative;
  height: 200px;
  border-radius: 14px;
  background-size: cover;
  background-position: center;
  background-color: #d9c9e6; /* fallback pastel */
  overflow: hidden;
  margin-bottom: 56px; /* leave space for avatar overlap */
}
.rec-cover-tint {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,.15), rgba(0,0,0,.35));
}
.rec-cover-bar {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; align-items: center; justify-content: flex-end;
  padding: 12px 18px;
  color: #fff;
}

.rec-cover-bar .rec-name h1 {
  font-size: 28px; line-height: 1.2; margin: 0 0 2px 0;
}
.rec-cover-bar .rec-username {
  opacity: .9; font-size: 14px;
}

/* Avatar overlaps the bottom of cover */
.rec-avatar {
  position: absolute;
  left: 24px;
  bottom: -36px;            /* overlap */
  width: 96px; height: 96px;
  border-radius: 50%;
  border: 4px solid #f0dff0; /* match your bg tone */
  object-fit: cover;
}

/* Header row under the cover */
.rec-top-meta {
  display: flex; align-items: center; justify-content: flex-start;
  gap: 16px; margin: 12px 0 16px;
}

/* Left side: avatar + name block */
.rec-top-left { display: flex; align-items: center; gap: 16px; }

/* Smaller display name */
.rec-profile-wrapper .rec-name h1 {
  font-size: 34px; line-height: 1.2; margin: 0;
}

/* username + follower stats on one line, larger gap from the @username */
.rec-subline { display: flex; align-items: center; gap: 28px; color: #4f4a5a; }
.rec-username { font-size: 16px; }

/* inline stats with a thin divider between them */
.rec-stats-inline { display: flex; align-items: center; }
.rec-stats-inline span { color: #4f4a5a; }
.rec-stats-inline span + span {
  position: relative;
  padding-left: 12px;
  margin-left: 12px;
}
.rec-stats-inline span + span::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 14px;
  background: #bdb6cc;
}


/* avatar shown inline (not overlayed) */
.rec-avatar-inline {
  width: 72px; height: 72px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid #fff;
}


.rec-card {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 6px 22px rgba(0,0,0,.06);
  padding: 16px 18px;
  margin-bottom: 18px;
}

/* base avatar */
.rec-profile-wrapper .rec-avatar{
  width:96px; height:96px; border-radius:50%;
  object-fit:cover; border:4px solid #fff;
}

/* only make it overlap if used INSIDE the cover */
.rec-profile-wrapper .rec-cover .rec-avatar{
  position:absolute; left:24px; bottom:-36px;
}
.rec-profile-wrapper .rec-cover{ margin-bottom:16px; }


.rec-profile-wrapper .rec-top-meta{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; margin-bottom:16px;
}
.rec-profile-wrapper .rec-top-left{
  display:flex; align-items:center; gap:14px;
}
.rec-profile-wrapper .rec-top-right{
  display:flex; align-items:center; gap:16px;
}
.rec-profile-wrapper .rec-stats span{ margin-left:16px; color:#4f4a5a; }



/* Bio */
.rec-bio-card h3 { margin: 0 0 8px; }
.rec-bio-card .muted { color:#777; font-style: italic; }
#rec-bio-text { width: 100%; box-sizing: border-box; }
.rec-actions { margin-top: 10px; display: flex; gap: 8px; }
.hidden { display: none; }

/* Level */
.rec-level-card h3 { margin: 0 0 8px; }
.level-row { display:flex; align-items:center; justify-content:space-between; margin-bottom: 8px; }
.level-num { color:#444; }
.level-xp { color:#7a6b8e; }
.progress { height: 8px; background:#ede6f2; border-radius:9px; overflow:hidden; }
.progress .fill { height:100%; width:0; background:#7B5CBF; }

/* Tabs */
.rec-tabs { display:flex; gap:8px; margin-bottom:12px; }
.rec-tab {
  background:#efecf6; color:#42375e;
  border:none; border-radius:20px; padding:8px 14px; cursor:pointer;
}
.rec-tab.active { background:#7B5CBF; color:#fff; }

.rec-panel { display:none; }
.rec-panel.active { display:block; }

/* Review items */
.rec-review .rec-review-top {
  display:flex; align-items:center; justify-content:space-between;
  gap:12px;
}
.rec-review-headline { display:flex; align-items:center; gap:14px; }
.rec-review-title { margin:0; font-size:18px; }
.rec-review-date { color:#777; font-size:13px; }

/* stars inline beside title — static */
.rec-rating-inline .star { font-size:18px; color:#f5b301; pointer-events:none; cursor:default; }
.rec-rating-inline .star.empty { color:#c7bfd6; }


/* book line tight under the headline */
.rec-on-book { color:#6a6280; margin:4px 0 6px; }

/* 4-line clamp of main review text with ellipsis */
.rec-review-excerpt {
  margin: 6px 0 10px;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* footer: votes+tags on the left (from [review_votes]), button on the right */
.rec-review-footer {
  display: flex;
  align-items: flex-start;       /* align button with the like/dislike line */
  justify-content: space-between;
  gap: 16px;
}

/* shortcode container from [review_votes] */
.review-votes { color:#4a445a; }
.review-votes .rec-review-vote i { margin-right:6px; }
.review-votes .review-tags { margin-top: 8px; }

/* keep button snug to top line */
.rec-review-actions { margin: 0; }



.rec-btn {
  background:#eae3f6; color:#3c2e58;
  border:none; border-radius:10px; padding:8px 14px; cursor:pointer;
}
.rec-btn.small { padding:6px 10px; font-size:13px; border-radius:8px; }
.rec-btn.primary { background:#7B5CBF; color:#fff; }
.rec-btn:hover { filter: brightness(.95); }


/* name row — give the button a bit more breathing room from the name */
.rec-name-line {
  display: flex;
  align-items: center;
  gap: 16px; /* was 12 */
}

/* Premium Follow/Unfollow pill
   - Default (Follow): solid brand pill with white text
   - Following (Unfollow): soft outline pill
   - Full keyboard & loading states
*/
.rec-profile-wrapper .rec-follow-btn {
  --btn-bg: linear-gradient(180deg, #6f5ae8 0%, #5a46d7 100%);
  --btn-text: #fff;
  --btn-ring: rgba(111, 90, 232, 0.35);
  --btn-shadow: 0 6px 18px rgba(111, 90, 232, 0.25);
  --btn-shadow-hover: 0 10px 24px rgba(111, 90, 232, 0.35);

  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  padding: 8px 14px;           /* larger hit area */
  min-height: 36px;
  font-size: 15px;             /* clearer text */
  font-weight: 600;
  line-height: 1;
  border-radius: 9999px;       /* pill */
  border: 0;
  background: var(--btn-bg);
  color: var(--btn-text);
  box-shadow: var(--btn-shadow);
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease, color .15s ease, opacity .15s ease;
}

.rec-profile-wrapper .rec-follow-btn:hover {
  transform: translateY(-1px);
  box-shadow: var(--btn-shadow-hover);
}

.rec-profile-wrapper .rec-follow-btn:active {
  transform: translateY(0);
  box-shadow: var(--btn-shadow);
}

.rec-profile-wrapper .rec-follow-btn:focus-visible {
  outline: 0;
  box-shadow: var(--btn-shadow-hover), 0 0 0 3px var(--btn-ring);
}

/* Following (Unfollow) = soft outline pill */
.rec-profile-wrapper .rec-follow-btn.is-following {
  --btn-bg: #f4f1ff;                 /* light lavender */
  --btn-text: #4b3bb5;               /* brand text */
  --btn-ring: rgba(75, 59, 181, 0.35);
  --btn-shadow: 0 2px 10px rgba(75, 59, 181, 0.12);
  --btn-shadow-hover: 0 6px 18px rgba(75, 59, 181, 0.18);

  background: var(--btn-bg);
  color: var(--btn-text);
  border: 2px solid #cfc5ff;
}

.rec-profile-wrapper .rec-follow-btn.is-following:hover {
  background: #ebe5ff;
}

/* Disabled & loading */
.rec-profile-wrapper .rec-follow-btn:disabled {
  opacity: .6;
  cursor: not-allowed;
  transform: none;
  box-shadow: var(--btn-shadow);
}

/* Loading spinner (appears next to/over the label) */
.rec-profile-wrapper .rec-follow-btn.is-loading .btn-label {
  opacity: 0; /* hide text while spinning */
}

.rec-profile-wrapper .rec-follow-btn.is-loading::after {
  content: "";
  position: absolute;
  width: 16px; height: 16px;
  border-radius: 50%;
  border: 2px solid currentColor;
  border-top-color: transparent;
  animation: recspin 0.9s linear infinite;
}

@keyframes recspin {
  to { transform: rotate(360deg); }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .rec-profile-wrapper .rec-follow-btn,
  .rec-profile-wrapper .rec-follow-btn:hover,
  .rec-profile-wrapper .rec-follow-btn:active {
    transition: none;
    transform: none;
  }
  .rec-profile-wrapper .rec-follow-btn.is-loading::after {
    animation: none;
  }
}



/* === Currently Reading card === */
.rec-reading-card { padding: 16px; }
.rec-reading-header {
  display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px;
}
.cr-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
.cr-tile {
  position: relative; border-radius: 14px; overflow: hidden; background: #fff;
  box-shadow: 0 6px 18px rgba(21,14,56,.08);
}
.cr-cover {
  display:block; width:100%; padding-top:150%; /* 2:3 aspect */
  background-size: cover; background-position:center;
}
.cr-actions {
  position:absolute; inset:auto 8px 8px 8px;
  display:flex; gap:6px; justify-content:center;  /* center the pills */
}
.rec-btn.tiny { padding:6px 8px; font-size:12px; border-radius:999px; }
.rec-btn.tiny.ghost { background:#fff; color:#333; border:1px solid #ddd; }


/* Finished grid */
.finished-grid {
  display:flex; flex-wrap:wrap; gap:12px;
}
.finished-item { width:122px; }
/* keeps the background rect 2:3, but doesn’t fix a hard pixel size */
.finished-cover{
  aspect-ratio: 2 / 3;
  background-size: cover;
  background-position: center top;
  display: block;
}


.finished-date { margin-top:6px; font-size:12px; color:#6a6280; text-align:center; }

/* Loading state reuse for tiny buttons */
.rec-btn.is-loading .btn-label { opacity:0; }
.rec-btn.is-loading::after {
  content:""; position:absolute; width:14px; height:14px; border-radius:50%;
  border:2px solid currentColor; border-top-color:transparent; inset:0; margin:auto;
  animation: recspin .9s linear infinite;
}
@keyframes recspin { to { transform: rotate(360deg); } }




/* === Book Quick Actions (Add to Shelf) === */
.rec-qa { position: relative; display: inline-block; }

.rec-qa-trigger {
  --bg: linear-gradient(180deg, #6f5ae8 0%, #5a46d7 100%);
  display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 14px; border: 0; border-radius: 999px;
  background: var(--bg); color: #fff; font-weight: 700;
  box-shadow: 0 8px 22px rgba(111,90,232,.28);
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease;
}
.rec-qa-trigger:hover { transform: translateY(-1px); box-shadow: 0 12px 28px rgba(111,90,232,.35); }
.rec-qa-trigger .qa-caret { opacity: .9; transition: transform .15s ease; }
.rec-qa-trigger[aria-expanded="true"] .qa-caret { transform: rotate(180deg); }

.rec-qa-panel {
  display: none;                 /* closed by default */
  position: absolute; top: calc(100% + 10px); left: 0; z-index: 40;
  width: 320px; padding: 12px; border-radius: 14px; background: #fff;
  box-shadow: 0 16px 40px rgba(21,14,56,.18);
  grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px;
}

/* Show panel only when trigger is expanded */
.rec-qa-trigger[aria-expanded="true"] + .rec-qa-panel { display: grid; }

/* Safety: if anything re-adds [hidden], force it closed */
.rec-qa-panel[hidden] { display: none !important; }

.rec-qa-panel .qa-item {
  display: flex; align-items: center; gap: 10px;
  padding: 12px; border: 1px solid #efe7ff; border-radius: 12px;
  background: #fbf9ff; color: #2f2755; cursor: pointer; font-weight: 600;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.rec-qa-panel .qa-item i {
  width: 28px; height: 28px; border-radius: 10px; display: inline-flex;
  align-items: center; justify-content: center; background: #eee7ff;
}
.rec-qa-panel .qa-item:hover { transform: translateY(-1px); box-shadow: 0 8px 18px rgba(21,14,56,.12); }
.rec-qa-panel .qa-item:disabled { opacity: .5; cursor: default; transform: none; box-shadow: none; }

.rec-qa-panel .qa-item.is-loading { position: relative; color:#999; }
.rec-qa-panel .qa-item.is-loading::after {
  content:""; position:absolute; right:12px; width:16px; height:16px;
  border-radius:50%; border:2px solid currentColor; border-top-color:transparent;
  animation: recspin .9s linear infinite;
}

/* Toast */
.rec-toast {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%) translateY(10px);
  background: #2d264b; color: #fff; padding: 10px 14px; border-radius: 10px;
  box-shadow: 0 10px 28px rgba(45,38,75,.35);
  opacity: 0; pointer-events:none; transition: opacity .18s ease, transform .18s ease;
}
.rec-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

@keyframes recspin { to { transform: rotate(360deg); } }

/* ===========================
   Right Rail — equal gap & layout
   =========================== */
:root{
  /* keep your existing rail width variable if set elsewhere */
  --rail-w: 360px;
  --rail-inset: 10px; /* equal gap left/right inside rail */
}

.rec-rail-outside{
  position: fixed;
  top: calc(var(--rec-banner-bottom, 0px) + 24px); /* your JS sets this custom prop already */
  right: var(--outer-gutter, 24px);
  width: var(--rail-w);
  z-index: 2;
  display: block;
  pointer-events: auto;
}

/* equal gap on both sides of the reading card */
.rec-rail-outside .rec-reading-card{
  margin: 0 auto;
  width: calc(100% - (var(--rail-inset) * 2));
  padding-inline: 18px;
}

/* ===========================
   Currently Reading — card & header (refined)
   =========================== */
.rec-reading-card{
  background: linear-gradient(180deg, rgba(255,255,255,.68), rgba(255,255,255,.56));
  backdrop-filter: blur(6px);
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 18px;
  box-shadow: 0 6px 22px rgba(16,24,40,.08);
  padding-block: 16px 18px;
}

.cr-header{
  /* make room on the right for the fixed pills and keep everything else the same */
  position: relative;
  display: block;
  margin-bottom: 12px;
  padding-right: 140px;   /* reserves space so the title never collides with the pills */
}


.cr-title{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;                     /* eyebrow + title can sit nicely together */
}

.cr-eyebrow{
  text-transform: uppercase;
  letter-spacing:.09em;
  font-weight: 700;
  font-size: 12px;
  padding: 4px 8px;
  color: #5645c9;
  background:#f3efff;
  border:1px solid #e5ddff;
  border-radius:999px;                /* turn it into a neat pill */
}

.cr-heading{
  margin: 0;
  /* Shrink just enough on tighter rails but keep it big on wide screens */
  font-size: clamp(20px, 2.1vw, 24px);
  line-height: 1.26;                  /* extra breathing room for the “g” descender */
  letter-spacing: .05px;
  white-space: nowrap;                /* force single line */
  background: linear-gradient(90deg, #282246 0%, #6b4ae3 60%, #c24bd6 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}


.cr-cta{
  /* pin the (1/4) + Add pills to the top-right inside the card */
  position: absolute;
  top: 12px;
  right: 2px;            /* matches the card’s inner padding so they don’t kiss the edge */
  display: flex;
  align-items: center;
  gap: 8px;
}

/* small screens: nudge in slightly and reduce reserved space */
@media (max-width: 480px){
  .cr-header{ padding-right: 120px; }
  .cr-cta{ right: 16px; top: 10px; }
}


.cr-count{
  display:inline-flex; align-items:center; justify-content:center;
  min-width: 46px; height: 28px; padding: 0 8px;
  border-radius: 999px;
  background: rgba(107,74,227,.10);
  color: #6b4ae3; font-weight: 700; font-size: 14px;
}

.cr-add{
  display:inline-flex; align-items:center; gap:8px;
  border-radius: 999px; padding: 8px 12px;
  background: #111827; color: #fff; font-weight: 600; font-size: 14px;
  text-decoration: none; line-height: 1;
  box-shadow: 0 6px 18px rgba(17,24,39,.18);
  transition: transform .15s ease, box-shadow .15s ease, background .2s ease;
}
.cr-add:hover{ transform: translateY(-1px); box-shadow: 0 10px 24px rgba(17,24,39,.22); }
.cr-add:active{ transform: translateY(0); }
.cr-add-plus{
  display:inline-grid; place-items:center; width:20px; height:20px;
  border-radius:50%; background:#fff; color:#111827; font-weight:800;
}

/* graceful stack on smaller widths */
@media (max-width: 460px){
  .cr-title{ flex-direction:column; align-items:flex-start; gap:4px; font-size: 10px; }
}


/* ===========================
   Tiles
   =========================== */
.cr-grid{
  display:grid;
  gap:16px;
  grid-template-columns: repeat(2, 1fr);  /* keep 2 columns */
}

.cr-tile{
  position: relative; border-radius: 16px; overflow: hidden;
  box-shadow: 0 8px 20px rgba(0,0,0,.10);
  background: #fff;
  isolation: isolate;
  transition: transform .18s ease, box-shadow .18s ease;
}
.cr-tile:hover{ transform: translateY(-2px); box-shadow: 0 12px 28px rgba(0,0,0,.14); }

.cr-cover{
  display:block; aspect-ratio: 2/3; /* keeps all covers equal height */
  background-size: cover; background-position:center;
  position: relative;
}
.cr-cover .cr-glow{
  position:absolute; inset:0; pointer-events:none;
  background: radial-gradient(60% 60% at 70% 30%, rgba(255,255,255,.55), transparent 70%);
  mix-blend-mode: screen; opacity:.35;
}
.cr-cover .cr-sheen{
  position:absolute; inset-inline:-40% -40%; inset-block:-120% auto;
  height:140%; transform: skewX(-18deg); opacity:0;
  background: linear-gradient(95deg, transparent, rgba(255,255,255,.55), transparent);
  transition: opacity .25s ease, transform .25s ease;
}
.cr-tile:hover .cr-sheen{ opacity:.9; transform: translateX(20%) skewX(-18deg); }

.cr-actions{
  position:absolute; left:10px; right:10px; bottom:10px;
  display:flex; gap:8px; justify-content:center;  /* center the pills */
  padding: 8px; border-radius: 999px;
  background: rgba(17,24,39,.55); backdrop-filter: blur(6px);
  transform: translateY(8px); opacity:0; transition: .18s ease;
}

.cr-tile:hover .cr-actions{ transform: translateY(0); opacity:1; }

/* pill buttons */
.cr-pill{ border-radius: 999px; padding: 8px 14px; font-weight: 700; }
.cr-finish{ background: linear-gradient(90deg, #22c55e, #16a34a); color:#fff; border:none; }
.cr-discard{ color:#fff; border:1px solid rgba(255,255,255,.45); }
.cr-finish:hover{ filter: brightness(1.03); transform: translateY(-1px); }
.cr-discard:hover{ background: rgba(255,255,255,.12); }

/* tiny success flair on click (uses your existing is-loading class, same pattern as follow btn) */
.cr-finish.is-loading::before{
  content:""; width:14px; height:14px; margin-right:8px; border-radius:50%;
  border:2px solid rgba(255,255,255,.65); border-top-color:transparent;
  display:inline-block; animation: crspin .7s linear infinite; vertical-align:middle;
}
@keyframes crspin{ to{ transform: rotate(360deg); } }

/* responsive guard so the rail doesn’t collide on smaller screens */
@media (max-width: 1200px){
  .rec-rail-outside{ display:none; }
}
/* ========== Empty “Add a book” tiles (centered & polished) ========== */
.rec-reading-card .cr-grid .cr-tile:has(> .cr-add){
  display:flex;                     /* use flex so content is dead-center */
  align-items:center;
  justify-content:center;
  aspect-ratio: 2 / 3;
  background:#fff;
  border-radius:16px;
  border: 2px dashed #e4ddff;
  box-shadow: 0 6px 18px rgba(21,14,56,.08);
  text-align:center;                /* keep text visually centered */
}

.rec-reading-card .cr-grid .cr-tile:has(> .cr-add) > .cr-add{
  position:static;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:6px 10px;         /* slightly smaller */
  font-weight:800;
  font-size:12px;            /* slightly smaller */
  border-radius:999px;
  background:#f3efff;
  color:#4a3db8;
  border:1px solid #e4ddff;
  margin:0;
}


.rec-reading-card .cr-grid .cr-tile:has(> .cr-add) > .cr-add:hover{
  background:#ede7ff;
  transform: translateY(-1px);
}

/* ========== Rail heading breathing room ========== */
.rec-reading-header h2,
.rec-reading-header h3,
.rec-reading-header .cr-title {
  margin: 0 0 2px 0;
  line-height: 1.22;   /* was too tight; this prevents descender clip */
}


/* ---------- Account page grid (scoped; avoids conflict with profile) ---------- */
.rec-account-main .rec-account-grid {
  display: grid;
  grid-template-columns: 1fr;   /* stack sections on all widths; tweak if you want two-up later */
  gap: 24px;
}

/* Optional: if you eventually want two columns on wide screens, uncomment:
@media (min-width: 1100px) {
  .rec-account-main .rec-account-grid { grid-template-columns: 1fr 1fr; }
}
*/
/* Vertical divider on the LEFT edge of the right column */
.vline-left { position: relative; }

/* If your parent has a Row Gap, set HALF of that value below (example uses 10px for a 20px gap) */
.vline-left::before{
  content:"";
  position:absolute;
  top: 3px;           /* match your card’s inner top padding (tweak) */
  bottom: 3px;        /* match your card’s inner bottom padding (tweak) */
  left: 0;         /* = -(parent Row Gap / 2). If Row Gap is 20px, use -10px. If zero gap, set 0 */
  width: 2px;          /* divider thickness */
  background: #000;    /* divider color */
  pointer-events: none;
}

/* Optional: hide the divider when columns stack */
@media (max-width: 1024px){
  .vline-left::before{ display: none; }
}


/* Category carousel: fixed card size */
.cat-carousel-fixed .swiper-wrapper { align-items: stretch; }
.cat-carousel-fixed .swiper-slide{
  width: 140px !important;              /* ← fixed card width */
}
.cat-carousel-fixed .swiper-slide img{
  width: 100%;
  aspect-ratio: 2 / 3;                  /* 2:3 poster ratio */
  object-fit: cover;                    /* crops neatly */
  display: block;
  border-radius: 12px;                  /* match your style */
}

/* Optional: small radius + width on narrower screens */
@media (max-width: 1024px){
  .cat-carousel-fixed .swiper-slide{ width: 200px !important; }
}
@media (max-width: 768px){
  .cat-carousel-fixed .swiper-slide{ width: 170px !important; }
}


/* ==== ONE SIZE TO RULE THEM ALL (grid + carousel) ==== */
:root{
  --book-card-w: 220px;        /* desktop card/slide width */
  --book-card-gap: 18px;       /* visual gap between cards/slides */
  --book-card-ratio: 2 / 3;    /* 2:3 cover */
}
@media (max-width: 1024px){ :root{ --book-card-w: 200px; } }
@media (max-width: 768px) { :root{ --book-card-w: 170px; } }

/* ---------------- Grid (Loop Grid) ---------------- */
.fixed-cards{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--book-card-w), var(--book-card-w)));
  gap: var(--book-card-gap);
  justify-content:center;
}

/* Card = exactly the target width; remove padding/borders that change it */
.fixed-cards .e-loop-item,
.fixed-cards .rec-card,
.fixed-cards article{
  width: var(--book-card-w);
  box-sizing: border-box;
  padding: 0;
  border: 0;
}

/* Image = constant 2:3 */
.fixed-cards img{
  width: 100%;
  aspect-ratio: var(--book-card-ratio);
  object-fit: cover;
  display: block;
  border-radius: 12px;
  max-width: none;
}

/* ---------------- Carousel (Loop Carousel) ---------------- */
/* IMPORTANT in Elementor: set Slides Per View = Auto, Space Between = 0 */
.book-carousel-fixed .swiper{ overflow: visible; }
.book-carousel-fixed .swiper-wrapper{
  align-items: stretch;
  gap: var(--book-card-gap);               /* CSS gap is our source of truth */
}

.book-carousel-fixed .swiper-slide{
  flex: 0 0 auto;                          /* no stretching */
  width: var(--book-card-w) !important;    /* same width as grid */
  margin: 0 !important;                    /* neutralize Swiper inline margins */
  padding: 0 !important;                   /* neutralize widget padding-as-gap */
}

/* Make the loop item fill the slide (use slide width, not its own) */
.book-carousel-fixed .e-loop-item,
.book-carousel-fixed .rec-card,
.book-carousel-fixed article{
  width: 100%;
  box-sizing: border-box;
  padding: 0;
  border: 0;
}

/* Mask the image so all carousel covers are exactly 2:3 */
.book-carousel-fixed .elementor-widget-image > .elementor-widget-container{
  position: relative;
  width: 100%;
  aspect-ratio: var(--book-card-ratio);      /* 2:3 */
  overflow: hidden;
}

/* Make the image fill the mask */
.book-carousel-fixed .elementor-widget-image img{
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;                          /* crop neatly */
  display: block;
}

/* Fixed cover size for single book pages (uniform 2:3, top-biased crop) */
:root{
  --single-cover-w: 360px;
  --single-cover-ratio: 2 / 3;
  --single-cover-focus-y: 10%; /* match WP center/top hard-crop */
}

@media (max-width:1200px){ :root{ --single-cover-w: 320px; } }
@media (max-width:992px) { :root{ --single-cover-w: 280px; } }
@media (max-width:768px){
  :root{ --single-cover-w: 220px; }
  .single-cover-col{ margin: 0 auto !important; }
}

/* left column stays a fixed pixel lane */
.single-cover-col{
  flex: 0 0 var(--single-cover-w) !important;
  max-width: var(--single-cover-w) !important;
}

/* mask: works for <img> or <figure><a><img> */
.single-cover-img > .elementor-widget-container,
.single-cover-img figure{
  position: relative;
  width: var(--single-cover-w);
  aspect-ratio: var(--single-cover-ratio);
  overflow: hidden;
  margin: 0;
  line-height: 0;
}
.single-cover-img figure > a{ position:absolute; inset:0; display:block; }

/* image fills mask, same bias as WP crop */
.single-cover-img img{
  position:absolute; inset:0;
  width:100% !important; height:100% !important;
  object-fit:cover;
  object-position: 50% var(--single-cover-focus-y);
  display:block;
}


/* Trophy style for Finished books */
.finished-item{
  position: relative;
  width: 122px;                 /* keep your existing tile width */
  border-radius: 14px;
  overflow: visible;
  transition: transform .18s ease, filter .18s ease;
}
.finished-item:hover{
  transform: translateY(-4px);
  filter: drop-shadow(0 10px 18px rgba(20,16,48,.22));
}

/* Your .finished-cover already exists in style.css with 2:3 ratio.
   We just make sure the background image fills nicely. */
.finished-cover{
  background-size: cover;       /* ensure cover fills the rect */
  background-position: center top;
  display: block;
  border-radius: 12px;
}

/* Date under each trophy */
.finished-date{
  margin-top: 8px;
  font-size: 12px;
  line-height: 1;
  color: rgba(20,16,48,.75);
  text-align: center;
}

/* The achievement badge (top-left ribbon) */
.finished-badge{
  position: absolute;
  top: -6px;
  left: -6px;
  z-index: 2;
  pointer-events: none;
  filter: drop-shadow(0 3px 6px rgba(0,0,0,.25));
}
.finished-badge .badge-inner{
  display: inline-block;
  background: linear-gradient(135deg, #ffd166, #ffb700);
  color: #412300;
  font-weight: 700;
  font-size: 11px;
  line-height: 1;
  padding: 6px 8px;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,.15);
}
/* Universal 2:3 cover mask – use on any image widget */

/* ===== Quick Rate (no-text) ===== */
.rec-quick-rate {
  --qr-gold: #ffc54d;
  --qr-gold-deep: #ff9f1c;
  --qr-bg: #ffe8ff;
  --qr-ink: #2e1503;

  background: var(--qr-bg);
  border-left: 6px solid #13c816;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 4px 6px rgba(0, 0, 0, 0.08);
  padding: 12px 14px;
  margin: 14px 0 10px;
  position: relative;
  overflow: hidden;
}

.rec-quick-rate.is-busy { opacity: .8; filter: grayscale(.15); }

.rec-qr-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.rec-qr-stars {
  display: inline-flex;
  gap: 4px;
  position: relative;
  isolation: isolate;
}

.rec-qr-star {
  appearance: none;
  border: 0;
  background: transparent;
  font-size: 28px;
  line-height: 1;
  color: #bdbdbd;
  cursor: pointer;
  transition: transform .12s ease, color .12s ease, text-shadow .12s ease;
  will-change: transform;
}
.rec-qr-star.on,
.rec-qr-star.locked {
  color: var(--qr-gold);
  text-shadow: 0 0 12px rgba(255, 197, 77, .55);
}
.rec-qr-star:hover { transform: translateY(-1px) scale(1.06); }

/* confetti burst particles */
.qr-burst {
  position: absolute;
  inset: 0 auto auto 0;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--qr-gold);
  animation: qrBurst .9s ease forwards;
  transform-origin: center;
  pointer-events: none;
  opacity: 0;
}
.qr-burst::after {
  content: '';
  position: absolute; inset: -2px;
  background: radial-gradient(circle, rgba(255,255,255,.9) 0, transparent 60%);
  border-radius: 50%;
  opacity: .8;
}
@keyframes qrBurst {
  0% { opacity: 0; transform: translate(0,0) scale(.3); }
  14% { opacity: 1; }
  100% {
    opacity: 0;
    transform:
      translate(calc( (cos(var(--i))*1px ) * 52),
                calc( (sin(var(--i))*1px ) * 28))
      scale(1.1);
  }
}

/* quota pill */
.rec-qr-quota {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  background: #fff6ff;
  border: 1px solid #9a6ea0;
  color: #4b2c20;
  font-weight: 600;
  white-space: nowrap;
}
.rec-qr-dot {
  width: 8px; height: 8px; border-radius: 999px;
  background: #22c55e;
  box-shadow: 0 0 0 3px rgba(34,197,94,.18);
}

/* caption + messages */
.rec-qr-note {
  margin-top: 4px;
  font-size: .9rem;
  color: var(--qr-ink);
}
.rec-qr-msg {
  margin-top: 6px;
  font-weight: 700;
  color: #2e1503;
}

/* subtle “rated” state */
.rec-quick-rate.did-rate .rec-qr-stars .rec-qr-star.locked {
  color: var(--qr-gold-deep);
}
/* ===========================
   Review Summary (compact/orange)
   =========================== */
.review-summary-box{
  background:#f7e9f9;            /* your card background */
  border-radius:16px;
  padding:22px 20px;
  box-shadow:0 6px 20px rgba(0,0,0,.06);
  max-width: 560px;
  color:#2d2d3a;
}

.review-summary-box .summary-top{
  display:grid;
  grid-template-columns:auto auto auto; /* stars | avg | counts (no stretchy 1fr) */
  column-gap:8px;                       /* was 14px */
  align-items:center;
  margin-bottom:10px;
}

/* stars (left) */
.review-summary-box .summary-stars{
  display:flex;
  gap:4px;
  line-height:1;
}
.review-summary-box .summary-stars .star{
  font-size:22px;
  color:#e1e1ea;
}
.review-summary-box .summary-stars .star.on{  color:#ffa726; }    /* orange */
.review-summary-box .summary-stars .star.half{
  color:#ffa726;
  position:relative;
}
.review-summary-box .summary-stars .star.half::after{
  content:"★";
  position:absolute; left:0; top:0;
  width:50%; overflow:hidden;
  color:#e1e1ea;              /* right half looks empty */
}

/* big average (center) */
.review-summary-box .summary-average{
  font-size:42px;
  font-weight:800;
  text-align:center;
}

.review-summary-box .summary-counts{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:2px;              /* was 6px */
  min-width:74px;       /* was 112px */
  max-width:100px;      /* was 140px */
}
.review-summary-box .count-item{
  display:flex;
  align-items:baseline;
  gap:8px;
}
.review-summary-box .count-num{
  font-weight:700;
  font-size:18px;
  line-height:1;
}
.review-summary-box .count-label{
  font-size:14px;
  color:#6b6b7a;
  line-height:1.1;
}

/* bar rows */
.review-summary-box .summary-bars{
  margin-top:12px;
}
.review-summary-box .bar-row{
  display:grid;
  grid-template-columns: 90px 1fr auto;
  gap:12px;
  align-items:center;
  padding:6px 0;
}
.review-summary-box .bar-label{
  color:#454555;
  white-space:nowrap;
}
.review-summary-box .bar{
  position:relative;
  height:12px;
  background:#edeaf3;
  border-radius:999px;
  overflow:hidden;
}
.review-summary-box .bar-inner{
  position:absolute;
  inset:0 auto 0 0;
  width:0;
  background:#ffa726;           /* orange fill */
  border-radius:999px;
  transition:width .5s ease;
}
.review-summary-box .bar-perc{
  color:#6b6b7a;
  min-width:84px;
  text-align:right;
}

@media (max-width: 560px){
  .review-summary-box .summary-top{
    grid-template-columns:auto auto auto;
    column-gap:6px; /* tighter on mobile too */
  }
  .review-summary-box .summary-average{ font-size:36px; }
  .review-summary-box .summary-counts{
    min-width:0;
    max-width:120px;
  }
  .review-summary-box .bar-row{
    grid-template-columns:72px 1fr auto;
    gap:10px;
  }
}

/* ===========================
   BOOK ARCHIVE: full-bleed + grid
   =========================== */

/* Break out of Elementor’s boxed container so the whole module spans viewport width */
#rec-filters.recf-wide {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}



/* Remove Elementor’s built-in fixed / centered width inside each result */
#rec-filters .recf-results .elementor,
#rec-filters .recf-results .elementor > .elementor-section,
#rec-filters .recf-results .elementor-section,
#rec-filters .recf-results .e-con {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
}

/* Images inside cards should conform to their grid cell */
#rec-filters .recf-results img {
  width: 100%;
  height: auto;
  display: block;
}

/* Optional: keep the grid from hugging the left edge on very large screens */
#rec-filters .recf-results {
  padding: 8px 16px;
}
/* =========================================================
   RecShelf Books — Filter Bar + Results (full, responsive)
   ========================================================= */
:root{
  --recf-bg: rgba(255,255,255,.5);
  --recf-card-bg: rgba(255,255,255,.55);
  --recf-stroke: rgba(20,16,37,.12);
  --recf-chip-bg: rgba(255,255,255,.7);
  --recf-chip-on: #6e4df5;
  --recf-text: #241b3a;
  --recf-muted: rgba(36,27,58,.65);
  --recf-gap: 12px;
  --recf-radius: 14px;
  --recf-pill-radius: 999px;
}

/* Root container */
#rec-filters.recf{
  width:100%;
  color:var(--recf-text);
  --shadow: 0 6px 24px rgba(18,16,28,.06), 0 2px 6px rgba(18,16,28,.06);
}

/* Top row: segmented sort + search + chips wrap responsively */
#rec-filters .recf-row{
  display:flex;
  flex-wrap:wrap;
  gap:var(--recf-gap);
  align-items:center;
  margin-bottom: 16px;
}

/* ---------------- Segmented Sort ---------------- */
#rec-filters .recf-seg{
  display: inline-flex;
  gap: 6px;
  /* normalize fieldset */
  margin: 0;                         /* <- remove browser default fieldset margin */
  padding: 6px;
  background: var(--recf-bg);
  border: 1px solid var(--recf-stroke);
  border-radius: var(--recf-pill-radius);
  box-shadow: var(--shadow);
  align-items: center;               /* center pills inside the bar */
  box-sizing: border-box;
}
#rec-filters .recf-seg input{
  position: absolute;
  pointer-events: none;
  opacity: 0;
}


#rec-filters .recf-seg input:checked + label{
  color:#fff;
  background: linear-gradient(90deg, #6e4df5, #ea4df5);
  box-shadow: 0 6px 18px rgba(110,77,245,.35);
}

/* ---------------- Search ---------------- */
#rec-filters .recf-search{
  flex:1 1 320px;
  min-width:240px;
  position:relative;
}
#rec-filters .recf-search input{
  width:100%;
  height:46px;
  padding:0 16px 0 44px;
  background: var(--recf-bg);
  border:1px solid var(--recf-stroke);
  border-radius: var(--recf-pill-radius);
  outline: none;
  box-shadow: var(--shadow) inset;
  font-size:16px;
}
#rec-filters .recf-search::before{
  content:"🔎";
  position:absolute;
  left:14px; top:50%;
  transform: translateY(-50%);
  font-size:18px;
  opacity:.75;
}

/* ---------------- Chips (content flags) ---------------- */
#rec-filters .recf-chips{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  width:100%;
}
#rec-filters .recf-chips input{
  position:absolute;
  opacity:0;
  pointer-events:none;
}
#rec-filters .recf-chips label{
  padding:6px 12px;
  border-radius: var(--recf-pill-radius);
  background: var(--recf-chip-bg);
  border:1px solid var(--recf-stroke);
  color:var(--recf-text);
  cursor:pointer;
  font-weight:600;
  line-height:1;
  transition: all .18s ease;
}
#rec-filters .recf-chips input:checked + label{
  background: rgba(110,77,245,.12);
  border-color: rgba(110,77,245,.45);
  color: var(--recf-chip-on);
  box-shadow: 0 4px 12px rgba(110,77,245,.25);
}

/* ---------------- Advanced: details / sliders ---------------- */
#rec-filters .recf-adv{
  width:100%;
  margin-top:10px;
}
#rec-filters .recf-adv > summary{
  padding:10px 12px;
  border-radius: var(--recf-radius);
  background: var(--recf-bg);
  border:1px solid var(--recf-stroke);
  box-shadow: var(--shadow);
  font-weight:800;
  color:var(--recf-text);
  cursor:pointer;
  list-style:none;
}
#rec-filters .recf-adv[open] > summary{
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
#rec-filters .recf-sliders{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(260px,1fr));
  gap:12px;
  padding:12px;
  border:1px solid var(--recf-stroke);
  border-top:0;
  background: var(--recf-bg);
  border-bottom-left-radius: var(--recf-radius);
  border-bottom-right-radius: var(--recf-radius);
  box-shadow: var(--shadow);
}
#rec-filters .recf-slider{
  display:grid;
  gap:6px;
  padding:10px 12px;
  background: var(--recf-card-bg);
  border:1px solid var(--recf-stroke);
  border-radius: var(--recf-radius);
}
#rec-filters .recf-slider > span{
  font-weight:700;
  font-size:13px;
  color:var(--recf-muted);
}
#rec-filters .recf-slider .vals{
  justify-self:end;
  font-variant-numeric: tabular-nums;
  color:var(--recf-muted);
}

/* Range base */
#rec-filters .recf-slider input[type="range"]{
  -webkit-appearance: none; /* Safari/Chrome */
  -moz-appearance: none;    /* Firefox */
  appearance: none;         /* Standard */
  width: 100%;
  height: 6px;
  background: linear-gradient(90deg, #e9e3ff, #f7e6ff);
  border-radius: 999px;
  outline: none;
  border: 1px solid var(--recf-stroke);
}

/* Track (Safari/Chrome) */
#rec-filters .recf-slider input[type="range"]::-webkit-slider-runnable-track{
  height: 6px;
  background: transparent;
  border-radius: 999px;
}

/* Thumb (Safari/Chrome) */
#rec-filters .recf-slider input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #6e4df5;
  box-shadow: 0 0 0 2px #fff, 0 3px 12px rgba(110,77,245,.45);
  margin-top: -5px; /* centers the thumb on the 6px track */
}

/* Track (Firefox) */
#rec-filters .recf-slider input[type="range"]::-moz-range-track{
  height: 6px;
  background: transparent;
  border-radius: 999px;
}

/* Thumb (Firefox) */
#rec-filters .recf-slider input[type="range"]::-moz-range-thumb{
  width: 16px;
  height: 16px;
  border: none;
  border-radius: 50%;
  background: #6e4df5;
  box-shadow: 0 0 0 2px #fff, 0 3px 12px rgba(110,77,245,.45);
}


/* ---------------- Results grid + Elementor resets ---------------- */
/* Results grid – mirror Elementor Loop Grid (6 desktop, 3 tablet, 2 mobile, 30px gaps) */
#recf-results {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 30px;
  width: 100%;
  max-width: 100%;
  margin: 12px auto 0;
  padding: 0;
  align-items: stretch;
  min-height: 120px;
}

#recf-results .elementor-grid-item {
  display: flex;
  flex-direction: column;
}

/* Tablet */
@media (max-width: 1024px){
  #recf-results {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Mobile */
@media (max-width: 767px){
  #recf-results {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}


#recf-results .elementor,
#recf-results .elementor > .elementor-section,
#recf-results .elementor-section,
#recf-results .e-con{
  width:100% !important;
  max-width:none !important;
  margin:0 !important;
  height: 100%;            /* stretch loop-item content to full card height */
}
#recf-results img{
  width:100%;
  height:auto;
  display:block;
}
/* Tablet breakpoint -> 3 columns (Elementor default ~1025px) */
@media (max-width: 1024px){
  #recf-results{
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 30px;
  }
}

/* Mobile breakpoint -> 2 columns (Elementor default ~767px) */
@media (max-width: 767px){
  #recf-results{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 30px;
  }
}
/* Tighten the AJAX results area */
#recf-results{
  padding: 0 !important;
  margin-top: 0 !important;
}


/* Make sure each injected card spans the full grid cell */
#recf-results .elementor-grid-item{
  display:flex;
  flex-direction: column;
}

/* When the results container is hidden, collapse it completely */
#recf-results[hidden]{
  display: none !important;
  padding: 0 !important;
  margin: 0 !important;
  min-height: 0 !important;
}




/* (Safety) keep the hidden radios truly out of the flow */
#rec-filters .recf-seg input{
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
#rec-filters .recf-seg{
  display: inline-flex;                /* inline so the bar hugs its content */
  align-items: center;                 /* <-- this is the key: center pills vertically */
  gap: 6px;
  margin: 0;                           /* normalise fieldset defaults */
  padding: 6px;
  min-inline-size: 0;                  /* avoid odd min-width in some browsers */
  background: var(--recf-bg);
  border: 1px solid var(--recf-stroke);
  border-radius: var(--recf-pill-radius);
  box-shadow: var(--shadow);
  box-sizing: border-box;
}

#rec-filters .recf-seg label{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;                        /* steady pill height */
  padding: 0 14px;
  border-radius: var(--recf-pill-radius);
  white-space: nowrap;
  line-height: 1;
  border: 1px solid transparent;
  cursor: pointer;
  font-weight: 600;
  color: var(--recf-muted);
  transition: all .18s ease;
  margin-top: 0px !important;
}

/* Restore dropdown arrow for <summary> */
#rec-filters .recf-adv > summary {
  position: relative;
  padding-right: 28px; /* make room for arrow */
}

#rec-filters .recf-adv > summary::after {
  content: "▾";              /* down arrow */
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 14px;
  opacity: .7;
  transition: transform .2s ease;
}

#rec-filters .recf-adv[open] > summary::after {
  transform: translateY(-50%) rotate(180deg); /* rotate when open */
}

/* Put slider + emojis in a row */
#rec-filters .recf-scale {
  display: flex;
  align-items: center;
  gap: 8px;
}

#rec-filters .recf-scale .end {
  font-size: 18px;
  line-height: 1;
}
/* Initial Elementor Loop Grid — strip padding and force a 2:3 mask so covers fill */
.elementor .elementor-widget-loop-grid .e-loop-item .elementor-widget-image > .elementor-widget-container {
  position: relative;
  width: 100%;
  aspect-ratio: 2 / 3;        /* 2:3 poster mask */
  overflow: hidden;
  padding: 0 !important;      /* kill white side gutters */
  background: none !important;
  border: 0 !important;
}

/* Make the <img> fill the mask */
.elementor .elementor-widget-loop-grid .e-loop-item .elementor-widget-image img {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  max-width: none;
  object-fit: cover;
  display: block;       /* match your card style */
}

/* Safety: remove any padding Elementor might add around loop items */
.elementor .elementor-widget-loop-grid .e-loop-item,
.elementor .elementor-widget-loop-grid .e-loop-item > .elementor-widget-container {
  padding: 0 !important;
  border: 0 !important;
  box-sizing: border-box;
}
/* === Search: People strip =================================================== */
.rec-search-people {
  margin: 16px 0 28px;
  padding: 16px 18px;
  background: rgba(255,255,255,0.35);
  border-radius: 16px;
  box-shadow: 0 6px 24px rgba(0,0,0,0.06);
  backdrop-filter: blur(6px);
}

.rec-search-people .rsp-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 14px;
}
.rec-search-people .rsp-title {
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: .2px;
  margin: 0;
}
.rec-search-people .rsp-sub {
  color: rgba(0,0,0,.55);
  font-size: .9rem;
}

/* One elegant row (wraps only when needed). At wide widths we allow up to 14. */
.rec-search-people .rsp-strip {
  display: grid;
  grid-template-columns: repeat(7, minmax(90px, 1fr));
  gap: 14px;
}
@media (min-width: 1024px) {
  .rec-search-people .rsp-strip {
    grid-template-columns: repeat(14, minmax(82px, 1fr));
  }
}

.rec-search-people .rsp-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  color: inherit;
  padding: 10px 6px 12px;
  border-radius: 14px;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
  background: rgba(255,255,255,0.45);
}
.rec-search-people .rsp-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(0,0,0,0.07);
  background: rgba(255,255,255,0.6);
}

.rec-search-people .rsp-avatar {
  width: 84px;
  aspect-ratio: 1/1;
  border-radius: 50%;
  background: center/cover no-repeat;
  position: relative;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,0.9);
}
.rec-search-people .rsp-avatar::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  background: linear-gradient(135deg, #a78bfa, #60a5fa);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 0);
          mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 0);
  opacity: .9;
}

.rec-search-people .rsp-name {
  margin-top: 8px;
  font-weight: 700;
  font-size: .92rem;
  line-height: 1.15;
  text-align: center;
  max-width: 110px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rec-search-people .rsp-badge {
  margin-left: 6px;
  font-size: .72rem;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 999px;
  background: linear-gradient(135deg, #f0abfc, #93c5fd);
  color: #222;
}



.rec-search-people .rsp-username {
  color: rgba(0,0,0,.6);
  font-size: .82rem;
  margin-top: 2px;
}
.rec-search-people .rsp-meta {
  color: rgba(0,0,0,.55);
  font-size: .78rem;
  margin-top: 4px;
}
/* Empty-result message */
.rec-empty{
  margin: 12px 0 24px;
  padding: 14px 16px;
  text-align: center;
  opacity: .8;
  font-style: italic;
  border-radius: 10px;
  background: var(--card-bg, rgba(255,255,255,.08));
}
/* ---- PROFILE PAGE WIDTH FIXES ---- */

/* 1) Never flex the Astra container on author pages */
body.author .site-content > .ast-container {
  display: block !important;
}

/* 2) Give the author page a sane, centered canvas again */
body.author .ast-container {
  /* If you prefer “full bleed + right rail”, keep this 100% max-width
     but restore some side padding to avoid the dead zone effect */
  max-width: 100%;
  padding-left: clamp(16px, 2vw, 24px) !important;
  padding-right: clamp(16px, 2vw, 24px) !important;
}

/* 3) Ensure our profile grid actually spans the full available width,
   even if a parent tried to shrink it because of flex quirks somewhere */
body.author .rec-page-frame {
  width: 100%;
  min-width: 0;
}

/* 4) Safety: prevent any stray “boxed” max-widths bleeding in via other CSS */
body.author .site-content > .ast-container,
body.author .site-content .ast-container {
  max-width: none !important;
}

/* 5) If you still see a gap on the RIGHT when the rail is present,
   it’s usually the theme’s internal 20px padding on certain breakpoints.
   This normalizes it on author pages only. */
@media (min-width: 544px) {
  body.author .ast-container,
  body.author .site-content > .ast-container {
    padding-left: clamp(16px, 2vw, 24px) !important;
    padding-right: clamp(16px, 2vw, 24px) !important;
  }
}
/* Rounded rating pill used by [rec_rating_pill] */
.rec-rating-pill{
  display:inline-flex;
  align-items:center;
  gap:.3rem;
  padding:.35rem .65rem;
  border:1px solid rgba(90,83,122,.18);      /* soft lavender-grey */
  background:rgba(255,255,255,.55);
  border-radius:9999px;
  font:600 14px/1.05 system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color:#5a537a;                              /* reads well on your palette */
  box-shadow:0 1px 0 rgba(0,0,0,.03), 0 6px 18px rgba(89,64,110,.06);
  -webkit-backdrop-filter:saturate(120%) blur(2px);
  backdrop-filter:saturate(120%) blur(2px);
}
.rec-rating-pill .rec-rating-star{
  font-weight:700;
  opacity:.9;
  transform:translateY(-1px);
}

/* (optional) slightly larger on cards */
.rs-card .rec-rating-pill { font-size:13px; padding:.3rem .6rem; }
/* Keep "YOUR SHELF" on one line inside its pill */
.cr-eyebrow { white-space: nowrap; }

/* Header compaction so title + count + Add stay on one row earlier */
@media (max-width: 640px) {
  .cr-title { gap: 8px; }
  .cr-heading { font-size: clamp(18px, 5.2vw, 22px); }
  .cr-cta .cr-count,
  .cr-cta .cr-add {
    padding: 6px 10px;
    font-size: 13px;
  }
  .cr-cta .cr-add-plus { width: 18px; height: 18px; }
}

/* If space gets extremely tight, allow the eyebrow + title to wrap together,
   but keep EACH item intact (no mid-word wraps) */
@media (max-width: 460px) {
  .cr-title { flex-wrap: wrap; }
  .cr-heading,
  .cr-eyebrow { white-space: nowrap; }
}

/* Rail tiles: 2→1 column on very narrow phones to avoid squish */
@media (max-width: 420px) {
  .cr-grid { grid-template-columns: 1fr; }
}
/* Force the review filter bar to be a single row */
.review-filter-bar {
  flex-wrap: nowrap !important;
  overflow-x: auto;                /* if it ever gets too tight, scroll horizontally */
  -webkit-overflow-scrolling: touch;
  gap: 16px;                       /* default tighter gap for smaller screens */
}
.review-filter-group { flex: 0 0 auto; } /* prevent groups from shrinking weirdly */
.review-filter-bar label { white-space: nowrap; }

/* Compact controls on phones so we stay one-line without scrolling in most cases */
@media (max-width: 720px) {
  .review-bar-parent { padding: 10px 12px; }
  .review-filter-bar { gap: 12px; }
  .review-filter-bar label { font-size: 14px; }
  .review-filter-bar select {
    padding: 6px 10px;
    font-size: 14px;
    min-width: 130px;
  }
}
/* ================================================
   AUTHOR PAGE — Rail beside banner (wide) → stacked (tight)
   Defuses older fixed-rail rules and prevents overlap
   ================================================ */
:root{
  /* if these exist earlier they’ll be reused; these are safe fallbacks */
  --rec-content-max: 1240px;
  --rail-w: 360px;
  --frame-gap: 16px;
}

/* Two-track grid: [center column][rail] */
body.author .rec-page-frame{
  display: grid !important;
  grid-template-columns: minmax(0, var(--rec-content-max)) var(--rail-w) !important;
  gap: var(--frame-gap) !important;
  justify-content: center !important;
  padding-left: clamp(8px, 2vw, 24px) !important;
  padding-right: clamp(8px, 2vw, 24px) !important;
}

/* Center column uses the first track; remove any translate hacks */
body.author .rec-page-inner{
  grid-column: 1 !important;
  max-width: var(--rec-content-max) !important;
  transform: none !important;
}

/* Rail uses the second track. Top-aligned with the banner by default. */
body.author .rec-rail-outside{
  grid-column: 2 !important;
  justify-self: end !important;
  align-self: start !important;
  position: sticky !important;
  top: 16px !important;       /* sticky once you scroll past the banner */
  right: auto !important;
  width: var(--rail-w) !important;
  margin-top: 0 !important;   /* ← puts it BESIDE the banner instead of below it */
  z-index: 1 !important;
  display: block !important;  /* re-enable if any earlier media queries hide it */
}

/* Keep an even inset inside the rail card */
body.author .rec-rail-outside .rec-reading-card{
  margin: 0 auto !important;
  width: calc(100% - 20px) !important; /* equal left/right breathing room */
  padding-inline: 18px !important;
}

/* When there isn’t room for two columns, stack cleanly */
@media (max-width: calc(var(--rec-content-max) + var(--rail-w) + var(--frame-gap))){
  body.author .rec-page-frame{
    grid-template-columns: 1fr !important;
  }
  body.author .rec-rail-outside{
    grid-column: 1 !important;
    position: static !important;     /* no sticky on small screens */
    top: auto !important;
    right: auto !important;
    width: 100% !important;
    margin-top: 16px !important;     /* same gap as between columns */
  }
  body.author .rec-rail-outside .rec-reading-card{
    max-width: 700px !important;
    margin: 0 auto !important;
    padding-inline: 12px !important;
  }
}

/* Hard-override any legacy fixed-rail rules that might still slip through */
body.author .rec-rail-outside{ position: sticky !important; }
@media (max-width: 1200px){
  body.author .rec-rail-outside{ display: block !important; } /* undo any old display:none */
}
/* === Rail-only top breathing space on author pages === */
:root { --rail-top-gap: 40px; }  /* tweak to taste: 10–16px is nice */

body.author .rec-rail-outside{
  margin-top: var(--rail-top-gap) !important;  /* move the rail down only */
  /* keep your existing sticky behavior when scrolling */
  top: 16px !important;
}

/* When the layout stacks on small screens, keep the existing larger gap */
@media (max-width: calc(var(--rec-content-max) + var(--rail-w) + var(--frame-gap))){
  body.author .rec-rail-outside{ margin-top: 20px !important; }
}
/* === Author page: make RIGHT gutter smaller (rail → window edge) === */
:root{
  /* tune this to taste; 8–12px usually looks best */
  --rail-right-gutter: 10px;
}

/* Wide layout with the rail present */
body.author .rec-page-frame{
  /* keep your left gutter as-is */
  padding-right: var(--rail-right-gutter) !important;  /* shrink only the right edge */
}

/* Shell-on specificity (in case that variant wins in your cascade) */
body.rec-shell-on.author .rec-page-frame{
  padding-right: var(--rail-right-gutter) !important;
}

/* When the layout stacks (mobile), restore normal equal gutters */
@media (max-width: calc(var(--rec-content-max) + var(--rail-w) + var(--frame-gap))){
  body.author .rec-page-frame,
  body.rec-shell-on.author .rec-page-frame{
    padding-right: clamp(2px, 1vw, 2px) !important;
    padding-left:  clamp(12px, 2vw, 24px) !important;  /* keep mobile comfy */
  }
}
/* === Author page: shrink ONLY the right outer gutter (rail → window edge) === */
:root { --author-right-gutter: 8px; } /* tweak: 6–12px works well */

@media (min-width: 900px) { /* desktops & tablets where the rail sits to the right */
  /* Astra container — was clamp(16px, 2vw, 24px) on both sides */
  body.author .site-content > .ast-container,
  body.author .site-content .ast-container {
    padding-right: var(--author-right-gutter) !important;  /* smaller right gutter */
    /* keep the existing left padding value; don’t touch it */
  }

  /* Inner profile frame also had symmetric side padding; trim only right side */
  body.author .rec-page-frame {
    padding-right: var(--author-right-gutter) !important;
  }
}

/* When the rail stacks under the main (narrow screens), keep normal equal gutters */
@media (max-width: 899.98px) {
  body.author .site-content > .ast-container,
  body.author .site-content .ast-container,
  body.author .rec-page-frame {
    padding-right: clamp(12px, 2vw, 24px) !important;
  }
}
/* Normalize author gaps when the shell is on */
body.rec-shell-on.author { --frame-gap: var(--rec-frame-gap, 20px) !important; }