/* Smitten for Books — standalone CSS for the companion index.html */
:root{--wine:#602033;--wine-dark:#461a2a;--ink:#3b1522;--rose:#f7e7e5;--pale:#fff8f6;--line:#ead8d5}
*{box-sizing:border-box}
html{
  scroll-behavior:smooth
}

body{
  margin:0;
  color:var(--ink);
  background:var(--pale);
  font-family:Georgia,"Times New Roman",serif
}

button,input{font:inherit}button{cursor:pointer}a{color:inherit;text-decoration:none}

.site-header{background:linear-gradient(110deg,#fff9f7,#f7e6e3)}

.header-inner{max-width:1300px;margin:auto;padding:14px 28px 12px;display:flex;justify-content:space-between;gap:35px;align-items:center;min-height:158px}
.branding{text-align:center;max-width:440px}.brand-logo{display:block;width:100%;max-width:420px;height:98px;object-fit:contain;object-position:center}.branding p{font-size:14px;letter-spacing:2px;line-height:1.4;margin:-1px 0 0}
.header-right{width:44%;max-width:460px;align-self:stretch;display:flex;flex-direction:column;justify-content:space-around;gap:12px}
.utility-links{display:flex;justify-content:flex-end;gap:32px;font-size:16px}
.utility-links a:hover{text-decoration:underline}
.search{display:flex;align-items:center;border:1px solid #dfc8c7;border-radius:30px;background:#fffafa;overflow:hidden}
.search input{border:0;outline:0;background:transparent;padding:11px 17px;flex:1;min-width:0;font-size:14px}
.search button{border:0;background:transparent;color:#ff4d6d;font-size:28px;line-height:1;padding:0 16px}

/* =========================================================================
   MAIN MENU CONTAINMENT CORE (COMPACT HIGH-FIDELITY FLEX BLOCKS)
   ========================================================================= */
.main-nav {
  display: flex !important;           /* 1. Turns container into a flex line row */
  justify-content: center !important; /* 2. HORIZONTALLY CENTERS ALL THE MENUS PANELS PERFECTLY! */
  align-items: stretch !important;    /* 3. CRITICAL: Forces children links to stretch to 100% height! */
  
  width: 100% !important;
  clear: both !important;
  background-color: #ffffff;          /* Sits cleanly matching your baseline layout page color */
  border-top: 1px solid #ffccd5;       /* Frame accent lines wrapping the bar */
  border-bottom: 1px solid #ffccd5;
  margin: 0 auto 15px auto !important;
  padding: 0 !important;              /* Strips out container margins so links touch edges */
  height: 70px !important;            /* 4. SETS AN ABSOLUTE FIXED UNIFIED NAVBAR HEIGHT! */
  box-sizing: border-box !important;
}

/* =========================================================================
   MAIN MENU ITEMS (VERTICAL STACK FLEX ENGINE)
   ========================================================================= */
.main-nav a {
  display: flex !important;           /* Unlocks layout tools */
  
  /* FIXED: Forces internal text and spans to stack vertically on new lines! */
  flex-direction: column !important;  
  
  justify-content: center !important; /* Centers contents vertically in the middle */
  align-items: center !important;     /* Centers contents horizontally across the center axis */
  float: none !important;
  height: 100% !important;            /* Spans full height edge-to-edge */
  width:auto;
  padding-left: 20px;   
  padding-right: 20px;     /* Unified wide button footprints */
  
  text-decoration: none !important;
  font-weight: 600;
  font-size: 0.95rem;
  color: #555555;                     
  
  margin: 0 !important;               /* Strips margins for seamless edge bleeding */
  border: none !important;
  border-radius: 0 !important;        
           
  box-sizing: border-box !important;
  transition: all 0.2s ease-in-out;
}

/* =========================================================================
   HOVER & ACTIVE STATES: FULL VERTICAL BLEED FILL COVERAGE
   ========================================================================= */
/* Hover Action: Background color fills 100% height up to the absolute border edges */
.main-nav a:hover {
  color: #ffffff !important;
  background-color: #ff758f !important; /* Transitions to soft pink on mouse over */
}

/* Active Class State: Triggered dynamically on active routing page clicks */
.main-nav a.active {
  color: #ffffff !important;
  background-color: #ff4d6d !important; /* Locks background entirely to your hot pink brand color! */
  font-weight: 700;
}


.main-nav span {
  display:block;
  font-weight: 300;
 margin-bottom: 6px;
 text-align: center;
 font-size: .9em;

}



.hero{min-height:249px;background:#f4d7d2 url("/images/smitten-header.png") center/cover no-repeat;position:relative}
.hero-copy{max-width:1300px;margin:auto;padding:25px 6.5% 20px}.hero h1{font-size:clamp(31px,4.2vw,48px);font-weight:normal;line-height:.98;margin:0 0 12px;letter-spacing:-1px}.hero p{font-size:clamp(14px,1.9vw,21px);line-height:1.3;margin:0}
.site-content{max-width:1300px;margin:auto;padding:12px 28px 35px}
.source-tabs{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin-bottom:14px}

.source-tabs button{
  background:linear-gradient(110deg,#f6e7e5,#f9eeeb);
  border:0;border-radius:6px;min-height:67px;color:#251019;font-size:14px;font-weight:bold;padding:9px 6px}
.source-tabs button span{display:block;font-size:13px;font-weight:normal;margin-top:3px}
.source-tabs button.selected{background:var(--wine);color:#fff}.source-tabs button:disabled{opacity:.65;cursor:default}
.content-grid{display:grid;grid-template-columns:193px minmax(0,1fr);gap:23px}


.side-panel{
 
  border:1px solid #f2dedc;
  border-radius: 8px;
  background:#ffffff;
  margin-bottom:10px
}

.subscribe-panel{
  border:1px solid #f2dedc;
  border-radius:8px;
  background:#ffffff;
  padding:10px;
  margin-bottom:15px
}

  .subscribe-panel h2{
    font-size:14px;
    margin:6px 3px 10px
  }

    .side-panel h2{
    font-size:14px;
    text-align: center;
    padding:7px 0px; 
    background-color:--pale;
    color: #ff4d6d;
    border-radius: 8px;

  }


    .side-panel-bottom h2{
    font-size:14px;
    text-align: center;
    padding:14px 0px;
    background-color:--pale;
    color: #ff4d6d;
  
  }


.genre-buttons button{
  display:block;
  width:100%;
  text-align:left;
  border:0;
  /*border-bottom:1px solid #efd9d7; */
  background:transparent;
  padding: 8px 12px;

  font-size:14px;
  color:var(--ink)
}
.genre-buttons button.selected,.view-btn.selected{
  background:#ff4d6d;
  color:#ffffff;
 
}
.genre-buttons button:hover:not(.selected){
  background:#ff758f;
  color: #ffffff;
}
.side-panel .view-label{
  margin-top:19px;
  padding-top:12px;
  border-top:1px solid #ffccd5;
  text-align: center;
 
}
.view-btn{
  display:block;
  width:100%;
  padding:8px;
  text-align:left;
  border:0;
  background:transparent;
  color:var(--ink)}


.subscribe-panel{text-align:center;padding:14px}.stack-icon{font-size:33px}.subscribe-panel h2{margin:6px 0}.subscribe-panel p{font-size:14px;line-height:1.3;text-align:left;margin:6px 5px 12px}
.subscribe-panel input{width:100%;border:1px solid #d7c4c2;border-radius:4px;padding:9px;font-size:12px;background:white}.subscribe-panel button{width:100%;margin-top:7px;border:0;border-radius:4px;padding:10px;background:#ff4d6d;color:#fff;font-size:13px}.subscribe-panel .form-note{font-size:12px}
.ranking-heading{display:flex;justify-content:space-between;gap:12px;align-items:center;border-top:1px solid #e9d6d4;padding-top:9px}
.ranking-heading h2{font-size:clamp(24px,3.1vw,35px);
  font-weight:normal;
  margin:0 0 2px}.ranking-heading p{color:#68585a;
  font-size:16px;
  margin:0 0 12px
}

  .ranking-heading span{white-space:nowrap;
  font-size:13px}
.demo-note{
  font-size:12px;color:#7c6066;margin:0 0 12px
}
.books{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));column-gap:14px;row-gap:23px}
.book{position:relative;min-width:0}.book img{width:100%;aspect-ratio:139/223;object-fit:cover;display:block;border-radius:2px}.rank{position:absolute;top:-8px;left:-7px;width:39px;height:39px;display:grid;place-items:center;border-radius:50%;background:#ffb9be;color:#4b1728;font-size:20px;z-index:1}
.book h3{font-size:14px;margin:5px 0 1px;line-height:1.2;color:#1e1516}.book p{font-size:13px;margin:0;color:#54454a}
.books.list-view{grid-template-columns:1fr}.books.list-view .book{display:flex;align-items:center;gap:15px;border-bottom:1px solid var(--line);padding:8px 0}.books.list-view .book img{width:65px}.books.list-view .book h3{flex:1}.books.list-view .book p{min-width:140px}
.no-results{padding:30px;text-align:center;background:#fff0ee
}
.explore{
  background:linear-gradient(110deg,#f7e6e3,#f8e9e6);
  border-radius:7px;padding:14px;margin-top:28px
}

.explore-heading{display:flex;align-items:center;justify-content:space-between;gap:10px}.explore-heading h2{font-size:24px;font-weight:normal;margin:0 0 12px}.explore-heading a{font-size:12px}


.explore-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}

/* =========================================================================
   EXPLORE MORE BESTSELLER LIST LINKS — PREMIUM INTERACTIONS (UPDATED)
   ========================================================================= */
/* Target the clickable outer link card blocks */
.explore-grid article {
  background: #fff9f7;
  border-radius: 5px;
  overflow: hidden;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.04);
  /* 1. Unlocks smooth transition physics for card interactions */
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Target the inner list logo image artwork frames */
.explore-grid img {
  width: 100%;
  height: 112px;
  object-fit: cover;
  display: block;
  /* 2. Unlocks smooth scaling physics for the inner cover image canvas */
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* 👉 HOVER INTERACTION: Card pops up smoothly with an elegant, soft drop shadow */
.explore-grid article:hover {
  transform: translateY(-4px) !important; /* Lifts card frame slightly */
  box-shadow: 0 8px 20px rgba(96, 32, 51, 0.12) !important; /* Premium tint shadow matching your wine color theme */
  border-color: #ffccd5 !important;
}

/* 👉 HOVER INTERACTION: The book cover artwork scales up dynamically within the card bounds */
.explore-grid article:hover img {
  transform: scale(1.06) !important; /* Elegant subtle zoom effect inside your card boundary walls */
}

.explore-grid p{font-size:14px;line-height:1.2;margin:0;padding:10px 13px;min-height:61px}
.explore-grid p span{float:right}

footer{text-align:center;padding:20px;background:#f5e7e5;font-size:13px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

@media(max-width:850px)
{
  .main-nav{flex-wrap:wrap;
    justify-content:center}
    
    .content-grid{
      grid-template-columns:160px minmax(0,1fr);gap:15px}.books{grid-template-columns:repeat(3,minmax(0,1fr))}.source-tabs button{font-size:11px}.hero-copy{padding-left:4%}
    }



@media(max-width:600px){.header-inner{display:block;padding:10px 15px}.branding{margin:auto}.brand-logo{height:80px}.header-right{width:100%;max-width:none;margin-top:15px}.utility-links{justify-content:center}

.main-nav{gap:0;padding:0 5px}

.main-nav a{font-size:10px;padding:9px 5px}

.hero{min-height:220px;background-position:58% center}

.hero-copy{
  padding:18px 14px;
  background:linear-gradient(90deg,#fff0ebd9,#fff0eb70,transparent)
}
  
.hero h1{font-size:30px}
.hero p{font-size:13px;max-width:260px}
.site-content{padding:12px}
.source-tabs{grid-template-columns:repeat(2,1fr)}

.content-grid{
  grid-template-columns:1fr
}

.sidebar{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  align-items:start
}
.books{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.ranking-heading{display:block}.ranking-heading p{font-size:13px}
.ranking-heading span{display:block;
  margin-bottom:8px
}
  .explore-grid{
    grid-template-columns:repeat(2,1fr)
  }
    
    .explore-heading h2{font-size:19px}
    }

/* Card internal spacing controls */
.book {
  display: flex;
  flex-direction: column;
  height: 100%; /* Keeps cards aligned even when descriptions vary in length */
}

.book h3 {
  margin-top: 12px;
  margin-bottom: 4px;
}

.book-author {
  font-weight: 600;
  color: #c05c7c; /* Optional thematic romance accent color matching your brand */
  margin-top: 0;
  margin-bottom: 8px;
  font-size: 0.95rem;
  font-style: italic;
}

/* New Blurb Style Block */
.book-blurb {
 
  line-height: 1.4;
  color: #555555;
  margin-top: 4px;
  margin-bottom: 0;
  text-align: justify;
  
  /* Optional line clamping: cuts text off gracefully with ellipses (...) after 3 lines */
   -line-clamp: 3;

  /* Styles the book title heading elements inside your cards */
.book h3 {
  font-variant: small-caps;
  text-transform: lowercase; /* Converts all-caps text so small caps can display properly */
  font-weight: 700;
  letter-spacing: 0.5px;
  margin-top: 12px;
  margin-bottom: 4px;
  font-size: 1.15rem;
}

}

/* =========================================================================
   LIST VIEW OVERRIDE LAYOUT SYSTEM
   ========================================================================= */

/* When the parent wrapper is flipped to .list-layout, rewrite grid properties */
#book-results.list-layout {
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
}

#book-results.list-layout article.book {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 24px !important;
  text-align: left !important;
  padding: 16px 24px !important;
  width: 100% !important;
  box-sizing: border-box;
}

/* Re-adjust the image wrapper dimension boundaries in List Layout mode */
#book-results.list-layout article.book img {
  width: 100px !important;
  height: 150px !important;
  margin-bottom: 0 !important;
  flex-shrink: 0 !important;
}

/* Force text content items to wrap naturally next to the list thumb photo */
#book-results.list-layout article.book .book-text-content {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  text-align: left !important;
}

/* =========================================================================
   LIST VIEW WIDTH & SPACING ENHANCEMENTS
   ========================================================================= */

/* 1. Limits text width to prevent descriptions from stretching too wide */
#book-results.list-layout article.book .book-text-content {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  text-align: left !important;
  
  /* Restricts the text track width to a highly comfortable reading size */
  max-width: 650px !important; 
  width: 100%;
}

/* 2. OPTIONAL: Adds soft dividers and padding between your romance list blocks */
#book-results.list-layout article.book {
  border-bottom: 1px solid #f2f4f7 !important;
  padding-bottom: 24px !important;
  margin-bottom: 8px !important;
}

/* Removes the divider line on the very last book card of the page list */
#book-results.list-layout article.book:last-child {
  border-bottom: none !important;
}
/* =========================================================================
   POPUP MODAL CIRCULAR RETAIL REVIEWS
   ========================================================================= */

.popup-circle-retail-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 45px !important;
  height: 45px !important;
  border-radius: 50% !important; /* Forces the link button container into a perfect circle */
  font-size: 0.95rem !important;
  font-weight: 800 !important;
  text-decoration: none !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
  cursor: pointer;
}

/* Add an elegant zoom effect when hovering your link circles */
.popup-circle-retail-btn:hover {
  transform: scale(1.15) translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
  opacity: 1 !important;
}

.review-text {
font-size: 0.98rem; 
color: #333; 
line-height: 1.6; 
max-height: 380px; 
overflow-y: auto; 
padding-right: 8px; 
padding: 16px; 
background: #ffffff;
border:2px solid #f7e7e5;
outline: 2px solid #f7e7e5;
outline-offset: 4px; 
text-align: justify;

}

.book-modal-overlay{
  display: none; 
  position: fixed; 
  top: 0; 
  left: 0; 
  width: 100%; 
  height: 100%; 
  background: rgba(0, 0, 0, 0.5); 
  z-index: 1001; 
  align-items: center; 
  justify-content: center; 
  backdrop-filter: blur(4px);
}

.book-modal-content{
background: #fefcf9; 
width: 90%; 
max-width: 550px; 
padding: 30px; 
border-radius: 16px; 
position: relative; 
box-shadow: 0 10px 30px rgba(0,0,0,0.2); 
animation: modalFadeIn 0.3s ease;

}
.close-review-modal-btn{
  position: absolute; 
  top: 15px; 
  right: 15px; 
  background: none; 
  border: none; 
  font-size: 1.5rem; 
  cursor: pointer; 
  color: #888;
}
.review-title-modal{
  margin: 0; 
  font-size: 1.4rem; 
  color: #111;
}
.review-author-modal{
  margin: 0 0 20px 0; 
  font-size: 1rem; 
  color: #666; 
  font-style: italic;
  

}

.popup-retail-btn {
  display: block;
  text-align: center;
  padding: 10px 4px;
  font-size: 0.8rem;
  font-weight: 700;
  border-radius: 6px;
  text-decoration: none;
  transition: all 0.2s ease-in-out;
  cursor: pointer;
}

.popup-retail-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.08);
  opacity: 0.95;
}
.review-modal-rating-container{
 display: flex !important;
  justify-content: center !important; /* Forces perfect dead-center horizontal alignment */
  align-items: center !important;
  width: 100% !important;
  box-sizing: border-box;
  
  /* Increases padding margins to give the massive stars plenty of breathing room */
  margin: 16px 0 16px 0 !important;   
  padding-bottom: 7px !important;
  
}


/* 2. Controls the exact high-resolution physical footprint sizing scale */
#modal-review-rating-stars {
  height: 54px !important;            /* SIGNIFICANT ZOOM: Scales stars way up to a large statement look */
  max-width: 100% !important;         /* Prevents any container clipping loops on narrow mobile screens */
  width: auto !important;             /* Preserves pixel proportions cleanly to lock in sharp, crisp lines */
  object-fit: contain !important;
}

/* =========================================================================
   SIDE-BY-SIDE CENTERED POPUP MODAL HEADER SYSTEM
   ========================================================================= */

/* 1. Forces the title block and the star image block onto the exact same row line */
.review-modal-header-row {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;     /* Centers both elements perfectly vertically */
  justify-content: center !important; /* Centers the whole combined block horizontally */
  gap: 16px !important;               /* Creates a beautiful breathing gap between title and stars */
  width: 100% !important;
  margin-bottom: 8px !important;      /* Even spacing before the author line drops below */
}

/* =========================================================================
   EXPANDED REVIEW POPUP MODAL ENHANCEMENTS
   ========================================================================= */

/* Targets the physical content card holding your star ratings and review text */
#review-modal .book-modal-content {
  background: #fefcf9 !important; 
  width: 90% !important;
   border:2px solid #f7e7e5;
  /*outline: 2px solid #f7e7e5; */
  outline-offset: 4px;  
 
  
  /* EXPANDED WIDTH: Increases from 500px to 650px for a premium look */
  max-width: 650px !important; 
  
  /* Adds extra padding room to give your massive 48px stars and text space to breathe */
  padding: 36px 40px !important; 
  /*border-radius: 20px !important; 
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.22) !important;*/
  box-sizing: border-box;
}

/* Adjusts the review text paragraph box to fit the expanded layout seamlessly */
#review-modal .review-text {
  font-size: 1rem !important; 
  line-height: 1.65 !important; 
 
 
  
  /* Extends height limits slightly so longer book reviews require less scrolling */
  max-height: 420px !important; 
  overflow-y: auto !important; 
  padding-right: 12px !important; 
  
  margin-top: 16px !important;
}

.book-blurb{
 font-size: 0.95rem; 
 color: #444; 
 line-height: 1.6; 
 max-height: 250px; 
 overflow-y: auto; 
 padding: 12px;
 background: #ffffff;

}

.modal-book-blurb{
 font-size: 0.95rem; 
 color: #444; 
 line-height: 1.6; 
 max-height: 250px; 
 overflow-y: auto; 
 padding: 12px;
 background: #ffffff;
 border:2px solid #f7e7e5;
 outline: 2px solid #f7e7e5;
 outline-offset: 4px; 
 text-align: justify;

}

.book-meta{
display: flex; 
gap: 14px; 
flex-wrap: wrap; 
font-size: 0.8rem; 
color: #201e1e; 
margin-bottom: 20px; 
padding: 20px 14px 10px; 
border-radius: 8px; 
font-weight: 500;

}

.list-select{
display: none; 
padding: 7px 16px; 
border: 1px solid #ffccd5; 
border-radius: 8px; 
background: #fff0f3; 
color: #ff4d6d; 
cursor: pointer; 
font-size: 0.9rem; 
outline: none; 
transition: border-color 0.2s;
}

/* =========================================================================
   EXPANDED LIST VIEW COVERS SYSTEM
   ========================================================================= */

/* 1. Increases the physical bounding size of covers inside your list layout rows */
#book-results.list-layout article.book img {
  width: 140px !important;            /* ZOOMED WIDTH: Scales up elegantly from your old footprint */
  height: 210px !important;           /* Proportional 2:3 book ratio height tracking line */
  max-width: 140px !important;
  
  object-fit: cover !important;       /* Locks proportions cleanly to prevent stretching distortion */
  border-radius: 8px !important;      /* Soft, premium rounded corners on cover graphics */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12) !important; /* Elegant shadow to make graphics pop */
  
  flex-shrink: 0 !important;          /* Protects the image container from squishing on tablet frames */
}

