/* --- Base Reset and Setup --- */
 body {
     margin: 0;
     font-family: 'Manrope', sans-serif;
     font-weight: 400;
     /* Use a font that matches the style */
 }

 /* --- Hero Header & Video Styles --- */
 .hero-header {
     /* Define the overall size of the header */
     position: relative;
     width: 100%;
     height: 100vh;
     /* Set to viewport height for full screen */
     overflow: hidden;
     /* Ensure video doesn't spill out */
 }

 .video-background {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     z-index: 1;
     /* Place behind the content */
     /* Add a dark overlay for contrast, matching the image */
     background: rgba(0, 0, 0, 0.4);
 }

 .video-background video {
     /* **RESPONSIVENESS TRICK:** Ensure the video covers the entire container */
     width: 100%;
     height: 100%;
     object-fit: cover;
     /* Optional: Blur the video slightly for a dreamier effect */
     /* filter: blur(2px); */
     mix-blend-mode: overlay;
     /* To blend the video with the dark background */
 }

 /* --- Content Overlay (Frame and Text) Styles --- */
 .content-overlay {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     z-index: 2;
     /* Place above the video */
     display: flex;
     justify-content: center;
     align-items: center;
     color: white;
     /* All text should be white */
 }

 /* The Bordered Frame Look */
 .design-frame {
     /* Use max-width to keep the frame elegant on large screens */
     width: 90%;
     max-width: 1200px;
     height: 90%;
     max-height: 800px;
     border: 3px solid rgba(255, 255, 255, 0.7);
     /* The white border */
     padding: 20px;
     box-sizing: border-box;
     display: flex;
     flex-direction: column;
     justify-content: space-between;
     /* Push top/bottom bars to the edges */
 }

 /* --- Top Bar Styling --- */
 .top-bar {
     display: flex;
     justify-content: space-between;
     align-items: center;
     font-size: 1em;
 }

 .profile {
     display: flex;
     align-items: center;
 }

 .username {
     margin-left: 5px;
     font-weight: bold;
 }

 .menu-icon {
     font-size: 1.5em;
     cursor: pointer;
 }

 /* --- Hero Text Styling --- */
 .hero-text {
     align-self: flex-start;
     /* Align to the left */
     margin-top: auto;
     /* Push it down towards the bottom */
     margin-bottom: 20px;
     max-width: 60%;
     /* Keep the text from being too wide */
     text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
     /* For better readability */
 }

 .hero-text h1 {
     font-size: 4vw;
     /* **Responsive Font Size** */
     margin: 0;
     text-transform: uppercase;
     letter-spacing: 2px;
 }

 .hero-text p {
     font-size: 1.2vw;
     /* **Responsive Font Size** */
     margin-top: 10px;
     opacity: 0.8;
 }

 /* --- Bottom Navigation Styling --- */
 .bottom-nav {
     display: flex;
     justify-content: space-between;
     align-items: center;
     width: 100%;
 }

 .progress-bar {
     flex-grow: 1;
     /* Take up remaining space */
     height: 2px;
     background-color: rgba(255, 255, 255, 0.3);
     margin-right: 20px;
 }

 .progress-fill {
     height: 100%;
     background-color: white;
     /* The width should be set via an inline style or JS */
 }

 .nav-arrows .arrow-btn {
     background: transparent;
     border: 1px solid white;
     color: white;
     padding: 5px 10px;
     margin-left: 10px;
     cursor: pointer;
     border-radius: 50%;
     /* For the circular look */
 }






 /* Base Styles and Layout Setup */
 body {
     font-family: 'Manrope', sans-serif;
     font-weight: 400;
     background-color: #f8f8f8;
     /* Light gray background */
     margin: 0;
     padding: 0;
 }

 .book-listing-page {
     max-width: 1400px;
     margin: 0 auto;
     background-color: white;
     padding: 30px;
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
 }

 /* Header Bar Styling */
 .header-bar {
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding-bottom: 30px;
     border-bottom: 1px solid #eee;
     text-transform: uppercase;
     font-size: 0.8em;
     color: #333;
 }

 .logo {
     font-weight: bold;
 }

 .page-title {
     font-size: 1.2em;
     font-weight: normal;
     margin: 0;
 }

 .view-cart {
     cursor: pointer;
     transition: color 0.3s;
 }

 .view-cart:hover {
     color: #f26666;
 }

 /* Hover effect */

 /* Main Content Wrapper (Flexbox for Columns) */
 .content-wrapper {
     display: flex;
     padding-top: 40px;
 }

 /* --- Left Side: Main Cover --- */
 .main-book-cover-area {
     flex: 0 0 350px;
     /* Fixed width */
     position: relative;
     padding: 20px;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
 }

 .main-book-cover-area img {
     width: 250px;
     height: auto;
     box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
     /* Lifted shadow effect */
     transition: transform 0.5s ease-out;
 }

 /* Main Book Cover Hover Effect (3D Tilt) */
 .main-book-cover-area:hover img {
     transform: rotateY(-5deg) translateY(-5px);
 }

 .preview-btn {
     margin-top: 30px;
     background: none;
     border: none;
     text-transform: uppercase;
     font-size: 0.7em;
     cursor: pointer;
     color: #888;
     transition: color 0.3s;
 }

 .preview-btn:hover {
     color: #f26666;
 }

 /* --- Center Section: Details --- */
 .book-details {
     flex-grow: 1;
     /* Takes up the most space */
     padding: 0 40px;
     border-left: 1px solid #eee;
     border-right: 1px solid #eee;
     color: #333;
 }

 .book-title {
     font-size: 2.5em;
     margin: 0 0 5px 0;
 }

 .book-author {
     font-size: 1em;
     color: #f26666;
     margin-bottom: 30px;
 }

 .description-blurb {
     font-size: 1.1em;
     font-style: italic;
     color: #555;
     margin-bottom: 20px;
 }

 .description-full {
     line-height: 1.6;
     color: #555;
 }

 /* Meta Table Styling */
 .book-meta-table {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     gap: 15px;
     margin-top: 30px;
     padding-top: 20px;
     border-top: 1px solid #eee;
     font-size: 0.9em;
 }

 .meta-item {
     display: flex;
     justify-content: space-between;
 }

 .meta-item span:first-child {
     color: #888;
 }

 .meta-value {
     font-weight: bold;
 }

 /* --- Right Side: Thumbnails --- */
 .recommendations-column {
     flex: 0 0 150px;
     /* Fixed, narrow width */
     background-color: #fcfcfc;
     padding-top: 20px;
     position: relative;
 }

 .expand-bookshelf {
     position: absolute;
     top: 50%;
     right: 0;
     transform: rotate(90deg) translateY(-50%);
     transform-origin: 100% 0;
     font-size: 0.7em;
     color: #888;
     letter-spacing: 2px;
     text-transform: uppercase;
     cursor: pointer;
 }

 .book-thumbnail {
     position: relative;
     width: 80px;
     height: 120px;
     margin: 20px auto;
     cursor: pointer;
     box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
     transition: transform 0.3s, box-shadow 0.3s;
 }

 .book-thumbnail img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     display: block;
 }

 /* Hover and Active Effects for Thumbnails */
 .book-thumbnail:hover {
     transform: scale(1.05) translateX(-5px);
     /* Slide and grow slightly on hover */
     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
 }

 .book-thumbnail.active {
     box-shadow: 0 0 0 4px #f26666, 0 5px 15px rgba(0, 0, 0, 0.3);
     /* Red border for active */
     transform: scale(1.05);
 }

 /* --- RESPONSIVENESS (Mobile Adjustment) --- */
 @media (max-width: 900px) {
     body {
         padding: 10px;
     }

     .content-wrapper {
         flex-direction: column;
     }

     .main-book-cover-area {
         flex: auto;
         padding-bottom: 0;
         margin-bottom: 20px;
     }

     .book-details {
         border-left: none;
         border-right: none;
         padding: 20px 0;
     }

     /* Move thumbnails below details in a horizontal scrollable row */
     .recommendations-column {
         flex: auto;
         padding: 10px 0;
         background-color: transparent;
         border-top: 1px solid #eee;
         display: flex;
         overflow-x: scroll;
         /* Enable horizontal scrolling */
         white-space: nowrap;
     }

     .expand-bookshelf {
         display: none;
     }

     /* Hide the vertical text */

     .book-thumbnail {
         flex: 0 0 80px;
         /* Stop items from stretching */
         margin: 0 10px;
     }
 }

 /* In yarn.css */

 /* Enables the fade effect for the main image */
 .main-book-cover-area img {
     /* ... other styles ... */
     transition: opacity 0.3s ease-in-out;
 }

 /* Enables the fade effect for the details section */
 .book-details {
     /* ... other styles ... */
     transition: opacity 0.3s ease-in-out;
 }

 /* Styles for the meta table layout */
 .book-meta-table {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     gap: 15px;
     margin-top: 30px;
     padding-top: 20px;
     border-top: 1px solid #eee;
     font-size: 0.9em;
 }

 .meta-item {
     display: flex;
     justify-content: space-between;
 }

 .meta-item span:first-child {
     color: #888;
 }

 .meta-value {
     font-weight: bold;
 }