/* 2. RE-ALIGNMENT: Ensures your rows stay perfectly centered next to the massive images */
#book-results.list-layout article.book {
  display: flex !important;
  flex-direction: row !important;     /* Keeps text and covers side-by-side */
  align-items: center !important;     /* Centers text blocks vertically alongside your large covers */
  gap: 32px !important;               /* Increases the separation space between image and details block */
  padding: 24px !important;
}

.modal-book-series-name{
  font-style: italic;
}

/* =========================================================================
   PRODUCTION-GRADE LAYOUT COMPILER SILENCER (EXACT PROPERTY SHIELD)
   Forces rogue count text and page links off your text panels instantly!
   ========================================================================= */

/* 1. SHIELD SHIELD: Wipes out counters and page links completely when "ABOUT Me" is active */
html:has([data-source="About"].active) .ranking-heading,
html:has([data-source="About"].active) .ranking-heading span,
html:has([data-source="About"].active) #pagination,
html:has([data-source="About"].active) .pagination,
html:has([data-source="About"].active) [id*="pagination"],
html:has([data-source="About"].active) [class*="pagination"] {
  display: none !important;
}

/* 2. SHIELD SHIELD: Wipes out counters and page links completely when "REVIEW POLICY Contact" is active */
html:has([data-source="Review Policy"].active) .ranking-heading,
html:has([data-source="Review Policy"].active) .ranking-heading span,
html:has([data-source="Review Policy"].active) #pagination,
html:has([data-source="Review Policy"].active) .pagination,
html:has([data-source="Review Policy"].active) [id*="pagination"],
html:has([data-source="Review Policy"].active) [class*="pagination"] {
  display: none !important;
}
/* 3. SHIELD TARGET: Wipes out counters and page links completely when "Author Spotlight" is active */
html:has([data-source="Author Spotlight"].active) .ranking-heading,
html:has([data-source="Author Spotlight"].active) .ranking-heading span,
html:has([data-source="Author Spotlight"].active) #pagination,
html:has([data-source="Author Spotlight"].active) .pagination,
html:has([data-source="Author Spotlight"].active) [id*="pagination"],
html:has([data-source="Author Spotlight"].active) [class*="pagination"] {
  display: none !important;
}
/* =========================================================================
   NYT LOADER TEXT SILENCER GATE (VALID SYNTAX VERSION)
   Forces lingering New York Times text blocks off standard timelines!
   ========================================================================= */

/* 1. Target the text container row directly by your active page states */
html:has([data-source="About"].active) .loading-state,
html:has([data-source="FAQ"].active) .loading-state,
html:has([data-source="Review Policy"].active) .loading-state,
html:has([data-source="Author Spotlight"].active) .loading-state,
html:has([data-source="New Releases"].active) .loading-state,
html:has([data-source="Upcoming"].active) .loading-state,
html:has([data-source="Freebies"].active) .loading-state {
  display: none !important; /* Blasts it completely out of view on all 6 standard pages! */
}

/* =========================================================================
   👉 FIXED CORE LINE: SILENCES THE HARDCODED NYT INLINE LOADING STRINGS
   ========================================================================= */
/* Target the hardcoded text row directly using structural element paths */
#book-results + h2,
#book-results + div + h2,
#pagination + h2,
h2:contains("Loading live bestseller"),
#pagination-controls + h2 {
  display: none !important; /* Blasts the lingering loading string completely out of view! */
}



/* =========================================================================
   UNIVERSAL PAGINATION LINKS & TEXT CONTROLS SILENCER
   Forces rogue "Next" and "Previous" buttons off static pages completely!
   ========================================================================= */

/* 1. TARGET: Hides all counter elements and link controls when "About" is active */
body:has(#nav-about-link.active) #pagination,
body:has(#nav-about-link.active) #page-info,
body:has(#nav-about-link.active) .page-counter-text,
body:has(#nav-about-link.active) .ranking-heading span,
body:has(#nav-about-link.active) .next,                  /* FIXED: Hides rogue Next elements! */
body:has(#nav-about-link.active) .prev,                  /* FIXED: Hides rogue Previous elements! */
body:has(#nav-about-link.active) #pagination a {         /* FIXED: Blasts any trailing page numbers! */
  display: none !important;
}

/* 2. TARGET: Hides all counter elements and link controls when "Review Policy" is active */
body:has(#nav-policy-link.active) #pagination,
body:has(#nav-policy-link.active) #page-info,
body:has(#nav-policy-link.active) .page-counter-text,
body:has(#nav-policy-link.active) .ranking-heading span,
body:has(#nav-policy-link.active) .next,                  /* FIXED: Hides rogue Next elements! */
body:has(#nav-policy-link.active) .prev,                  /* FIXED: Hides rogue Previous elements! */
body:has(#nav-policy-link.active) #pagination a {         /* FIXED: Blasts any trailing page numbers! */
  display: none !important;
}


/* =========================================================================
   AUTHOR CARDS DESIGN INTERACTIONS
   ========================================================================= */
.author-spotlight-card {
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.author-spotlight-card:hover {
  transform: translateY(-4px); /* Sleek vertical pop interaction */
  box-shadow: 0 8px 30px rgba(255, 77, 109, 0.12) !important;
  border-color: #ff758f !important;
}

.author-filter-btn:hover {
  background-color: #ff758f !important;
}
/* =========================================================================
   EXACT CLASS-TARGETED SPOTLIGHT CONTROLS (STOREFRONT SAFE MATRIX)
   Locks image dimensions strictly within the spotlight view tab context!
   ========================================================================= */

/* 1. Tightens the layout grid ONLY when the view-spotlight flag class is active */
body.view-spotlight #book-results {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)) !important; 
  gap: 20px !important;
  width: 100% !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
}

/* 2. Restricts cover image scales strictly inside the active spotlight view window */
body.view-spotlight #book-results img {
  width: 100% !important;
  max-width: 160px !important; /* Keeps spotlight covers perfectly sized! */
  height: 240px !important;    /* Standard 2:3 textbook romance aspect ratio */
  object-fit: cover !important;
  margin: 0 auto !important;
  display: block !important;
}

/* 3. Outer grid box sizing metrics */
body.view-spotlight #book-results article {
  width: 100% !important;
  max-width: 220px !important; 
  margin: 0 auto !important;
}

/* =========================================================================
   UNIVERSAL COVERS SCALING SHIELD (PAGE-AWARE VERSION)
   Locks standard grids down while letting text layout pages bleed full width!
   ========================================================================= */

/* 1. FORCE COVERS SIZING: Prevents cover artwork from turning huge on book grids */
#book-results:not(.list-layout) article img {
  width: 100% !important;
  max-width: 160px !important; 
  height: 240px !important;    
  object-fit: cover !important;
  margin: 0 auto !important;   
  display: block !important;
}

/* 2. CARD WRAPPERS: Keeps individual book boxes neat and centered */
#book-results:not(.list-layout) article {
  width: 100% !important;
  max-width: 220px !important; 
  margin: 0 auto !important;
}

/* 3. DYNAMIC CONTAINER SWITCH: Force grid behavior ONLY on product catalog views */
#book-results:not(.list-layout) {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)) !important;
  gap: 20px !important;
  width: 100% !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
}

/* =========================================================================
   BREAKOUT INTERCEPT: Restores wide, clean column layouts for static text panels
   ========================================================================= */
html:has([data-source="About"].active) #book-results,
html:has([data-source="FAQ"].active) #book-results, 
html:has([data-source="Review Policy"].active) #book-results {
  display: block !important;       /* Destroys the tight grid columns completely! */
  width: 100% !important;
  max-width: 900px !important;     /* Opens up space to a perfect wide reading text block */
  margin: 0 auto !important;       /* Centers the reading panel symmetrically on screen */
}
/* =========================================================================
   SPOTLIGHT AUTHOR NAME LINK HOVER INTERACTIONS
   ========================================================================= */
.spotlight-author-name-link:hover {
  color: #7209b7 !important;           /* Smoothly shifts from your hot pink to royal violet on mouseover! */
  text-decoration: underline !important;/* Adds an editorial underline line profile */
}

.review-modal-rating-stars{

  font-style: italic;
  font-weight: bold;

}

/* =========================================================================
   UPDATED RESPONSIVE BREAKPOINT GRID Engine (FLUID MULTI-COLUMN SHIFTS)
   ========================================================================= */

/* B. LARGE TABLETS & MOBILES IN LANDSCAPE (901px TO 1200px) */
@media (min-width: 901px) and (max-width: 1200px) {
  .header-inner { padding: 14px 20px !important; gap: 20px !important; }
  .header-right { width: 50% !important; }
  
  /* Horizontal desk-style navigation row holds flush */
  .main-nav { display: flex !important; flex-direction: row !important; justify-content: space-evenly !important; height: 58px !important; padding: 0 8px !important; overflow: hidden !important; }
  .main-nav a { padding-left: 6px !important; padding-right: 6px !important; font-size: 0.74rem !important; flex: 1 1 auto !important; text-align: center !important; }
  .main-nav span { font-size: 0.70rem !important; margin-bottom: 2px !important; }
  .hero { background-position: 50% center !important; background-size: cover !important; }
  
  .content-grid { grid-template-columns: 180px minmax(0, 1fr) !important; gap: 16px !important; }
  
  /* 👉 FIXED LANDSCAPE ENGINE: Scales up dynamically to fit 4 to 5 covers comfortably */
  #book-results:not(.list-layout), .books:not(.list-view) { 
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)) !important; 
    gap: 16px !important; 
  }
}

/* C. LARGE PHONES & PORTRAIT TABLETS (481px TO 780px) */
@media (min-width: 481px) and (max-width: 900px) {
  .header-inner { display: flex !important; flex-direction: column !important; padding: 12px 16px !important; min-height: auto !important; gap: 12px !important; }
  .header-right { width: 100% !important; max-width: 100% !important; gap: 8px !important; }
  .utility-links { justify-content: center !important; font-size: 14px !important; gap: 20px !important; }
  
  .main-nav { display: flex !important; flex-direction: column !important; height: auto !important; padding: 6px 12px !important; gap: 4px !important; background-color: #ffffff !important; border-top: 1px solid #ffccd5 !important; border-bottom: 1px solid #ffccd5 !important; margin: 0 auto 12px auto !important; }
  .main-nav a { display: flex !important; flex-direction: row !important; justify-content: center !important; align-items: center !important; width: 100% !important; height: 44px !important; padding: 0 16px !important; font-size: 13px !important; border-radius: 6px !important; background: #fff8f6 !important; border: 1px solid #f6e7e5 !important; white-space: nowrap !important; box-sizing: border-box !important; }
  .main-nav span { display: inline !important; font-size: 11px !important; margin-bottom: 0 !important; margin-left: 8px !important; opacity: 0.75 !important; }
  .main-nav span::before { content: "• " !important; }
  
  .hero { min-height: 180px !important; background-position: 65% center !important; background-size: cover !important; }
  .hero-copy { padding: 20px 16px !important; background: rgba(255, 248, 246, 0.85) !important; width: 100% !important; max-width: 100% !important; }
  
  .content-grid { display: flex !important; flex-direction: column !important; width: 100% !important; gap: 16px !important; }
  .side-panel, .subscribe-panel, .sidebar { width: 100% !important; max-width: 100% !important; display: block !important; box-sizing: border-box !important; }
  .genre-buttons { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; gap: 6px !important; padding: 8px !important; }
  .genre-buttons button { padding: 8px 10px !important; font-size: 12px !important; border-radius: 4px !important; background: #fff8f6 !important; border: 1px solid #ead8d5 !important; text-align: center !important; }
    /* Restore filter background highlight states */
  .genre-buttons button.selected { background: #ff4d6d !important; color: #ffffff !important; border-color: #ff4d6d !important; font-weight: bold !important; }


  /* 👉 FIXED 780px STEP: Shrinks sizes slightly to cleanly fit exactly 3 items per line */
  #book-results:not(.list-layout), .books:not(.list-view) { 
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important; 
    column-gap: 12px !important;
    row-gap: 24px !important;
  }
}

/* D. PURE SMARTPHONES & COMPACT MOBILE DEVICES (480px AND UNDER) */
@media (max-width: 480px) {
  .site-content { padding: 8px 10px !important; width: 100% !important; box-sizing: border-box !important; }
  .header-inner { display: flex !important; flex-direction: column !important; padding: 8px 12px !important; min-height: auto !important; gap: 12px !important; }
  .brand-logo { height: 60px !important; max-width: 100% !important; object-fit: contain !important; }
  .header-right { width: 100% !important; max-width: 100% !important; gap: 8px !important; }
  .utility-links { justify-content: center !important; font-size: 13px !important; gap: 15px !important; }
  
  .main-nav { display: flex !important; flex-direction: column !important; height: auto !important; padding: 4px 6px !important; gap: 4px !important; background-color: #ffffff !important; border-top: 1px solid #ffccd5 !important; border-bottom: 1px solid #ffccd5 !important; margin: 0 auto 10px auto !important; }
  .main-nav a { display: flex !important; flex-direction: row !important; justify-content: center !important; align-items: center !important; width: 100% !important; height: 38px !important; padding: 0 12px !important; font-size: 12px !important; border-radius: 6px !important; background: #fff8f6 !important; border: 1px solid #f6e7e5 !important; white-space: nowrap !important; box-sizing: border-box !important; }
  .main-nav span { display: inline !important; font-size: 10px !important; margin-bottom: 0 !important; margin-left: 4px !important; opacity: 0.75 !important; }
  .main-nav span::before { content: "• " !important; }

  .hero { min-height: 140px !important; background-position: center center !important; background-size: cover !important; }
  .hero-copy { padding: 14px 12px !important; background: rgba(255, 248, 246, 0.90) !important; width: 100% !important; max-width: 100% !important; }
  .hero h1 { font-size: 20px !important; line-height: 1.1 !important; margin-bottom: 4px !important; }
  .hero p { font-size: 12px !important; line-height: 1.3 !important; }

  .content-grid { display: flex !important; flex-direction: column !important; width: 100% !important; max-width: 100% !important; gap: 16px !important; padding: 0 !important; }
  .side-panel, .sidebar { display: block !important; width: 100% !important; max-width: 100% !important; margin: 0 auto 10px auto !important; box-sizing: border-box !important; }

  .genre-buttons { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; gap: 6px !important; padding: 4px !important; width: 100% !important; box-sizing: border-box !important; }
  .genre-buttons button { display: block !important; width: 100% !important; font-size: 11px !important; padding: 8px 2px !important; text-align: center !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; }
    /* Center the trailing odd button cleanly inside your mobile grid matrix layers */
  .genre-buttons button:last-child:nth-child(odd) {
    grid-column: 1 / -1 !important; /* Centers the final lone button across full screen widths */
    max-width: 100% !important;
  }
  .subscribe-panel { display: block !important; width: 100% !important; max-width: 100% !important; margin: 0 auto 10px auto !important; box-sizing: border-box !important; padding: 16px 14px !important; text-align: center !important; }
  .subscribe-panel h2 { font-size: 14px !important; letter-spacing: 0.5px !important; white-space: normal !important; width: 100% !important; margin: 4px 0 8px 0 !important; }
  .subscribe-panel p { font-size: 11px !important; text-align: center !important; margin: 6px auto 12px auto !important; line-height: 1.4 !important; max-width: 100% !important; white-space: normal !important; }
  .subscribe-panel form { display: flex !important; flex-direction: column !important; gap: 8px !important; width: 100% !important; }
  .subscribe-panel input { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; padding: 10px !important; font-size: 12px !important; text-align: center !important; margin: 0 !important; }
  .subscribe-panel button { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; padding: 10px !important; font-size: 12px !important; margin-top: 4px !important; letter-spacing: 1px !important; }

  /* Keeps 2 items on narrow screens, with font tweaks to fit */
  #book-results:not(.list-layout), .books:not(.list-view) { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; column-gap: 12px !important; row-gap: 28px !important; width: 100% !important; box-sizing: border-box !important; }
  .book-text-content { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; white-space: normal !important; }
  #book-results:not(.list-layout) .book h3, .books:not(.list-view) .book h3 { font-size: 0.85rem !important; margin: 8px 0 2px 0 !important; white-space: normal !important; word-break: break-word !important; }
  #book-results:not(.list-layout) .book p, .books:not(.list-view) .book p { font-size: 11px !important; white-space: normal !important; }
  #book-results:not(.list-layout) .book .book-author, .books:not(.list-view) .book .book-author { font-size: 11px !important; margin-bottom: 6px !important; }
  
  #book-results:not(.list-layout) .book div[style*="background"], .books:not(.list-view) .book div[style*="background"], #book-results:not(.list-layout) .book div[style*="background:#fff0f3"], .books:not(.list-view) .book div[style*="background:#fff0f3"] { display: block !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; font-size: 10px !important; line-height: 1.3 !important; padding: 4px 6px !important; margin: 6px auto !important; white-space: normal !important; text-align: center !important; word-break: break-word !important; border-radius: 12px !important; }
#book-results:not(.list-layout) .book .book-blurb, .books:not(.list-view) .book .book-blurb { font-size: 10.5px !important; font-weight: normal !important; line-height: 1.35 !important; padding: 4px !important; max-height: 64px !important; overflow-y: auto !important; white-space: normal !important; text-align: justify !important; color: #555555 !important; background: #ffffff !important; }
#book-results:not(.list-layout) .book .book-blurb span, .books:not(.list-view) .book .book-blurb span { font-size: 10.5px !important; display: inline !important; padding: 0 !important; margin-left: 2px !important; }
#book-results:not(.list-layout) .book .review-trigger-row, .books:not(.list-view) .book .review-trigger-row { font-size: 10px !important; margin: 4px 0 4px 0 !important; white-space: normal !important; }
.ranking-heading { flex-direction: column !important; align-items: flex-start !important; gap: 4px !important; }
.ranking-heading h2 { font-size: 20px !important; }
.ranking-heading p { font-size: 13px !important; font-weight: normal !important; white-space: normal !important; line-height: 1.4 !important; margin: 4px 0 12px 0 !important; }
.explore { padding: 14px 10px !important; margin-top: 20px !important; }
.explore-heading { display: flex !important; flex-direction: column !important; align-items: center !important; text-align: center !important; gap: 6px !important; margin-bottom: 12px !important; }
.explore-heading h2 { font-size: 18px !important; margin: 0 !important; }
.explore-heading a { font-size: 11px !important; font-weight: bold !important; color: #ffffff !important; background-color: var(--wine) !important; padding: 6px 16px !important; border-radius: 20px !important; display: inline-block !important; margin: 4px auto 0 auto !important; white-space: nowrap !important; text-align: center !important; }
.explore-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }
.explore-grid p { font-size: 12px !important; padding: 8px !important; min-height: 52px !important; }
.hero-copy + div, div:has(> .author-filter-btn), div:has(> button:contains("Author")), [class*="spotlight"] div:has(button), main div:has(a:aria-label), .site-content > div:nth-of-type(2) { display: flex !important; flex-direction: row !important; justify-content: space-between !important; align-items: center !important; gap: 6px !important; width: 100% !important; padding: 0 4px !important; }
div:has(> button) button, div:has(> a) a[class*="btn"], .author-filter-btn, button:contains("Author"), button[onclick*="Author"], div > button, div > a:has(span) { font-size: 11px !important; padding: 8px 12px !important; white-space: nowrap !important; min-width: auto !important; height: auto !important; }
div:has(> button) text, div:has(> button) span, div:has(> button) { font-size: 12px !important; white-space: nowrap !important; font-weight: 600 !important; letter-spacing: -0.2px !important; }
  /* =========================================================================
     👉 FIXED POPUP SHIELD BLOCK: RESTORES BOLD STYLES (<b>) ON MOBILE POPUPS
     ========================================================================= */
  .book-modal-content {
    white-space: normal !important;
  }
  
  /* Restores regular text weights to standard containers while protecting <b> elements */
  .book-modal-content p, 
  .book-modal-content span, 
  .book-modal-content div:not([style*="background"]) {
    font-weight: normal !important;
    white-space: normal !important;
  }
  
  /* Hard constraint enforcing high-fidelity bold rendering inside your HTML reviews */
  .book-modal-content b, 
  .book-modal-content strong {
    font-weight: bold !important;
  }
  
  .book-modal-content h3 {
    font-size: 1.25rem !important;
    font-weight: bold !important;
    color: var(--ink) !important;
    margin-bottom: 4px !important;
    white-space: normal !important;
  }
  .book-modal-content .book-author {
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    color: #c05c7c !important;
    white-space: normal !important;
  }
  .modal-book-blurb, .review-text {
    font-size: 0.92rem !important;
    line-height: 1.5 !important;
    text-align: justify !important;
    white-space: normal !important;
  }

}
/* E. LIST VIEW CONTENT BREAKPOINTS OVERRIDES */
@media (max-width: 768px) {
#book-results.list-layout article.book, .books.list-view .book { flex-direction: column !important; align-items: center !important; gap: 16px !important; padding: 20px 16px !important; text-align: center !important; }
#book-results.list-layout article.book img, .books.list-view .book img { width: 130px !important; height: 195px !important; max-width: 130px !important; margin: 0 auto 4px auto !important; }
#book-results.list-layout article.book .book-text-content, .books.list-view .book .book-text-content { max-width: 100% !important; width: 100% !important; display: flex !important; flex-direction: column !important; align-items: center !important; }
#book-results.list-layout article.book .book-blurb, .books.list-view .book .book-blurb { text-align: justify !important; text-justify: inter-word !important; max-height: none !important; width: 100% !important; padding: 0 4px !important; }
#book-results.list-layout article.book .book-meta, .books.list-view .book .book-meta { justify-content: center !important; }
}
@media (min-width: 601px) and (max-width: 1024px) {
#book-results.list-layout article.book { flex-direction: row !important; align-items: flex-start !important; text-align: left !important; gap: 24px !important; padding: 24px 16px !important; width: 100% !important; }
#book-results.list-layout article.book img { width: 120px !important; height: 180px !important; max-width: 1200px !important; margin: 0 !important; flex-shrink: 0 !important; }
#book-results.list-layout article.book .book-text-content { align-items: flex-start !important; text-align: left !important; width: 100% !important; }
#book-results.list-layout article.book .book-meta { justify-content: flex-start !important; padding: 4px 0 !important; margin-bottom: 6px !important; }
#book-results.list-layout article.book .book-blurb { text-align: justify !important; text-justify: inter-word !important; padding: 0 !important; margin-top: 6px !important; width: 100% !important; }
}
/* =========================================================================
   UNIVERSAL NYT LOADING STRING ELIMINATOR (FINAL BLINK FIX)
   ========================================================================= */
/* Targets any h2, div, or element inside your content zones containing this text pattern */
h2:empty, 
.loading-state,
[id*="loading"],
[class*="loading"],
h2[id="list-title"] + h2,
#book-results ~ h2 {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  opacity: 0 !important;
}

/* Specific attribute-matching selector to catch it if injected via template strings */
*[textContent*="Loading live bestseller"],
*[innerHTML*="Loading live bestseller"] {
  display: none !important;
}

/* =========================================================================
   👉 FIXED RESPONSIVE MATRIX: EXPANDS CARDS INTERFACE AND COLLAPSES SIDEBARS
   ========================================================================= */
/* 1. Turns your 2-column sidebar split layout into a single centered block column */
.content-grid.full-width-breakout-mode {
  display: block !important;
  width: 100% !important;
  max-width: 900px !important;
  margin: 0 auto !important;
}

/* 2. Completely vanishes your sidebar containers when the breakout state is active */
.content-grid.full-width-breakout-mode .sidebar,
.content-grid.full-width-breakout-mode aside,
.content-grid.full-width-breakout-mode .side-panel,
.content-grid.full-width-breakout-mode .subscribe-panel,
.content-grid.full-width-breakout-mode .rating-legend-container {
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;  
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* 3. Forces the inner book results box block to fill the entire newly opened workspace */
.content-grid.full-width-breakout-mode #book-results {
  width: 100% !important;
  max-width: 100% !important;
  display: block !important;
}